layui - 页面元素
生活随笔
收集整理的這篇文章主要介紹了
layui - 页面元素
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
參考：https://www.layui.com/doc/base/element.html? ?
內(nèi)容包括：css (即已定義樣式的class)、HTML (即一些layui自定義的屬性)
細(xì)分為：布局、顏色、圖標(biāo)、動(dòng)畫、按鈕、表單、導(dǎo)航、選項(xiàng)卡、進(jìn)度條、面板、表格、徽章、時(shí)間線、輔助
概括：
css規(guī)范：
? ? ? css內(nèi)置公共類(已定義內(nèi)置樣式的類名class)：(部分常用)
? ?? ? ?布局 / 容器：
? ? ? ? ? ? layui-main? ? ?用于設(shè)置一個(gè)寬度為 1140px 的水平居中塊（無響應(yīng)式）
? ? ? ? ? ? layui-inline?? ?用于將標(biāo)簽設(shè)為內(nèi)聯(lián)塊狀元素
? ? ? ? ? ? layui-box? ? ? 用于排除一些UI框架（如Bootstrap）強(qiáng)制將全部元素設(shè)為box-sizing: border-box所引發(fā)的尺寸偏差
? ? ? ? ? ? layui-clear?? ?用于消除浮動(dòng)（一般不怎么常用，因?yàn)閘ayui幾乎沒用到浮動(dòng)）
? ? ? ? ? ? layui-btn-container?? ?用于定義按鈕的父容器。（layui 2.2.5 新增）
? ? ? ? ? ? layui-btn-fluid?? ?用于定義流體按鈕。即寬度最大化適應(yīng)。（layui 2.2.5 新增）
? ? ?? ?輔助：
? ? ? ? ? ? layui-icon?? 用于圖標(biāo)
? ? ? ? ? ? layui-elip?? ?用于單行文本溢出省略
? ? ? ? ? ? layui-unselect?? ?用于屏蔽選中
? ? ? ? ? ? layui-disabled?? ?用于設(shè)置元素不可點(diǎn)擊狀態(tài)
? ? ? ? ? ? layui-circle?? ?用于設(shè)置元素為圓形
? ? ? ? ? ? layui-show?? ?用于顯示塊狀元素
? ? ? ? ? ? layui-hide? ? ? 用于隱藏元素
? ? ? ? 文本：
? ? ? ? ? ? layui-text?? ?定義一段文本區(qū)域（如文章），該區(qū)域內(nèi)的特殊標(biāo)簽（如a、li、em等）將會(huì)進(jìn)行相應(yīng)處理
? ? ? ? ? ? layui-word-aux?? ?灰色標(biāo)注性文字，左右會(huì)有間隔
? ? ? ? 背景色（layui內(nèi)置7種背景色）：
? ? ? ? ? ? layui-bg-red? ? ? ? ?用于設(shè)置元素赤色背景
? ? ? ? ? ? layui-bg-orange?? 用于設(shè)置元素橙色背景
? ? ? ? ? ? layui-bg-green? ? ?用于設(shè)置元素墨綠色背景（主色調(diào)）
? ? ? ? ? ? layui-bg-cyan? ? ? ?用于設(shè)置元素藏青色背景
? ? ? ? ? ? layui-bg-blue? ? ? ?用于設(shè)置元素藍(lán)色背景
? ? ? ? ? ? layui-bg-black? ? ?用于設(shè)置元素經(jīng)典黑色背景
? ? ? ? ? ? layui-bg-gray? ? ? 用于設(shè)置元素經(jīng)典灰色背景
? ? ? 若需要自行定義一些樣式請(qǐng)參考內(nèi)置css class命名使class命名遵循一定規(guī)范，
? ? ? 命名格式一般分為兩種：一：layui-模塊名-狀態(tài)或類型，二：layui-狀態(tài)或類型，但請(qǐng)勿占用Layui已經(jīng)命名好的類。
HTML規(guī)范：
? ? ? 結(jié)構(gòu)：使用layui元素模塊時(shí)請(qǐng)嚴(yán)格遵守其相應(yīng)HTML結(jié)構(gòu)，否則可能導(dǎo)致其功能失效（標(biāo)簽、類名）
? ? ? 公共屬性：以 lay- 為前綴的自定義屬性，各模塊需要用到的詳見官網(wǎng)介紹，常用(普遍運(yùn)用于所有元素上的)屬性如：
? ? ? ? ? ? lay-skin=" "? ? ? 定義相同元素的不同風(fēng)格，如checkbox的開關(guān)風(fēng)格
? ? ? ? ? ? lay-filter=" "? ? ? 事件過濾器，一般用于監(jiān)聽特定的自定義事件，可視為一個(gè)ID選擇器
? ? ? ? ? ? lay-submit? ? ? 定義一個(gè)觸發(fā)表單提交的button，不用填寫值
?
layui頁(yè)面元素包括：
<!-- --> 布局? ?柵格 / 后臺(tái)布局柵格：布局規(guī)則：lay-row 定義行，如 <div class="layui-row"></div>layui-col-md* 定義一組列(column) 放在行(row)中，md表示不同屏幕下的標(biāo)記(見響應(yīng)式規(guī)則)，*可選值1-12，*總和 =12剛好排滿列 >12則另起一行列可以同時(shí)出現(xiàn)最多4種不同組合，即 xs、sm、md、lg，分別詳見響應(yīng)式規(guī)則layui-col-space5、layui-col-md-offset3 類似的預(yù)設(shè)類可定義列的間距和偏移在列(column)中可放入任意內(nèi)容布局容器：class="layui-container"? ? ? 將柵格放入容器 在小屏幕以上的設(shè)備中固定寬度讓列可控? ?<div class="layui-container"><div class="layui-row">...</div></div>class="layui-fluid"? ? ? 將柵格或其他元素放入容器 不固定寬度而是100%適應(yīng)? ?<div class="layui-fluid">...</div>響應(yīng)式規(guī)則：（ * 取值1-12? 即列寬為*列? 每列寬度為容器寬度的1/12? ? ? 總列數(shù)均為12）超小屏幕? 手機(jī)<768px? ? ?.layui-container的值為auto? ?標(biāo)記xs? ?列對(duì)應(yīng)類 layui-col-xs*? ?響應(yīng)式行為 始終按設(shè)定的比例水平排列小屏幕? 平板>=768px? ? ?.layui-container的值為750px? ?標(biāo)記sm? ?列對(duì)應(yīng)類 layui-col-sm*? ?響應(yīng)式行為 在當(dāng)前屏幕下水平排列-當(dāng)屏幕大小低于臨界值則堆疊排列中等屏幕? 桌面>=992px? ? ?.layui-container的值為970px? ?標(biāo)記md? ?列對(duì)應(yīng)類 layui-col-md*? ?響應(yīng)式行為 在當(dāng)前屏幕下水平排列-當(dāng)屏幕大小低于臨界值則堆疊排列大型屏幕? 桌面>=1200px? ? ?.layui-container的值為1170px? ?標(biāo)記lg? ?列對(duì)應(yīng)類 layui-col-lg*? ?響應(yīng)式行為 在當(dāng)前屏幕下水平排列-當(dāng)屏幕大小低于臨界值則堆疊排列響應(yīng)式公共類： * 可選值 xs、sm、md、lglayui-show-*-block? ? ? 定義不同設(shè)備下的 display:block;layui-show-*-inline? ? ? 定義不同設(shè)備下的 display:inline;layui-show-*-inline-block? ? ? 定義不同設(shè)備下的 display:inline-block;layui-hide-*? ? ? 定義不同設(shè)備下的隱藏類，即?display:none;列間距：layui-col-space*? ? ? 間距 *px? ?*取值1-30的所有雙數(shù)以及 1 5 15 25列偏移：layui-col-md-offset*? ? ? 使列向右偏移*列 (每列寬度1/12容器寬度)嵌套：理論上可以對(duì)柵格進(jìn)行無限嵌套，如在列(layui-col-md)中插入一個(gè)行元素(layui-row)<div class="layui-row layui-col-space5"><div class="layui-col-md5"><div class="layui-row"><div class="layui-col-md3">內(nèi)部列</div></div></div></div>兼容：柵格的響應(yīng)式能力得益于css3的媒體查詢(Media Queries)，但I(xiàn)E8/9不支持媒體查詢，可以使用以下補(bǔ)丁(來自開源社區(qū),布丁可放在<body>任意位置)使之兼容--<!-- 讓IE8/9支持媒體查詢，從而兼容柵格 --><!--[if lt IE 9]><script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]-->后臺(tái)布局：layui既可編織出絢麗的前臺(tái)頁(yè)面，又可滿足繁雜的后臺(tái)功能需求（官網(wǎng)提供后臺(tái)現(xiàn)場(chǎng)方案 https://www.layui.com/doc/element/layout.html#admin 可供參考） <!-- --> 顏色? ?主題色設(shè)計(jì)感 / 內(nèi)置背景色主題色設(shè)計(jì)感可參考官網(wǎng)提供的一些示例及l(fā)ayuiAdmin。layui還內(nèi)置7種背景色（見css內(nèi)置公共類）<!-- --> 圖標(biāo)? ?字體圖標(biāo)<i class="layui-icon layui-icon-face-smile" style="font-size:30px;color:#1E9FFF;"></i>類 layui-icon 為必須，layui-icon-face-smile 為笑臉圖標(biāo)，此處style設(shè)置圖標(biāo)大小和顏色，layui2.3.0起支持font-class的形式定義圖標(biāo)，這之前只能用unicode來定義圖標(biāo)：<i class="layui-icon"></i>圖標(biāo)參考：https://www.layui.com/doc/element/icon.html#table跨域問題：由于瀏覽器存在同源策略，所以如果 layui（里面含圖標(biāo)字體文件）所在的地址與當(dāng)前頁(yè)面地址不在同一個(gè)域下會(huì)出現(xiàn)圖標(biāo)跨域問題。所以要么把 layui 與網(wǎng)站放在同一服務(wù)器，要么就對(duì) layui 所在資源服務(wù)器的 Response Headers 加上屬性：Access-Control-Allow-Origin: *<!-- --> 動(dòng)畫? ?內(nèi)置 CSS3 動(dòng)畫<div class="layui-anim layui-anim-up"></div>? ? ??其中 layui-anim 是必須的? 后面跟著的即是不同的動(dòng)畫類<div class="layui-anim layui-anim-up layui-anim-loop"></div>? ? ??循環(huán)動(dòng)畫，追加：layui-anim-loop內(nèi)置css3動(dòng)畫：layui-anim-up? ?從最底部往上滑入? ?? layui-anim-upbit? ?微微往上滑入layui-anim-scale? ?平滑放大? ? ? ? ?layui-anim-scaleSpring? ?彈簧式放大layui-anim-fadein? ?漸現(xiàn)? ? ? ? ? layui-anim-fadeout? ?漸隱layui-anim-rotate? ?360度旋轉(zhuǎn)? ?? ? 追加：layui-anim-loop? ?循環(huán)動(dòng)畫 <!-- --> 按鈕? ?button 組基本用法： class="layui-btn"<button type="button" class="layui-btn">一個(gè)標(biāo)準(zhǔn)的按鈕</button><a href="http://www.layui.com" class="layui-btn">一個(gè)可跳轉(zhuǎn)的按鈕</a>主題名稱?? ? ?組合原始 ? ? ?class="layui-btn layui-btn-primary"默認(rèn) ? ? ?class="layui-btn"百搭 ? ? ?class="layui-btn layui-btn-normal"暖色 ? ? ?class="layui-btn layui-btn-warm"警告 ? ? ?class="layui-btn layui-btn-danger"禁用 ? ? ?class="layui-btn layui-btn-disabled"尺寸 ? ? ? 組合大型 ? ? ?class="layui-btn layui-btn-lg"默認(rèn) ? ? ?class="layui-btn"小型 ? ? ?class="layui-btn layui-btn-sm"迷你 ? ? ?class="layui-btn layui-btn-xs"大型百搭??class="layui-btn layui-btn-lg layui-btn-normal"正常暖色??class="layui-btn layui-btn-warm"小型警告??class="layui-btn layui-btn-sm layui-btn-danger"迷你禁用??class="layui-btn layui-btn-xs layui-btn-disabled"圓角主題?? ? ?組合原始 ? ? ?class="layui-btn layui-btn-radius layui-btn-primary"默認(rèn) ? ? ?class="layui-btn layui-btn-radius"百搭 ? ? ?class="layui-btn layui-btn-radius layui-btn-normal"暖色 ? ? ?class="layui-btn layui-btn-radius layui-btn-warm"警告 ? ? ?class="layui-btn layui-btn-radius layui-btn-danger"禁用 ? ? ?class="layui-btn layui-btn-radius layui-btn-disabled"大型百搭??class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"小型警告??class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"迷你禁用??class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"圖標(biāo)： 如--<button type="button" class="layui-btn"><i class="layui-icon"></i> 添加</button>按鈕組： 將按鈕放入一個(gè)class="layui-btn-group"元素中，即可形成按鈕組，按鈕本身仍然可以隨意搭配<div class="layui-btn-group"><button type="button" class="layui-btn">增加</button><button type="button" class="layui-btn">編輯</button><button type="button" class="layui-btn">刪除</button></div>按鈕容器： 如--<div class="layui-btn-container"><button type="button" class="layui-btn">按鈕一</button>?<button type="button" class="layui-btn">按鈕二</button>?<button type="button" class="layui-btn">按鈕三</button>?</div> <!-- --> 表單? ?form 元素集合? ?(此處僅展示元素，更多完整form使用示例詳情見form模塊)基本用法： 設(shè)置class layui-form layui-form-item ...<form class="layui-form" action=""></form>依賴加載模塊：form （如果不加載form模塊，select、checkbox、radio等將無法顯示，并且無法使用form相關(guān)功能）<script>layui.use('form', function(){var form = layui.form;//各種基于事件的操作});</script>輸入框：<input type="text" name="title" required lay-verify="required" placeholder="請(qǐng)輸入標(biāo)題" autocomplete="off" class="layui-input">required：注冊(cè)瀏覽器所規(guī)定的必填字段? ? ? lay-verify：注冊(cè)form模塊需要驗(yàn)證的類型? ? ? class="layui-input"：layui.css提供的通用CSS類下拉選擇框：<select name="city" lay-verify="" lay-search>? ? ? <!--?lay-search 開啟搜索匹配功能?--><option value="">請(qǐng)選擇一個(gè)城市</option>? ? ? <!-- 空值占位，預(yù)留“請(qǐng)選擇”的提示空間，若無此行下面有value的第一行將作默認(rèn)選中項(xiàng)?--><optgroup label="城市">? ? ? <!--?optgroup 分組 --><option value="010">北京</option><option value="021" disabled>上海(禁用效果)</option>? ? ? <!--?disabled 禁用，select和option標(biāo)簽都支持?--><option value="0571" selected>杭州</option>? ? ? <!--?selected 默認(rèn)選中 --></optgroup><optgroup label="xx"><option value="北京">北京</option></optgroup></select>復(fù)選框：（設(shè)置value="1"可自定義值否則選中時(shí)返回的是默認(rèn)的on）默認(rèn)風(fēng)格：（標(biāo)簽式，外層框--文字+選框）<input type="checkbox" name="" title="寫作" checked>? ? ? <!-- checked 默認(rèn)選中 --><input type="checkbox" name="" title="發(fā)呆">? ? ? <!-- title 自定義文本，若只想顯示復(fù)選框可不設(shè)置 --><input type="checkbox" name="" title="禁用" disabled>? ? ? <!-- disabled 禁用 -->原始風(fēng)格：（常見樣式，選框+文字）<input type="checkbox" name="" title="寫作" lay-skin="primary" checked>? ? ? <!-- lay-skin 設(shè)置復(fù)選框風(fēng)格 --><input type="checkbox" name="" title="發(fā)呆" lay-skin="primary"><input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>開關(guān)：（設(shè)置value="1"可自定義值否則選中時(shí)返回的是默認(rèn)的on）其實(shí)就是checkbox復(fù)選框的“變種”，通過設(shè)定?lay-skin="switch"?形成了開關(guān)風(fēng)格<input type="checkbox" name="xxx" lay-skin="switch"><input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>? ? ? <!-- checked 默認(rèn)開狀態(tài)?--><input type="checkbox" name="zzz" lay-skin="switch" lay-text="開啟|關(guān)閉">? ? ? <!-- lay-text 設(shè)置兩種狀態(tài)的文本 --><input type="checkbox" name="aaa" lay-skin="switch" disabled>? ? ? <!-- disabled 禁用 -->單選框：<input type="radio" name="sex" value="nan" title="男">? ? ? <!-- title 自定義文本 --><input type="radio" name="sex" value="nv" title="女" checked>? ? ? <!-- checked 默認(rèn)選中 --><input type="radio" name="sex" value="" title="中性" disabled>? ? ? <!-- disabled 禁用 -->文本域：設(shè)置class="layui-textarea"即使用layui提供的通用css類<textarea name="" required lay-verify="required" placeholder="請(qǐng)輸入" class="layui-textarea"></textarea>組裝行內(nèi)表單：（使表單元素如輸入框顯示在同一行內(nèi)）<div class="layui-form-item"><div class="layui-inline">? ? ? <!--?class="layui-inline"?定義外層行內(nèi)，此例 范圍 和 密碼 及其后輸入框均顯示在一行?--><label class="layui-form-label">范圍</label><div class="layui-input-inline" style="width: 100px;">? ? ? <!--?class="layui-input-inline"?定義內(nèi)層行內(nèi)，此例2個(gè)￥輸入框顯示在一行 --><input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input"></div><div class="layui-form-mid">-</div><div class="layui-input-inline" style="width: 100px;"><input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">密碼</label><div class="layui-input-inline" style="width: 100px;"><input type="password" name="" autocomplete="off" class="layui-input"></div></div></div>忽略美化：<select lay-ignore>? ? ? <!-- lay-ignore 使表單元素保留系統(tǒng)默認(rèn)風(fēng)格，但一般不推薦使用，可能會(huì)導(dǎo)致ui風(fēng)格不和諧?--><option>…</option></select>表單方框風(fēng)格：追加 layui-form-pane 的class可設(shè)置表單為方框風(fēng)格(即使表單元素和其鄰近的label文字被方框劃為一行的樣式)<form class="layui-form layui-form-pane" action=""><!--?內(nèi)部結(jié)構(gòu)都一樣，值得注意的是 復(fù)選框/開關(guān)/單選框 這些組合在該風(fēng)格下需要在其class="layui-form-item"的div額外添加 pane 屬性?--><div class="layui-form-item" pane> <!--表單元素--> </div></form> <!-- --> 導(dǎo)航? ?菜單 / 面包屑基本用法： 設(shè)置class layui-nav layui-nav-item ...依賴加載模塊：elementlayui.use('element', function(){ var element = layui.element; /*其他操作略*/ }); });示例：<!-- 水平導(dǎo)航 --><ul class="layui-nav" lay-filter=""> <!-- layui-nav 導(dǎo)航欄，class可追加css背景類讓導(dǎo)航呈現(xiàn)不同的主題色 --><li class="layui-nav-item"><a href="">導(dǎo)航1</a></li><li class="layui-nav-item layui-this"><a href="">導(dǎo)航2</a></li> <!-- layui-this 指向當(dāng)前頁(yè)面分類 --><li class="layui-nav-item"><a href="">導(dǎo)航3</a></li><li class="layui-nav-item"><a href="javascript:;">導(dǎo)航4</a><dl class="layui-nav-child"> <!-- 二級(jí)菜單 --><dd><a href="">導(dǎo)航4-1</a></dd><dd><a href="">導(dǎo)航4-2</a></dd><dd><a href="">導(dǎo)航4-3</a></dd></dl></li><li class="layui-nav-item"><a href=""><img src="" class="layui-nav-img">導(dǎo)航5</a></li> <!-- 添加圖片(可做頭像之類的) --><li class="layui-nav-item"><a href="">導(dǎo)航6<span class="layui-badge">9</span></a></li> <!-- 顯示帶數(shù)字9的方塊(可做消息提示之類的) --><li class="layui-nav-item"><a href="">導(dǎo)航7<span class="layui-badge-dot"></span></a></li> <!-- 顯示圓點(diǎn)(可做消息提示之類的) --></ul><script>layui.use('element', function(){ // 導(dǎo)航 依賴 element 模塊，否則無法進(jìn)行功能性操作var element = layui.element;//…});</script>更多: 導(dǎo)航欄class可追加css背景類讓導(dǎo)航呈現(xiàn)不同的主題色，水平導(dǎo)航支持 layui-bg-cyan（藏青）、layui-bg-molv（墨綠）、layui-bg-blue（艷藍(lán)），垂直導(dǎo)航支持 layui-bg-cyan（藏青），如--<ul class="layui-nav layui-bg-green" lay-filter=""><!--墨綠背景--></ul>水平、垂直、側(cè)邊三個(gè)導(dǎo)航的HTML結(jié)構(gòu)是完全一樣的，不同的是 垂直導(dǎo)航需要追加class：layui-nav-tree 側(cè)邊導(dǎo)航需要追加class：layui-nav-tree layui-nav-side 如--<ul class="layui-nav layui-nav-tree" lay-filter="test"><!-- 側(cè)邊導(dǎo)航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --><li class="layui-nav-item layui-nav-itemed"> <!-- layui-nav-itemed 導(dǎo)航選中 --><!-- 二級(jí)菜單內(nèi)容略 --></li></ul>可選屬性--<!-- lay-shrink 設(shè)置展開子菜單時(shí)是否收縮兄弟節(jié)點(diǎn)已展開的子菜單(全部收縮)，默認(rèn)值為空即不收縮 設(shè)置值為all即收縮，layui2.2.6新增 --><ul class="layui-nav layui-nav-tree" lay-shrink="all"> … </ul><!-- lay-unselect 設(shè)置點(diǎn)擊導(dǎo)航菜單時(shí)不出現(xiàn)選中效果，layui2.2.0新增 --><li class="layui-nav-item" lay-unselect>刷新</li>面包屑--<!-- 首頁(yè) / 國(guó)際新聞 / 亞太地區(qū) / 正文 --><span class="layui-breadcrumb"> <!-- 添加 lay-separator="-" 可自定義分隔符 --><a href="">首頁(yè)</a><a href="">國(guó)際新聞</a><a href="">亞太地區(qū)</a><a><cite>正文</cite></a></span><!-- 也可以做小導(dǎo)航 如 --><!-- 娛樂 | 八卦 | 體育 | 搞笑 | 視頻 | 游戲 | 綜藝 --><span class="layui-breadcrumb" lay-separator="|"><a href="">娛樂</a><a href="">八卦</a><a href="">體育</a><a href="">搞笑</a><a href="">視頻</a><a href="">游戲</a><a href="">綜藝</a></span><!-- --> 選項(xiàng)卡? ?Tabs 切換基本用法： 設(shè)置class layui-tab layui-tab-title layui-tab-content ...依賴加載組件：element （必須加載element模塊，相關(guān)功能才能正常使用）示例：<div class="layui-tab"> <!-- 追加class： layui-tab-brief 可設(shè)定簡(jiǎn)潔風(fēng)格， 追加class： layui-tab-card 可設(shè)定卡片風(fēng)格， 設(shè)置屬性 lay-allowClose="true" 可允許Tab選項(xiàng)卡被刪除 --><ul class="layui-tab-title"><li class="layui-this">tab1</li> <!-- layui-this 選中tab --><li>tab2</li><li>tab3</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">內(nèi)容1</div> <!-- kayui-show 展示 --><div class="layui-tab-item">內(nèi)容2</div><div class="layui-tab-item">內(nèi)容3</div></div></div><script>layui.use('element', function(){ // 選項(xiàng)卡 依賴 element 模塊，否則無法進(jìn)行功能性操作var element = layui.element;//…});</script>ID焦點(diǎn)定位： 設(shè)置 lay-id="xxx" 可作唯一的匹配索引以用于外部的定位切換，如--<div class="layui-tab" lay-filter="test1"><ul class="layui-tab-title"><li class="layui-this" lay-id="111" >文章列表</li><li lay-id="222">發(fā)送信息</li><li lay-id="333">權(quán)限分配</li><li lay-id="444">審核</li><li lay-id="555">訂單管理</li></ul><div class="layui-tab-content"> ... </div></div><!-- 動(dòng)態(tài)操作(部分代碼) --><script>layui.use('element', function(){var element = layui.element;//獲取hash來切換選項(xiàng)卡，假設(shè)當(dāng)前地址的hash為lay-id對(duì)應(yīng)的值var layid = location.hash.replace(/^#test1=/, '');element.tabChange('test1', layid); //假設(shè)當(dāng)前地址為：http://a.com#test1=222，那么選項(xiàng)卡會(huì)自動(dòng)切換到“發(fā)送消息”這一項(xiàng)//監(jiān)聽Tab切換，以改變地址hash值element.on('tab(test1)', function(){location.hash = 'test1='+ this.getAttribute('lay-id');});});</script>注：無論是導(dǎo)航、還是Tab，都需依賴 element模塊，大部分行為都是在加載完該模塊后自動(dòng)完成的，但一些交互操作，如Tab事件監(jiān)聽等，需按照?qǐng)鼍斑x擇性使用 <!-- --> 進(jìn)度條? ?progress基本用法： 設(shè)置class layui-progress ...依賴加載組件：element示例：<div class="layui-progress"> <!-- 追加class：layui-progress-big 即為大尺寸的進(jìn)度條風(fēng)格(增加高度且文字在進(jìn)度條內(nèi)顯示而默認(rèn)在進(jìn)度條右上顯示)， 設(shè)置屬性 lay-showPercent="yes" 可開啟進(jìn)度比的文本顯示 若不想顯示務(wù)必直接刪除此屬性不要設(shè)置no或false layui2.1.7新增 --><div class="layui-progress-bar" lay-percent="10%"></div> <!-- lay-percent 進(jìn)度條的初始百分比，可動(dòng)態(tài)改變進(jìn)度 --></div><script>layui.use('element', function(){ // 進(jìn)度條依賴 element 模塊，否則無法進(jìn)行正常渲染和功能性操作var element = layui.element;});</script><!-- --> 面板? ?折疊 / 手風(fēng)琴基本用法： 設(shè)置class layui-card layui-card-header layui-card-body ...一個(gè)獨(dú)立的容器，適用于 QA說明、幫助文檔等依賴加載組件：element示例：<!-- 卡片面板 --><div class="layui-card"><div class="layui-card-header">卡片面板</div> <!-- 頭部標(biāo)題 --><div class="layui-card-body"> <!-- 內(nèi)容 -->卡片式面板面板通常用于非白色背景色的主體內(nèi)從而映襯出邊框投影，如果網(wǎng)頁(yè)采用的是默認(rèn)的白色背景則不建議使用卡片面板</div></div><!-- 折疊面板/手風(fēng)琴 --><div class="layui-collapse"> <!-- 添加屬性 lay-accordion (無值)可開啟手風(fēng)琴(即在進(jìn)行折疊操作時(shí)始終只會(huì)展現(xiàn)當(dāng)前的面板其他展開的面板自動(dòng)收起) --><div class="layui-colla-item"><h2 class="layui-colla-title">面板1</h2><div class="layui-colla-content layui-show">內(nèi)容區(qū)域</div> <!-- 設(shè)置class為 layui-show 來選擇性初始展開某一個(gè)面板，element 模塊會(huì)自動(dòng)呈現(xiàn)狀態(tài)圖標(biāo) --></div><div class="layui-colla-item"><h2 class="layui-colla-title">面板2</h2><div class="layui-colla-content layui-show">內(nèi)容區(qū)域</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">面板3</h2><div class="layui-colla-content layui-show">內(nèi)容區(qū)域</div></div></div><script>layui.use('element', function(){ // 折疊面板 依賴 element 模塊，否則無法進(jìn)行功能性操作var element = layui.element; //…});</script> <!-- --> 表格? ?靜態(tài) table基本用法： 設(shè)置class layui-table示例：<table class="layui-table"> <!-- 添加屬性 lay-even 開啟隔行背景， 添加屬性 lay-skin="值" 設(shè)置邊框風(fēng)格 可取值 line(行邊框風(fēng)格) row(列邊框風(fēng)格) nob(無邊框風(fēng)格) 使用默認(rèn)風(fēng)格不設(shè)置該屬性即可， 添加屬性 lay-size="值" 設(shè)置表格尺寸 可取值 sm(小尺寸) lg(大尺寸) 使用默認(rèn)尺寸不設(shè)置該屬性即可 --><colgroup> <!-- 樣式 --><col width="150"><col width="200"><col></colgroup><thead> <!-- 表頭 --><tr><th>昵稱</th><th>加入時(shí)間</th><th>簽名</th></tr> </thead><tbody> <!-- 數(shù)據(jù) --><tr> <!-- 行 --><td>行1列1</td> <!-- 列 --><td>2020-12-09</td><td>行1列3</td></tr><tr><td>行2列1</td><td>2020-12-10</td><td>行2列3...</td></tr></tbody></table>注： 此為靜態(tài)表格，若需要對(duì)表格進(jìn)行排序、數(shù)據(jù)交互等一系列功能性操作請(qǐng)參考table模塊 <!-- --> 徽章? ?小圓點(diǎn) / 小邊框示例： <!-- 可追加class： layui-bg-* 添加背景色(7種內(nèi)置背景色) --><!-- 小圓點(diǎn) --><span class="layui-badge-dot"></span><!-- 橢圓體 --><span class="layui-badge">9</span><!-- 邊框體 --><span class="layui-badge-rim">8</span>也可搭配 導(dǎo)航、按鈕、選項(xiàng)卡等使用<!-- --> 時(shí)間線? ?timeline基本用法： 設(shè)置class layui-timeline layui-timeline-item layui-timeline-axis layui-timeline-content layui-timeline-title ...示例： <!-- 既可作時(shí)間線也可作其他類似用處 --><ul class="layui-timeline"> <!-- 時(shí)間線(容器) --><li class="layui-timeline-item"> <!-- 時(shí)間線(1條) --><i class="layui-icon layui-timeline-axis"></i> <!-- 圓圈圖標(biāo)(可自定義更改但不推薦自行更改) --><div class="layui-timeline-content layui-text"> <!-- 文字 --><h3 class="layui-timeline-title">8月18日</h3> <!-- 時(shí)間/標(biāo)題 --><p>時(shí)間線1<i class="layui-icon layui-icon-face-smile"></i></p> <!-- 任意內(nèi)容(文字 圖標(biāo) ...) --></div></li><li class="layui-timeline-item"> ... </li> <!-- li同結(jié)構(gòu)不同標(biāo)題和內(nèi)容 --></ul><!-- --> 輔助? ?引用 / 字段集 / 橫線等示例： <!-- 引用區(qū)塊 layui-elem-quote --> <!-- blockquote 標(biāo)簽本身有塊引用的作用，而layui內(nèi)置css進(jìn)行樣式修飾 --><blockquote class="layui-elem-quote">引用區(qū)域的文字</blockquote> <!-- 默認(rèn)樣式風(fēng)格(綠色左邊框淺灰文字背景) --><blockquote class="layui-elem-quote layui-quote-nm">引用區(qū)域的文字</blockquote> <!-- 增加樣式風(fēng)格(灰色邊框并加粗左邊框白色文字背景) --><!-- 字段集區(qū)塊 layui-elem-field --><fieldset class="layui-elem-field"> <!-- 默認(rèn)風(fēng)格(全邊框且標(biāo)題嵌在上邊框) --><legend>標(biāo)題</legend><div class="layui-field-box"> 任意內(nèi)容，比如表單... </div></fieldset><fieldset class="layui-elem-field layui-field-title"> <!-- 追加樣式(無邊框而標(biāo)題帶有容器長(zhǎng)度100%的橫線) --><legend>帶標(biāo)題的橫線</legend><div class="layui-field-box"> 任意內(nèi)容，比如表單... </div></fieldset><!-- 橫線/分割線 --> <!-- hr 標(biāo)簽本身就是一條水平線，而layui內(nèi)置css進(jìn)行樣式修飾 --><hr> <!-- 默認(rèn)分割線 --><hr class="layui-bg-red"> <!-- 赤色分割線 --><hr class="layui-bg-orange"> <!-- 橙色分割線 --><hr class="layui-bg-green"> <!-- 墨綠分割線 --><hr class="layui-bg-cyan"> <!-- 青色分割線 --><hr class="layui-bg-blue"> <!-- 藍(lán)色分割線 --><hr class="layui-bg-black"> <!-- 黑色分割線 --><hr class="layui-bg-gray"> <!-- 灰色分割線 -->?
總結(jié)
以上是生活随笔為你收集整理的layui - 页面元素的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 30行代码就可以实现看图识字！pytho
- 下一篇： NAT技术总结