floraachy/layui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.0.9

Browse Source
This commit is contained in:
sentsin 2017-02-28 02:16:08 +08:00
parent e55f6f33d7
commit 1d31b8be24
50 changed files with 389 additions and 450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
CHANGELOG.md
View File

@ -1,21 +1,20 @@
# v1.0.9 2017-02-27
* 新增滑块组件
* select组件增加输入联想功能
* 导航增加三级菜单
* 新增“面板”页面显示结构
* 复选框增加原始风格样式（跟系统自带的类似样貌）
* 升级 layer弹层组件到 3.0.2
* 新增“折叠面板”页面元素及相关事件监听
* select组件增加搜索匹配功能，通过参数 lay-search 开启
* checkbox组件增加原始风格样式，通过设置 lay-skin="primary" 开启（跟系统自带的类似样貌）
* 升级 layer弹层组件到 3.0.2 （相关更新日志见layer主页）
* 分页组件pages的改造、增加总数量、每页显示的数量
* 表单元素增加属性 lay-ignore ,设置后，将不会对对应的标签进行美化渲染
* 开关增加ON/OFF的文字自定义
* 表单元素增加属性 lay-ignore ,设置后，将不会对该标签进行美化渲染，即保留系统风格
* 开关增加两种状态的自定义文本，通过参数 lay-text="ON|OFF" 开启
* 修复Tab选项卡嵌套的Tab没有对应的内容结构时，切换到了父级内容的bug
* 修复Tab选项卡容器中使用下拉框时，被溢出隐藏的问题
* 修复Tab选项卡bug：http://fly.layui.com/jie/7492.html
* 用于操作Tab选项卡的tabAdd/tabDelete/tabChange改动，增加ID，用于在删除和切换时，以id作为匹配媒介
* 修复Tab选项卡溢满情况下，点击展开按钮，再在外部添加一个选项卡出现异常的bug
* Tab选项卡部分UI细节优化
* Tab选项卡的tabAdd增加id参数，用于在删除和切换时，以id作为匹配媒介
* Tab选项卡的tabDelete/tabChange第二个参数有改动，不再是index（索引），而是对应的lay-id的值
---

4
build/css/layui.css
View File

File diff suppressed because one or more lines are too long

2
build/css/layui.mobile.css
View File

File diff suppressed because one or more lines are too long

2
build/css/modules/code.css
View File

@ -1,2 +1,2 @@
/** layui-v1.0.8 MIT License By http://www.layui.com */
/** layui-v1.0.9 MIT License By http://www.layui.com */
html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #ddd;border-left-width:6px;background-color:#F2F2F2;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:30px;line-height:30px;border-bottom:1px solid #ddd}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 5px;border-left:1px solid #ddd;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none}

2
build/css/modules/laydate/laydate.css
View File

File diff suppressed because one or more lines are too long

2
build/css/modules/layer/default/layer.css
View File

File diff suppressed because one or more lines are too long

BIN
build/font/iconfont.eot
View File

Binary file not shown.

12
build/font/iconfont.svg
View File

@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Mon Feb 20 22:44:05 2017
Created by FontForge 20120731 at Mon Feb 27 22:32:26 2017
By admin
</metadata>
<defs>
@ -16,7 +16,7 @@ Created by FontForge 20120731 at Mon Feb 20 22:44:05 2017
ascent="896"
descent="-128"
x-height="792"
bbox="0 -212 1487.11 896"
bbox="0 -212 1385 896"
underline-thickness="0"
underline-position="0"
unicode-range="U+0078-E6FC"
@ -152,8 +152,8 @@ d="M587 671q-10 4 -18 -3l-259 -229h-148q-7 0 -12 -5t-5 -12v-268q0 -7 5 -12t12 -5
q4 0 7 1q10 5 10 16v726q0 11 -10 16v0zM290 171h-115v234h115v-234v0zM748 292q0 -39 -24 -69.5t-61 -40.5h-4q-13 0 -16 12q-2 7 1.5 13t10.5 8q26 7 42.5 28.5t16.5 48.5t-16.5 48.5t-42.5 28.5q-7 2 -10.5 8t-2 12.5t7.5 10t13 2.5q37 -10 61 -40.5t24 -69.5v0zM865 292
q0 -67 -34 -124t-93 -89q-4 -2 -8 -2q-10 0 -14 9q-4 6 -2 12.5t8 9.5q51 28 80 77t29 107q0 57 -29.5 106.5t-79.5 77.5q-6 3 -8 9.5t1 12.5t9.5 8t13.5 -1q59 -32 93 -89t34 -124v0z" />
<glyph glyph-name="xiangxia" unicode="&#xe61a;"
d="M888 705q12 12 28.5 12t28.5 -12v0q12 -11 12 -28t-12 -28l-406 -406q-12 -12 -28.5 -12t-27.5 12v0q-12 12 -12 28.5t12 28.5l405 405v0zM539 300q11 -12 11 -28.5t-11 -28.5v0q-12 -12 -28.5 -12t-28.5 12l-406 406q-11 11 -11 28t11 28v0q12 12 28.5 12t28.5 -12
l406 -405v0zM539 300z" />
d="M888 620q12 12 28.5 12t28.5 -12v0q12 -12 12 -28.5t-12 -28.5l-406 -405q-12 -12 -28.5 -12t-27.5 12v0q-12 11 -12 27.5t12 28.5zM539 214q11 -12 11 -28.5t-11 -27.5v0q-12 -12 -28.5 -12t-28.5 12l-406 405q-11 12 -11 28.5t11 28.5v0q12 12 28.5 12t28.5 -12z
M539 214z" />
<glyph glyph-name="wenjian" unicode="&#xe621;"
d="M887 515v-45v-45v-478q0 -29 -20 -49t-48 -20h-614q-29 0 -48.5 20t-19.5 49v705q0 28 20 48t48 20h387h45h38q14 5 23 -5l183 -183q7 -7 6 -17zM660 447q-10 0 -16.5 7t-6.5 16v205h-45h-364q-19 0 -32.5 -13.5t-13.5 -32.5v-660q0 -18 13.5 -31.5t32.5 -13.5h568
q19 0 32.5 13.5t13.5 31.5v456v22h-182zM683 666v-173h159v14z" />
@ -161,8 +161,8 @@ q19 0 32.5 13.5t13.5 31.5v456v22h-182zM683 666v-173h159v14z" />
d="M917 -103h-810q-18 0 -30 12t-12 30v698q0 18 12 30t30 12h810q18 0 30 -12t12 -30v-698q0 -18 -12 -30t-30 -12zM316 -61h601v363h-601v-363zM107 -61h167v363h-167v-363zM148.5 637q-17.5 0 -29.5 -12t-12 -29.5t12 -30t29.5 -12.5t30 12.5t12.5 30t-12.5 29.5t-30 12z
M274.5 637q-17.5 0 -29.5 -12t-12 -29.5t12 -30t29.5 -12.5t29.5 12.5t12 30t-12 29.5t-29.5 12zM400.5 637q-17.5 0 -30 -12t-12.5 -29.5t12.5 -30t30 -12.5t29.5 12.5t12 30t-12 29.5t-29.5 12zM875 512h-768v-168h810v168h-42z" />
<glyph glyph-name="duigou" unicode="&#xe618;" horiz-adv-x="1600"
d="M1064 480zM811 263zM0 -31l1 -1q-1 0 -1 1zM423 -32v1h1q0 -1 -1 -1zM1487 465q1 -7 -7 -11q-95 -39 -170.5 -108t-144.5 -165q-70 -99 -123 -216q-5 -11 -8.5 -12t-11.5 7q-59 58 -263 258q-29 29 -38 37q-7 6 -7 10.5t9 8.5q63 29 99 49q17 9 32 -6q32 -31 164 -162
q12 -11 15 -10.5t8 16.5q27 77 96 194q107 179 275 405q0 1 2 4.5t4 5t4.5 0.5t3.5 -3t1 -5.5v-4.5q15 -70 59 -288z" />
d="M0 -31l1 -1q-1 0 -1 1zM423 -32q0 1 1 1q0 -1 -1 -1zM1189 507q0 -7 -8 -10q-95 -40 -170.5 -108.5t-144.5 -165.5q-70 -98 -123 -216q-5 -10 -8.5 -11t-11.5 7q-59 58 -262 258q-30 29 -39 37q-7 6 -7 10.5t10 8.5q62 29 98 48q18 10 33 -5q31 -32 164 -162
q12 -12 14.5 -11t7.5 17q27 77 97 193q107 180 274 406q0 1 2 4.5t4 4.5t4.5 0.5t3.5 -2.5t1 -5.5v-5.5q15 -69 60 -287z" />
<glyph glyph-name="tianjia1" unicode="&#xe608;"
d="M510 -61q-91 0 -173.5 35.5t-142.5 95t-95.5 142.5t-35.5 174t35.5 173.5t95.5 142.5t142.5 95.5t173.5 35.5t173.5 -35.5t142.5 -95.5t95.5 -142.5t35.5 -173.5t-35.5 -174t-95.5 -142.5t-142.5 -95t-173.5 -35.5v0zM510 812q-116 0 -214 -57t-155.5 -155t-57.5 -214
t57.5 -214.5t155.5 -155.5t214 -57t214 57t155.5 155.5t57.5 214.5t-57.5 214t-155.5 155t-214 57v0zM528 153h-36v215h-214v36h214v214h36v-214h214v-36h-214v-215v0zM528 153z" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 59 KiB

