前端框架LayUI學(xué)習(xí)筆記_第1頁
前端框架LayUI學(xué)習(xí)筆記_第2頁
前端框架LayUI學(xué)習(xí)筆記_第3頁
前端框架LayUI學(xué)習(xí)筆記_第4頁
前端框架LayUI學(xué)習(xí)筆記_第5頁
已閱讀5頁，還剩39頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

前端框架LayUI學(xué)習(xí)筆記LayUI1.主要內(nèi)容2.LayUI的安裝及使?2.1.LayUI的介紹layui（諧?：類UI)是?款采??身模塊規(guī)范編寫的前端UI框架，遵循原?HTML/CSS/JS的書寫與組織形式，?檻極低，拿來即?。由國?開發(fā)，16年出?的框架，其主要提供了很多好看、?便的樣式，并且基本拿來即?，和Bootstap有些相似，但該框架有個極?的好處就是定義了很多前后端交互的樣式接?，如分?表格，只需在前端配置好接?，后端則按照定義好的接?規(guī)則返回數(shù)據(jù)，即可完成??的展示，極?減少了后端?員的開發(fā)成本。官?\h：官??檔\h：/doc/2.2.LayUI的特點(diǎn)（1）layui屬于輕量級框架，簡單美觀。適?于開發(fā)后端模式，它在服務(wù)端??上有?常好的效果。（2）layui是提供給后端開發(fā)?員的ui框架，基于DOM2.3.下載與使?1.在\h官???下載到layui的最新版。?錄結(jié)構(gòu)如下：├─css//css?錄││─modules//模塊css?錄（?般如果模塊相對較?，我們會單獨(dú)提取，?如下?三個：）││├─laydate││├─layer││└─layim│└─layui.css//核?樣式?件├─font//字體圖標(biāo)?錄├─images//圖?資源?錄（?前只有l(wèi)ayim和編輯器?到的GIF表情）│─lay//模塊核??錄│└─modules//各模塊組件│─layui.js//基礎(chǔ)核?庫└─layui.all.js//包含layui.js和所有模塊的合并?件2.獲得layui后，將其完整地部署（拷?到項(xiàng)?中）到你的項(xiàng)??錄，你只需要引?下述兩個?件：./layui/css/layui.css./layui/layui.js//提示：如果是采??模塊化?式，此處可換成：./layui/layui.all.js3.基本的????<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1"><title>開始使?layui</title><linkrel="stylesheet"href="layui/css/layui.css"></head><body><!--你的HTML代碼--><scriptsrc="layui/layui.js"></script><script>//模塊和回調(diào)函數(shù)//?般直接寫在?個js?件中l(wèi)ayui.use(['layer','form'],function(){varlayer=layui.layer,form=layui.form;layer.msg('HelloWorld');});</script></body></html>4.還需要聲明需要使?的模塊和回調(diào)函數(shù)。參照官??檔，選擇??想要的效果就?。?如：<script>//注意：導(dǎo)航依賴element模塊，否則?法進(jìn)?功能性操作layui.use('element',function(){varelement=layui.element;//…});</script>3.??元素3.1.布局3.1.1.布局容器.固定寬度將柵格放??個帶有class="layui-container"的特定的容器中，以便在?屏幕以上的設(shè)備中固定寬度，讓列可控。<divclass="layui-container"><divclass="layui-row">……</div></div>.完整寬度可以不固定容器寬度。將柵格或其它元素放??個帶有class="layui-?uid"的容器中，那么寬度將不會固定，?是100%適應(yīng)<divclass="layui-fluid">……</div>3.1.2.柵格系統(tǒng)為了豐富??布局，簡化HTML/CSS代碼的耦合，并提升多終端的適配能?，layui引進(jìn)了?套具備響應(yīng)式能?的柵格系統(tǒng)。將容器進(jìn)?了12等分，預(yù)設(shè)了4*12種CSS排列類，它們在移動設(shè)備、平板、桌?中/?尺?四種不同的屏幕下發(fā)揮著各?的作?。.柵格布局規(guī)則1.采?layui-w來定義?，如：<divclass="layui-row"></div>2.采?類似layui-col-md*這樣的預(yù)設(shè)類來定義?組列（column），且放在?（w）內(nèi)。其中：變量md代表的是不同屏幕下的標(biāo)記變量*代表的是該列所占?的12等分?jǐn)?shù)（如6/12），可選值為1-12如果多個列的“等分?jǐn)?shù)值”總和等于12，則剛好滿?排列。如果?于12，多余的列將?動另起??。3.列可以同時出現(xiàn)最多四種不同的組合，分別是：xs（超?屏幕，如?機(jī)）、sm（?屏幕，如平板）、md（桌?中等屏幕）、lg（桌??型屏幕）。4.可對列追加類似layui-col-space5、layui-col-md-o?set3這樣的預(yù)設(shè)類來定義列的間距和偏移。5.可以在列（column）元素中放?你??的任意元素填充內(nèi)容示例：<h3>常規(guī)布局（以中型屏幕桌?為例）：</h3><divclass="layui-row"><divclass="layui-col-md9"style="background-color:#00F7DE;">你的內(nèi)容9/12</div><divclass="layui-col-md3"style="background-color:rosybrown;">你的內(nèi)容3/12</div></div>.響應(yīng)式規(guī)則柵格的響應(yīng)式能?，得益于CSS3媒體查詢（MediaQueries）的強(qiáng)??持，從?針對四類不同尺?的屏幕，進(jìn)?相應(yīng)的適配處理。超?屏幕(?機(jī)<768px)

?屏幕(平板≥768px)

中等屏幕(桌?≥992px)

?型屏幕(桌?≥1200px).layui-container的值標(biāo)記列對應(yīng)類*為1-12的等分?jǐn)?shù)值總列數(shù)響應(yīng)?為

autoxslayui-col-xs*12始終按設(shè)定的?例?平排列

750xsmlayui-col-sm*12在當(dāng)前屏幕下?平排列，如果屏幕??低于臨界值則堆疊排列

970xmdlayui-ol-md*12在當(dāng)前屏幕下?平排列，如果屏幕??低于臨界值則堆疊排列

1170xlglayui-ol-lg12在當(dāng)前屏幕下?平排列，如果屏幕??低于臨界值則堆疊排列<h3>平板、桌?端的不同表現(xiàn)：</h3><divclass="layui-row"><divclass="layui-col-sm6layui-col-md4"style="background-color:thistle">平板≥768px：6/12|桌?端≥992px：4/12</div></div><divclass="layui-row"><divclass="layui-col-sm4layui-col-md6"style="background-color:mediumaquamarine;">平板≥768px：4/12|桌?端≥992px：6/12</div></div><divclass="layui-row"><divclass="layui-col-sm12layui-col-md8"style="background-color:coral">平板≥768px：12/12|桌?端≥992px：8/12</div></div>.列邊距通過“列間距”的預(yù)設(shè)類，來設(shè)定列之間的間距。且??中最左的列不會出現(xiàn)左邊距，最右的列不會出現(xiàn)右邊距。列間距在保證排版美觀的同時，還可以進(jìn)?步保證分列的寬度精細(xì)程度。我們結(jié)合??常?的邊距，預(yù)設(shè)了12種不同尺?的邊距，分別是：/*?持列之間為1px-30px區(qū)間的所有雙數(shù)間隔，以及1px、5px、15px、25px的單數(shù)間隔*/layui-col-space1layui-col-space2layui-col-space4layui-col-space5layui-col-space6layui-col-space8layui-col-space10layui-col-space12layui-col-space14layui-col-space15layui-col-space16layui-col-space18layui-col-space20layui-col-space22layui-col-space24layui-col-space25layui-col-space26layui-col-space28layui-col-space30示例：<h3>列間距</h3><divclass="layui-rowlayui-col-space10"><divclass="layui-col-md4"><!--需要在layui-col-md4??再加?層div--><divstyle="background-color:#009688;">1/3</div></div><divclass="layui-col-md4"><divstyle="background-color:burlywood;">1/3</div></div><divclass="layui-col-md4"><divstyle="background-color:silver;">1/3</div></div></div>注：1.layui-col-space：設(shè)置后不起作?主要是因?yàn)樵O(shè)置的是padding,也就是說是向內(nèi)縮，所以設(shè)置背景?padding也是會添上顏?，看起來好像沒有間距?樣?？梢栽??在加?個div，來達(dá)到?的。2.間距?般不?于30x，如果超過30，建議使?列偏移。.列偏移對列追加類似layui-col-md-o?set*的預(yù)設(shè)類，從?讓列向右偏移。其中*號代表的是偏移占據(jù)的列數(shù)，可選中為1-12。如：layui-col-md-o?set3，即代表在“中型桌?屏幕”下，讓該列向右偏移3個列寬度<h3>列偏移</h3><divclass="layui-row"><divclass="layui-col-md4"style="background-color:rosybrown;">4/12</div><divclass="layui-col-md4layui-col-md-offset4"style="background-color:cornflowerblue;">偏移4列，從?在最右</div></div>注：列偏移可針對不同屏幕的標(biāo)準(zhǔn)進(jìn)?設(shè)定，在當(dāng)前設(shè)定的屏幕下有效，當(dāng)?shù)陀谧?屏幕的規(guī)定的臨界值，就會堆疊排列。.列嵌套可以對柵格進(jìn)??窮層次的嵌套。在列元素（layui-col-md*）中插??元素（layui-w），即可完成嵌套。<h3>列嵌套</h3><divclass="layui-rowlayui-col-space5"><divclass="layui-col-md5"style="background-color:thistle;"><divclass="layui-row"><divclass="layui-col-md3"style="background-color:burlywood;">內(nèi)部列</div><divclass="layui-col-md5"style="background-color:indianred;">內(nèi)部列</div><divclass="layui-col-md4"style="background-color:mediumaquamarine;">內(nèi)部列</div></div></div></div>3.2.基本元素3.2.1.按鈕.?法向任意HTML元素設(shè)定class="layui-btn"，建??個基礎(chǔ)按鈕。通過追加格式為layui-btn-{type}的class來定義其它按鈕?格。<!--基礎(chǔ)按鈕--><buttontype="button"class="layui-btn">?個標(biāo)準(zhǔn)的按鈕</button><ahref=""class="layui-btn">?個可跳轉(zhuǎn)的按鈕</a><divclass="layui-btn">?個按鈕</div>.主題名稱 組合原始 class="layui-btnlayui-btn-primary"默認(rèn) class="layui-btn"百搭 class="layui-btnlayui-btn-normal"暖? class="layui-btnlayui-btn-war警告 class="layui-btnlayui-btn-danger"禁? class="layui-btnlayui-btn-disabled"示例：<!--不同主題的按鈕--><buttonclass="layui-btn">默認(rèn)按鈕</button><buttonclass="layui-btnlayui-btn-primary">原始按鈕</button><buttonclass="layui-btnlayui-btn-normal">百搭按鈕</button><buttonclass="layui-btnlayui-btn-warm">暖?按鈕</button><buttonclass="layui-btnlayui-btn-danger">警告按鈕</button><buttonclass="layui-btnlayui-btn-disabled">禁?按鈕</button>.尺?尺? 組合?型 class="layui-btnlayui-btn-lg"默認(rèn) class="layui-btn"?型 class="layui-btnlayui-btn-sm"迷你 class="layui-btnlayui-btn-xs"<!--不同尺?的按鈕--><buttonclass="layui-btnlayui-btn-primarylayui-btn-lg">?型</button><buttonclass="layui-btn">默認(rèn)</button><buttonclass="layui-btnlayui-btn-smlayui-btn-danger">?型</button><buttonclass="layui-btnlayui-btn-xs">迷你</button>.圓?layui-btn-adius<buttonclass="layui-btnlayui-btn-radius">默認(rèn)按鈕</button><buttonclass="layui-btnlayui-btn-primarylayui-btn-radius">原始按鈕</button><buttonclass="layui-btnlayui-btn-normallayui-btn-radius">百搭按鈕</button><buttonclass="layui-btnlayui-btn-warmlayui-btn-radius">暖?按鈕</button><buttonclass="layui-btnlayui-btn-dangerlayui-btn-radius">警告按鈕</button><buttonclass="layui-btnlayui-btn-disabledlayui-btn-radius">禁?按鈕</button>.圖標(biāo)<buttontype="button"class="layui-btn"><iclass="layui-icon"></i>添加</button><buttontype="button"class="layui-btnlayui-btn-smlayui-btn-primary"><iclass="layui-icon">ဂ</i>刷新</button>3.2.2.導(dǎo)航導(dǎo)航?般指??引導(dǎo)性頻道集合，多以菜單的形式呈現(xiàn)，可應(yīng)?于頭部和側(cè)邊。?包屑結(jié)構(gòu)簡單，?持?定義分隔符。依賴加載模塊\h：element實(shí)現(xiàn)步驟：1.引?的資源<linkrel="stylesheet"href="layui/css/layui.css"><scriptsrc="layui/layui.js"></script>2.依賴加載模塊<scripttype="text/javascript">//注意：導(dǎo)航依賴element模塊，否則?法進(jìn)?功能性操作layui.use('element',function(){varelement=layui.element;});</script>3.顯示指定類型的導(dǎo)航.?平導(dǎo)航<ulclass="layui-nav"><liclass="layui-nav-item"><ahref="">最新活動</a></li><liclass="layui-nav-itemlayui-this"><ahref="">產(chǎn)品</a></li><liclass="layui-nav-item"><ahref="">?數(shù)據(jù)</a></li><liclass="layui-nav-item"><ahref="javascript:;">解決?案</a><dlclass="layui-nav-child"><!--?級菜單--><dd><ahref="">移動模塊</a></dd><dd><ahref="">后臺模版</a></dd><dd><ahref="">電商平臺</a></dd></dl></li><liclass="layui-nav-item"><ahref="">社區(qū)</a></li></ul>.垂直/側(cè)邊導(dǎo)航<ulclass="layui-navlayui-nav-tree"><!--側(cè)邊導(dǎo)航:<ulclass="layui-navlayui-nav-treelayui-nav-side">--><liclass="layui-nav-itemlayui-nav-itemed"><ahref="javascript:;">默認(rèn)展開</a><dlclass="layui-nav-child"><dd><ahref="javascript:;">選項(xiàng)1</a></dd><dd><ahref="javascript:;">選項(xiàng)2</a></dd><dd><ahref="">跳轉(zhuǎn)</a></dd></dl></li><liclass="layui-nav-item"><ahref="javascript:;">解決?案</a><dlclass="layui-nav-child"><dd><ahref="">移動模塊</a></dd><dd><ahref="">后臺模版</a></dd><dd><ahref="">電商平臺</a></dd></dl></li><liclass="layui-nav-item"><ahref="">產(chǎn)品</a></li><liclass="layui-nav-item"><ahref="">?數(shù)據(jù)</a></li></ul>?平、垂直、側(cè)邊三個導(dǎo)航的HTML結(jié)構(gòu)是完全?樣的，不同的是：?平導(dǎo)航：layui-nav垂直導(dǎo)航需要追加class：layui-nav-tree側(cè)邊導(dǎo)航需要追加class：layui-nav-treelayui-nav-side.導(dǎo)航主題通過對導(dǎo)航追加CSS背景類，讓導(dǎo)航呈現(xiàn)不同的主題?<!--如定義?個墨綠背景?的導(dǎo)航--><ulclass="layui-navlayui-bg-move">…</ul>?平導(dǎo)航?持的其它背景主題有：layui-bg-cyan（藏?）、layui-bg-molv（墨綠）、layui-bg-blue（艷藍(lán)）垂直導(dǎo)航?持的其它背景主題有：layui-bg-cyan（藏?）.?包屑<spanclass="layui-breadcrumb"><ahref="">??</a><ahref="">國際新聞</a><ahref="">亞太地區(qū)</a><a><cite>正?</cite></a></span>你還可以通過設(shè)置屬性lay-sepaator=""來?定義分隔符。例如：<spanclass="layui-breadcrumb"lay-separator="-"><ahref="">??</a><ahref="">國際新聞</a><ahref="">亞太地區(qū)</a><a><cite>正?</cite></a></span>3.2.3.選項(xiàng)卡導(dǎo)航菜單可應(yīng)?于頭部和側(cè)邊，?持響應(yīng)式，?持刪除選項(xiàng)卡等功能。依賴加載模塊\h：element.實(shí)現(xiàn)步驟1.引?的資源<linkrel="stylesheet"href="layui/css/layui.css"><scriptsrc="layui/layui.js"></script>2.依賴加載模塊<scripttype="text/javascript">//注意：選項(xiàng)卡依賴element模塊，否則?法進(jìn)?功能性操作layui.use('element',function(){varelement=layui.element;});</script>3.加載HTML<divclass="layui-tab"><ulclass="layui-tab-title"><liclass="layui-this">?站設(shè)置</li><li>?戶管理</li><li>權(quán)限分配</li><li>商品管理</li><li>訂單管理</li></ul><divclass="layui-tab-content"><divclass="layui-tab-itemlayui-show">內(nèi)容1</div><divclass="layui-tab-item">內(nèi)容2</div><divclass="layui-tab-item">內(nèi)容3</div><divclass="layui-tab-item">內(nèi)容4</div><divclass="layui-tab-item">內(nèi)容5</div></div></div>.選項(xiàng)卡?格默認(rèn)?格：layui-tab簡潔?格需要追加class：layui-tab-brief卡??格需要追加class：layui-tab-card.帶刪除的選項(xiàng)卡可以對?層容器設(shè)置屬性lay-allwClose="tru"來允許ab選項(xiàng)卡被刪除<divclass="layui-tab"lay-allowClose="true"><ulclass="layui-tab-title"><liclass="layui-this">?站設(shè)置</li><li>?戶管理</li><li>權(quán)限分配</li><li>商品管理</li><li>訂單管理</li></ul><divclass="layui-tab-content"><divclass="layui-tab-itemlayui-show">內(nèi)容1</div><divclass="layui-tab-item">內(nèi)容2</div><divclass="layui-tab-item">內(nèi)容3</div><divclass="layui-tab-item">內(nèi)容4</div><divclass="layui-tab-item">內(nèi)容5</div></div></div>3.2.4.表格.常規(guī)?法<tableclass="layui-table"><colgroup><colwidth="150"><colwidth="200"><col></colgroup><thead><tr><th>昵稱</th><th>加?時間</th><th>簽名</th></tr></thead><tbody><tr><td>賢?</td><td>2016-11-29</td><td>??就像是?場修?</td></tr><tr><td>許閑?</td><td>2016-11-28</td><td>于千萬?之中遇?你所遇?的?，于千萬年之中，時間的?涯的荒野?…</td></tr></tbody></table>.基礎(chǔ)屬性屬性名lay-venlay-skin="屬性值"lay-size="屬性值"