BIN
build/font/iconfont.ttf
View File

Binary file not shown.

BIN
build/font/iconfont.woff
View File

Binary file not shown.

6
build/lay/dest/layui.all.js
View File

File diff suppressed because one or more lines are too long

2
build/lay/modules/code.js
View File

@ -1,2 +1,2 @@
/** layui-v1.0.8 MIT License By http://www.layui.com */
/** layui-v1.0.9 MIT License By http://www.layui.com */
;layui.define("jquery",function(e){"use strict";var a=layui.jquery,l="http://www.layui.com/doc/modules/code.html";e("code",function(e){var t=[];e=e||{},e.elem=a(e.elem||".layui-code"),e.about=!("about"in e)||e.about,e.elem.each(function(){t.push(this)}),layui.each(t.reverse(),function(t,i){var c=a(i),o=c.html();(c.attr("lay-encode")||e.encode)&&(o=o.replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/'/g,"&#39;").replace(/"/g,"&quot;")),c.html('<ol class="layui-code-ol"><li>'+o.replace(/[\r\t\n]+/g,"</li><li>")+"</li></ol>"),c.find(">.layui-code-h3")[0]||c.prepend('<h3 class="layui-code-h3">'+(c.attr("lay-title")||e.title||"code")+(e.about?'<a href="'+l+'" target="_blank">layui.code</a>':"")+"</h3>");var d=c.find(">.layui-code-ol");c.addClass("layui-box layui-code-view"),(c.attr("lay-skin")||e.skin)&&c.addClass("layui-code-"+(c.attr("lay-skin")||e.skin)),(d.find("li").length/100|0)>0&&d.css("margin-left",(d.find("li").length/100|0)+"px"),(c.attr("lay-height")||e.height)&&d.css("max-height",c.attr("lay-height")||e.height)})})}).addcss("modules/code.css","skincodecss");

4
build/lay/modules/element.js
View File

File diff suppressed because one or more lines are too long

2
build/lay/modules/flow.js
View File

@ -1,2 +1,2 @@
/** layui-v1.0.8 MIT License By http://www.layui.com */
/** layui-v1.0.9 MIT License By http://www.layui.com */
;layui.define("jquery",function(e){"use strict";var l=layui.jquery,o=function(e){},t='<i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon ">&#xe63e;</i>';o.prototype.load=function(e){var o,i,n,r,a=this,c=0;e=e||{};var u=l(e.elem);if(u[0]){var f=l(e.scrollElem||document),m=e.mb||50,s=!("isAuto"in e)||e.isAuto,y=e.end||"没有更多了",v=e.scrollElem&&e.scrollElem!==document,d="<cite>加载更多</cite>",h=l('<div class="layui-flow-more"><a href="javascript:;">'+d+"</a></div>");u.find(".layui-flow-more")[0]||u.append(h);var p=function(e,t){e=l(e),h.before(e),t=0==t||null,t?h.html(y):h.find("a").html(d),i=t,o=null,n&&n()},g=function(){o=!0,h.find("a").html(t),"function"==typeof e.done&&e.done(++c,p)};if(g(),h.find("a").on("click",function(){l(this);i||o||g()}),e.isLazyimg)var n=a.lazyimg({elem:e.elem+" img",scrollElem:e.scrollElem});return s?(f.on("scroll",function(){var e=l(this),t=e.scrollTop();r&&clearTimeout(r),i||(r=setTimeout(function(){var i=v?e.height():l(window).height(),n=v?e.prop("scrollHeight"):document.documentElement.scrollHeight;n-t-i<=m&&(o||g())},100))}),a):a}},o.prototype.lazyimg=function(e){var o,t=this,i=0;e=e||{};var n=l(e.scrollElem||document),r=e.elem||"img",a=e.scrollElem&&e.scrollElem!==document,c=function(e,l){var o=n.scrollTop(),r=o+l,c=a?function(){return e.offset().top-n.offset().top+o}():e.offset().top;if(c>=o&&c<=r&&!e.attr("src")){var f=e.attr("lay-src");layui.img(f,function(){var l=t.lazyimg.elem.eq(i);e.attr("src",f).removeAttr("lay-src"),l[0]&&u(l),i++})}},u=function(e,o){var u=a?(o||n).height():l(window).height(),f=n.scrollTop(),m=f+u;if(t.lazyimg.elem=l(r),e)c(e,u);else for(var s=0;s<t.lazyimg.elem.length;s++){var y=t.lazyimg.elem.eq(s),v=a?function(){return y.offset().top-n.offset().top+f}():y.offset().top;if(c(y,u),i=s,v>m)break}};if(u(),!o){var f;n.on("scroll",function(){var e=l(this);f&&clearTimeout(f),f=setTimeout(function(){u(null,e)},50)}),o=!0}return u},e("flow",new o)});

4
build/lay/modules/form.js
View File

File diff suppressed because one or more lines are too long

2
build/lay/modules/jquery.js vendored
View File

File diff suppressed because one or more lines are too long

2
build/lay/modules/laydate.js
View File

File diff suppressed because one or more lines are too long

2
build/lay/modules/layedit.js
View File

File diff suppressed because one or more lines are too long

2
build/lay/modules/layer.js
View File

File diff suppressed because one or more lines are too long

2
build/lay/modules/laypage.js
View File

@ -1,2 +1,2 @@
/** layui-v1.0.8 MIT License By http://www.layui.com */
/** layui-v1.0.9 MIT License By http://www.layui.com */
;layui.define(function(a){"use strict";function t(a){new p(a)}var e=document,r="getElementById",n="getElementsByTagName",s=0,p=function(a){var t=this,e=t.config=a||{};e.item=s++,t.render(!0)};p.on=function(a,t,e){return a.attachEvent?a.attachEvent("on"+t,function(){e.call(a,window.even)}):a.addEventListener(t,e,!1),p},p.prototype.type=function(){var a=this.config;if("object"==typeof a.cont)return void 0===a.cont.length?2:3},p.prototype.view=function(){var a=this,t=a.config,e=[],r={};if(t.pages=0|t.pages,t.curr=0|t.curr||1,t.groups="groups"in t?0|t.groups:5,t.first="first"in t?t.first:"&#x9996;&#x9875;",t.last="last"in t?t.last:"&#x672B;&#x9875;",t.prev="prev"in t?t.prev:"&#x4E0A;&#x4E00;&#x9875;",t.next="next"in t?t.next:"&#x4E0B;&#x4E00;&#x9875;",t.pages<=1)return"";for(t.groups>t.pages&&(t.groups=t.pages),r.index=Math.ceil((t.curr+(t.groups>1&&t.groups!==t.pages?1:0))/(0===t.groups?1:t.groups)),t.curr>1&&t.prev&&e.push('<a href="javascript:;" class="layui-laypage-prev" data-page="'+(t.curr-1)+'">'+t.prev+"</a>"),r.index>1&&t.first&&0!==t.groups&&e.push('<a href="javascript:;" class="laypage_first" data-page="1" title="&#x9996;&#x9875;">'+t.first+"</a><span>&#x2026;</span>"),r.poor=Math.floor((t.groups-1)/2),r.start=r.index>1?t.curr-r.poor:1,r.end=r.index>1?function(){var a=t.curr+(t.groups-r.poor-1);return a>t.pages?t.pages:a}():t.groups,r.end-r.start<t.groups-1&&(r.start=r.end-t.groups+1);r.start<=r.end;r.start++)r.start===t.curr?e.push('<span class="layui-laypage-curr"><em class="layui-laypage-em" '+(/^#/.test(t.skin)?'style="background-color:'+t.skin+';"':"")+"></em><em>"+r.start+"</em></span>"):e.push('<a href="javascript:;" data-page="'+r.start+'">'+r.start+"</a>");return t.pages>t.groups&&r.end<t.pages&&t.last&&0!==t.groups&&e.push('<span>&#x2026;</span><a href="javascript:;" class="layui-laypage-last" title="&#x5C3E;&#x9875;" data-page="'+t.pages+'">'+t.last+"</a>"),r.flow=!t.prev&&0===t.groups,(t.curr!==t.pages&&t.next||r.flow)&&e.push(function(){return r.flow&&t.curr===t.pages?'<span class="layui-laypage-nomore" title="&#x5DF2;&#x6CA1;&#x6709;&#x66F4;&#x591A;">'+t.next+"</span>":'<a href="javascript:;" class="layui-laypage-next" data-page="'+(t.curr+1)+'">'+t.next+"</a>"}()),'<div class="layui-box layui-laypage layui-laypage-'+(t.skin?function(a){return/^#/.test(a)?"molv":a}(t.skin):"default")+'" id="layui-laypage-'+a.config.item+'">'+e.join("")+function(){return t.skip?'<span class="layui-laypage-total">&#x5230;&#x7B2C; <input type="number" min="1" onkeyup="this.value=this.value.replace(/\\D/, \'\');" value="'+t.curr+'" class="layui-laypage-skip"> &#x9875; <button type="button" class="layui-laypage-btn">&#x786e;&#x5b9a;</button></span>':""}()+"</div>"},p.prototype.jump=function(a){if(a){for(var t=this,e=t.config,r=a.children,s=a[n]("button")[0],i=a[n]("input")[0],u=0,o=r.length;u<o;u++)"a"===r[u].nodeName.toLowerCase()&&p.on(r[u],"click",function(){var a=0|this.getAttribute("data-page");e.curr=a,t.render()});s&&p.on(s,"click",function(){var a=0|i.value.replace(/\s|\D/g,"");a&&a<=e.pages&&(e.curr=a,t.render())})}},p.prototype.render=function(a){var t=this,n=t.config,s=t.type(),p=t.view();2===s?n.cont.innerHTML=p:3===s?n.cont.html(p):e[r](n.cont).innerHTML=p,n.jump&&n.jump(n,a),t.jump(e[r]("layui-laypage-"+n.item)),n.hash&&!a&&(location.hash="!"+n.hash+"="+n.curr)},a("laypage",t)});

2
build/lay/modules/laytpl.js
View File

@ -1,2 +1,2 @@
/** layui-v1.0.8 MIT License By http://www.layui.com */
/** layui-v1.0.9 MIT License By http://www.layui.com */
;layui.define(function(e){"use strict";var r={open:"{{",close:"}}"},n={exp:function(e){return new RegExp(e,"g")},query:function(e,n,t){var o=["#([\\s\\S])+?","([^{#}])*?"][e||0];return c((n||"")+r.open+o+r.close+(t||""))},escape:function(e){return String(e||"").replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/'/g,"&#39;").replace(/"/g,"&quot;")},error:function(e,r){var n="Laytpl Error：";return"object"==typeof console&&console.error(n+e+"\n"+(r||"")),n+e}},c=n.exp,t=function(e){this.tpl=e};t.pt=t.prototype,window.errors=0,t.pt.parse=function(e,t){var o=this,p=e,a=c("^"+r.open+"#",""),l=c(r.close+"$","");e=e.replace(/\s+|\r|\t|\n/g," ").replace(c(r.open+"#"),r.open+"# ").replace(c(r.close+"}"),"} "+r.close).replace(/\\/g,"\\\\").replace(/(?="|')/g,"\\").replace(n.query(),function(e){return e=e.replace(a,"").replace(l,""),'";'+e.replace(/\\/g,"")+';view+="'}).replace(n.query(1),function(e){var n='"+(';return e.replace(/\s/g,"")===r.open+r.close?"":(e=e.replace(c(r.open+"|"+r.close),""),/^=/.test(e)&&(e=e.replace(/^=/,""),n='"+_escape_('),n+e.replace(/\\/g,"")+')+"')}),e='"use strict";var view = "'+e+'";return view;';try{return o.cache=e=new Function("d, _escape_",e),e(t,n.escape)}catch(u){return delete o.cache,n.error(u,p)}},t.pt.render=function(e,r){var c,t=this;return e?(c=t.cache?t.cache(e,n.escape):t.parse(t.tpl,e),r?void r(c):c):n.error("no data")};var o=function(e){return"string"!=typeof e?n.error("Template not found"):new t(e)};o.config=function(e){e=e||{};for(var n in e)r[n]=e[n]},o.v="1.2.0",e("laytpl",o)});

2
build/lay/modules/mobile.js
View File

File diff suppressed because one or more lines are too long

2
build/lay/modules/tree.js
View File

@ -1,2 +1,2 @@
/** layui-v1.0.8 MIT License By http://www.layui.com */
/** layui-v1.0.9 MIT License By http://www.layui.com */
;layui.define("jquery",function(e){"use strict";var o=layui.jquery,a=layui.hint(),r="layui-tree-enter",i=function(e){this.options=e},t={arrow:["&#xe623;","&#xe625;"],checkbox:["&#xe626;","&#xe627;"],radio:["&#xe62b;","&#xe62a;"],branch:["&#xe622;","&#xe624;"],leaf:"&#xe621;"};i.prototype.init=function(e){var o=this;e.addClass("layui-box layui-tree"),o.options.skin&&e.addClass("layui-tree-skin-"+o.options.skin),o.tree(e),o.on(e)},i.prototype.tree=function(e,a){var r=this,i=r.options,n=a||i.nodes;layui.each(n,function(a,n){var l=n.children&&n.children.length>0,c=o('<ul class="'+(n.spread?"layui-show":"")+'"></ul>'),s=o(["<li "+(n.spread?'data-spread="'+n.spread+'"':"")+">",function(){return l?'<i class="layui-icon layui-tree-spread">'+(n.spread?t.arrow[1]:t.arrow[0])+"</i>":""}(),function(){return i.check?'<i class="layui-icon layui-tree-check">'+("checkbox"===i.check?t.checkbox[0]:"radio"===i.check?t.radio[0]:"")+"</i>":""}(),function(){return'<a href="'+(n.href||"javascript:;")+'" '+(i.target&&n.href?'target="'+i.target+'"':"")+">"+('<i class="layui-icon layui-tree-'+(l?"branch":"leaf")+'">'+(l?n.spread?t.branch[1]:t.branch[0]:t.leaf)+"</i>")+("<cite>"+(n.name||"未命名")+"</cite></a>")}(),"</li>"].join(""));l&&(s.append(c),r.tree(c,n.children)),e.append(s),"function"==typeof i.click&&r.click(s,n),r.spread(s,n),i.drag&&r.drag(s,n)})},i.prototype.click=function(e,o){var a=this,r=a.options;e.children("a").on("click",function(e){layui.stope(e),r.click(o)})},i.prototype.spread=function(e,o){var a=this,r=(a.options,e.children(".layui-tree-spread")),i=e.children("ul"),n=e.children("a"),l=function(){e.data("spread")?(e.data("spread",null),i.removeClass("layui-show"),r.html(t.arrow[0]),n.find(".layui-icon").html(t.branch[0])):(e.data("spread",!0),i.addClass("layui-show"),r.html(t.arrow[1]),n.find(".layui-icon").html(t.branch[1]))};i[0]&&(r.on("click",l),n.on("dblclick",l))},i.prototype.on=function(e){var a=this,i=a.options,t="layui-tree-drag";e.find("i").on("selectstart",function(e){return!1}),i.drag&&o(document).on("mousemove",function(e){var r=a.move;if(r.from){var i=(r.to,o('<div class="layui-box '+t+'"></div>'));e.preventDefault(),o("."+t)[0]||o("body").append(i);var n=o("."+t)[0]?o("."+t):i;n.addClass("layui-show").html(r.from.elem.children("a").html()),n.css({left:e.pageX+10,top:e.pageY+10})}}).on("mouseup",function(){var e=a.move;e.from&&(e.from.elem.children("a").removeClass(r),e.to&&e.to.elem.children("a").removeClass(r),a.move={},o("."+t).remove())})},i.prototype.move={},i.prototype.drag=function(e,a){var i=this,t=(i.options,e.children("a")),n=function(){var t=o(this),n=i.move;n.from&&(n.to={item:a,elem:e},t.addClass(r))};t.on("mousedown",function(){var o=i.move;o.from={item:a,elem:e}}),t.on("mouseenter",n).on("mousemove",n).on("mouseleave",function(){var e=o(this),a=i.move;a.from&&(delete a.to,e.removeClass(r))})},e("tree",function(e){var r=new i(e=e||{}),t=o(e.elem);return t[0]?void r.init(t):a.error("layui.tree 没有找到"+e.elem+"元素")})});

2
build/lay/modules/upload.js
View File

@ -1,2 +1,2 @@
/** layui-v1.0.8 MIT License By http://www.layui.com */
/** layui-v1.0.9 MIT License By http://www.layui.com */
;layui.define("layer",function(e){"use strict";var a=layui.jquery,t=layui.layer,i=(layui.device(),"layui-upload-enter"),n="layui-upload-iframe",r={icon:2,shift:6},o={file:"文件",video:"视频",audio:"音频"},s=function(e){this.options=e};s.prototype.init=function(){var e=this,t=e.options,r=a("body"),s=a(t.elem||".layui-upload-file"),u=a('<iframe id="'+n+'" class="'+n+'" name="'+n+'"></iframe>');return a("#"+n)[0]||r.append(u),s.each(function(r,s){s=a(s);var u='<form target="'+n+'" method="'+(t.method||"post")+'" key="set-mine" enctype="multipart/form-data" action="'+(t.url||"")+'"></form>',l=s.attr("lay-type")||t.type;t.unwrap||(u='<div class="layui-box layui-upload-button">'+u+'<span class="layui-upload-icon"><i class="layui-icon">&#xe608;</i>'+(s.attr("lay-title")||t.title||"上传"+(o[l]||"图片"))+"</span></div>"),u=a(u),t.unwrap||u.on("dragover",function(e){e.preventDefault(),a(this).addClass(i)}).on("dragleave",function(){a(this).removeClass(i)}).on("drop",function(){a(this).removeClass(i)}),s.parent("form").attr("target")===n&&(t.unwrap?s.unwrap():(s.parent().next().remove(),s.unwrap().unwrap())),s.wrap(u),s.off("change").on("change",function(){e.action(this,l)})})},s.prototype.action=function(e,i){var o=this,s=o.options,u=e.value,l=a(e),p=l.attr("lay-ext")||s.ext||"";if(u){switch(i){case"file":if(p&&!RegExp("\\w\\.("+p+")$","i").test(escape(u)))return t.msg("不支持该文件格式",r),e.value="";break;case"video":if(!RegExp("\\w\\.("+(p||"avi|mp4|wma|rmvb|rm|flash|3gp|flv")+")$","i").test(escape(u)))return t.msg("不支持该视频格式",r),e.value="";break;case"audio":if(!RegExp("\\w\\.("+(p||"mp3|wav|mid")+")$","i").test(escape(u)))return t.msg("不支持该音频格式",r),e.value="";break;default:if(!RegExp("\\w\\.("+(p||"jpg|png|gif|bmp|jpeg")+")$","i").test(escape(u)))return t.msg("不支持该图片格式",r),e.value=""}s.before&&s.before(e),l.parent().submit();var c=a("#"+n),f=setInterval(function(){var a;try{a=c.contents().find("body").text()}catch(i){t.msg("上传接口存在跨域",r),clearInterval(f)}if(a){clearInterval(f),c.contents().find("body").html("");try{a=JSON.parse(a)}catch(i){return a={},t.msg("请对上传接口返回JSON字符",r)}"function"==typeof s.success&&s.success(a,e)}},30);e.value=""}},e("upload",function(e){var a=new s(e=e||{});a.init()})});

2
build/lay/modules/util.js
View File

@ -1,2 +1,2 @@
/** layui-v1.0.8 MIT License By http://www.layui.com */
/** layui-v1.0.9 MIT License By http://www.layui.com */
;layui.define("jquery",function(l){"use strict";var o=layui.jquery,i={fixbar:function(l){l=l||{},l.bgcolor=l.bgcolor?"background-color:"+l.bgcolor:"";var i,a,c="layui-fixbar-top",t=[l.bar1===!0?"&#xe606;":l.bar1,l.bar2===!0?"&#xe607;":l.bar2,"&#xe604;"],r=o(['<ul class="layui-fixbar">',l.bar1?'<li class="layui-icon" lay-type="bar1" style="'+l.bgcolor+'">'+t[0]+"</li>":"",l.bar2?'<li class="layui-icon" lay-type="bar2" style="'+l.bgcolor+'">'+t[1]+"</li>":"",'<li class="layui-icon '+c+'" lay-type="top" style="'+l.bgcolor+'">'+t[2]+"</li>","</ul>"].join("")),e=r.find("."+c),s=function(){var i=o(document).scrollTop();i>=(l.showHeight||200)?a||(e.show(),a=1):a&&(e.hide(),a=0)};o(".layui-fixbar")[0]||("object"==typeof l.css&&r.css(l.css),o("body").append(r),s(),r.find("li").on("click",function(){var i=o(this),a=i.attr("lay-type");"top"===a&&o("html,body").animate({scrollTop:0},200),l.click&&l.click.call(this,a)}),o(document).on("scroll",function(){i&&clearTimeout(i),i=setTimeout(function(){s()},100)}))}};l("util",i)});

4
build/layui.js
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "layui",
"version": "1.0.8",
"version": "1.0.9",
"description": "经典模块化前端框架",
"main": "layui.js",
"license": "MIT",

52
src/css/layui.css
View File

@ -29,11 +29,11 @@ pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; w
/** 图标字体 **/
@font-face {font-family: 'layui-icon';
src: url('../font/iconfont.eot?v=1.0.8');
src: url('../font/iconfont.eot?v=1.0.8#iefix') format('embedded-opentype'),
url('../font/iconfont.woff?v=1.0.8') format('woff'),
url('../font/iconfont.ttf?v=1.0.8') format('truetype'),
url('../font/iconfont.svg?v=1.0.8#iconfont') format('svg');
src: url('../font/iconfont.eot?v=1.0.9');
src: url('../font/iconfont.eot?v=1.0.9#iefix') format('embedded-opentype'),
url('../font/iconfont.woff?v=1.0.9') format('woff'),
url('../font/iconfont.ttf?v=1.0.9') format('truetype'),
url('../font/iconfont.svg?v=1.0.9#iconfont') format('svg');
}
.layui-icon{
@ -98,7 +98,15 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-progress-big,
.layui-progress-big .layui-progress-bar{height: 18px; line-height: 18px; text-align: right;}
.layui-progress-text{position: absolute; right: 0; top: -16px; line-height: 18px; font-size: 12px; color: #666}
.layui-progress-big .layui-progress-text{position: static; padding: 0 10px; color: #fff;}}
.layui-progress-big .layui-progress-text{position: static; padding: 0 10px; color: #fff;}
/* 折叠面板 */
.layui-collapse{border: 1px solid #e2e2e2; border-radius: 2px;}
.layui-colla-item{border-top: 1px solid #e2e2e2}
.layui-colla-item:first-child{border-top: none;}
.layui-colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #f2f2f2; cursor: pointer;}
.layui-colla-content{display: none; padding: 10px 15px; line-height: 22px; border-top: 1px solid #e2e2e2; color: #666;}
.layui-colla-icon{position: absolute; left: 15px; top: 0; font-size: 14px;}
/* 背景颜色 */
@ -186,6 +194,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-selected .layui-edge{margin-top: -9px; -webkit-transform:rotate(180deg); transform: rotate(180deg);}
.layui-form-selected .layui-edge{margin-top: -3px\0; }
:root .layui-form-selected .layui-edge{margin-top: -9px\0/IE9;}
.layui-select-none{margin: 5px 0; text-align: center; color: #999;}
.layui-select-disabled .layui-disabled{border-color: #eee !important;}
.layui-select-disabled .layui-edge{border-top-color: #d2d2d2}
@ -195,17 +204,26 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-form-checkbox *{display: inline-block; vertical-align: middle;}
.layui-form-checkbox span{padding: 0 10px; height: 100%; font-size: 14px; background-color: #d2d2d2; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.layui-form-checkbox:hover span{background-color: #c2c2c2;}
.layui-form-checkbox i{position: absolute; right: 0; width: 37px; color: #fff; font-size: 20px;}
.layui-form-checkbox i{position: absolute; right: 0; width: 30px; color: #fff; font-size: 20px; text-align: center;}
.layui-form-checkbox:hover i{color: #c2c2c2;}
.layui-form-checked, .layui-form-checked:hover{border: 1px solid #5FB878;}
.layui-form-checked, .layui-form-checked:hover{border-color: #5FB878;}
.layui-form-checked span, .layui-form-checked:hover span{background-color: #5FB878;}
.layui-form-checked i, .layui-form-checked:hover i{color: #5FB878;}
/* 复选框-开关风格 */.layui-form-switch{position: relative; display: inline-block; vertical-align: middle; height: 22px; line-height: 22px; width: 40px; padding: 0 5px; margin-top: 8px; border: 1px solid #d2d2d2; border-radius: 20px; cursor: pointer; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
/* 复选框-原始风格 */.layui-form-checkbox[lay-skin="primary"]{margin-top: 6px; border: none!important; padding-right: 0;}
.layui-form-checkbox[lay-skin="primary"] span{float: right; background: none; color: #666;}
.layui-form-checkbox[lay-skin="primary"] i{position: relative; top: 0; width: 16px; line-height: 16px; border: 1px solid #d2d2d2; font-size: 12px; border-radius: 2px; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-checkbox[lay-skin="primary"]:hover i{border-color: #5FB878; color: #fff;}
.layui-form-checked[lay-skin="primary"] i{border-color: #5FB878; background-color: #5FB878; color: #fff;}
.layui-checkbox-disbaled[lay-skin="primary"] span{background: none!important;}
.layui-checkbox-disbaled[lay-skin="primary"]:hover i{border-color: #d2d2d2;}
/* 复选框-开关风格 */.layui-form-switch{position: relative; display: inline-block; vertical-align: middle; height: 22px; line-height: 22px; width: 42px; padding: 0 5px; margin-top: 8px; border: 1px solid #d2d2d2; border-radius: 20px; cursor: pointer; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-switch i{position: absolute; left: 5px; top: 3px; width: 16px; height: 16px; border-radius: 20px; background-color: #d2d2d2; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-switch em{position: absolute; right: 5px; top: 0; width: 25px; padding: 0!important; text-align: center!important; color: #999!important; font-style: normal!important; font-size: 12px;}
.layui-form-onswitch{border-color: #5FB878; background-color: #5FB878;}
.layui-form-onswitch:before{content: 'ON'; color: #fff;}
.layui-form-onswitch i{left: 30px; background-color: #fff;}
.layui-form-onswitch i{left: 32px; background-color: #fff;}
.layui-form-onswitch em{left: 5px; right: auto; color: #fff!important;}
.layui-checkbox-disbaled{border-color: #e2e2e2 !important;}
.layui-checkbox-disbaled span{background-color: #e2e2e2 !important;}
@ -402,15 +420,16 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-breadcrumb a span{padding-left: 8px; font-family: Sim sun;}
/** Tab选项卡 **/
.layui-tab{margin: 10px 0; overflow: hidden; text-align: left !important;}
.layui-tab{margin: 10px 0; text-align: left !important;}
.layui-tab[overflow]>.layui-tab-title{overflow: hidden;}
.layui-tab-title{position: relative; left: 0; height: 40px; white-space: nowrap; font-size: 0; border-bottom: 1px solid #e2e2e2; transition: all .2s; -webkit-transition: all .2s;}
.layui-tab-title li{display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-size: 14px; transition: all .3s; -webkit-transition: all .3s;}
.layui-tab-title li{display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; font-size: 14px; transition: all .2s; -webkit-transition: all .2s;}
.layui-tab-title li{position: relative; line-height: 40px; min-width: 65px; padding: 0 10px; text-align: center; cursor: pointer;}
.layui-tab-title li a{display: block;}
.layui-tab-title .layui-this{color: #000;}
.layui-tab-title .layui-this:after{position: absolute; left:0; top: 0; content: ''; width:100%; height: 41px; border: 1px solid #e2e2e2; border-bottom-color: #fff; border-radius: 2px 2px 0 0; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important; pointer-events: none;}
.layui-tab-bar{position: absolute; right: 0; top: 0; width: 30px; height: 39px; line-height: 39px; border: 1px solid #e2e2e2; border-radius: 2px; text-align: center; background-color: #fff; cursor: pointer;}
.layui-tab-bar{position: absolute; right: 0; top: 0; z-index: 10; width: 30px; height: 39px; line-height: 39px; border: 1px solid #e2e2e2; border-radius: 2px; text-align: center; background-color: #fff; cursor: pointer;}
.layui-tab-bar .layui-icon{position: relative; display: inline-block; top: 3px; transition: all .3s; -webkit-transition: all .3s;}
.layui-tab-item{display: none;}
.layui-tab-more{padding-right: 30px; height: auto; white-space: normal;}
@ -420,12 +439,13 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-tab-content{padding: 10px;}
/* Tab关闭 */.layui-tab-title li .layui-tab-close{ position: relative; margin-left: 8px; top: 1px; color: #c2c2c2;}
.layui-tab-title li .layui-tab-close:hover{border-radius: 10px; background-color: #FF5722; color: #fff;}
/* Tab关闭 */.layui-tab-title li .layui-tab-close{ position: relative; margin-left: 8px; top: 1px; color: #c2c2c2; transition: all .2s; -webkit-transition: all .2s;}
.layui-tab-title li .layui-tab-close:hover{border-radius: 2px; background-color: #FF5722; color: #fff;}
/* Tab简洁风格 */.layui-tab-brief > .layui-tab-title .layui-this{color: #009688;}
.layui-tab-brief > .layui-tab-title .layui-this:after
,.layui-tab-brief > .layui-tab-more li.layui-this:after{border: none; border-radius: 0; border-bottom: 3px solid #5FB878;}
.layui-tab-brief[overflow] > .layui-tab-title .layui-this:after{top: -1px;}
/* Tab卡片风格 */.layui-tab-card{border: 1px solid #e2e2e2; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.layui-tab-card > .layui-tab-title{ background-color: #f2f2f2;}

BIN
src/font/iconfont.eot
View File

Binary file not shown.

12
src/font/iconfont.svg
View File

@ -2,7 +2,7 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
Created by FontForge 20120731 at Mon Feb 20 22:44:05 2017
Created by FontForge 20120731 at Mon Feb 27 22:32:26 2017
By admin
</metadata>
<defs>
@ -16,7 +16,7 @@ Created by FontForge 20120731 at Mon Feb 20 22:44:05 2017
ascent="896"
descent="-128"
x-height="792"
bbox="0 -212 1487.11 896"
bbox="0 -212 1385 896"
underline-thickness="0"
underline-position="0"
unicode-range="U+0078-E6FC"
@ -152,8 +152,8 @@ d="M587 671q-10 4 -18 -3l-259 -229h-148q-7 0 -12 -5t-5 -12v-268q0 -7 5 -12t12 -5
q4 0 7 1q10 5 10 16v726q0 11 -10 16v0zM290 171h-115v234h115v-234v0zM748 292q0 -39 -24 -69.5t-61 -40.5h-4q-13 0 -16 12q-2 7 1.5 13t10.5 8q26 7 42.5 28.5t16.5 48.5t-16.5 48.5t-42.5 28.5q-7 2 -10.5 8t-2 12.5t7.5 10t13 2.5q37 -10 61 -40.5t24 -69.5v0zM865 292
q0 -67 -34 -124t-93 -89q-4 -2 -8 -2q-10 0 -14 9q-4 6 -2 12.5t8 9.5q51 28 80 77t29 107q0 57 -29.5 106.5t-79.5 77.5q-6 3 -8 9.5t1 12.5t9.5 8t13.5 -1q59 -32 93 -89t34 -124v0z" />
<glyph glyph-name="xiangxia" unicode="&#xe61a;"
d="M888 705q12 12 28.5 12t28.5 -12v0q12 -11 12 -28t-12 -28l-406 -406q-12 -12 -28.5 -12t-27.5 12v0q-12 12 -12 28.5t12 28.5l405 405v0zM539 300q11 -12 11 -28.5t-11 -28.5v0q-12 -12 -28.5 -12t-28.5 12l-406 406q-11 11 -11 28t11 28v0q12 12 28.5 12t28.5 -12
l406 -405v0zM539 300z" />
d="M888 620q12 12 28.5 12t28.5 -12v0q12 -12 12 -28.5t-12 -28.5l-406 -405q-12 -12 -28.5 -12t-27.5 12v0q-12 11 -12 27.5t12 28.5zM539 214q11 -12 11 -28.5t-11 -27.5v0q-12 -12 -28.5 -12t-28.5 12l-406 405q-11 12 -11 28.5t11 28.5v0q12 12 28.5 12t28.5 -12z
M539 214z" />
<glyph glyph-name="wenjian" unicode="&#xe621;"
d="M887 515v-45v-45v-478q0 -29 -20 -49t-48 -20h-614q-29 0 -48.5 20t-19.5 49v705q0 28 20 48t48 20h387h45h38q14 5 23 -5l183 -183q7 -7 6 -17zM660 447q-10 0 -16.5 7t-6.5 16v205h-45h-364q-19 0 -32.5 -13.5t-13.5 -32.5v-660q0 -18 13.5 -31.5t32.5 -13.5h568
q19 0 32.5 13.5t13.5 31.5v456v22h-182zM683 666v-173h159v14z" />
@ -161,8 +161,8 @@ q19 0 32.5 13.5t13.5 31.5v456v22h-182zM683 666v-173h159v14z" />
d="M917 -103h-810q-18 0 -30 12t-12 30v698q0 18 12 30t30 12h810q18 0 30 -12t12 -30v-698q0 -18 -12 -30t-30 -12zM316 -61h601v363h-601v-363zM107 -61h167v363h-167v-363zM148.5 637q-17.5 0 -29.5 -12t-12 -29.5t12 -30t29.5 -12.5t30 12.5t12.5 30t-12.5 29.5t-30 12z
M274.5 637q-17.5 0 -29.5 -12t-12 -29.5t12 -30t29.5 -12.5t29.5 12.5t12 30t-12 29.5t-29.5 12zM400.5 637q-17.5 0 -30 -12t-12.5 -29.5t12.5 -30t30 -12.5t29.5 12.5t12 30t-12 29.5t-29.5 12zM875 512h-768v-168h810v168h-42z" />
<glyph glyph-name="duigou" unicode="&#xe618;" horiz-adv-x="1600"
d="M1064 480zM811 263zM0 -31l1 -1q-1 0 -1 1zM423 -32v1h1q0 -1 -1 -1zM1487 465q1 -7 -7 -11q-95 -39 -170.5 -108t-144.5 -165q-70 -99 -123 -216q-5 -11 -8.5 -12t-11.5 7q-59 58 -263 258q-29 29 -38 37q-7 6 -7 10.5t9 8.5q63 29 99 49q17 9 32 -6q32 -31 164 -162
q12 -11 15 -10.5t8 16.5q27 77 96 194q107 179 275 405q0 1 2 4.5t4 5t4.5 0.5t3.5 -3t1 -5.5v-4.5q15 -70 59 -288z" />
d="M0 -31l1 -1q-1 0 -1 1zM423 -32q0 1 1 1q0 -1 -1 -1zM1189 507q0 -7 -8 -10q-95 -40 -170.5 -108.5t-144.5 -165.5q-70 -98 -123 -216q-5 -10 -8.5 -11t-11.5 7q-59 58 -262 258q-30 29 -39 37q-7 6 -7 10.5t10 8.5q62 29 98 48q18 10 33 -5q31 -32 164 -162
q12 -12 14.5 -11t7.5 17q27 77 97 193q107 180 274 406q0 1 2 4.5t4 4.5t4.5 0.5t3.5 -2.5t1 -5.5v-5.5q15 -69 60 -287z" />
<glyph glyph-name="tianjia1" unicode="&#xe608;"
d="M510 -61q-91 0 -173.5 35.5t-142.5 95t-95.5 142.5t-35.5 174t35.5 173.5t95.5 142.5t142.5 95.5t173.5 35.5t173.5 -35.5t142.5 -95.5t95.5 -142.5t35.5 -173.5t-35.5 -174t-95.5 -142.5t-142.5 -95t-173.5 -35.5v0zM510 812q-116 0 -214 -57t-155.5 -155t-57.5 -214
t57.5 -214.5t155.5 -155.5t214 -57t214 57t155.5 155.5t57.5 214.5t-57.5 214t-155.5 155t-214 57v0zM528 153h-36v215h-214v36h214v214h36v-214h214v-36h-214v-215v0zM528 153z" />

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 59 KiB

BIN
src/font/iconfont.ttf
View File

Binary file not shown.

BIN
src/font/iconfont.woff
View File

Binary file not shown.

2
src/lay/modules/code.js
View File

@ -2,7 +2,7 @@
@Name：layui.code 代码修饰器
@Author：贤心
@License：LGPL
@License：MIT
*/

92
src/lay/modules/element.js
View File

@ -2,7 +2,7 @@
@Name：layui.element 常用元素操作
@Author：贤心
@License：LGPL
@License：MIT
*/
@ -33,27 +33,34 @@ layui.define('jquery', function(exports){
//外部Tab新增
Element.prototype.tabAdd = function(filter, options){
var tabElem = $('.layui-tab[lay-filter='+ filter +']')
,titElem = tabElem.children('.layui-tab-title')
var TITLE = '.layui-tab-title'
,tabElem = $('.layui-tab[lay-filter='+ filter +']')
,titElem = tabElem.children(TITLE)
,contElem = tabElem.children('.layui-tab-content');
titElem.append('<li>'+ (options.title||'unnaming') +'</li>');
titElem.append('<li lay-id="'+ (options.id||'') +'">'+ (options.title||'unnaming') +'</li>');
contElem.append('<div class="layui-tab-item">'+ (options.content||'') +'</div>');
return call.tabAuto(), this;
call.hideTabMore(true);
call.tabAuto();
return this;
};
//外部Tab删除
Element.prototype.tabDelete = function(filter, index){
var tabElem = $('.layui-tab[lay-filter='+ filter +']')
,liElem = tabElem.children('.layui-tab-title').find('>li').eq(index);
Element.prototype.tabDelete = function(filter, layid){
var TITLE = '.layui-tab-title'
,tabElem = $('.layui-tab[lay-filter='+ filter +']')
,titElem = tabElem.children(TITLE)
,liElem = titElem.find('>li[lay-id="'+ layid +'"]');
call.tabDelete(null, liElem);
return this;
};
//外部Tab切换
Element.prototype.tabChange = function(filter, index){
var tabElem = $('.layui-tab[lay-filter='+ filter +']')
,liElem = tabElem.children('.layui-tab-title').find('>li').eq(index);
call.tabClick(null, index, liElem);
Element.prototype.tabChange = function(filter, layid){
var TITLE = '.layui-tab-title'
,tabElem = $('.layui-tab[lay-filter='+ filter +']')
,titElem = tabElem.children(TITLE)
,liElem = titElem.find('>li[lay-id="'+ layid +'"]');
call.tabClick(null, null, liElem);
return this;
};
@ -78,7 +85,7 @@ layui.define('jquery', function(exports){
tabClick: function(e, index, liElem){
var othis = liElem || $(this)
,index = index || othis.index()
,parents = othis.parents('.layui-tab')
,parents = othis.parents('.layui-tab').eq(0)
,item = parents.children('.layui-tab-content').children('.layui-tab-item')
,filter = parents.attr('lay-filter');
@ -94,7 +101,7 @@ layui.define('jquery', function(exports){
//Tab删除
,tabDelete: function(e, othis){
var li = othis || $(this).parent(), index = li.index();
var parents = li.parents('.layui-tab');
var parents = li.parents('.layui-tab').eq(0);
var item = parents.children('.layui-tab-content').children('.layui-tab-item')
if(li.hasClass(THIS)){
@ -107,12 +114,15 @@ layui.define('jquery', function(exports){
li.remove();
item.eq(index).remove();
setTimeout(function(){
call.tabAuto();
}, 50);
}
//Tab自适应
,tabAuto: function(){
var SCROLL = 'layui-tab-scroll', MORE = 'layui-tab-more', BAR = 'layui-tab-bar'
, CLOSE = 'layui-tab-close', that = this;
,CLOSE = 'layui-tab-close', that = this;
$('.layui-tab').each(function(){
var othis = $(this)
@ -125,6 +135,10 @@ layui.define('jquery', function(exports){
call.hideTabMore(true)
}
if(!title[0]){
title = othis.children('.'+OVER).children('.layui-tab-title');
}
//允许关闭
if(othis.attr('lay-allowClose')){
title.find('li').each(function(){
@ -141,12 +155,14 @@ layui.define('jquery', function(exports){
if(title.prop('scrollWidth') > title.outerWidth()+1){
if(title.find('.'+BAR)[0]) return;
title.append(span);
othis.attr('overflow', '');
span.on('click', function(e){
title[this.title ? 'removeClass' : 'addClass'](MORE);
this.title = this.title ? '' : '收缩';
});
} else {
title.find('.'+BAR).remove();
othis.removeAttr('overflow');
}
});
}
@ -158,6 +174,7 @@ layui.define('jquery', function(exports){
tsbTitle.find('.layui-tab-bar').attr('title','');
}
}
//点击选中
,clickThis: function(){
var othis = $(this), parents = othis.parents(NAV_ELEM)
@ -185,6 +202,29 @@ layui.define('jquery', function(exports){
parent[child.css('display') === 'none' ? 'addClass': 'removeClass'](NAV_ITEM+'ed');
}
}
//折叠面板
,collapse: function(){
var othis = $(this), icon = othis.find('.layui-colla-icon')
,elemCont = othis.siblings('.layui-colla-content')
,parents = othis.parents('.layui-collapse').eq(0)
,filter = parents.attr('lay-filter')
,display = elemCont.css('display') === 'none';
//是否手风琴
if(typeof parents.attr('lay-accordion') === 'string'){
var show = parents.children('.layui-colla-item').children('.'+SHOW);
show.siblings('.layui-colla-title').children('.layui-colla-icon').html('&#xe602;');
show.removeClass(SHOW);
}
elemCont[display ? 'addClass' : 'removeClass'](SHOW);
icon.html(display ? '&#xe61a;' : '&#xe602;');
layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', {
title: othis
,content: elemCont
,show: display
});
}
};
//初始化元素操作
@ -320,6 +360,28 @@ layui.define('jquery', function(exports){
}
});
}
//折叠面板
,collapse: function(){
var ELEM = 'layui-collapse';
$('.'+ELEM).each(function(){
var elemItem = $(this).find('.layui-colla-item')
elemItem.each(function(){
var othis = $(this)
,elemTitle = othis.find('.layui-colla-title')
,elemCont = othis.find('.layui-colla-content');
//初始状态
elemTitle.find('.layui-colla-icon').remove();
elemTitle.append('<i class="layui-icon layui-colla-icon">'+ (elemCont.css('display') === 'none' ? '&#xe602;' : '&#xe61a;') +'</i>');
//点击标题
elemTitle.off('click', call.collapse).on('click', call.collapse);
});
});
}
};
return layui.each(items, function(index, item){

2
src/lay/modules/flow.js
View File

@ -2,7 +2,7 @@
@Name：layui.flow 流加载
@Author：贤心
@License：LGPL
@License：MIT
*/

123
src/lay/modules/form.js
View File

@ -14,7 +14,7 @@ layui.define('layer', function(exports){
,hint = layui.hint()
,device = layui.device()
,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this', SHOW = 'layui-show', DISABLED = 'layui-disabled'
,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled'
,Form = function(){
this.config = {
@ -73,9 +73,11 @@ layui.define('layer', function(exports){
//表单控件渲染
Form.prototype.render = function(type){
var that = this, items = {
//下拉选择框
select: function(){
var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title'
,NONE = 'layui-select-none', initValue = ''
,selects = $(ELEM).find('select'), hide = function(e, clear){
if(!$(e.target).parent().hasClass(TITLE) || clear){
@ -83,31 +85,99 @@ layui.define('layer', function(exports){
}
}
,events = function(reElem, disabled){
var select = $(this), title = reElem.find('.' + TITLE);
,events = function(reElem, disabled, isSearch){
var select = $(this)
,title = reElem.find('.' + TITLE)
,input = title.find('input')
,dl = reElem.find('dl')
,dds = dl.children('dd')
if(disabled) return;
//展开下拉
var showDown = function(){
reElem.addClass(CLASS+'ed');
initValue = input.val();
dds.removeClass(HIDE);
}, hideDown = function(){
reElem.removeClass(CLASS+'ed');
input.blur();
};
//点击标题区域
title.on('click', function(e){
reElem.hasClass(CLASS+'ed') ? reElem.removeClass(CLASS+'ed') : (
reElem.hasClass(CLASS+'ed') ? (
hideDown()
) : (
hide(e, true),
reElem.addClass(CLASS+'ed')
showDown()
);
dl.find('.'+NONE).remove();
});
//点击箭头获取焦点
title.find('.layui-edge').on('click', function(){
input.focus();
});
//键盘事件
input.on('keyup', function(e){
var keyCode = e.keyCode;
//Tab键
if(keyCode === 9){
showDown();
}
}).on('keydown', function(e){
var keyCode = e.keyCode;
//Tab键
if(keyCode === 9){
hideDown();
} else if(keyCode === 13){ //回车键
e.preventDefault();
}
});
//搜索匹配
if(isSearch){
var search = function(e){
var value = this.value, num = 0, keyCode = e.keyCode;
if(keyCode === 9 || keyCode === 13 || keyCode === 37 || keyCode === 38 || keyCode === 39 || keyCode === 40){
return false;
}
layui.each(dds, function(){
var othis = $(this), not = othis.text().indexOf(value) === -1;
if(not) num++;
othis[not ? 'addClass' : 'removeClass'](HIDE);
});
if(num === dds.length){
dl.find('.'+NONE)[0] || dl.append('<p class="'+ NONE +'">无匹配项</p>');
} else {
dl.find('.'+NONE).remove();
}
};
input.on('keyup', search).on('blur', function(){
input.val(initValue);
});
}
//选择
reElem.find('dl>dd').on('click', function(){
dds.on('click', function(){
var othis = $(this), value = othis.attr('lay-value');
var filter = select.attr('lay-filter'); //获取过滤器
if(othis.hasClass(DISABLED)) return false;
select.val(value).removeClass('layui-form-danger'), title.find('input').val(othis.text());
select.val(value).removeClass('layui-form-danger'), input.val(othis.text());
othis.addClass(THIS).siblings().removeClass(THIS);
layui.event(MOD_NAME, 'select('+ filter +')', {
layui.event.call(this, MOD_NAME, 'select('+ filter +')', {
elem: select[0]
,value: value
,othis: reElem
});
});
@ -116,16 +186,20 @@ layui.define('layer', function(exports){
});
//关闭下拉
$(document).off('click', hide).on('click', hide)
$(document).off('click', hide).on('click', hide);
}
selects.each(function(index, select){
var othis = $(this), hasRender = othis.next('.'+CLASS), disabled = this.disabled;
var value = select.value, selected = $(select.options[select.selectedIndex]); //获取当前选中项
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
var isSearch = typeof othis.attr('lay-search') === 'string';
//替代元素
var reElem = $(['<div class="layui-unselect '+ CLASS + (disabled ? ' layui-select-disabled' : '') +'">'
,'<div class="'+ TITLE +'"><input type="text" placeholder="'+ (select.options[0].innerHTML ? select.options[0].innerHTML : TIPS) +'" value="'+ (value ? selected.html() : '') +'" readonly class="layui-input layui-unselect'+ (disabled ? (' '+DISABLED) : '') +'">'
,'<div class="'+ TITLE +'"><input type="text" placeholder="'+ (select.options[0].innerHTML ? select.options[0].innerHTML : TIPS) +'" value="'+ (value ? selected.html() : '') +'" '+ (isSearch ? '' : 'readonly') +' class="layui-input layui-unselect'+ (disabled ? (' '+DISABLED) : '') +'">'
,'<i class="layui-edge"></i></div>'
,'<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">'+ function(options){
var arr = [];
@ -143,7 +217,7 @@ layui.define('layer', function(exports){
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
othis.after(reElem);
events.call(this, reElem, disabled);
events.call(this, reElem, disabled, isSearch);
});
}
//复选框/开关
@ -159,36 +233,42 @@ layui.define('layer', function(exports){
//勾选
reElem.on('click', function(){
var filter = check.attr('lay-filter'); //获取过滤器
var filter = check.attr('lay-filter') //获取过滤器
,text = (check.attr('lay-text')||'').split('|');
if(check[0].disabled) return;
check[0].checked ? (
check[0].checked = false
,reElem.removeClass(RE_CLASS[1])
,reElem.removeClass(RE_CLASS[1]).find('em').text(text[1])
) : (
check[0].checked = true
,reElem.addClass(RE_CLASS[1])
,reElem.addClass(RE_CLASS[1]).find('em').text(text[0])
);
layui.event(MOD_NAME, RE_CLASS[2]+'('+ filter +')', {
layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', {
elem: check[0]
,value: check[0].value
,othis: reElem
});
});
}
checks.each(function(index, check){
var othis = $(this), skin = othis.attr('lay-skin'), disabled = this.disabled;
var othis = $(this), skin = othis.attr('lay-skin')
,text = (othis.attr('lay-text')||'').split('|'), disabled = this.disabled;
if(skin === 'switch') skin = '_'+skin;
var RE_CLASS = CLASS[skin] || CLASS.checkbox;
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
//替代元素
var hasRender = othis.next('.' + RE_CLASS[0]);
var reElem = $(['<div class="layui-unselect '+ RE_CLASS[0] + (
check.checked ? (' '+RE_CLASS[1]) : '') + (disabled ? ' layui-checkbox-disbaled '+DISABLED : '') +'">'
check.checked ? (' '+RE_CLASS[1]) : '') + (disabled ? ' layui-checkbox-disbaled '+DISABLED : '') +'" lay-skin="'+ (skin||'') +'">'
,{
_switch: '<i></i>'
}[skin] || ('<span>'+ (check.title || '勾选') +'</span><i class="layui-icon">&#xe618;</i>')
_switch: '<em>'+ ((check.checked ? text[0] : text[1])||'') +'</em><i></i>'
}[skin] || ('<span>'+ (check.title || '勾选') +'</span><i class="layui-icon">'+ (skin ? '&#xe605;' : '&#xe618;') +'</i>')
,'</div>'].join(''));
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
@ -222,9 +302,10 @@ layui.define('layer', function(exports){
reElem.addClass(CLASS+'ed');
reElem.find('.layui-icon').addClass(ANIM).html(ICON[0]);
layui.event(MOD_NAME, 'radio('+ filter +')', {
layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', {
elem: radio[0]
,value: radio[0].value
,othis: reElem
});
});
};
@ -232,6 +313,8 @@ layui.define('layer', function(exports){
radios.each(function(index, radio){
var othis = $(this), hasRender = othis.next('.' + CLASS), disabled = this.disabled;
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
//替代元素
var reElem = $(['<div class="layui-unselect '+ CLASS + (radio.checked ? (' '+CLASS+'ed') : '') + (disabled ? ' layui-radio-disbaled '+DISABLED : '') +'">'
,'<i class="layui-anim layui-icon">'+ ICON[radio.checked ? 0 : 1] +'</i>'

2
src/lay/modules/layedit.js
View File

@ -2,7 +2,7 @@
@Name：layui.layedit 富文本编辑器
@Author：贤心
@License：LGPL
@License：MIT
*/

2
src/lay/modules/laypage.js
View File

@ -2,7 +2,7 @@
@Name : layui.laypage 分页组件
@Author：贤心
@License：LGPL
@License：MIT
*/

2
src/lay/modules/laytpl.js
View File

@ -2,7 +2,7 @@
@Name : layui.laytpl 模板引擎
@Author：贤心
@License：LGPL
@License：MIT
*/

2
src/lay/modules/mobile/layer-mobile.js
View File

@ -3,7 +3,7 @@
@Name：layer mobile v2.0 弹层组件移动版
@Author：贤心
@Site：http://layer.layui.com/mobie/
@License：LGPL
@License：MIT
*/

2
src/lay/modules/mobile/upload-mobile.js
View File

@ -2,7 +2,7 @@
@Title: layui.upload 单文件上传 - 全浏览器兼容版
@Author: 贤心
@License：LGPL
@License：MIT
*/

2
src/lay/modules/tree.js
View File

@ -2,7 +2,7 @@
@Name：layui.tree 树组件
@Author：贤心
@License：LGPL
@License：MIT
*/

2
src/lay/modules/upload.js
View File

@ -2,7 +2,7 @@
@Title: layui.upload 单文件上传 - 全浏览器兼容版
@Author: 贤心
@License：LGPL
@License：MIT
*/

2
src/lay/modules/util.js
View File

@ -2,7 +2,7 @@
@Name：layui.util 工具集
@Author：贤心
@License：LGPL
@License：MIT
*/

4
src/layui.js
View File

@ -13,7 +13,7 @@
"use strict";
var Lay = function(){
this.v = '1.0.8'; //版本号
this.v = '1.0.9'; //版本号
};
Lay.fn = Lay.prototype;
@ -44,11 +44,11 @@ modules = {
,form: 'modules/form' //表单集
,upload: 'modules/upload' //上传
,tree: 'modules/tree' //树结构
,slide: 'modules/slide' //轮播/滚动
,table: 'modules/table' //富表格
,element: 'modules/element' //常用元素操作
,util: 'modules/util' //工具块
,flow: 'modules/flow' //流加载
,carousel: 'modules/carousel' //轮播
,code: 'modules/code' //代码修饰器
,jquery: 'modules/jquery' //DOM库（第三方）

6
test/slide.html → test/carousel.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>通用滑动组件 - layui</title>
<title>轮播组件 - layui</title>
<link rel="stylesheet" href="../src/css/layui.css">
@ -22,9 +22,7 @@ body{padding: 20px;}
<script src="../src/layui.js"></script>
<script>
layui.use('slide', function(){
layui.slide();
});
</script>
</body>
</html>

60
test/element.html
View File

@ -14,6 +14,29 @@ body{padding:20px;}
<body>
<div class="layui-collapse" lay-filter="test" lay-accordion>
<div class="layui-colla-item">
<h2 class="layui-colla-title">杜甫</h2>
<div class="layui-colla-content layui-show">
<p>杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">李清照</h2>
<div class="layui-colla-content">
<p>李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。</p>
</div>
</div>
<div class="layui-colla-item">
<h2 class="layui-colla-title">鲁迅</h2>
<div class="layui-colla-content">
<p>鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。</p>
</div>
</div>
</div>
<br><br>
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="10%"></div>
</div>
@ -135,11 +158,11 @@ body{padding:20px;}
<div class="layui-tab" lay-filter="tabDemo" lay-allowClose="true">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
<li>标题5</li>
<li class="layui-this" lay-id="1">标题1</li>
<li lay-id="2">标题2</li>
<li lay-id="3">标题3</li>
<li lay-id="4">标题4</li>
<li lay-id="5">标题5</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
@ -150,9 +173,9 @@ body{padding:20px;}
</div>
</div>
<button class="layui-btn" onclick="layui.element().tabChange('tabDemo', 2)">手工切换到第三项</button>
<button class="layui-btn" onclick="layui.element().tabAdd('tabDemo', {title:'新标题', content:'新内容'})">添加Tab</button>
<button class="layui-btn" onclick="layui.element().tabDelete('tabDemo', 3)">删除第四项</button>
<button class="layui-btn" onclick="layui.element().tabChange('tabDemo', 3)">手工切换到“标题3”</button>
<button class="layui-btn" onclick="layui.element().tabAdd('tabDemo', {title:'新标题', content:'新内容', id: +new Date})">添加Tab</button>
<button class="layui-btn" onclick="layui.element().tabDelete('tabDemo', 4)">删除“标题4”</button>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
@ -168,7 +191,7 @@ body{padding:20px;}
<div class="layui-inline">
<div class="layui-tab layui-tab-card">
<ul class="layui-tab-title">
<li class="layui-this">标题1</li>
<li class="layui-this">标题一</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
@ -176,7 +199,18 @@ body{padding:20px;}
<li>标题6</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">1</div>
<div class="layui-tab-item layui-show">
<div class="layui-form">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
</div>
<div class="layui-tab-item">2</div>
<div class="layui-tab-item">3</div>
<div class="layui-tab-item">4</div>
@ -204,7 +238,7 @@ body{padding:20px;}
<script src="../src/layui.js"></script>
<script>
layui.use('element', function(){
layui.use(['element', 'form'], function(){
var element = layui.element();
element.on('tab(test)', function(data){
@ -214,6 +248,10 @@ layui.use('element', function(){
element.on('nav(test)', function(elem){
console.log(elem)
});
element.on('collapse(test)', function(data){
console.log(data);
});
});
</script>
</body>

29
test/form.html
View File

@ -82,6 +82,7 @@ body{padding: 10px;}
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
@ -95,6 +96,22 @@ body{padding: 10px;}
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">搜索选择框</label>
<div class="layui-input-inline">
<select name="interest" lay-filter="aihao" lay-search>
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
<option value="5">读书</option>
</select>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
@ -103,16 +120,24 @@ body{padding: 10px;}
<input type="checkbox" name="like[game]" title="游戏" disabled>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">原始复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作">
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">开关关</label>
<div class="layui-input-block">
<input type="checkbox" name="close" lay-skin="switch" title="开关" disabled>
<input type="checkbox" name="close" lay-skin="switch" title="开关" disabled>
</div>
</div>
<div class="layui-form-item" pane>
<label class="layui-form-label">开关开</label>
<div class="layui-input-block">
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
<input type="checkbox" checked name="open" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
</div>
</div>
<div class="layui-form-item" pane>

319
test/form1.html
View File

@ -1,319 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css" media="all">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title">
<legend>响应式的表单集合</legend>
</fieldset>
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">单行输入框</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证必填项</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证手机</label>
<div class="layui-input-inline">
<input type="tel" name="phone" lay-verify="phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证邮箱</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">验证数字</label>
<div class="layui-input-inline">
<input type="number" name="number" lay-verify="number" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证日期</label>
<div class="layui-input-block">
<input type="text" name="date" id="date" lay-verify="date" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this})">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证链接</label>
<div class="layui-input-block">
<input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证身份证</label>
<div class="layui-input-block">
<input type="text" name="identity" lay-verify="identity" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">自定义验证</label>
<div class="layui-input-inline">
<input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<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>
<div class="layui-form-item">
<label class="layui-form-label">单行选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected="">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">行内选择框</label>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择省</option>
<option value="浙江" selected="">浙江省</option>
<option value="你的工号">江西省</option>
<option value="你最喜欢的老师">福建省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择市</option>
<option value="杭州">杭州</option>
<option value="宁波">宁波</option>
<option value="温州">温州</option>
<option value="温州">台州</option>
<option value="温州">绍兴</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择县/区</option>
<option value="西湖区">西湖区</option>
<option value="余杭区">余杭区</option>
<option value="拱墅区">临安市</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读" checked="">
<input type="checkbox" name="like[game]" title="游戏">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关-关</label>
<div class="layui-input-block">
<input type="checkbox" name="close" lay-skin="switch" title="开关">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关-开</label>
<div class="layui-input-block">
<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked="">
<input type="radio" name="sex" value="女" title="女">
<input type="radio" name="sex" value="密" title="保密">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">普通文本域</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">编辑器</label>
<div class="layui-input-block">
<textarea class="layui-textarea layui-hide" id="LAY_demo_editor"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>方框风格的表单集合</legend>
</fieldset>
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">长输入框</label>
<div class="layui-input-block">
<input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">短输入框</label>
<div class="layui-input-inline">
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">日期选择</label>
<div class="layui-input-block">
<input type="text" name="date" id="date" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this})">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">行内表单</label>
<div class="layui-input-inline">
<input type="number" name="number" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">范围</label>
<div class="layui-input-inline" style="width: 100px;">
<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>
<div class="layui-form-item">
<label class="layui-form-label">单行选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected="">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">行内选择框</label>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择省</option>
<option value="浙江" selected="">浙江省</option>
<option value="你的工号">江西省</option>
<option value="你最喜欢的老师">福建省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择市</option>
<option value="杭州">杭州</option>
<option value="宁波">宁波</option>
<option value="温州">温州</option>
<option value="温州">台州</option>
<option value="温州">绍兴</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择县/区</option>
<option value="西湖区">西湖区</option>
<option value="余杭区">余杭区</option>
<option value="拱墅区">临安市</option>
</select>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
</div>
</form>
<script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
<script>
layui.use(['form', 'layedit', 'laydate'], function(){
var form = layui.form()
,layer = layui.layer
,layedit = layui.layedit
,laydate = layui.laydate;
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return '标题至少得5个字符啊';
}
}
,pass: [/(.+){6,12}$/, '密码必须6到12位']
});
//创建一个编辑器
layedit.build('LAY_demo_editor');
//监听提交
form.on('submit(demo1)', function(data){
layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
})
return false;
});
});
</script>
</body>
</html>

33
test/slider.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑块 - layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding: 10px;}
</style>
</head>
<body>
<script src="../src/layui.js"></script>
<!-- <script src="../build/lay/dest/layui.all.js"></script> -->
<script>
</script>
</body>
</html>