屬性值?line（?邊框?格）w（列邊框?格）nob（?邊框?格）sm（?尺?）lg（?尺?）

備注?于開啟隔?背景，可與其它屬性?起使?若使?默認(rèn)?格不設(shè)置該屬性即可若使?默認(rèn)尺?不設(shè)置該屬性即可你所需要的基礎(chǔ)屬性寫在table標(biāo)簽上，例如：<!--?個帶有隔?背景，且?邊框?格的?尺?表格--><tableclass="layui-table"lay-evenlay-size="lg"lay-skin="row"><colgroup><colwidth="150"><colwidth="200"><col></colgroup><thead><tr><th>昵稱</th><th>加?時間</th><th>簽名</th></tr></thead><tbody><tr><td>賢?</td><td>2016-11-29</td><td>??就像是?場修?</td></tr><tr><td>許閑?</td><td>2016-11-28</td><td>于千萬?之中遇?你所遇?的?，于千萬年之中，時間的?涯的荒野?…</td></tr></tbody></table>3.2.5.表單依賴加載模塊\h：form1.在?個容器中設(shè)定class="layui-form"來標(biāo)識?個表單元素塊<formclass="layui-form"action=""></form>2.基本的?區(qū)塊結(jié)構(gòu)，它提供了響應(yīng)式的?持。可以換成其他結(jié)構(gòu)，但必須要在外層容器中定義class="layui-for"，form模塊才能正常?作。<divclass="layui-form-item"><labelclass="layui-form-label">標(biāo)簽區(qū)域</label><divclass="layui-input-block">原始表單元素區(qū)域</div></div>.輸?框<inputtype="text"name="title"requiredlay-verify="required"placeholder="請輸?標(biāo)題"autocomplete="off"class="layui-input"/>equied：注冊瀏覽器所規(guī)定的必填字段lay-verify：注冊form模塊需要驗(yàn)證的類型class="layui-input"：layui.css提供的通?CSS類.下拉選擇框<selectname="city"lay-verify=""><optionvalue="">請選擇?個城市</option><optionvalue="010">北京</option><optionvalue="021">上海</option><optionvalue="0571">杭州</option></select>屬性selected可設(shè)定默認(rèn)項(xiàng)屬性disabled開啟禁?，select和option標(biāo)簽都?持<selectname="city"lay-verify=""><optionvalue="010">北京</option><optionvalue="021"disabled>上海（禁?效果）</option><optionvalue="0571"selected>杭州</option></select>可以通過optgoup標(biāo)簽給select分組<selectname="quiz"><optionvalue="">請選擇</option><optgrouplabel="城市記憶"><optionvalue="你?作的第?個城市">你?作的第?個城市？</option></optgroup><optgrouplabel="學(xué)?時代"><optionvalue="你的?號">你的?號？</option><optionvalue="你最喜歡的?師">你最喜歡的?師？</option></optgroup></select>通過設(shè)定屬性lay-seach來開啟搜索匹配功能<selectname="city"lay-verify=""lay-search><optionvalue="010">layer</option><optionvalue="021">form</option><optionvalue="0571"selected>layim</option></select>.復(fù)選框<h2>默認(rèn)?格：</h2><inputtype="checkbox"name=""title="寫作"checked><inputtype="checkbox"name=""title="發(fā)呆"><inputtype="checkbox"name=""title="禁?"disabled><h2>原始?格：</h2><inputtype="checkbox"name=""title="寫作"lay-skin="primary"checked><inputtype="checkbox"name=""title="發(fā)呆"lay-skin="primary"><inputtype="checkbox"name=""title="禁?"lay-skin="primary"disabled>屬性title可?定義?本（溫馨提示：如果只想顯示復(fù)選框，可以不?設(shè)置title）屬性checed可設(shè)定默認(rèn)選中屬性lay-skin可設(shè)置復(fù)選框的?格（原始?格：lay-skin=primary"）設(shè)置value="1"可?定義值，否則選中時返回的就是默認(rèn)的on.開關(guān)將復(fù)選框checkbx，通過設(shè)定lay-skin=switc"形成了開關(guān)?格<inputtype="checkbox"name="xxx"lay-skin="switch"><inputtype="checkbox"name="yyy"lay-skin="switch"lay-text="ON|OFF"checked><inputtype="checkbox"name="zzz"lay-skin="switch"lay-text="開啟|關(guān)閉"><inputtype="checkbox"name="aaa"lay-skin="switch"disabled>屬性checed可設(shè)定默認(rèn)開屬性disabled開啟禁?屬性lay-txt可?定義開關(guān)兩種狀態(tài)的?本（兩種?本?"|"隔開）設(shè)置value="1"可?定義值，否則選中時返回的就是默認(rèn)的on.單選框<inputtype="radio"name="sex"value="nan"title="男"><inputtype="radio"name="sex"value="nv"title="?"checked><inputtype="radio"name="sex"value=""title="中性"disabled>屬性title可?定義?本屬性disabled開啟禁?設(shè)置value="xxx"可?定義值，否則選中時返回的就是默認(rèn)的on.?本域<textareaname="remark"requiredlay-verify="required"placeholder="請輸?個?介紹"class="layui-textarea"></textarea>class="layui-txtaea"：layui.css提供的通?CSS類.組裝?內(nèi)表單<divclass="layui-form-item"><divclass="layui-inline"><labelclass="layui-form-label">范圍</label><divclass="layui-input-inline"style="width:100px;"><inputtype="text"name="price_min"placeholder="￥"autocomplete="off"class="layui-input"></div><divclass="layui-form-mid">-</div><divclass="layui-input-inline"style="width:100px;"><inputtype="text"name="price_max"placeholder="￥"autocomplete="off"class="layui-input"></div></div></div>class="layui-inline"：定義外層?內(nèi)class="layui-input-inline"：定義內(nèi)層?內(nèi).忽略美化渲染可以對表單元素增加屬性lay-ignoe設(shè)置后，將不會對該標(biāo)簽進(jìn)?美化渲染，即保留系統(tǒng)?格。<inputtype="radio"name="sex"value="nan"title="男"lay-ignore>.表單?框?格通過追加layui-form-pane的class，來設(shè)定表單的?框?格。<formclass="layui-formlayui-form-pane"action=""><!--內(nèi)部結(jié)構(gòu)都?樣，值得注意的是復(fù)選框/開關(guān)/單選框這些組合在該?格下需要額外添加pane屬性（否則 會看起來?較別扭），如：--><divclass="layui-form-item"pane><labelclass="layui-form-label">單選框</label><divclass="layui-input-block"><inputtype="radio"name="sex"value="男"title="男"><inputtype="radio"name="sex"value="?"title="?"checked></div></div></form>3.3.組件示例3.3.1.彈出層模塊加載名稱：layer，獨(dú)?版本\h：.使?場景由于layer可以獨(dú)?使?，也可以通過Layui模塊化使?。所以請按照你的實(shí)際需求來選擇。場景1.作為獨(dú)?組件使?2.layui模塊化使?

?前準(zhǔn)備如果你只是單獨(dú)想使?layer，你可以去\hlayer獨(dú)?版本官?下載組件包。你需要在你的??引?jQuery1.8以上的任意版本，并引?layer.js。如果你使?的是layui，那么你直接在官?下載layui框架即可，?需引?jQuery和layer.js，但需要引?layui.css和layui.js

調(diào)??式通過script標(biāo)簽引?layer.js后，直接?即可。通過layui.use('layer',callback)加載模塊1.作為獨(dú)?組件使?layer<!--引?好layer.js后，直接?即可--><scriptsrc="layer.js"></script><script>layer.msg('hello');</script>2.在layui中使?layerlayui.use('layer',function(){varlayer=layui.layer;layer.msg('hello');});.基礎(chǔ)參數(shù)1.type-基本層類型類型：Number，默認(rèn)：0可傳?的值有：0（信息框，默認(rèn)）1（??層）2（iframe層）3（加載層）4（tips層）2.title-標(biāo)題類型：String/Array/Boolean，默認(rèn)：'信息'title?持三種類型的值：若傳?的是普通的字符串，如title:'我是標(biāo)題'，那么只會改變標(biāo)題?本；若需要?定義樣式，可以title:['?本','font-size:18px;']，數(shù)組第?項(xiàng)可以寫任意css樣式；若你不想顯示標(biāo)題欄，可以title:false；3.content-內(nèi)容類型：String/DOM/Array，默認(rèn)：''content可傳?的值是靈活多變的，不僅可以傳?普通的html內(nèi)容，還可以指定DOM。/*信息框*/layer.open({type:0,title:"系統(tǒng)消息",//content可以傳?任意的?本或htmlcontent:"Hello"});/*??層*/layer.open({type:1,title:"系統(tǒng)消息",//content可以傳?任意的?本或htmlcontent:"<divstyle='height:100px;width:200px'>Hello</div>"});/*iframe*/layer.open({type:2,title:"系統(tǒng)消息",//content是?個URL，如果你不想讓iframe出現(xiàn)滾動條，你還可以content:['url','no']content:""http://content:["",'no']});/*tips層*/layer.open({type:4,content:['內(nèi)容','#id']//數(shù)組第?項(xiàng)即吸附元素選擇器或者DOM});4.aea-寬?類型：String/Array，默認(rèn)：'auto'在默認(rèn)狀態(tài)下，layer是寬?都?適應(yīng)的。當(dāng)定義寬度時，你可以area:'500px'，?度仍然是?適應(yīng)的。當(dāng)寬?都要定義時，你可以area:['500px','300px']。5.icon-圖標(biāo)注：信息框和加載層的私有參數(shù)。類型：Number，默認(rèn)：-1（信息框）/0（加載層）信息框默認(rèn)不顯示圖標(biāo)。當(dāng)你想顯示圖標(biāo)時，默認(rèn)層可以傳?0-6。如果是加載層，可以傳?0-2。//eg1layer.alert('酷斃了',{icon:1});//eg2layer.msg('不開?。。',{icon:5});//eg3layer.load(1);//?格1的加載6.示例//eg1layer.alert('很?興?到你 ',{icon:6});//eg2layer.msg('你愿意和我做朋友么？',{time:0,//不?動關(guān)閉btn:['當(dāng)然愿意','狠?拒絕'],//按鈕yes:function(index){layer.close(index);//關(guān)閉當(dāng)前彈出框layer.msg('新朋友，你好！',{icon:6,//圖標(biāo)btn:['開?','快樂']});}});//eg3layer.msg('這是常?的彈出層');//eg4layer.msg('Sosad/(ㄒoㄒ)/~~',{icon:5});//eg5layer.msg('玩命加載中...=￣ω￣=',function(){//關(guān)閉后的操作layer.msg('(⊙o⊙)？');});3.3.2.?期與時間選擇模塊加載名稱：laydate，獨(dú)?版本\h：/aydate/layDat包含了?量的更新，其中主要以：年選擇器、年?選擇器、?期選擇器、時間選擇器、?期時間選擇器五種類型的選擇?式。.快速使?和layer?樣，可以在layui中使?layDate，也可直接使?layDat獨(dú)?版，請按照實(shí)際需求來選擇。場景1.layui模塊化使?2.作為獨(dú)?組件使?

?前準(zhǔn)備下載layui后，引?layui.css和layui.js即可去\hlayDat獨(dú)?版本官?下載組件包，引?laydate.js即可

調(diào)??式通過layui.use('laydate',callback)加載模塊后，再調(diào)??法直接調(diào)??法使?在layui模塊中使?<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>?期與時間選擇</title><linkrel="stylesheet"href="layui/css/layui.css"></head><body><divclass="layui-inline"><inputtype="text"class="layui-input"id="date1"/></div></body><scriptsrc="layui/layui.js"></script><scripttype="text/javascript">layui.use('laydate',function(){varlaydate=layui.laydate;//執(zhí)??個laydate實(shí)例laydate.render({elem:'#date1'//指定元素});});</script></html>.基礎(chǔ)參數(shù)1.elem-綁定元素類型：String/DOM，默認(rèn)值：?必填項(xiàng)，?于綁定執(zhí)??期渲染的元素，值?般為選擇器，或DOM對象laydate.render({elem:'#test'//或elem:document.getElementById('test')、elem:lay('#test')等});2.type-控件選擇類型類型：String，默認(rèn)值：date?于單獨(dú)提供不同的選擇器類型，可選值如下表：type可選值yearmontdatetimdatetime

名稱年選擇器年?選擇器?期選擇器時間選擇器?期時間選擇器

?途只提供年列表選擇只提供年、?選擇可選擇：年、?、?。type默認(rèn)值，?般可不填只提供時、分、秒選擇可選擇：年、?、?、時、分、秒//年選擇器laydate.render({elem:'#test',type:'year'});//年?選擇器laydate.render({elem:'#test',type:'month'});//?期選擇器laydate.render({elem:'#test'//,type:'date'//默認(rèn)，可不填});//時間選擇器laydate.render({elem:'#test',type:'time'});//?期時間選擇器laydate.render({elem:'#test',type:'datetime'});3.format-?定義格式類型：String，默認(rèn)值：yyyy-MM-dd通過?期時間各?的格式符和?度，來設(shè)定?個你所需要的?期格式。layDate?持的格式如下：格式符 說明yyyy 年份，?少四位數(shù)。如果不?四位，則前?補(bǔ)零y 年份，不限制位數(shù)，即不管年份多少位，前?均不補(bǔ)零MM ?份，?少兩位數(shù)。如果不?兩位，則前?補(bǔ)零。M ?份，允許?位數(shù)。dd ?期，?少兩位數(shù)。如果不?兩位，則前?補(bǔ)零。d ?期，允許?位數(shù)。HH ?時，?少兩位數(shù)。如果不?兩位，則前?補(bǔ)零。H ?時，允許?位數(shù)。mm 分鐘，?少兩位數(shù)。如果不?兩位，則前?補(bǔ)零。m 分鐘，允許?位數(shù)。ss 秒數(shù)，?少兩位數(shù)。如果不?兩位，則前?補(bǔ)零。s 秒數(shù)，允許?位數(shù)。通過上述不同的格式符組合成?段?期時間字符串，可任意排版。//?定義?期格式laydate.render({elem:'#test',format:'yyyy年MM?dd?'//可任意組合});4.value-初始值類型：String，默認(rèn)值：newDate()?持傳?符合format參數(shù)設(shè)定的?期格式字符，或者newDate()//傳?符合format格式的字符給初始值laydate.render({elem:'#test',value:'2018-08-18'//必須遵循format參數(shù)設(shè)定的格式});//傳?Date對象給初始值laydate.render({elem:'#test',value:newDate(1534766888000)//參數(shù)即為：2018-08-2020:08:08的時間戳});3.3.3.分?模塊加載名稱：laypage.快速使?laypag的使??常簡單，指向?個?于存放分?的容器，通過服務(wù)端得到?些初始值，即可完成分?渲染。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>分?</title><linkrel="stylesheet"href="layui/css/layui.css"></head><body><divid="test1"></div></body><scriptsrc="layui/layui.js"></script><scripttype="text/javascript">layui.use('laypage',function(){varlaypage=layui.laypage;//執(zhí)??個laypage實(shí)例laypage.render({elem:'test1'//注意，這?的test1是ID，不?加#號,count:50//數(shù)據(jù)總數(shù)，從服務(wù)端得到});});</script></html>.基礎(chǔ)參數(shù)通過核??法：laypage.ender(options)來設(shè)置基礎(chǔ)參數(shù)。參數(shù)選項(xiàng)elemcountlimitlimitscurrgroupsprevnext?rstlastlayoutthemehash

說明指向存放分?的容器，值可以是容器ID、DOM對象。如：1.elem:'id'注意：這?不能加#號2.elem:document.getElementById('id')數(shù)據(jù)總數(shù)。?般通過服務(wù)端得到每?顯示的條數(shù)。laypage將會借助count和limit計算出分?數(shù)。每?條數(shù)的選擇項(xiàng)。如果layout參數(shù)開啟了limit，則會出現(xiàn)每?條數(shù)的select選擇框起始?。?般?于刷新類型的跳?以及HASH跳?。如：//開啟location.hash的記錄laypage.render({elem:'test1',count:500,//獲取起始?curr:location.hash.replace('#!fenye=','')//?定義hash值,hash:'fenye'});`連續(xù)出現(xiàn)的?碼個數(shù)?定義“上??”的內(nèi)容，?持傳?普通?本和HTML?定義“下??”的內(nèi)容，同上?定義“??”的內(nèi)容，同上?定義“尾?”的內(nèi)容，同上?定義排版。可選值有：count（總條?輸區(qū)域）、pv（上??區(qū)域）、page（分?區(qū)域）、nxt（下??區(qū)域）、limit（條?選項(xiàng)區(qū)域）、refresh（??刷新區(qū)域。注意：layui2.3.0新增）、skip（快捷跳?區(qū)域）?定義主題。?持傳?：顏?值，或任意普通字符。如：1.theme:'#c00'2.theme:'xxx'//將會?成class="layui-layxxx"的CSS類，以便?定義主題開啟location.hash，并?定義hash值。如果開啟，在觸發(fā)分?時，會?動對url追加：#!hash值={curr}利?這個，可以在??載?時就定位到指定?

類型String/ObjectNumberNumberArrayNumberNumberStringStringStringStringArrayStringString/Boolean

默認(rèn)值--10[10,20,30,40,50]15上??下??1總?數(shù)值['prev','page','next']-false.jump-切換分?的回調(diào)當(dāng)分?被切換時觸發(fā)，函數(shù)返回兩個參數(shù)：obj（當(dāng)前分?的所有選項(xiàng)值）、?rst（是否?次，?般?于初始加載的判斷）laypage.render({elem:'page',count:100//數(shù)據(jù)總數(shù)，從服務(wù)端得到,groups:10//連續(xù)出現(xiàn)的?碼個數(shù),layout:['prev','page','next','limit','count']//?定義排版,limits:[5,10,20]//layout屬性設(shè)置了limit值，可會出現(xiàn)條數(shù)下拉選擇框,jump:function(obj,first){//obj包含了當(dāng)前分?的所有參數(shù)，?如：console.log(obj.curr);//得到當(dāng)前?，以便向服務(wù)端請求對應(yīng)?的數(shù)據(jù)。console.log(obj.limit);//得到每?顯示的條數(shù)//?次不執(zhí)?if(!first){//dosomething}}});3.3.4.數(shù)據(jù)表格模塊加載名稱：table.快速使?創(chuàng)建?個table實(shí)例最簡單的?式是，在??放置?個元素，然后通過table.ender()?法指定該容器。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>table數(shù)據(jù)表格</title><linkrel="stylesheet"href="layui/css/layui.css"></head><body><tableid="demo"></table></body><scriptsrc="layui/layui.js"type="text/javascript"></script><scripttype="text/javascript">layui.use('table',function(){vartable=layui.table;//第?個實(shí)例table.render({elem:'#demo',url:'user.json'//數(shù)據(jù)接?,cols:[[//表頭{field:'id',title:'ID',width:80,sort:true,fixed:'left'},{field:'username',title:'?戶名',width:80},{field:'sex',title:'性別',width:80,sort:true},{field:'city',title:'城市',width:80},{field:'sign',title:'簽名',width:177}]]});});</script></html>數(shù)據(jù)接?user.json{"code":0,"msg":"","count":50,"data":[{"id":10000,"username":"user-0","sex":"?","city":"城市-0","sign":"簽名-0"},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"簽名-1"},{"id":10002,"username":"user-2","sex":"?","city":"城市-2","sign":"簽名-2"},{"id":10003,"username":"user-3","sex":"?","city":"城市-3","sign":"簽名-3"},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"簽名-4"}]}.三種初始化渲染?式機(jī)制?法渲染?動渲染轉(zhuǎn)換靜態(tài)表格

適?場景?JS?法的配置完成渲染HTML配置，?動渲染轉(zhuǎn)化?段已有的表格元素

（推薦）?需寫過多的HTML，在JS中指定原始元素，再設(shè)定各項(xiàng)參數(shù)即可。?需寫過多JS，可專注于HTML表頭部分?需配置數(shù)據(jù)接?，在JS中指定表格元素，并簡單地給表頭加上?定義屬性即可.?法渲染1.將基礎(chǔ)參數(shù)的設(shè)定放在了JS代碼中，且原始的table標(biāo)簽只需要?個選擇器<tableid="demo"></table>2.渲染表格layui.use('table',function(){vartable=layui.table;//執(zhí)?渲染table.render({elem:'#demo'//指定原始表格元素選擇器（推薦id選擇器）,url:'user.json'//數(shù)據(jù)接?,height:315//容器?度,page:true//開啟分?,cols:[[//設(shè)置表頭{field:'id',title:'ID'},{field:'username',title:'?戶名'},{field:'sex',title:'性別'}]]});});注：table.ender()?法返回?個對象：vartableIns=table.ender(options)，可?于對當(dāng)前表格進(jìn)?“重載”等操作。.?動渲染在?段table容器中配置好相應(yīng)的參數(shù)，由table模塊內(nèi)部?動對其完成渲染，??需你寫初始的渲染?法。1)帶有class="layui-table"的標(biāo)簽。2)對標(biāo)簽設(shè)置屬性lay-data=""?于配置?些基礎(chǔ)參數(shù)3)在標(biāo)簽中設(shè)置屬性lay-data=""?于配置表頭信息<tableclass="layui-table"lay-data="{url:'user.json'}"><thead><tr><thlay-data="{field:'id'}">ID</th><thlay-data="{field:'username'}">?戶名</th><thlay-data="{field:'sex',sort:true}">性別</th></tr></thead></table>.轉(zhuǎn)換靜態(tài)表格??已經(jīng)存在了?段有內(nèi)容的表格，由原始的table標(biāo)簽組成，只需要賦予它?些動態(tài)元素。<tablelay-filter="demo"><thead><tr><thlay-data="{field:'username',width:100}">昵稱</th><thlay-data="{field:'experience',width:80,sort:true}">積分</th><thlay-data="{field:'sign'}">簽名</th></tr></thead><tbody><tr><td>賢?1</td><td>66</td><td>??就像是?場修?a</td></tr></tbody></table>執(zhí)??于轉(zhuǎn)換表格的JS?法layui.use('table',function(){vartable=layui.table;//轉(zhuǎn)換靜態(tài)表格table.init('demo',{height:315//設(shè)置?度//?持所有基礎(chǔ)參數(shù)});});.基礎(chǔ)參數(shù)使?的場景//場景?：下述?法中的鍵值即為基礎(chǔ)參數(shù)項(xiàng)table.render({height:300,url:'user.json'});//場景?：下述lay-data??的內(nèi)容即為基礎(chǔ)參數(shù)項(xiàng)，切記：值要?單引號<tablelay-data="{height:300,url:'user.json'}"lay-filter="demo">……</table>//更多場景：下述options即為含有基礎(chǔ)參數(shù)項(xiàng)的對象>table.init('filter',options);//轉(zhuǎn)化靜態(tài)表格>vartableObj=table.render({});tableObj.reload(options);//重載表格.開啟分?<!--HTML代碼--><tableid="demo"></table>//JS實(shí)現(xiàn)代碼layui.use('table',function(){vartable=layui.table;//執(zhí)?渲染table.render({elem:'#demo'//指定原始表格元素選擇器（推薦id選擇器）,url:'user.json'//數(shù)據(jù)接?,height:315//容器?度,page:true//開啟分?,cols:[[//設(shè)置表頭{field:'id',title:'ID'},{field:'username',title:'?戶名'},{field:'sex',title:'性別'}]]});});.開啟頭部?具欄<tableid="demo"lay-filter="demo"></table><!--表格?具欄--><scripttype="text/html"id="toolbarDemo"><divclass="layui-btn-container"><!--lay-event給元素綁定事件名--><buttonclass="layui-btnlayui-btn-sm"lay-event="getCheckData">獲取選中?數(shù)據(jù)</button><buttonclass="layui-btnlayui-btn-sm"lay-event="getCheckLength">獲取選中數(shù)?</button><buttonclass="layui-btnlayui-btn-sm"lay-event="isAll">驗(yàn)證是否全選</button></div></script><!--表頭?具欄--><scripttype="text/html"id="barDemo"><aclass="layui-btnlayui-btn-xs"lay-event="edit">編輯</a><aclass="layui-btnlayui-btn-dangerlayui-btn-xs"lay-event="del">刪除</a></script>layui.use('table',function(){vartable=layui.table;//執(zhí)?渲染table.render({elem:'#demo'//指定原始表格元素選擇器（推薦id選擇器）,url:'user.json'//數(shù)據(jù)接?,height:315//容器?度,page:true//開啟分?,cols:[[//設(shè)置表頭{field:'id',title:'ID'},{field:'username',title:'?戶名'},{field:'sex',title:'性別'},{title:'操作',toolb

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論