This commit is contained in:
贤心 2018-08-28 15:43:16 +08:00
commit 9964879f08
44 changed files with 724 additions and 479 deletions

View File

@ -1,6 +1,6 @@
<p align=center>
<a href="http://www.layui.com">
<img src="http://cdn.layui.com/upload/2016_10/168_1476644144774_50450.png" alt="layui" width="520">
<img src="https://cdn.layui.com/upload/2018_8/168_1534598268487_58092.png" alt="layui" width="360">
</a>
</p>
<p align=center>

4
dist/css/layui.css vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
/** layui-v2.3.0 MIT License By https://www.layui.com */
/** layui-v2.4.0 MIT License By https://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 #e2e2e2;border-left-width:6px;background-color:#F2F2F2;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:32px;line-height:32px;border-bottom:1px solid #e2e2e2}.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 #e2e2e2;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}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

BIN
dist/font/iconfont.eot vendored

Binary file not shown.

View File

@ -20,13 +20,6 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
<glyph glyph-name="reply-fill" unicode="&#58897;" d="M507.904 835.5840000000001q93.184 1.024 175.104-33.792t143.872-94.72 97.792-141.312 36.864-174.592q1.024-88.064-30.208-165.888t-87.04-137.728-131.072-98.816-162.304-48.128q-22.528-3.072-48.128-5.12t-56.832-3.072-69.632 0-86.528 6.144q-106.496 10.24-158.208 26.624t-41.472 18.432q54.272 9.216 93.184 29.696 20.48 11.264 16.896 32.256t-19.968 39.424q-52.224 57.344-84.48 133.632t-34.304 164.352q-1.024 93.184 33.792 175.104t95.232 143.36 142.336 97.28 175.104 36.864zM707.584 385.024q0-26.624 18.432-45.568t45.056-18.944 45.568 18.944 18.944 45.568-18.944 45.056-45.568 18.432-45.056-18.432-18.432-45.056zM450.56 385.024q0-26.624 19.456-46.08t46.08-19.456q27.648 0 46.592 19.456t18.944 46.08q0 27.648-18.944 46.592t-46.592 18.944q-26.624 0-46.08-18.944t-19.456-46.592zM196.608 386.048q0-26.624 18.944-46.08t45.568-19.456q27.648 0 46.592 19.456t18.944 46.08-18.944 45.568-46.592 18.944q-26.624 0-45.568-18.944t-18.944-45.568z" horiz-adv-x="1024" />
@ -462,6 +455,18 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
<glyph glyph-name="cellphone" unicode="&#59000;" d="M785.066667 896H238.933333a102.4 102.4 0 0 1-102.4-102.4v-819.2a102.4 102.4 0 0 1 102.4-102.4h546.133334a102.4 102.4 0 0 1 102.4 102.4V793.6a102.4 102.4 0 0 1-102.4 102.4zM238.933333 827.733333h546.133334a34.133333 34.133333 0 0 0 34.133333-34.133333v-648.533333H204.8V793.6a34.133333 34.133333 0 0 0 34.133333 34.133333z m546.133334-887.466666H238.933333a34.133333 34.133333 0 0 0-34.133333 34.133333v102.4h614.4v-102.4a34.133333 34.133333 0 0 0-34.133333-34.133333zM512 8.53333299999997m-34.133333 0a34.133333 34.133333 0 1 1 68.266666 0 34.133333 34.133333 0 1 1-68.266666 0ZM426.666667 725.333333h170.666666a17.066667 17.066667 0 0 1 0 34.133334h-170.666666a17.066667 17.066667 0 0 1 0-34.133334z" horiz-adv-x="1024" />
<glyph glyph-name="print" unicode="&#58989;" d="M843.946667 603.733333h-47.36V725.333333a90.026667 90.026667 0 0 1-94.72 85.333334H312.32a81.493333 81.493333 0 0 1-85.333333-85.333334v-121.6H170.666667a81.493333 81.493333 0 0 1-85.333334-85.333333v-325.12a89.173333 89.173333 0 0 1 85.333334-93.866667h56.746666v-52.48a89.6 89.6 0 0 1 89.6-89.6h389.973334a89.6 89.6 0 0 1 89.6 89.6v52.48h47.36a97.706667 97.706667 0 0 1 94.72 93.866667V518.4a90.026667 90.026667 0 0 1-94.72 85.333333zM279.466667 725.333333a30.72 30.72 0 0 0 32.853333 33.706667h389.546667c18.773333 0 42.666667-11.52 42.666666-33.706667v-121.6H279.466667z m465.066666-678.4a37.546667 37.546667 0 0 0-37.546666-37.973333H317.013333a37.546667 37.546667 0 0 0-37.546666 37.973333v170.666667a37.546667 37.546667 0 0 0 37.546666 38.4h389.973334a37.546667 37.546667 0 0 0 37.546666-37.973333z m142.506667 146.346667a45.653333 45.653333 0 0 0-42.666667-42.666667h-47.786666v66.133334a89.6 89.6 0 0 1-89.6 89.6H317.013333a89.6 89.6 0 0 1-89.6-89.6v-65.28H170.666667a37.546667 37.546667 0 0 0-33.28 42.666666v324.266667A31.146667 31.146667 0 0 0 170.666667 552.106667h673.28c19.2 0 42.666667-11.52 42.666666-33.706667z m-640 281.173333h-37.546667a13.226667 13.226667 0 0 0 0 26.026667h38.826667a13.226667 13.226667 0 1 0 0-26.026667z m94.293333 0H298.666667a13.226667 13.226667 0 1 0 0 26.026667h42.666666a13.226667 13.226667 0 0 0 0-26.026667z m426.666667-116.48H248.32a13.226667 13.226667 0 0 0 0 26.026667H768a13.226667 13.226667 0 0 0 0-26.026667z" horiz-adv-x="1024" />
<glyph glyph-name="cols" unicode="&#58896;" d="M128 448h384V832H128z m64 320h256v-256H192zM576 832v-384h384V832z m320-320H640V768h256zM192 384h64v-384H192zM384 384h64v-384H384zM640 384h64v-384H640zM832 384h64v-384h-64z" horiz-adv-x="1024" />
<glyph glyph-name="export" unicode="&#59005;" d="M896.4374528 479.830016c0 26.673152-21.6236032 48.2967552-48.2967552 48.2967552H630.8069376c-26.673152 0-48.2967552-21.6236032-48.2967552-48.2967552v-83.04831147H384.69522773l-2.71428266 5.36849067c-41.336832 87.44686933-35.95195733 204.128256 150.601728 199.94487467v-108.91537067l172.19037866 164.757504L532.58267307 822.7110912v-106.57245867c-228.64418133 5.70709333-263.651328-183.517184-157.433856-314.01028266l4.6891008-5.34664534h-88.46595414c-26.673152 0-48.2967552-21.6236032-48.2967552-48.2967552v-66.78882986h-98.43616426c-26.673152 0-40.4258816-21.6236032-30.71781547-48.2967552l79.10304427-217.33485227c9.70806613-26.673152 39.20145067-48.2967552 65.87460266-48.2967552h603.70670934c23.75898453 0 37.2506624 17.16169387 33.05745066 39.76178347 0.4980736 2.77108053 0.77441707 5.619712 0.77441707 8.53497173v463.765504z m-60.37067093-306.4528896l-21.8464256 60.02223787c-9.70806613 26.673152-39.20145067 48.2967552-65.87460267 48.2967552H303.44697173v30.56708266c0 13.336576 10.81125547 24.14783147 24.14783147 24.14783147h315.28605013v107.1972352c0 13.336576 10.81125547 24.14783147 24.14783147 24.14783147h144.88917333c13.336576 0 24.14783147-10.81125547 24.14783147-24.14783147v-270.2311424z" horiz-adv-x="1024" />
<glyph glyph-name="slider" unicode="&#59156;" d="M228.7 683.9v-66.7H112v66.7h116.7z m333.2-266.6v-66.7H112v66.7h449.9zM295.4 150.60000000000002V84H112v66.7h183.4v-0.1z m116.6 600c9 0 16.8-3.3 23.5-9.9 6.5-6.5 9.9-14.5 9.9-23.5v-133.3c0-9-3.3-16.8-9.9-23.5-6.5-6.5-14.5-9.9-23.5-9.9H278.8c-9 0-16.8 3.3-23.5 9.9-6.5 6.5-9.9 14.3-9.9 23.5V717.1c0 9 3.3 16.8 9.9 23.5 6.5 6.5 14.3 9.9 23.5 9.9h133.3v0.1h-0.1z m66.7-533.3c9 0 16.8-3.3 23.5-9.9 6.5-6.5 9.9-14.5 9.9-23.5v-133.3c0-9-3.3-16.8-9.9-23.5-6.5-6.5-14.5-9.9-23.5-9.9H345.3c-9 0-16.8 3.3-23.5 9.9-6.5 6.5-9.9 14.5-9.9 23.5V183.89999999999998c0 9 3.3 16.8 9.9 23.5 6.5 6.5 14.3 9.9 23.5 9.9h133.4v0.1zM912 683.9v-66.7H462.1v66.7H912z m0-533.3V84H528.6v66.7h383.3v-0.1h0.1zM745.2 483.9c9 0 16.8-3.3 23.5-9.9 6.5-6.5 9.9-14.5 9.9-23.5v-133.3c0-9-3.3-16.8-9.9-23.5-6.5-6.5-14.5-9.9-23.5-9.9H612c-9 0-16.8 3.3-23.5 9.9-6.5 6.5-9.9 14.3-9.9 23.5V450.6c0 9 3.3 16.8 9.9 23.5 6.5 6.5 14.5 9.9 23.5 9.9l133.2-0.1zM912 417.3v-66.7H795.3v66.7H912z" horiz-adv-x="1024" />
</font>

Before

Width:  |  Height:  |  Size: 271 KiB

After

Width:  |  Height:  |  Size: 274 KiB

BIN
dist/font/iconfont.ttf vendored

Binary file not shown.

Binary file not shown.

View File

@ -1,2 +1,2 @@
/** layui-v2.3.0 MIT License By https://www.layui.com */
/** layui-v2.4.0 MIT License By https://www.layui.com */
;layui.define("jquery",function(e){"use strict";var i=layui.$,n=(layui.hint(),layui.device(),{config:{},set:function(e){var n=this;return n.config=i.extend({},n.config,e),n},on:function(e,i){return layui.onevent.call(this,t,e,i)}}),t="carousel",a="layui-this",l=">*[carousel-item]>*",o="layui-carousel-left",r="layui-carousel-right",d="layui-carousel-prev",s="layui-carousel-next",u="layui-carousel-arrow",c="layui-carousel-ind",m=function(e){var t=this;t.config=i.extend({},t.config,n.config,e),t.render()};m.prototype.config={width:"600px",height:"280px",full:!1,arrow:"hover",indicator:"inside",autoplay:!0,interval:3e3,anim:"",trigger:"click",index:0},m.prototype.render=function(){var e=this,n=e.config;n.elem=i(n.elem),n.elem[0]&&(e.elemItem=n.elem.find(l),n.index<0&&(n.index=0),n.index>=e.elemItem.length&&(n.index=e.elemItem.length-1),n.interval<800&&(n.interval=800),n.full?n.elem.css({position:"fixed",width:"100%",height:"100%",zIndex:9999}):n.elem.css({width:n.width,height:n.height}),n.elem.attr("lay-anim",n.anim),e.elemItem.eq(n.index).addClass(a),e.elemItem.length<=1||(e.indicator(),e.arrow(),e.autoplay(),e.events()))},m.prototype.reload=function(e){var n=this;clearInterval(n.timer),n.config=i.extend({},n.config,e),n.render()},m.prototype.prevIndex=function(){var e=this,i=e.config,n=i.index-1;return n<0&&(n=e.elemItem.length-1),n},m.prototype.nextIndex=function(){var e=this,i=e.config,n=i.index+1;return n>=e.elemItem.length&&(n=0),n},m.prototype.addIndex=function(e){var i=this,n=i.config;e=e||1,n.index=n.index+e,n.index>=i.elemItem.length&&(n.index=0)},m.prototype.subIndex=function(e){var i=this,n=i.config;e=e||1,n.index=n.index-e,n.index<0&&(n.index=i.elemItem.length-1)},m.prototype.autoplay=function(){var e=this,i=e.config;i.autoplay&&(e.timer=setInterval(function(){e.slide()},i.interval))},m.prototype.arrow=function(){var e=this,n=e.config,t=i(['<button class="layui-icon '+u+'" lay-type="sub">'+("updown"===n.anim?"&#xe619;":"&#xe603;")+"</button>",'<button class="layui-icon '+u+'" lay-type="add">'+("updown"===n.anim?"&#xe61a;":"&#xe602;")+"</button>"].join(""));n.elem.attr("lay-arrow",n.arrow),n.elem.find("."+u)[0]&&n.elem.find("."+u).remove(),n.elem.append(t),t.on("click",function(){var n=i(this),t=n.attr("lay-type");e.slide(t)})},m.prototype.indicator=function(){var e=this,n=e.config,t=e.elemInd=i(['<div class="'+c+'"><ul>',function(){var i=[];return layui.each(e.elemItem,function(e){i.push("<li"+(n.index===e?' class="layui-this"':"")+"></li>")}),i.join("")}(),"</ul></div>"].join(""));n.elem.attr("lay-indicator",n.indicator),n.elem.find("."+c)[0]&&n.elem.find("."+c).remove(),n.elem.append(t),"updown"===n.anim&&t.css("margin-top",-(t.height()/2)),t.find("li").on("hover"===n.trigger?"mouseover":n.trigger,function(){var t=i(this),a=t.index();a>n.index?e.slide("add",a-n.index):a<n.index&&e.slide("sub",n.index-a)})},m.prototype.slide=function(e,i){var n=this,l=n.elemItem,u=n.config,c=u.index,m=u.elem.attr("lay-filter");n.haveSlide||("sub"===e?(n.subIndex(i),l.eq(u.index).addClass(d),setTimeout(function(){l.eq(c).addClass(r),l.eq(u.index).addClass(r)},50)):(n.addIndex(i),l.eq(u.index).addClass(s),setTimeout(function(){l.eq(c).addClass(o),l.eq(u.index).addClass(o)},50)),setTimeout(function(){l.removeClass(a+" "+d+" "+s+" "+o+" "+r),l.eq(u.index).addClass(a),n.haveSlide=!1},300),n.elemInd.find("li").eq(u.index).addClass(a).siblings().removeClass(a),n.haveSlide=!0,layui.event.call(this,t,"change("+m+")",{index:u.index,prevIndex:c,item:l.eq(u.index)}))},m.prototype.events=function(){var e=this,i=e.config;i.elem.data("haveEvents")||(i.elem.on("mouseenter",function(){clearInterval(e.timer)}).on("mouseleave",function(){e.autoplay()}),i.elem.data("haveEvents",!0))},n.render=function(e){var i=new m(e);return i},e(t,n)});

View File

@ -1,2 +1,2 @@
/** layui-v2.3.0 MIT License By https://www.layui.com */
/** layui-v2.4.0 MIT License By https://www.layui.com */
;layui.define("jquery",function(e){"use strict";var a=layui.$,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");

2
dist/lay/modules/colorpicker.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
/** layui-v2.3.0 MIT License By https://www.layui.com */
/** layui-v2.4.0 MIT License By https://www.layui.com */
;layui.define(function(e){"use strict";var a=document,t="getElementById",n="getElementsByTagName",i="laypage",r="layui-disabled",u=function(e){var a=this;a.config=e||{},a.config.index=++s.index,a.render(!0)};u.prototype.type=function(){var e=this.config;if("object"==typeof e.elem)return void 0===e.elem.length?2:3},u.prototype.view=function(){var e=this,a=e.config,t=a.groups="groups"in a?0|a.groups:5;a.layout="object"==typeof a.layout?a.layout:["prev","page","next"],a.count=0|a.count,a.curr=0|a.curr||1,a.limits="object"==typeof a.limits?a.limits:[10,20,30,40,50],a.limit=0|a.limit||10,a.pages=Math.ceil(a.count/a.limit)||1,a.curr>a.pages&&(a.curr=a.pages),t<0?t=1:t>a.pages&&(t=a.pages),a.prev="prev"in a?a.prev:"&#x4E0A;&#x4E00;&#x9875;",a.next="next"in a?a.next:"&#x4E0B;&#x4E00;&#x9875;";var n=a.pages>t?Math.ceil((a.curr+(t>1?1:0))/(t>0?t:1)):1,i={prev:function(){return a.prev?'<a href="javascript:;" class="layui-laypage-prev'+(1==a.curr?" "+r:"")+'" data-page="'+(a.curr-1)+'">'+a.prev+"</a>":""}(),page:function(){var e=[];if(a.count<1)return"";n>1&&a.first!==!1&&0!==t&&e.push('<a href="javascript:;" class="layui-laypage-first" data-page="1" title="&#x9996;&#x9875;">'+(a.first||1)+"</a>");var i=Math.floor((t-1)/2),r=n>1?a.curr-i:1,u=n>1?function(){var e=a.curr+(t-i-1);return e>a.pages?a.pages:e}():t;for(u-r<t-1&&(r=u-t+1),a.first!==!1&&r>2&&e.push('<span class="layui-laypage-spr">&#x2026;</span>');r<=u;r++)r===a.curr?e.push('<span class="layui-laypage-curr"><em class="layui-laypage-em" '+(/^#/.test(a.theme)?'style="background-color:'+a.theme+';"':"")+"></em><em>"+r+"</em></span>"):e.push('<a href="javascript:;" data-page="'+r+'">'+r+"</a>");return a.pages>t&&a.pages>u&&a.last!==!1&&(u+1<a.pages&&e.push('<span class="layui-laypage-spr">&#x2026;</span>'),0!==t&&e.push('<a href="javascript:;" class="layui-laypage-last" title="&#x5C3E;&#x9875;" data-page="'+a.pages+'">'+(a.last||a.pages)+"</a>")),e.join("")}(),next:function(){return a.next?'<a href="javascript:;" class="layui-laypage-next'+(a.curr==a.pages?" "+r:"")+'" data-page="'+(a.curr+1)+'">'+a.next+"</a>":""}(),count:'<span class="layui-laypage-count">共 '+a.count+" 条</span>",limit:function(){var e=['<span class="layui-laypage-limits"><select lay-ignore>'];return layui.each(a.limits,function(t,n){e.push('<option value="'+n+'"'+(n===a.limit?"selected":"")+">"+n+" 条/页</option>")}),e.join("")+"</select></span>"}(),refresh:['<a href="javascript:;" data-page="'+a.curr+'" class="layui-laypage-refresh">','<i class="layui-icon layui-icon-refresh"></i>',"</a>"].join(""),skip:function(){return['<span class="layui-laypage-skip">&#x5230;&#x7B2C;','<input type="text" min="1" value="'+a.curr+'" class="layui-input">','&#x9875;<button type="button" class="layui-laypage-btn">&#x786e;&#x5b9a;</button>',"</span>"].join("")}()};return['<div class="layui-box layui-laypage layui-laypage-'+(a.theme?/^#/.test(a.theme)?"molv":a.theme:"default")+'" id="layui-laypage-'+a.index+'">',function(){var e=[];return layui.each(a.layout,function(a,t){i[t]&&e.push(i[t])}),e.join("")}(),"</div>"].join("")},u.prototype.jump=function(e,a){if(e){var t=this,i=t.config,r=e.children,u=e[n]("button")[0],l=e[n]("input")[0],p=e[n]("select")[0],c=function(){var e=0|l.value.replace(/\s|\D/g,"");e&&(i.curr=e,t.render())};if(a)return c();for(var o=0,y=r.length;o<y;o++)"a"===r[o].nodeName.toLowerCase()&&s.on(r[o],"click",function(){var e=0|this.getAttribute("data-page");e<1||e>i.pages||(i.curr=e,t.render())});p&&s.on(p,"change",function(){var e=this.value;i.curr*e>i.count&&(i.curr=Math.ceil(i.count/e)),i.limit=e,t.render()}),u&&s.on(u,"click",function(){c()})}},u.prototype.skip=function(e){if(e){var a=this,t=e[n]("input")[0];t&&s.on(t,"keyup",function(t){var n=this.value,i=t.keyCode;/^(37|38|39|40)$/.test(i)||(/\D/.test(n)&&(this.value=n.replace(/\D/,"")),13===i&&a.jump(e,!0))})}},u.prototype.render=function(e){var n=this,i=n.config,r=n.type(),u=n.view();2===r?i.elem&&(i.elem.innerHTML=u):3===r?i.elem.html(u):a[t](i.elem)&&(a[t](i.elem).innerHTML=u),i.jump&&i.jump(i,e);var s=a[t]("layui-laypage-"+i.index);n.jump(s),i.hash&&!e&&(location.hash="!"+i.hash+"="+i.curr),n.skip(s)};var s={render:function(e){var a=new u(e);return a.index},index:layui.laypage?layui.laypage.index+1e4:0,on:function(e,a,t){return e.attachEvent?e.attachEvent("on"+a,function(a){a.target=a.srcElement,t.call(e,a)}):e.addEventListener(a,t,!1),this}};e(i,s)});

View File

@ -1,2 +1,2 @@
/** layui-v2.3.0 MIT License By https://www.layui.com */
/** layui-v2.4.0 MIT License By https://www.layui.com */
;layui.define(function(e){"use strict";var r={open:"{{",close:"}}"},c={exp:function(e){return new RegExp(e,"g")},query:function(e,c,t){var o=["#([\\s\\S])+?","([^{#}])*?"][e||0];return n((c||"")+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 c="Laytpl Error";return"object"==typeof console&&console.error(c+e+"\n"+(r||"")),c+e}},n=c.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=n("^"+r.open+"#",""),l=n(r.close+"$","");e=e.replace(/\s+|\r|\t|\n/g," ").replace(n(r.open+"#"),r.open+"# ").replace(n(r.close+"}"),"} "+r.close).replace(/\\/g,"\\\\").replace(n(r.open+"!(.+?)!"+r.close),function(e){return e=e.replace(n("^"+r.open+"!"),"").replace(n("!"+r.close),"").replace(n(r.open+"|"+r.close),function(e){return e.replace(/(.)/g,"\\$1")})}).replace(/(?="|')/g,"\\").replace(c.query(),function(e){return e=e.replace(a,"").replace(l,""),'";'+e.replace(/\\/g,"")+';view+="'}).replace(c.query(1),function(e){var c='"+(';return e.replace(/\s/g,"")===r.open+r.close?"":(e=e.replace(n(r.open+"|"+r.close),""),/^=/.test(e)&&(e=e.replace(/^=/,""),c='"+_escape_('),c+e.replace(/\\/g,"")+')+"')}),e='"use strict";var view = "'+e+'";return view;';try{return o.cache=e=new Function("d, _escape_",e),e(t,c.escape)}catch(u){return delete o.cache,c.error(u,p)}},t.pt.render=function(e,r){var n,t=this;return e?(n=t.cache?t.cache(e,c.escape):t.parse(t.tpl,e),r?void r(n):n):c.error("no data")};var o=function(e){return"string"!=typeof e?c.error("Template not found"):new t(e)};o.config=function(e){e=e||{};for(var c in e)r[c]=e[c]},o.v="1.2.0",e("laytpl",o)});

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
/** layui-v2.3.0 MIT License By https://www.layui.com */
/** layui-v2.4.0 MIT License By https://www.layui.com */
;layui.define("jquery",function(e){"use strict";var a=layui.jquery,i={config:{},index:layui.rate?layui.rate.index+1e4:0,set:function(e){var i=this;return i.config=a.extend({},i.config,e),i},on:function(e,a){return layui.onevent.call(this,n,e,a)}},l=function(){var e=this,a=e.config;return{setvalue:function(a){e.setvalue.call(e,a)},config:a}},n="rate",t="layui-rate",o="layui-icon-rate",s="layui-icon-rate-solid",u="layui-icon-rate-half",r="layui-icon-rate-solid layui-icon-rate-half",c="layui-icon-rate-solid layui-icon-rate",f="layui-icon-rate layui-icon-rate-half",v=function(e){var l=this;l.index=++i.index,l.config=a.extend({},l.config,i.config,e),l.render()};v.prototype.config={length:5,text:!1,readonly:!1,half:!1,value:0,theme:""},v.prototype.render=function(){var e=this,i=e.config,l=i.theme?'style="color: '+i.theme+';"':"";i.elem=a(i.elem),parseInt(i.value)!==i.value&&(i.half||(i.value=Math.ceil(i.value)-i.value<.5?Math.ceil(i.value):Math.floor(i.value)));for(var n='<ul class="layui-rate" '+(i.readonly?"readonly":"")+">",u=1;u<=i.length;u++){var r='<li class="layui-inline"><i class="layui-icon '+(u>Math.floor(i.value)?o:s)+'" '+l+"></i></li>";i.half&&parseInt(i.value)!==i.value&&u==Math.ceil(i.value)?n=n+'<li><i class="layui-icon layui-icon-rate-half" '+l+"></i></li>":n+=r}n+="</ul>"+(i.text?'<span class="layui-inline">'+i.value+"星":"")+"</span>";var c=i.elem,f=c.next("."+t);f[0]&&f.remove(),e.elemTemp=a(n),i.span=e.elemTemp.next("span"),i.setText&&i.setText(i.value),c.html(e.elemTemp),c.addClass("layui-inline"),i.readonly||e.action()},v.prototype.setvalue=function(e){var a=this,i=a.config;i.value=e,a.render()},v.prototype.action=function(){var e=this,i=e.config,l=e.elemTemp,n=l.find("i").width();l.children("li").each(function(e){var t=e+1,v=a(this);v.on("click",function(e){if(i.value=t,i.half){var o=e.pageX-a(this).offset().left;o<=n/2&&(i.value=i.value-.5)}i.text&&l.next("span").text(i.value+"星"),i.choose&&i.choose(i.value),i.setText&&i.setText(i.value)}),v.on("mousemove",function(e){if(l.find("i").each(function(){a(this).addClass(o).removeClass(r)}),l.find("i:lt("+t+")").each(function(){a(this).addClass(s).removeClass(f)}),i.half){var c=e.pageX-a(this).offset().left;c<=n/2&&v.children("i").addClass(u).removeClass(s)}}),v.on("mouseleave",function(){l.find("i").each(function(){a(this).addClass(o).removeClass(r)}),l.find("i:lt("+Math.floor(i.value)+")").each(function(){a(this).addClass(s).removeClass(f)}),i.half&&parseInt(i.value)!==i.value&&l.children("li:eq("+Math.floor(i.value)+")").children("i").addClass(u).removeClass(c)})})},v.prototype.events=function(){var e=this;e.config},i.render=function(e){var a=new v(e);return l.call(a)},e(n,i)});

2
dist/lay/modules/slider.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
/** layui-v2.3.0 MIT License By https://www.layui.com */
/** layui-v2.4.0 MIT License By https://www.layui.com */
;layui.define("jquery",function(e){"use strict";var o=layui.$,a=layui.hint(),i="layui-tree-enter",r=function(e){this.options=e},t={arrow:["&#xe623;","&#xe625;"],checkbox:["&#xe626;","&#xe627;"],radio:["&#xe62b;","&#xe62a;"],branch:["&#xe622;","&#xe624;"],leaf:"&#xe621;"};r.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)},r.prototype.tree=function(e,a){var i=this,r=i.options,n=a||r.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 r.check?'<i class="layui-icon layui-tree-check">'+("checkbox"===r.check?t.checkbox[0]:"radio"===r.check?t.radio[0]:"")+"</i>":""}(),function(){return'<a href="'+(n.href||"javascript:;")+'" '+(r.target&&n.href?'target="'+r.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),i.tree(c,n.children)),e.append(s),"function"==typeof r.click&&i.click(s,n),i.spread(s,n),r.drag&&i.drag(s,n)})},r.prototype.click=function(e,o){var a=this,i=a.options;e.children("a").on("click",function(e){layui.stope(e),i.click(o)})},r.prototype.spread=function(e,o){var a=this,i=(a.options,e.children(".layui-tree-spread")),r=e.children("ul"),n=e.children("a"),l=function(){e.data("spread")?(e.data("spread",null),r.removeClass("layui-show"),i.html(t.arrow[0]),n.find(".layui-icon").html(t.branch[0])):(e.data("spread",!0),r.addClass("layui-show"),i.html(t.arrow[1]),n.find(".layui-icon").html(t.branch[1]))};r[0]&&(i.on("click",l),n.on("dblclick",l))},r.prototype.on=function(e){var a=this,r=a.options,t="layui-tree-drag";e.find("i").on("selectstart",function(e){return!1}),r.drag&&o(document).on("mousemove",function(e){var i=a.move;if(i.from){var r=(i.to,o('<div class="layui-box '+t+'"></div>'));e.preventDefault(),o("."+t)[0]||o("body").append(r);var n=o("."+t)[0]?o("."+t):r;n.addClass("layui-show").html(i.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(i),e.to&&e.to.elem.children("a").removeClass(i),a.move={},o("."+t).remove())})},r.prototype.move={},r.prototype.drag=function(e,a){var r=this,t=(r.options,e.children("a")),n=function(){var t=o(this),n=r.move;n.from&&(n.to={item:a,elem:e},t.addClass(i))};t.on("mousedown",function(){var o=r.move;o.from={item:a,elem:e}}),t.on("mouseenter",n).on("mousemove",n).on("mouseleave",function(){var e=o(this),a=r.move;a.from&&(delete a.to,e.removeClass(i))})},e("tree",function(e){var i=new r(e=e||{}),t=o(e.elem);return t[0]?void i.init(t):a.error("layui.tree 没有找到"+e.elem+"元素")})});

File diff suppressed because one or more lines are too long

View File

@ -1,2 +1,2 @@
/** layui-v2.3.0 MIT License By https://www.layui.com */
;layui.define("jquery",function(e){"use strict";var t=layui.$,i={fixbar:function(e){var i,a,o="layui-fixbar",r="layui-fixbar-top",l=t(document),n=t("body");e=t.extend({showHeight:200},e),e.bar1=e.bar1===!0?"&#xe606;":e.bar1,e.bar2=e.bar2===!0?"&#xe607;":e.bar2,e.bgcolor=e.bgcolor?"background-color:"+e.bgcolor:"";var c=[e.bar1,e.bar2,"&#xe604;"],g=t(['<ul class="'+o+'">',e.bar1?'<li class="layui-icon" lay-type="bar1" style="'+e.bgcolor+'">'+c[0]+"</li>":"",e.bar2?'<li class="layui-icon" lay-type="bar2" style="'+e.bgcolor+'">'+c[1]+"</li>":"",'<li class="layui-icon '+r+'" lay-type="top" style="'+e.bgcolor+'">'+c[2]+"</li>","</ul>"].join("")),u=g.find("."+r),s=function(){var t=l.scrollTop();t>=e.showHeight?i||(u.show(),i=1):i&&(u.hide(),i=0)};t("."+o)[0]||("object"==typeof e.css&&g.css(e.css),n.append(g),s(),g.find("li").on("click",function(){var i=t(this),a=i.attr("lay-type");"top"===a&&t("html,body").animate({scrollTop:0},200),e.click&&e.click.call(this,a)}),l.on("scroll",function(){clearTimeout(a),a=setTimeout(function(){s()},100)}))},countdown:function(e,t,i){var a=this,o="function"==typeof t,r=new Date(e).getTime(),l=new Date(!t||o?(new Date).getTime():t).getTime(),n=r-l,c=[Math.floor(n/864e5),Math.floor(n/36e5)%24,Math.floor(n/6e4)%60,Math.floor(n/1e3)%60];o&&(i=t);var g=setTimeout(function(){a.countdown(e,l+1e3,i)},1e3);return i&&i(n>0?c:[0,0,0,0],t,g),n<=0&&clearTimeout(g),g},timeAgo:function(e,t){var i=this,a=[[],[]],o=(new Date).getTime()-new Date(e).getTime();return o>6912e5?(o=new Date(e),a[0][0]=i.digit(o.getFullYear(),4),a[0][1]=i.digit(o.getMonth()+1),a[0][2]=i.digit(o.getDate()),t||(a[1][0]=i.digit(o.getHours()),a[1][1]=i.digit(o.getMinutes()),a[1][2]=i.digit(o.getSeconds())),a[0].join("-")+" "+a[1].join(":")):o>=864e5?(o/1e3/60/60/24|0)+"天前":o>=36e5?(o/1e3/60/60|0)+"小时前":o>=12e4?(o/1e3/60|0)+"分钟前":o<0?"未来":"刚刚"},digit:function(e,t){var i="";e=String(e),t=t||2;for(var a=e.length;a<t;a++)i+="0";return e<Math.pow(10,t)?i+(0|e):e},toDateString:function(e,t){var i=this,a=new Date(e||new Date),o=[i.digit(a.getFullYear(),4),i.digit(a.getMonth()+1),i.digit(a.getDate())],r=[i.digit(a.getHours()),i.digit(a.getMinutes()),i.digit(a.getSeconds())];return t=t||"yyyy-MM-dd HH:mm:ss",t.replace(/yyyy/g,o[0]).replace(/MM/g,o[1]).replace(/dd/g,o[2]).replace(/HH/g,r[0]).replace(/mm/g,r[1]).replace(/ss/g,r[2])},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;")}};e("util",i)});
/** layui-v2.4.0 MIT License By https://www.layui.com */
;layui.define("jquery",function(t){"use strict";var e=layui.$,i={fixbar:function(t){var i,a,n="layui-fixbar",r="layui-fixbar-top",o=e(document),l=e("body");t=e.extend({showHeight:200},t),t.bar1=t.bar1===!0?"&#xe606;":t.bar1,t.bar2=t.bar2===!0?"&#xe607;":t.bar2,t.bgcolor=t.bgcolor?"background-color:"+t.bgcolor:"";var c=[t.bar1,t.bar2,"&#xe604;"],g=e(['<ul class="'+n+'">',t.bar1?'<li class="layui-icon" lay-type="bar1" style="'+t.bgcolor+'">'+c[0]+"</li>":"",t.bar2?'<li class="layui-icon" lay-type="bar2" style="'+t.bgcolor+'">'+c[1]+"</li>":"",'<li class="layui-icon '+r+'" lay-type="top" style="'+t.bgcolor+'">'+c[2]+"</li>","</ul>"].join("")),s=g.find("."+r),u=function(){var e=o.scrollTop();e>=t.showHeight?i||(s.show(),i=1):i&&(s.hide(),i=0)};e("."+n)[0]||("object"==typeof t.css&&g.css(t.css),l.append(g),u(),g.find("li").on("click",function(){var i=e(this),a=i.attr("lay-type");"top"===a&&e("html,body").animate({scrollTop:0},200),t.click&&t.click.call(this,a)}),o.on("scroll",function(){clearTimeout(a),a=setTimeout(function(){u()},100)}))},countdown:function(t,e,i){var a=this,n="function"==typeof e,r=new Date(t).getTime(),o=new Date(!e||n?(new Date).getTime():e).getTime(),l=r-o,c=[Math.floor(l/864e5),Math.floor(l/36e5)%24,Math.floor(l/6e4)%60,Math.floor(l/1e3)%60];n&&(i=e);var g=setTimeout(function(){a.countdown(t,o+1e3,i)},1e3);return i&&i(l>0?c:[0,0,0,0],e,g),l<=0&&clearTimeout(g),g},timeAgo:function(t,e){var i=this,a=[[],[]],n=(new Date).getTime()-new Date(t).getTime();return n>6912e5?(n=new Date(t),a[0][0]=i.digit(n.getFullYear(),4),a[0][1]=i.digit(n.getMonth()+1),a[0][2]=i.digit(n.getDate()),e||(a[1][0]=i.digit(n.getHours()),a[1][1]=i.digit(n.getMinutes()),a[1][2]=i.digit(n.getSeconds())),a[0].join("-")+" "+a[1].join(":")):n>=864e5?(n/1e3/60/60/24|0)+"天前":n>=36e5?(n/1e3/60/60|0)+"小时前":n>=12e4?(n/1e3/60|0)+"分钟前":n<0?"未来":"刚刚"},digit:function(t,e){var i="";t=String(t),e=e||2;for(var a=t.length;a<e;a++)i+="0";return t<Math.pow(10,e)?i+(0|t):t},toDateString:function(t,e){var i=this,a=new Date(t||new Date),n=[i.digit(a.getFullYear(),4),i.digit(a.getMonth()+1),i.digit(a.getDate())],r=[i.digit(a.getHours()),i.digit(a.getMinutes()),i.digit(a.getSeconds())];return e=e||"yyyy-MM-dd HH:mm:ss",e.replace(/yyyy/g,n[0]).replace(/MM/g,n[1]).replace(/dd/g,n[2]).replace(/HH/g,r[0]).replace(/mm/g,r[1]).replace(/ss/g,r[2])},escape:function(t){return String(t||"").replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/'/g,"&#39;").replace(/"/g,"&quot;")}};!function(t,e,i){"$:nomunge";function a(){n=e[l](function(){r.each(function(){var e=t(this),i=e.width(),a=e.height(),n=t.data(this,g);(i!==n.w||a!==n.h)&&e.trigger(c,[n.w=i,n.h=a])}),a()},o[s])}var n,r=t([]),o=t.resize=t.extend(t.resize,{}),l="setTimeout",c="resize",g=c+"-special-event",s="delay",u="throttleWindow";o[s]=250,o[u]=!0,t.event.special[c]={setup:function(){if(!o[u]&&this[l])return!1;var e=t(this);r=r.add(e),t.data(this,g,{w:e.width(),h:e.height()}),1===r.length&&a()},teardown:function(){if(!o[u]&&this[l])return!1;var e=t(this);r=r.not(e),e.removeData(g),r.length||clearTimeout(n)},add:function(e){function a(e,a,r){var o=t(this),l=t.data(this,g)||{};l.w=a!==i?a:o.width(),l.h=r!==i?r:o.height(),n.apply(this,arguments)}if(!o[u]&&this[l])return!1;var n;return t.isFunction(e)?(n=e,a):(n=e.handler,void(e.handler=a))}}}(e,window),t("util",i)});

6
dist/layui.all.js vendored

File diff suppressed because one or more lines are too long

4
dist/layui.js vendored

File diff suppressed because one or more lines are too long

View File

@ -3,59 +3,68 @@
<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">
<style type="text/css">
#test1,#test2,#test3,#test4,#test5,#test6{margin-left: 50px; margin-top: 70px;}
</style>
<style>
body{padding:20px;}
.test-box{margin-bottom: 50px;}
</style>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div>
<div id="test1"></div>
</div>
<div>
<div id="test2"></div>
</div>
<div>
<div id="test3"></div>
</div>
<div>
<div id="test4"></div>
</div>
<div>
<div id="test5"></div>
</div>
<div>
<div id="test6"></div>
<div class="test-box">
<div class="layui-inline">
<input class="layui-input" id="LAY-test1">
</div>
<div id="test1"></div>
</div>
<div class="test-box">
<div id="test2"></div>
</div>
<div class="test-box">
<div id="test3"></div>
</div>
<div class="test-box">
<div id="test4"></div>
</div>
<div class="test-box">
<div id="test5"></div>
</div>
<div class="test-box">
<div id="test6"></div>
</div>
</div>
<script src="../src/layui.js"></script>
<script>
layui.use('colorpicker', function(){
layui.use(['colorpicker', 'layer'], function(){
var colorpicker = layui.colorpicker;
colorpicker.render({
elem: '#test1'
,predefine: true //开启预定义颜色
,prededata: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
//,predefine: true //开启预定义颜色
//,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
,change: function(color){
console.log(color)
document.body.style.backgroundColor = color;
}
,done: function(color){
layui.$('#LAY-test1').val(color);
document.body.style.backgroundColor = color;
}
});
colorpicker.render({
elem: '#test2'
,bgcolor: 'rgba(218, 121, 157, 0.5)' //设置默认色
,color: 'rgba(218, 121, 157, 1)' //设置默认色
,predefine: true
,alpha: true //开启透明度
,format: 'rgb'
@ -63,29 +72,33 @@ body{padding:20px;}
console.log(color)
}
});
colorpicker.render({
elem: '#test3'
,bgcolor: '#06eaee'
,alpha: true
,format: 'rgb' //设置输入显示格式为rgb
elem: '#06eaee'
,color: 'rgba(0,0,0)'
//,alpha: true
//,format: 'rgb' //设置输入显示格式为rgb
});
colorpicker.render({
elem: '#test4'
,bgcolor: '#06eeb8'
,color: '#06eeb8'
,predefine: true //开启预定义色
,format: 'rgb'
});
colorpicker.render({
elem: '#test5'
,bgcolor: '#ffd900'
,color: '#ffd900'
,predefine: true
,size: 'mini'
,size: 'lg'
});
colorpicker.render({
elem: '#test6'
,bgcolor: '#F00'
,color: '#F00'
,predefine: true
,prededata: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']
,size: 'xs'
});
})

View File

@ -8,19 +8,14 @@
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body{padding:20px;}
p{font-size: 18px; margin: 20px 0 50px;}
body{padding:100px 0;}
</style>
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-xs8">
<p>默认滑块</p>
<div id="slideTest1"></div>
</div>
</div>
<div id="slideTest1"></div>
</div>
<script src="../src/layui.js"></script>
@ -28,26 +23,27 @@ p{font-size: 18px; margin: 20px 0 50px;}
layui.use('slider', function(){
var slider = layui.slider;
slider.render({
elem: '#slideTest1'
// ,min: 0 //最小值
// ,max: 100 //最大
// ,value: 40 //初始
// ,step: 10 //间隔
// ,showstep: true //间隔点
// ,tips: false //关闭提示文本
// ,input: true //输入框
// ,range: true //范围选择
// ,sliderValue: function(value){ //回调实时显示当前值
// console.log(value)
// }
// ,setTips: function(value){ //自定义提示文本
// return '离世界末日还有' + value + '天';
// }
// ,vertical: true //垂直滑块,默认横向
// ,height: '400' //配合 vertical 参数使用默认200px
// ,disabled: true //禁用滑块
// ,color: '#2F4056' //主题色
//,type: 'vertical'
//,min: 0 //最小
//,max: 100 //最大
//,value: 60 //[40, 60] //初始
//,step: 20 //间隔值
//,showstep: true //间隔点
//,tips: false //关闭提示文本
,input: true //输入框
//,range: true //范围选择
,change: function(value){ //回调实时显示当前值
console.log(value)
}
//,setTips: function(value){ //自定义提示文本
//return '离世界末日还有 ' + value + ' 天';
//}
//,height: '300' //配合 type:'vertical' 参数使用默认200px
//,disabled: true //禁用滑块
//,theme: '#c00' //主题色
});
});
</script>

View File

@ -79,7 +79,7 @@ body{padding: 20px; /*overflow-y: scroll;*/}
<th lay-data="{field:'province', width:80}" rowspan="2"></th>
<th lay-data="{field:'city', width:80}" rowspan="2"></th>
<th lay-data="{align:'center'}" colspan="2">详细</th>
<th lay-data="{field:'zone', width:80}" rowspan="2"></th>
<th lay-data="{field:'zone'}" rowspan="2"></th>
<th lay-data="{field:'province', width:80}" rowspan="2"></th>
<th lay-data="{field:'city', width:80}" rowspan="2"></th>
</tr>
@ -264,7 +264,7 @@ layui.use('table', function(){
,{field:'id', title:'ID', unresize: true, sort: true}
,{field:'username', title:'用户名', templet: '#usernameTpl'}
,{field:'email', title:'邮箱'}
,{field:'sex', title:'性别', templet: '#switchTpl', minWidth: 85, align:'center'}
,{xfield:'sex', title:'性别', templet: '#switchTpl', minWidth: 85, align:'center'}
,{field:'lock', title:'是否锁定', templet: '#checkboxTpl', minWidth: 110, align:'center'}
,{field:'city', title:'城市'}
]]

View File

@ -30,7 +30,7 @@ var argv = require('minimist')(process.argv.slice(2), {
]
//模块
,mods = 'laytpl,laypage,laydate,jquery,layer,element,upload,slider,form,tree,table,carousel,rate,util,flow,colorpicker,layedit,code'
,mods = 'laytpl,laypage,laydate,jquery,layer,element,upload,slider,colorpicker,form,tree,table,carousel,rate,util,flow,layedit,code'
//发行版本目录
,releaseDir = './release/zip/layui-v' + pkg.version

View File

@ -210,6 +210,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-icon-cols:before{content:"\e610";}
.layui-icon-export:before{content:"\e67d";}
.layui-icon-print:before {content:"\e66d";}
.layui-icon-slider:before {content: "\e714";}
/* 基本布局 */
.layui-main{position: relative; width: 1140px; margin: 0 auto;}
@ -460,6 +461,8 @@ a cite{font-style: normal; *cursor:pointer;}
/* 窗口面板 */
.layui-panel-window{position: relative; padding: 15px; border-radius: 0; border-top: 5px solid #E6E6E6; background-color: #fff;}
/* 其它辅助 */
.layui-auxiliar-moving{position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: none; z-index: 9999999999;}
/*
@ -935,10 +938,6 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-tree-drag{display: none; position: absolute; left: -666px; top: -666px; background-color: #f2f2f2; padding: 5px 10px; border: 1px dotted #000; white-space: nowrap}
.layui-tree-drag i{padding-right: 5px;}
/** 代码修饰器 **/
.layui-code{position: relative; margin: 10px 0; padding: 15px; line-height: 20px; border: 1px solid #ddd; border-left-width: 6px; background-color: #F2F2F2; color: #333; font-family: Courier New; font-size: 12px;}
/** 导航菜单 **/
.layui-nav{position: relative; padding: 0 20px; background-color: #393D49; color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box;}
.layui-nav *{font-size: 14px;}
@ -1148,7 +1147,8 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-util-face ul li{cursor: pointer; float: left; border: 1px solid #e8e8e8; height: 22px; width: 26px; overflow: hidden; margin: -1px 0 0 -1px; padding: 4px 2px; text-align: center;}
.layui-util-face ul li:hover{position: relative; z-index: 2; border: 1px solid #eb7350; background: #fff9ec;}
/** 代码修饰器 **/
.layui-code{position: relative; margin: 10px 0; padding: 15px; line-height: 20px; border: 1px solid #ddd; border-left-width: 6px; background-color: #F2F2F2; color: #333; font-family: Courier New; font-size: 12px;}
/** 评分组件 By star1029 **/
.layui-rate,
@ -1160,71 +1160,73 @@ body .layui-util-face .layui-layer-content{padding:0; background-color:#fff; co
.layui-rate[readonly] li i:hover{cursor: default; transform: scale(1);}
/** 颜色选择器 By star1029 **/
.layui-colorpicker{width: 26px; height: 26px; border: 1px solid #EEE; padding: 5px; border-radius: 2px; line-height: 24px; display: inline-block; cursor: pointer;}
.layui-colorpicker{width: 26px; height: 26px; border: 1px solid #e6e6e6; padding: 5px; border-radius: 2px; line-height: 24px; display: inline-block; cursor: pointer; transition: all .3s; -webkit-transition: all .3s;}
.layui-colorpicker:hover{border-color: #d2d2d2;}
.layui-colorpicker.layui-colorpicker-lg{width: 34px; height: 34px; line-height: 32px;}
.layui-colorpicker.layui-colorpicker-sm{width: 24px; height: 24px; line-height: 22px;}
.layui-colorpicker.layui-colorpicker-xs{width: 22px; height: 22px; line-height: 20px;}
.layui-colorpicker .layui-colorpicker-trigger-bgcolor{display: block; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}
.layui-colorpicker .layui-colorpicker-trigger-span{display: block; height: 100%; box-sizing: border-box; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); border-radius: 2px; text-align: center;}
.layui-colorpicker .layui-colorpicker-trigger-i{display: inline-block; color: #FFF; font-size: 12px;}
.layui-colorpicker .layui-colorpicker-trigger-i.layui-icon-close{color: #CCC;}
.layui-colorpicker-main{width: 280px; padding: 7px; background: #FFF; border: 1px solid #EEE; border-radius: 2px; position: absolute; z-index: 4999;}
.layui-colorpicker-trigger-bgcolor{display: block; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==); border-radius: 2px;}
.layui-colorpicker-trigger-span{display: block; height: 100%; box-sizing: border-box; border: 1px solid rgba(0,0,0,.15); border-radius: 2px; text-align: center;}
.layui-colorpicker-trigger-i{display: inline-block; color: #FFF; font-size: 12px;}
.layui-colorpicker-trigger-i.layui-icon-close{color: #999;}
.layui-colorpicker-main{position: absolute; z-index: 4999; width: 280px; padding: 7px; background: #FFF; border: 1px solid #d2d2d2; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12);}
.layui-colorpicker-main-wrapper{height: 180px; position: relative;}
.layui-colorpicker-main-wrapper .colorpicker-basis{width: 260px; height: 100%; position: relative;}
.layui-colorpicker-main-wrapper .colorpicker-basis-white{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(90deg, #FFF, hsla(0,0%,100%,0));}
.layui-colorpicker-main-wrapper .colorpicker-basis-black{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, #000, transparent);}
.layui-colorpicker-main-wrapper .colorpicker-basis-cursor{width: 5px; height: 5px; border: 1px solid #FFF; border-radius: 50%; position: absolute; top: -3px; right: -3px;}
.layui-colorpicker-main-wrapper .colorpicker-side{position: absolute; top: 0; right: 0; width: 12px; height: 100%; background: linear-gradient(#F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);}
.layui-colorpicker-main-wrapper .colorpicker-side-slider{width: 100%; height: 5px; box-shadow: 0 0 1px #888888; box-sizing: border-box; background: #FFF; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; left: 0;}
.layui-colorpicker-basis{width: 260px; height: 100%; position: relative;}
.layui-colorpicker-basis-white{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(90deg, #FFF, hsla(0,0%,100%,0));}
.layui-colorpicker-basis-black{width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, #000, transparent);}
.layui-colorpicker-basis-cursor{width: 5px; height: 5px; border: 1px solid #FFF; border-radius: 50%; position: absolute; top: -3px; right: -3px;}
.layui-colorpicker-side{position: absolute; top: 0; right: 0; width: 12px; height: 100%; background: linear-gradient(#F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);}
.layui-colorpicker-side-slider{width: 100%; height: 5px; box-shadow: 0 0 1px #888888; box-sizing: border-box; background: #FFF; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; left: 0;}
.layui-colorpicker-main-alpha{display: none; height: 12px; margin-top: 7px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}
.layui-colorpicker-main-alpha .colorpicker-alpha-bgcolor{height: 100%; position: relative;}
.layui-colorpicker-main-alpha .colorpicker-alpha-slider{width: 5px; height: 100%; box-shadow: 0 0 1px #888888; box-sizing: border-box; background: #FFF; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; top: 0;}
.layui-colorpicker-alpha-bgcolor{height: 100%; position: relative;}
.layui-colorpicker-alpha-slider{width: 5px; height: 100%; box-shadow: 0 0 1px #888888; box-sizing: border-box; background: #FFF; border-radius: 1px; border: 1px solid #f0f0f0; cursor: pointer; position: absolute; top: 0;}
.layui-colorpicker-main-pre{padding-top: 7px; font-size: 0;}
.layui-colorpicker-main-pre .colorpicker-pre{width: 20px; height: 20px; border-radius: 2px; display: inline-block; margin-left: 6px; margin-bottom: 7px; cursor: pointer;}
.layui-colorpicker-main-pre .colorpicker-pre:nth-child(11n+1){margin-left: 0;}
.layui-colorpicker-main-pre .colorpicker-pre.isalpha{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}
.layui-colorpicker-main-pre .colorpicker-pre.selected{box-shadow: 0 0 3px 2px #0ad2c1;}
.layui-colorpicker-main-pre .colorpicker-pre > div{height: 100%; border-radius: 2px;}
.layui-colorpicker-main-input{padding-top: 7px;}
.layui-colorpicker-main-input div.layui-inline{margin-right: 22px; font-size: 12px;}
.layui-colorpicker-main-input input.layui-input{height: 30px; border-radius: 2px; color: #777;}
.layui-colorpicker-pre{width: 20px; height: 20px; border-radius: 2px; display: inline-block; margin-left: 6px; margin-bottom: 7px; cursor: pointer;}
.layui-colorpicker-pre:nth-child(11n+1){margin-left: 0;}
.layui-colorpicker-pre-isalpha{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}
.layui-colorpicker-pre.layui-this{box-shadow: 0 0 3px 2px rgba(0,0,0,.15);}
.layui-colorpicker-pre > div{height: 100%; border-radius: 2px;}
.layui-colorpicker-main-input{text-align: right; padding-top: 7px;}
.layui-colorpicker-main-input .layui-btn-container .layui-btn{margin: 0 0 0 10px;}
.layui-colorpicker-main-input div.layui-inline{float: left; margin-right: 10px; font-size: 14px;}
.layui-colorpicker-main-input input.layui-input{width: 150px; height: 30px; color: #666;}
/** 滑块 By star1029 **/
.layui-slider{height: 4px; background: #e2e2e2; border-radius: 3px; position: relative; z-index: 999;}
.layui-slider .layui-slider-bar{border-radius: 3px; position: absolute; z-index: 777; height: 100%;}
.layui-slider .layui-slider-step{width: 4px; height: 4px; border-radius: 50%; background: #FFF; position: absolute; top: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.layui-slider .layui-slider-wrap{width: 36px; height: 36px; position: absolute; top: -16px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 888; text-align: center;}
.layui-slider .layui-slider-wrap .layui-slider-wrap-btn{width: 12px; height: 12px; border-radius: 50%; background: #FFF; display: inline-block; vertical-align: middle; cursor: pointer; transition: 0.3s;}
.layui-slider .layui-slider-wrap:after{content: ""; height: 100%; display: inline-block; vertical-align: middle;}
.layui-slider .layui-slider-wrap .layui-slider-wrap-btn:hover, .layui-slider .layui-slider-wrap .layui-slider-wrap-btn.hover{transform: scale(1.2);}
.layui-slider .layui-slider-tips{white-space:nowrap; display: none; position: absolute; top: -42px; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #FFF; background: #000; border-radius: 3px; height: 25px; line-height: 25px; padding: 0 10px;}
.layui-slider{height: 4px; background: #e2e2e2; border-radius: 3px; position: relative; cursor: pointer;}
.layui-slider-bar{border-radius: 3px; position: absolute; z-index: 777; height: 100%;}
.layui-slider-step{position: absolute; top: 0; z-index: 999; width: 4px; height: 4px; border-radius: 50%; background: #FFF; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.layui-slider-wrap{width: 36px; height: 36px; position: absolute; top: -16px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 1000; text-align: center;}
.layui-slider-wrap-btn{width: 12px; height: 12px; border-radius: 50%; background: #FFF; display: inline-block; vertical-align: middle; cursor: pointer; transition: 0.3s;}
.layui-slider-wrap:after{content: ""; height: 100%; display: inline-block; vertical-align: middle;}
.layui-slider-wrap-btn:hover,
.layui-slider-wrap-btn.layui-slider-hover{transform: scale(1.2);}
.layui-slider-wrap-btn.layui-disabled:hover{transform: scale(1) !important;}
.layui-slider-tips{white-space:nowrap; display: none; position: absolute; top: -42px; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #FFF; background: #000; border-radius: 3px; height: 25px; line-height: 25px; padding: 0 10px;}
.layui-slider > span{display: none; position: absolute; top: -17px; margin-left: -6px; width: 0; height: 0; border-width: 6px; border-style: solid; border-color: #000 transparent transparent transparent;}
.layui-slider-input{width: 70px; height: 32px; border: 1px solid #AAA; border-radius: 3px; font-size: 16px; line-height: 32px; position: absolute; right: 0; top: -15px;}
.layui-slider-input .layui-slider-input-btn{display: none; position: absolute; top: 0; right: 0; width: 20px; height: 100%; border-left: 1px solid #AAA;}
.layui-slider-input .layui-slider-input-btn i{cursor: pointer; position: absolute; right: 0; bottom: 0; width: 20px; height: 50%; font-size: 12px; line-height: 16px; text-align: center;}
.layui-slider-input .layui-slider-input-btn i:first-child{top: 0; border-bottom: 1px solid #AAA;}
.layui-slider-input .layui-slider-input-txt{height: 100%; font-size: 14px;}
.layui-slider-input .layui-slider-input-txt input{height: 100%; border: none;}
.layui-slider-input.hover{border-color: #009688;}
.layui-slider-input .layui-slider-input-btn i:hover{color: #009688;}
.layui-slider-input{width: 70px; height: 32px; border: 1px solid #e6e6e6; border-radius: 3px; font-size: 16px; line-height: 32px; position: absolute; right: 0; top: -15px;}
.layui-slider-input-btn{display: none; position: absolute; top: 0; right: 0; width: 20px; height: 100%; border-left: 1px solid #d2d2d2;}
.layui-slider-input-btn i{cursor: pointer; position: absolute; right: 0; bottom: 0; width: 20px; height: 50%; font-size: 12px; line-height: 16px; text-align: center; color: #999;}
.layui-slider-input-btn i:first-child{top: 0; border-bottom: 1px solid #d2d2d2;}
.layui-slider-input-txt{height: 100%; font-size: 14px;}
.layui-slider-input-txt input{height: 100%; border: none;}
.layui-slider-input-btn i:hover{color: #009688;}
/*垂直滑块*/
.layui-slider.layui-slider-vertical{width: 4px; margin-left: 34px;}
.layui-slider.layui-slider-vertical .layui-slider-bar{width: 4px;}
.layui-slider.layui-slider-vertical .layui-slider-step{top: auto; left: 0px; -webkit-transform: translateY(50%); transform: translateY(50%);}
.layui-slider.layui-slider-vertical .layui-slider-wrap{top: auto; left: -16px; -webkit-transform: translateY(50%); transform: translateY(50%);}
.layui-slider.layui-slider-vertical .layui-slider-tips{top: auto; left: 2px; z-index: 1000;}
.layui-slider.layui-slider-vertical > span{top: auto; left: 2px; z-index: 1000;}
.layui-slider-vertical{width: 4px; margin-left: 34px;}
.layui-slider-vertical .layui-slider-bar{width: 4px;}
.layui-slider-vertical .layui-slider-step{top: auto; left: 0px; -webkit-transform: translateY(50%); transform: translateY(50%);}
.layui-slider-vertical .layui-slider-wrap{top: auto; left: -16px; -webkit-transform: translateY(50%); transform: translateY(50%);}
.layui-slider-vertical .layui-slider-tips{top: auto; left: 2px; z-index: 1000;}
.layui-slider-vertical > span{top: auto; left: 2px; z-index: 1000;}
@media \0screen{
.layui-slider .layui-slider-wrap-btn{margin-left: -20px;}
.layui-slider.layui-slider-vertical .layui-slider-wrap-btn{margin-left: 0; margin-bottom: -20px;}
.layui-slider.layui-slider-vertical .layui-slider-tips{margin-left: -8px;}
.layui-slider-wrap-btn{margin-left: -20px;}
.layui-slider-vertical .layui-slider-wrap-btn{margin-left: 0; margin-bottom: -20px;}
.layui-slider-vertical .layui-slider-tips{margin-left: -8px;}
.layui-slider > span{margin-left: 8px;}
}
/** 动画 **/
.layui-anim{-webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.layui-anim.layui-icon{display: inline-block;}

Binary file not shown.

View File

@ -20,13 +20,6 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
<glyph glyph-name="reply-fill" unicode="&#58897;" d="M507.904 835.5840000000001q93.184 1.024 175.104-33.792t143.872-94.72 97.792-141.312 36.864-174.592q1.024-88.064-30.208-165.888t-87.04-137.728-131.072-98.816-162.304-48.128q-22.528-3.072-48.128-5.12t-56.832-3.072-69.632 0-86.528 6.144q-106.496 10.24-158.208 26.624t-41.472 18.432q54.272 9.216 93.184 29.696 20.48 11.264 16.896 32.256t-19.968 39.424q-52.224 57.344-84.48 133.632t-34.304 164.352q-1.024 93.184 33.792 175.104t95.232 143.36 142.336 97.28 175.104 36.864zM707.584 385.024q0-26.624 18.432-45.568t45.056-18.944 45.568 18.944 18.944 45.568-18.944 45.056-45.568 18.432-45.056-18.432-18.432-45.056zM450.56 385.024q0-26.624 19.456-46.08t46.08-19.456q27.648 0 46.592 19.456t18.944 46.08q0 27.648-18.944 46.592t-46.592 18.944q-26.624 0-46.08-18.944t-19.456-46.592zM196.608 386.048q0-26.624 18.944-46.08t45.568-19.456q27.648 0 46.592 19.456t18.944 46.08-18.944 45.568-46.592 18.944q-26.624 0-45.568-18.944t-18.944-45.568z" horiz-adv-x="1024" />
@ -471,6 +464,9 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
<glyph glyph-name="export" unicode="&#59005;" d="M896.4374528 479.830016c0 26.673152-21.6236032 48.2967552-48.2967552 48.2967552H630.8069376c-26.673152 0-48.2967552-21.6236032-48.2967552-48.2967552v-83.04831147H384.69522773l-2.71428266 5.36849067c-41.336832 87.44686933-35.95195733 204.128256 150.601728 199.94487467v-108.91537067l172.19037866 164.757504L532.58267307 822.7110912v-106.57245867c-228.64418133 5.70709333-263.651328-183.517184-157.433856-314.01028266l4.6891008-5.34664534h-88.46595414c-26.673152 0-48.2967552-21.6236032-48.2967552-48.2967552v-66.78882986h-98.43616426c-26.673152 0-40.4258816-21.6236032-30.71781547-48.2967552l79.10304427-217.33485227c9.70806613-26.673152 39.20145067-48.2967552 65.87460266-48.2967552h603.70670934c23.75898453 0 37.2506624 17.16169387 33.05745066 39.76178347 0.4980736 2.77108053 0.77441707 5.619712 0.77441707 8.53497173v463.765504z m-60.37067093-306.4528896l-21.8464256 60.02223787c-9.70806613 26.673152-39.20145067 48.2967552-65.87460267 48.2967552H303.44697173v30.56708266c0 13.336576 10.81125547 24.14783147 24.14783147 24.14783147h315.28605013v107.1972352c0 13.336576 10.81125547 24.14783147 24.14783147 24.14783147h144.88917333c13.336576 0 24.14783147-10.81125547 24.14783147-24.14783147v-270.2311424z" horiz-adv-x="1024" />
<glyph glyph-name="slider" unicode="&#59156;" d="M228.7 683.9v-66.7H112v66.7h116.7z m333.2-266.6v-66.7H112v66.7h449.9zM295.4 150.60000000000002V84H112v66.7h183.4v-0.1z m116.6 600c9 0 16.8-3.3 23.5-9.9 6.5-6.5 9.9-14.5 9.9-23.5v-133.3c0-9-3.3-16.8-9.9-23.5-6.5-6.5-14.5-9.9-23.5-9.9H278.8c-9 0-16.8 3.3-23.5 9.9-6.5 6.5-9.9 14.3-9.9 23.5V717.1c0 9 3.3 16.8 9.9 23.5 6.5 6.5 14.3 9.9 23.5 9.9h133.3v0.1h-0.1z m66.7-533.3c9 0 16.8-3.3 23.5-9.9 6.5-6.5 9.9-14.5 9.9-23.5v-133.3c0-9-3.3-16.8-9.9-23.5-6.5-6.5-14.5-9.9-23.5-9.9H345.3c-9 0-16.8 3.3-23.5 9.9-6.5 6.5-9.9 14.5-9.9 23.5V183.89999999999998c0 9 3.3 16.8 9.9 23.5 6.5 6.5 14.3 9.9 23.5 9.9h133.4v0.1zM912 683.9v-66.7H462.1v66.7H912z m0-533.3V84H528.6v66.7h383.3v-0.1h0.1zM745.2 483.9c9 0 16.8-3.3 23.5-9.9 6.5-6.5 9.9-14.5 9.9-23.5v-133.3c0-9-3.3-16.8-9.9-23.5-6.5-6.5-14.5-9.9-23.5-9.9H612c-9 0-16.8 3.3-23.5 9.9-6.5 6.5-9.9 14.3-9.9 23.5V450.6c0 9 3.3 16.8 9.9 23.5 6.5 6.5 14.5 9.9 23.5 9.9l133.2-0.1zM912 417.3v-66.7H795.3v66.7H912z" horiz-adv-x="1024" />
</font>

Before

Width:  |  Height:  |  Size: 274 KiB

After

Width:  |  Height:  |  Size: 274 KiB

Binary file not shown.

Binary file not shown.

View File

@ -6,8 +6,9 @@
*/
layui.define('jquery',function(exports){
layui.define('jquery', function(exports){
"use strict";
var $ = layui.jquery
//外部接口
@ -27,19 +28,23 @@ layui.define('jquery',function(exports){
return layui.onevent.call(this, 'colorpicker', events, callback);
}
}
//操作当前实例
,thisColorPicker = function(){
var that = this
,options = that.config;
return {
config: options
}
}
//字符常量
,MOD_NAME = 'colorpicker', ELEM_VIEW = 'layui-colorpicker', ELEM_MAIN = 'layui-colorpicker-main', ICON_PICKER_DOWN = 'layui-icon-down', ICON_PICKER_CLOSE = 'layui-icon-close'
,PICKER_TRIG_SPAN = 'layui-colorpicker-trigger-span', PICKER_TRIG_I = 'layui-colorpicker-trigger-i', PICKER_SIDE = 'colorpicker-side', PICKER_SIDE_SLIDER = 'colorpicker-side-slider'
,PICKER_BASIS = 'colorpicker-basis', PICKER_ALPHA_BG = 'colorpicker-alpha-bgcolor', PICKER_ALPHA_SLIDER = 'colorpicker-alpha-slider', PICKER_BASIS_CUR = 'colorpicker-basis-cursor', PICKER_INPUT = 'layui-colorpicker-main-input'
,MOD_NAME = 'colorpicker', SHOW = 'layui-show', THIS = 'layui-this', ELEM = 'layui-colorpicker'
//构造器
,Class = function(options){
var that = this;
that.index = ++colorpicker.index;
that.config = $.extend({}, that.config, colorpicker.config, options);
that.render();
}
,ELEM_MAIN = '.layui-colorpicker-main', ICON_PICKER_DOWN = 'layui-icon-down', ICON_PICKER_CLOSE = 'layui-icon-close'
,PICKER_TRIG_SPAN = 'layui-colorpicker-trigger-span', PICKER_TRIG_I = 'layui-colorpicker-trigger-i', PICKER_SIDE = 'layui-colorpicker-side', PICKER_SIDE_SLIDER = 'layui-colorpicker-side-slider'
,PICKER_BASIS = 'layui-colorpicker-basis', PICKER_ALPHA_BG = 'layui-colorpicker-alpha-bgcolor', PICKER_ALPHA_SLIDER = 'layui-colorpicker-alpha-slider', PICKER_BASIS_CUR = 'layui-colorpicker-basis-cursor', PICKER_INPUT = 'layui-colorpicker-main-input'
//RGB转HSB
,RGBToHSB = function(rgb){
@ -129,215 +134,319 @@ layui.define('jquery',function(exports){
var regexp = /[0-9]{1,3}/g;
var re = rgbs.match(regexp);
return {r:re[0], g:re[1], b:re[2]};
}
,$win = $(window)
,$doc = $(document)
//构造器
,Class = function(options){
var that = this;
that.index = ++colorpicker.index;
that.config = $.extend({}, that.config, colorpicker.config, options);
that.render();
};
//默认配置
Class.prototype.config = {
bgcolor: '' //默认颜色,默认没有
,size: '' //选择器大小
color: '' //默认颜色,默认没有
,size: null //选择器大小
,alpha: false //是否开启透明度
,format: 'hex' //颜色显示/输入格式,可选 rgb,hex
,predefine: false //预定义颜色是否开启
,prededata: ['#ff4500','#ff8c00','#ffd700','#90ee90','#00ced1','#1e90ff','#c71585','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)','rgb(250, 212, 0)','rgba(144, 240, 144, 0.5)','rgb(0, 186, 189)','rgba(31, 147, 255, 0.73)']
,colors: [ //默认预定义颜色列表
'#009688', '#5FB878', '#1E9FFF', '#FF5722', '#FFB800', '#01AAED', '#999', '#c00', '#ff8c00','#ffd700'
,'#90ee90', '#00ced1', '#1e90ff', '#c71585', 'rgb(0, 186, 189)', 'rgb(255, 120, 0)', 'rgb(250, 212, 0)', '#393D49', 'rgba(0,0,0,.5)', 'rgba(255, 69, 0, 0.68)', 'rgba(144, 240, 144, 0.5)', 'rgba(31, 147, 255, 0.73)'
]
};
//下拉框渲染
//初始颜色选择框
Class.prototype.render = function(){
var that = this
,options = that.config
,temp = '<div class="layui-colorpicker layui-colorpicker-'+ options.size +'">'
,span = '<span class="'+ ((options.format == 'rgb' && options.alpha) ? 'layui-colorpicker-trigger-bgcolor' : '') +'">' +
'<span class="layui-colorpicker-trigger-span '+ (options.format == 'rgb' ? (options.alpha ? 'rgba' : 'torgb') : '') +'"' +
'style="background:'+ (options.bgcolor ? (options.bgcolor.match(/[0-9]{1,3}/g).length > 3 ?
( options.alpha && options.format == 'rgb' ? options.bgcolor : ('#' + HSBToHEX(RGBToHSB(RGBSTo(options.bgcolor)))) ) : options.bgcolor ) :'') +'">';
span += '<i class="layui-icon layui-colorpicker-trigger-i '+ (options.bgcolor ? ICON_PICKER_DOWN : ICON_PICKER_CLOSE) +'"></i></span></span>';
temp += span + '</div>';
//颜色选择框对象
,elemColorBox = $(['<div class="layui-unselect layui-colorpicker">'
,'<span '+ (options.format == 'rgb' && options.alpha
? 'class="layui-colorpicker-trigger-bgcolor"'
: '') +'>'
,'<span class="layui-colorpicker-trigger-span" '
,'lay-type="'+ (options.format == 'rgb' ? (options.alpha ? 'rgba' : 'torgb') : '') +'" '
,'style="'+ function(){
var bgstr = '';
if(options.color){
bgstr = options.color;
if(options.color.match(/[0-9]{1,3}/g).length > 3){ //啥意思?
if(!(options.alpha && options.format == 'rgb')){
bgstr = '#' + HSBToHEX(RGBToHSB(RGBSTo(options.color)))
}
}
return 'background: '+ bgstr;
}
return bgstr;
}() +'">'
,'<i class="layui-icon layui-colorpicker-trigger-i '+ (options.color
? ICON_PICKER_DOWN
: ICON_PICKER_CLOSE) +'"></i>'
,'</span>'
,'</span>'
,'</div>'].join(''))
//开始插入替代元素
var othis = $(options.elem)
,hasRender = othis.next('.' + ELEM_VIEW);
othis.css("display","inline-block");
//生成替代元素
hasRender[0] && hasRender.remove(); //如果已经渲染则Rerender
that.elemTemp = $(temp);
othis.html(that.elemTemp);
that.trigger();
//初始化颜色选择框
var othis = $(options.elem);
options.size && elemColorBox.addClass('layui-colorpicker-'+ options.size); //初始化颜色选择框尺寸
//插入颜色选择框
othis.addClass('layui-inline').html(
that.elemColorBox = elemColorBox
);
//获取背景色值
that.color = that.elemColorBox.find('.'+ PICKER_TRIG_SPAN)[0].style.background;
//相关事件
that.events();
};
//颜色选择器插入
Class.prototype.show = function(){
//渲染颜色选择器
Class.prototype.renderPicker = function(){
var that = this
,options = that.config
,span = $(options.elem)[0];
var pre = '';
$.each(options.prededata, function(index, value){
pre += '<div class="colorpicker-pre '+ (value.match(/[0-9]{1,3}/g).length > 3 ? 'isalpha' : '') +'"><div style="background:'+ value +'"></div></div>'
});
var elem = that.elem = '<div id="layui-colorpicker'+ that.index +'" class="layui-colorpicker-main"><div class="layui-colorpicker-main-wrapper"><div class="colorpicker-basis"><div class="colorpicker-basis-white"></div><div class="colorpicker-basis-black"></div>' +
'<div class="colorpicker-basis-cursor"></div></div><div class="colorpicker-side"><div class="colorpicker-side-slider"></div></div></div><div class="layui-colorpicker-main-alpha" style="display: '+ (options.alpha ? 'block' : 'none') +'"><div class="colorpicker-alpha-bgcolor">' +
'<div class="colorpicker-alpha-slider"></div></div></div><div class="layui-colorpicker-main-pre">'+ (options.predefine ? pre :'') +'</div><div class="layui-colorpicker-main-input"><div class="layui-inline"><input type="text" class="layui-input">' +
'</input></div><button class="empty layui-btn layui-btn-primary layui-btn-sm">清空</button><button class="confirm layui-btn layui-btn-sm">确定</button></div></div>';
,elemColorBox = that.elemColorBox[0]
if($('.layui-colorpicker-main').length && Class.thisElemInd == that.index){
that.remove(Class.thisElemInd);
}else{
if($('.layui-colorpicker-main').length && Class.thisElemInd != that.index && Class.thisElemInd){
$('.' + ELEM_VIEW).eq(Class.thisElemInd - 1).find('.' + PICKER_TRIG_SPAN)[0].style.background = Class.bgcolor ;
if(!Class.bgcolor){ $('.' + ELEM_VIEW).eq(Class.thisElemInd - 1).find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE) }
};
that.remove(Class.thisElemInd);
//插入到body
$('body').append(elem);
};
Class.thisElemInd = that.index;
Class.bgcolor = $('.' + ELEM_VIEW).eq(Class.thisElemInd - 1).find('.' + PICKER_TRIG_SPAN)[0].style.background;
//颜色选择器对象
,elemPicker = that.elemPicker = $(['<div id="layui-colorpicker'+ that.index +'" data-index="'+ that.index +'" class="layui-anim layui-anim-upbit layui-colorpicker-main">'
//颜色面板
,'<div class="layui-colorpicker-main-wrapper">'
,'<div class="layui-colorpicker-basis">'
,'<div class="layui-colorpicker-basis-white"></div>'
,'<div class="layui-colorpicker-basis-black"></div>'
,'<div class="layui-colorpicker-basis-cursor"></div>'
,'</div>'
,'<div class="layui-colorpicker-side">'
,'<div class="layui-colorpicker-side-slider"></div>'
,'</div>'
,'</div>'
//透明度条块
,'<div class="layui-colorpicker-main-alpha '+ (options.alpha ? SHOW : '') +'">'
,'<div class="layui-colorpicker-alpha-bgcolor">'
,'<div class="layui-colorpicker-alpha-slider"></div>'
,'</div>'
,'</div>'
//预设颜色列表
,function(){
if(options.predefine){
var list = ['<div class="layui-colorpicker-main-pre">'];
layui.each(options.colors, function(i, v){
list.push(['<div class="layui-colorpicker-pre'+ (v.match(/[0-9]{1,3}/g).length > 3
? ' layui-colorpicker-pre-isalpha'
: '') +'">'
,'<div style="background:'+ v +'"></div>'
,'</div>'].join(''));
});
list.push('</div>');
return list.join('');
} else {
return '';
}
}()
//底部表单元素区域
,'<div class="layui-colorpicker-main-input">'
,'<div class="layui-inline">'
,'<input type="text" class="layui-input">'
,'</div>'
,'<div class="layui-btn-container">'
,'<button class="layui-btn layui-btn-primary layui-btn-sm" colorpicker-events="clear">清空</button>'
,'<button class="layui-btn layui-btn-sm" colorpicker-events="confirm">确定</button>'
,'</div'
,'</div>'
,'</div>'].join(''))
//根据下拉框的top来判断颜色选择框出现的位置
var _top = span.getBoundingClientRect().top
,_left = span.getBoundingClientRect().left
,_height = span.offsetHeight
,_width = span.offsetWidth
,bodyheight = window.innerHeight
,bodywidth = window.innerWidth
,height = $('.layui-colorpicker-main').outerHeight()
,width = $('.layui-colorpicker-main').outerWidth()
,top,left;
//得到选择器的left偏移量
left = bodywidth - _left - _width;
if(left < _left && left < (width - _width)/2){
left = bodywidth - width;
}else if(_left < left && _left < (width - _width)/2){
left = 0;
}else{
left = _left - (width - _width)/2;
};
//得到选择器的top偏移量
top = bodyheight - _top - _height;
if(top - height < 20){
top = _top - height - 2;
$('.layui-colorpicker-main').css({"top":top - 11, "left":left});
$('.layui-colorpicker-main').animate({top: top + 1});
}else{
top = _top + _height;
$('.layui-colorpicker-main').css({"top":top + 16, "left":left});
$('.layui-colorpicker-main').animate({top: top + 1});
};
,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)[0];
//如果当前点击的颜色盒子已经存在选择器,则关闭
if($(ELEM_MAIN)[0] && $(ELEM_MAIN).data('index') == that.index){
that.removePicker(Class.thisElemInd);
} else { //插入颜色选择器
that.removePicker(Class.thisElemInd);
$('body').append(elemPicker);
}
Class.thisElemInd = that.index; //记录最新打开的选择器索引
Class.thisColor = elemColorBox.style.background //记录最新打开的选择器颜色选中值
that.position();
that.pickerEvents();
};
//颜色选择器移除
Class.prototype.remove = function(index){
Class.prototype.removePicker = function(index){
var that = this
,options = that.config
,elem = $('#layui-colorpicker'+ (index || that.index));
elem.remove();
,options = that.config;
$('#layui-colorpicker'+ (index || that.index)).remove();
return that;
};
//颜色选择器显示隐藏
Class.prototype.trigger = function(){
//定位算法
Class.prototype.position = function(){
var that = this
,options = that.config
//绑定呼出控件事件
,showEvent = function(elem){
elem.on('click' , function(){
//event.stopPropagation();
that.show();
if($('.layui-colorpicker-main').length){
that.val($(this).find('.' + PICKER_TRIG_SPAN)[0]);
that.side(that.index - 1);
that.events(that.index - 1, $(this).find('.' + PICKER_TRIG_SPAN)[0].style.background);
};
});
};
showEvent($(options.elem));
,elem = that.bindElem || that.elemColorBox[0]
,elemPicker = that.elemPicker[0]
,rect = elem.getBoundingClientRect() //绑定元素的坐标
,elemWidth = elemPicker.offsetWidth //控件的宽度
,elemHeight = elemPicker.offsetHeight //控件的高度
//滚动条高度
,scrollArea = function(type){
type = type ? 'scrollLeft' : 'scrollTop';
return document.body[type] | document.documentElement[type];
}
,winArea = function(type){
return document.documentElement[type ? 'clientWidth' : 'clientHeight']
}, margin = 5, left = rect.left, top = rect.bottom;
left = left - (elemWidth - elem.offsetWidth)/2;
top = top + margin
//如果右侧超出边界
if(left + elemWidth + margin > winArea('width')){
left = winArea('width') - elemWidth - margin;
} else if(left < margin){ //如果左侧超出边界
left = margin;
}
//如果底部超出边界
if(top + elemHeight + margin > winArea()){
top = rect.top > elemHeight //顶部是否有足够区域显示完全
? rect.top - elemHeight
: winArea() - elemHeight;
top = top - margin*2;
}
if(options.position){
elemPicker.style.position = options.position;
}
elemPicker.style.left = left + (options.position === 'fixed' ? 0 : scrollArea(1)) + 'px';
elemPicker.style.top = top + (options.position === 'fixed' ? 0 : scrollArea()) + 'px';
};
//颜色选择器赋值
Class.prototype.val = function(e){
Class.prototype.val = function(){
var that = this
,options = that.config
,elemColorBox = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)
,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT)
,e = elemColorBox[0]
,bgcolor = e.style.backgroundColor;
//判断是否有背景颜色
if(bgcolor){
//转化成hsb格式
var hsb = RGBToHSB(RGBSTo(bgcolor));
var hsb = RGBToHSB(RGBSTo(bgcolor))
,type = elemColorBox.attr('lay-type');
//同步滑块的位置及颜色选择器的选择
that.select(hsb.h, hsb.s, hsb.b);
//如果格式要求为rgb
if($(e).hasClass('torgb')){
$('.' + PICKER_INPUT).find('input').val(bgcolor);
if(type === 'torgb'){
elemPickerInput.find('input').val(bgcolor);
};
//如果格式要求为rgba
if($(e).hasClass('rgba')){
if(type === 'rgba'){
var rgb = RGBSTo(bgcolor);
//如果开启透明度而没有设置,则给默认值
if(bgcolor.match(/[0-9]{1,3}/g).length == 3){
$('.' + PICKER_INPUT).find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 1)');
$('.' + PICKER_ALPHA_SLIDER).css("left", 280);
}else{
$('.' + PICKER_INPUT).find('input').val(bgcolor);
elemPickerInput.find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 1)');
that.elemPicker.find('.'+ PICKER_ALPHA_SLIDER).css("left", 280);
} else {
elemPickerInput.find('input').val(bgcolor);
var left = bgcolor.slice(bgcolor.lastIndexOf(",") + 1, bgcolor.length - 1) * 280;
$('.' + PICKER_ALPHA_SLIDER).css("left", left);
that.elemPicker.find('.'+ PICKER_ALPHA_SLIDER).css("left", left);
};
//设置span背景色
$('.' + PICKER_ALPHA_BG)[0].style.background = 'linear-gradient(to right, rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 0), rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +'))';
that.elemPicker.find('.'+ PICKER_ALPHA_BG)[0].style.background = 'linear-gradient(to right, rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 0), rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +'))';
};
}else{
//如果没有背景颜色则默认到最初始的状态
that.select(0,100,100);
$('.' + PICKER_INPUT).find('input').val("");
$('.' + PICKER_ALPHA_BG)[0].style.background = '';
$('.' + PICKER_ALPHA_SLIDER).css("left", 280);
elemPickerInput.find('input').val("");
that.elemPicker.find('.'+ PICKER_ALPHA_BG)[0].style.background = '';
that.elemPicker.find('.'+ PICKER_ALPHA_SLIDER).css("left", 280);
}
};
//颜色选择器滑动/点击
Class.prototype.side = function(ind){
//颜色选择器滑动 / 点击
Class.prototype.side = function(){
var that = this
,options = that.config
,side = $('.' + PICKER_SIDE)
,slider = $('.' + PICKER_SIDE_SLIDER)
,basis = $('.' + PICKER_BASIS)
,choose = $('.' + PICKER_BASIS_CUR)
,alphacolor = $('.' + PICKER_ALPHA_BG)
,alphaslider = $('.' + PICKER_ALPHA_SLIDER)
,span = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)
,type = span.attr('lay-type')
,side = that.elemPicker.find('.' + PICKER_SIDE)
,slider = that.elemPicker.find('.' + PICKER_SIDE_SLIDER)
,basis = that.elemPicker.find('.' + PICKER_BASIS)
,choose = that.elemPicker.find('.' + PICKER_BASIS_CUR)
,alphacolor = that.elemPicker.find('.' + PICKER_ALPHA_BG)
,alphaslider = that.elemPicker.find('.' + PICKER_ALPHA_SLIDER)
,_h = slider[0].offsetTop/180*360
,_b = 100 - (choose[0].offsetTop + 3)/180*100
,_s = (choose[0].offsetLeft + 3)/260*100
,_a = Math.round(alphaslider[0].offsetLeft/280*100)/100
,span = $('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)
,i = $('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_I)
,pre = $('.layui-colorpicker-main-pre').children('.colorpicker-pre').children('div')
,torgb,rgba
,_a = Math.round(alphaslider[0].offsetLeft/280*100)/100
,i = that.elemColorBox.find('.' + PICKER_TRIG_I)
,pre = that.elemPicker.find('.layui-colorpicker-pre').children('div')
,change = function(x,y,z,a){
that.select(x, y, z);
var rgb = HSBToRGB({h:x, s:y, b:z});
i.addClass(ICON_PICKER_DOWN).removeClass(ICON_PICKER_CLOSE);
span[0].style.background = 'rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +')';
if(torgb){
$('.' + PICKER_INPUT).find('input').val('rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +')');
if(type === 'torgb'){
that.elemPicker.find('.' + PICKER_INPUT).find('input').val('rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +')');
};
if(rgba){
if(type === 'rgba'){
var left = 0;
left = a * 280;
alphaslider.css("left", left);
$('.' + PICKER_INPUT).find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', '+ a +')');
that.elemPicker.find('.' + PICKER_INPUT).find('input').val('rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', '+ a +')');
span[0].style.background = 'rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', '+ a +')';
alphacolor[0].style.background = 'linear-gradient(to right, rgba('+ rgb.r +', '+ rgb.g +', '+ rgb.b +', 0), rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +'))'
};
//回调更改的颜色
options.change && options.change($('.' + PICKER_INPUT).find('input').val());
options.change && options.change(that.elemPicker.find('.' + PICKER_INPUT).find('input').val());
}
,up = function(){
document.onmousemove = null;
document.onmouseup = null;
//拖拽元素
,elemMove = $(['<div class="layui-auxiliar-moving" id="LAY-colorpicker-moving"></div'].join(''))
,createMoveElem = function(call){
$('#LAY-colorpicker-moving')[0] || $('body').append(elemMove);
elemMove.on('mousemove', call);
elemMove.on('mouseup', function(){
elemMove.remove();
}).on('mouseleave', function(){
elemMove.remove();
});
};
if(span.hasClass('torgb')) torgb = true;
if(span.hasClass('rgba')) rgba = true;
//右侧主色选择
slider.on('mousedown', function(e){
var oldtop = this.offsetTop
@ -352,10 +461,11 @@ layui.define('jquery',function(exports){
change(h, _s, _b, _a);
e.preventDefault();
};
document.onmousemove = move;
document.onmouseup = up;
createMoveElem(move);
e.preventDefault();
});
side.on('click', function(e){
var top = e.clientY - $(this).offset().top;
if(top < 0)top = 0;
@ -364,7 +474,8 @@ layui.define('jquery',function(exports){
_h = h;
change(h, _s, _b, _a);
e.preventDefault();
})
});
//中间颜色选择
choose.on('mousedown', function(e){
var oldtop = this.offsetTop
@ -387,13 +498,14 @@ layui.define('jquery',function(exports){
change(_h, s, b, _a);
e.preventDefault();
};
document.onmousemove = move;
document.onmouseup = up;
createMoveElem(move);
e.preventDefault();
});
basis.on('click', function(e){
var top = e.clientY - $(this).offset().top - 3
,left = e.clientX - $(this).offset().left - 3
var top = e.clientY - $(this).offset().top - 3 + $win.scrollTop()
,left = e.clientX - $(this).offset().left - 3 + $win.scrollLeft()
if(top < -3)top = -3;
if(top > this.offsetHeight - 3)top = this.offsetHeight - 3;
if(left < -3)left = -3;
@ -405,6 +517,7 @@ layui.define('jquery',function(exports){
change(_h, s, b, _a);
e.preventDefault();
});
//底部透明度选择
alphaslider.on('mousedown', function(e){
var oldleft = this.offsetLeft
@ -419,8 +532,8 @@ layui.define('jquery',function(exports){
change(_h, _s, _b, a);
e.preventDefault();
};
document.onmousemove = move;
document.onmouseup = up;
createMoveElem(move);
e.preventDefault();
});
alphacolor.on('click', function(e){
@ -432,10 +545,11 @@ layui.define('jquery',function(exports){
change(_h, _s, _b, a);
e.preventDefault();
});
//预定义颜色选择
pre.each(function(){
$(this).on('click', function(){
$(this).parent('.colorpicker-pre').addClass('selected').siblings().removeClass('selected');
$(this).parent('.layui-colorpicker-pre').addClass('selected').siblings().removeClass('selected');
var color = this.style.backgroundColor
,hsb = RGBToHSB(RGBSTo(color))
,a = color.slice(color.lastIndexOf(",") + 1, color.length - 1),left;
@ -459,79 +573,133 @@ layui.define('jquery',function(exports){
,sidetop = h/360*180
,top = 180 - b/100*180 - 3
,left = s/100*260 - 3;
//滑块的top
$('.' + PICKER_SIDE_SLIDER).css("top", sidetop);
that.elemPicker.find('.' + PICKER_SIDE_SLIDER).css("top", sidetop);
//颜色选择器的背景
$('.' + PICKER_BASIS)[0].style.background = '#' + hex;
that.elemPicker.find('.' + PICKER_BASIS)[0].style.background = '#' + hex;
//选择器的top left
$('.' + PICKER_BASIS).find('.' + PICKER_BASIS_CUR).css({"top": top, "left": left});
that.elemPicker.find('.' + PICKER_BASIS).find('.' + PICKER_BASIS_CUR).css({"top": top, "left": left});
//选中的颜色
$('.' + PICKER_INPUT).find('input').val('#' + color);
that.elemPicker.find('.' + PICKER_INPUT).find('input').val('#' + color);
};
//颜色选择器输入
Class.prototype.events = function(ind, color){
Class.prototype.pickerEvents = function(){
var that = this
,options = that.config
,hide = function(){
$('.' + PICKER_ALPHA_BG)[0].style.background = '';
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = '';
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE);
};
//点击确认按钮
$('.' + PICKER_INPUT).find('.confirm').on('click', function(){
var value = $('.' + PICKER_INPUT).find('input').val()
,hsb = {};
if(value.indexOf(',') > -1){
hsb = RGBToHSB(RGBSTo(value));
that.select(hsb.h, hsb.s, hsb.b);
$('.' + PICKER_INPUT).find('input').val(value);
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = '#' + HSBToHEX(hsb);
if(value.match(/[0-9]{1,3}/g).length > 3 && $('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN).hasClass('rgba')){
var left = value.slice(value.lastIndexOf(",") + 1, value.length - 1) * 280;
$('.' + PICKER_ALPHA_SLIDER).css("left", left);
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = value;
};
}else{
hsb = HEXToHSB(value);
that.select(hsb.h, hsb.s, hsb.b);
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = '#' + HSBToHEX(hsb);
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_CLOSE).addClass(ICON_PICKER_DOWN);
};
color = value;
options.change && options.change($('.' + PICKER_INPUT).find('input').val());
that.remove(ind + 1);
});
//点击清空按钮
$('.' + PICKER_INPUT).find('.empty').on('click', function(){
hide();
color = '';
that.remove(ind + 1);
});
//点击页面其他地方
$(document).off().on('click', function(event){
var main = $('.' + ELEM_MAIN)
,item = $('.' + ELEM_VIEW)
,value = $('.' + PICKER_INPUT).find('input').val();
if(!main.is(event.target) && main.has(event.target).length === 0 && main.length && !item.is(event.target) && item.has(event.target).length === 0 && item.length){
if(!color){ hide(); }
else{
var hsb = RGBToHSB(RGBSTo(color));
that.select(hsb.h, hsb.s, hsb.b);
$('.' + ELEM_VIEW).eq(ind).find('.' + PICKER_TRIG_SPAN)[0].style.background = color;
if(value.indexOf(',') > -1){
$('.' + PICKER_INPUT).find('input').val(color);
};
};
that.remove(ind + 1);
,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN) //颜色盒子
,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT) //颜色选择器表单
,pickerEvents = {
//清空
clear: function(othis){
elemColorBoxSpan[0].style.background ='';
that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE);
that.color = '';
options.done && options.done('');
that.removePicker();
}
//确认
,confirm: function(othis){
var value = elemPickerInput.find('input').val()
,hsb = {};
if(value.indexOf(',') > -1){
hsb = RGBToHSB(RGBSTo(value));
that.select(hsb.h, hsb.s, hsb.b);
elemPickerInput.find('input').val(value);
elemColorBoxSpan[0].style.background = '#' + HSBToHEX(hsb);
if(value.match(/[0-9]{1,3}/g).length > 3 && elemColorBoxSpan.attr('lay-type') === 'rgba'){
var left = value.slice(value.lastIndexOf(",") + 1, value.length - 1) * 280;
that.elemPicker.find('.' + PICKER_ALPHA_SLIDER).css("left", left);
elemColorBoxSpan[0].style.background = value;
};
} else {
hsb = HEXToHSB(value);
that.select(hsb.h, hsb.s, hsb.b);
elemColorBoxSpan[0].style.background = '#' + HSBToHEX(hsb);
that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_CLOSE).addClass(ICON_PICKER_DOWN);
};
that.color = value;
options.done && options.done(value);
that.removePicker();
}
};
//选择器面板点击事件
that.elemPicker.on('click', '*[colorpicker-events]', function(){
var othis = $(this)
,attrEvent = othis.attr('colorpicker-events');
pickerEvents[attrEvent] && pickerEvents[attrEvent].call(this, othis);
});
}
//颜色选择器输入
Class.prototype.events = function(){
var that = this
,options = that.config
,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN)
//弹出颜色选择器
that.elemColorBox.on('click' , function(){
that.renderPicker();
if($(ELEM_MAIN)[0]){
that.val();
that.side();
};
});
if(!options.elem[0] || that.elemColorBox[0].eventHandler) return;
//绑定关闭控件事件
$doc.on('click', function(e){
//如果点击的元素是颜色框
if($(e.target).hasClass(ELEM)
|| $(e.target).parents('.'+ELEM)[0]
) return;
//如果点击的元素是选择器
if($(e.target).hasClass(ELEM_MAIN.replace(/\./g, ''))
|| $(e.target).parents(ELEM_MAIN)[0]
) return;
if(!that.elemPicker) return;
if(that.color){
var hsb = RGBToHSB(RGBSTo(that.color));
that.select(hsb.h, hsb.s, hsb.b);
} else {
that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_DOWN).addClass(ICON_PICKER_CLOSE);
}
elemColorBoxSpan[0].style.background = that.color || '';
that.removePicker();
});
//自适应定位
$win.on('resize', function(){
if(!that.elemPicker || !$(ELEM_MAIN)[0]){
return false;
}
that.position();
});
that.elemColorBox[0].eventHandler = true;
};
//核心入口
colorpicker.render = function(options){
var inst = new Class(options);
var inst = new Class(options);
return thisColorPicker.call(inst);
};
exports(MOD_NAME, colorpicker);
})
});

View File

@ -793,6 +793,8 @@
'class': ELEM_HINT
});
if(!that.elem) return;
div.innerHTML = content || '';
lay(that.elem).find('.'+ ELEM_HINT).remove();
that.elem.appendChild(div);

View File

@ -6,10 +6,9 @@
*/
layui.define(['jquery', 'form'], function(exports){
layui.define('jquery', function(exports){
"use strict";
var $ = layui.jquery
,form = layui.form
//外部接口
,slider = {
@ -28,10 +27,22 @@ layui.define(['jquery', 'form'], function(exports){
return layui.onevent.call(this, MOD_NAME, events, callback);
}
}
//操作当前实例
,thisSlider = function(){
var that = this
,options = that.config;
return {
setValue: function(value, index){ //设置值
return that.slide('set', value, index || 0);
}
,config: options
}
}
//字符常量
,MOD_NAME = 'slider', ELEM_VIEW = 'layui-slider', SLIDER_BAR = 'layui-slider-bar', SLIDER_WRAP = 'layui-slider-wrap', SLIDER_WRAP_BTN = 'layui-slider-wrap-btn'
,SLIDER_TIPS = 'layui-slider-tips', SLIDER_INPUT = 'layui-slider-input', SLIDER_INPUT_TXT = 'layui-slider-input-txt', SLIDER_INPUT_BTN = 'layui-slider-input-btn'
,MOD_NAME = 'slider', DISABLED = 'layui-disabled', ELEM_VIEW = 'layui-slider', SLIDER_BAR = 'layui-slider-bar', SLIDER_WRAP = 'layui-slider-wrap', SLIDER_WRAP_BTN = 'layui-slider-wrap-btn', SLIDER_TIPS = 'layui-slider-tips', SLIDER_INPUT = 'layui-slider-input', SLIDER_INPUT_TXT = 'layui-slider-input-txt', SLIDER_INPUT_BTN = 'layui-slider-input-btn', ELEM_HOVER = 'layui-slider-hover'
//构造器
,Class = function(options){
@ -43,7 +54,8 @@ layui.define(['jquery', 'form'], function(exports){
//默认配置
Class.prototype.config = {
min: 0 //最小值
type: 'default' //滑块类型垂直vertical
,min: 0 //最小值
,max: 100 //最大值默认100
,value: 0 //初始值默认为0
,step: 1 //间隔值
@ -51,10 +63,9 @@ layui.define(['jquery', 'form'], function(exports){
,tips: true //文字提示,开启
,input: false //输入框,关闭
,range: false //范围选择,与输入框不能同时开启,默认关闭
,vertical: false //垂直滑块,默认横向
,height: 200 //配合 vertical 参数使用默认200px
,height: 200 //配合 type:"vertical" 使用默认200px
,disabled: false //滑块禁用,默认关闭
,color: '#009688' //主题颜色
,theme: '#009688' //主题颜色
};
//滑块渲染
@ -86,12 +97,12 @@ layui.define(['jquery', 'form'], function(exports){
};
//如果禁用,颜色为统一的灰色
var color = options.disabled ? '#c2c2c2' : options.color;
var theme = options.disabled ? '#c2c2c2' : options.theme;
//滑块
var temp = '<div class="layui-slider '+ (options.vertical ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="layui-slider-tips"></div><span></span>' : '') +
'<div class="layui-slider-bar" style="background:'+ color +'; '+ (options.vertical ? 'height' : 'width') +':'+ scale +';'+ (options.vertical ? 'bottom' : 'left') +':'+ (scaleFir || 0) +';"></div><div class="layui-slider-wrap" style="'+ (options.vertical ? 'bottom' : 'left') +':'+ (scaleFir || scale) +';">' +
'<div class="layui-slider-wrap-btn" style="border: 2px solid '+ color +';"></div></div>'+ (options.range ? '<div class="layui-slider-wrap" style="'+ (options.vertical ? 'bottom' : 'left') +':'+ scaleSec +';"><div class="layui-slider-wrap-btn" style="border: 2px solid '+ color +';"></div></div>' : '') +'</div>';
var temp = '<div class="layui-slider '+ (options.type === 'vertical' ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="layui-slider-tips"></div><span></span>' : '') +
'<div class="layui-slider-bar" style="background:'+ theme +'; '+ (options.type === 'vertical' ? 'height' : 'width') +':'+ scale +';'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || 0) +';"></div><div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ (scaleFir || scale) +';">' +
'<div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>'+ (options.range ? '<div class="layui-slider-wrap" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ scaleSec +';"><div class="layui-slider-wrap-btn" style="border: 2px solid '+ theme +';"></div></div>' : '') +'</div>';
var othis = $(options.elem)
,hasRender = othis.next('.' + ELEM_VIEW);
@ -111,7 +122,7 @@ layui.define(['jquery', 'form'], function(exports){
othis.html(that.elemTemp);
//垂直滑块
if(options.vertical){
if(options.type === 'vertical'){
that.elemTemp.height(options.height + 'px');
};
@ -121,7 +132,7 @@ layui.define(['jquery', 'form'], function(exports){
for(var i = 1; i < number + 1; i++) {
var step = i * 100 / number;
if(step < 100){
item += '<div class="layui-slider-step" style="'+ (options.vertical ? 'bottom' : 'left') +':'+ step +'%"></div>'
item += '<div class="layui-slider-step" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ step +'%"></div>'
}
};
that.elemTemp.append(item);
@ -129,32 +140,40 @@ layui.define(['jquery', 'form'], function(exports){
//插入输入框
if(options.input && !options.range){
var elemInput = $('<div class="layui-slider-input layui-input"><div class="layui-slider-input-txt"><input type="text" class="layui-input"></div><div class="layui-slider-input-btn"><i class="layui-icon layui-icon-up"></i><i class="layui-icon layui-icon-down"></i></div></div>');
othis.css("position","relative");
othis.append('<div class="layui-slider-input"><div class="layui-slider-input-txt"><input type="text" class="layui-input"></div><div class="layui-slider-input-btn"><i class="layui-icon layui-icon-up"></i><i class="layui-icon layui-icon-down"></i></div></div>');
othis.append(elemInput);
othis.find('.' + SLIDER_INPUT_TXT).children('input').val(options.value);
if(!options.vertical) that.elemTemp.css("width", "80%");
if(options.vertical) that.elemTemp.next('.' + SLIDER_INPUT).css({"left":0, "top":"auto", "bottom":"-45px"});
if(options.type === 'vertical'){
elemInput.css({
left: 0
,top: -48
});
} else {
that.elemTemp.css("margin-right", elemInput.outerWidth() + 15);
}
};
//给未禁止的滑块滑动事件
if(!options.disabled){
that.slide();
}else{
that.elemTemp.find('.' + SLIDER_WRAP_BTN).css("cursor", "not-allowed");
that.elemTemp.addClass(DISABLED);
that.elemTemp.find('.' + SLIDER_WRAP_BTN).addClass(DISABLED);
};
//划过滑块显示数值
that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){
var sliderWidth = options.vertical ? options.height : that.elemTemp[0].offsetWidth
var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth
,sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP)
,tipsLeft = options.vertical ? (sliderWidth - $(this).parent()[0].offsetTop - sliderWrap.height()) : $(this).parent()[0].offsetLeft
,tipsLeft = options.type === 'vertical' ? (sliderWidth - $(this).parent()[0].offsetTop - sliderWrap.height()) : $(this).parent()[0].offsetLeft
,left = tipsLeft / sliderWidth * 100
,value = $(this).parent().data('value')
,tipsTxt = options.setTips ? options.setTips(value) : value;
that.elemTemp.find('.' + SLIDER_TIPS).html(tipsTxt);
if(options.vertical){
that.elemTemp.find('.' + SLIDER_TIPS).css({"bottom":left + '%', "margin-bottom":"30px", "display":"inline-block"});
that.elemTemp.children('span').css({"bottom":left + '%', "margin-bottom":"18px", "display":"inline-block"});
if(options.type === 'vertical'){
that.elemTemp.find('.' + SLIDER_TIPS).css({"bottom":left + '%', "margin-bottom":"20px", "display":"inline-block"});
that.elemTemp.children('span').css({"bottom":left + '%', "margin-bottom":"8px", "display":"inline-block"});
}else{
that.elemTemp.find('.' + SLIDER_TIPS).css({"left":left + '%', "display":"inline-block"});
that.elemTemp.children('span').css({"left":left + '%', "display":"inline-block"});
@ -166,11 +185,13 @@ layui.define(['jquery', 'form'], function(exports){
};
//滑块滑动
Class.prototype.slide = function(){
Class.prototype.slide = function(setValue, value, i){
var that = this
,options = that.config
,sliderAct = that.elemTemp
,sliderWidth = options.vertical ? options.height : sliderAct[0].offsetWidth
,sliderWidth = function(){
return options.type === 'vertical' ? options.height : sliderAct[0].offsetWidth
}
,sliderWrap = sliderAct.find('.' + SLIDER_WRAP)
,sliderTxt = sliderAct.next('.' + SLIDER_INPUT)
,inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val()
@ -182,14 +203,14 @@ layui.define(['jquery', 'form'], function(exports){
offsetValue = Math.round(offsetValue) * step
};
offsetValue = offsetValue > 100 ? 100: offsetValue;
sliderWrap.eq(index).css((options.vertical ?'bottom':'left'), offsetValue + '%');
sliderWrap.eq(index).css((options.type === 'vertical' ?'bottom':'left'), offsetValue + '%');
var firLeft = valueTo(sliderWrap[0].offsetLeft)
,secLeft = options.range ? valueTo(sliderWrap[1].offsetLeft) : 0;
if(options.vertical){
sliderAct.find('.' + SLIDER_TIPS).css({"bottom":offsetValue + '%', "margin-bottom":"30px"});
sliderAct.children('span').css({"bottom":offsetValue + '%', "margin-bottom":"18px"});
firLeft = valueTo(sliderWidth - sliderWrap[0].offsetTop - sliderWrap.height());
secLeft = options.range ? valueTo(sliderWidth - sliderWrap[1].offsetTop - sliderWrap.height()) : 0;
if(options.type === 'vertical'){
sliderAct.find('.' + SLIDER_TIPS).css({"bottom":offsetValue + '%', "margin-bottom":"20px"});
sliderAct.children('span').css({"bottom":offsetValue + '%', "margin-bottom":"8px"});
firLeft = valueTo(sliderWidth() - sliderWrap[0].offsetTop - sliderWrap.height());
secLeft = options.range ? valueTo(sliderWidth() - sliderWrap[1].offsetTop - sliderWrap.height()) : 0;
}else{
sliderAct.find('.' + SLIDER_TIPS).css("left",offsetValue + '%');
sliderAct.children('span').css("left",offsetValue + '%');
@ -198,67 +219,100 @@ layui.define(['jquery', 'form'], function(exports){
secLeft = secLeft > 100 ? 100: secLeft;
var minLeft = Math.min(firLeft, secLeft)
,wrapWidth = Math.abs(firLeft - secLeft);
if(options.vertical){
if(options.type === 'vertical'){
sliderAct.find('.' + SLIDER_BAR).css({"height":wrapWidth + '%', "bottom":minLeft + '%'});
}else{
sliderAct.find('.' + SLIDER_BAR).css({"width":wrapWidth + '%', "left":minLeft + '%'});
};
var selfValue = options.min + Math.round((options.max - options.min) * offsetValue / 100);
options.sliderValue && options.sliderValue(selfValue);
inputValue = selfValue;
sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val(inputValue);
sliderWrap.eq(index).data('value', selfValue);
selfValue = options.setTips ? options.setTips(selfValue) : selfValue;
sliderAct.find('.' + SLIDER_TIPS).html(selfValue);
//如果开启范围选择,则返回数组值
if(options.range){
var arrValue = [
sliderWrap.eq(0).data('value')
,sliderWrap.eq(1).data('value')
];
if(arrValue[0] > arrValue[1]) arrValue.reverse(); //如果前面的圆点超过了后面的圆点值,则调换顺序
}
//回调
options.change && options.change(options.range ? arrValue : selfValue);
}
,valueTo = function(value){
var oldLeft = value / sliderWidth * 100 / step
var oldLeft = value / sliderWidth() * 100 / step
,left = Math.round(oldLeft) * step;
if(value == sliderWidth){
if(value == sliderWidth()){
left = Math.ceil(oldLeft) * step;
};
return left;
}
//拖拽元素
,elemMove = $(['<div class="layui-auxiliar-moving" id="LAY-slider-moving"></div'].join(''))
,createMoveElem = function(move, up){
var upCall = function(){
up && up();
elemMove.remove();
};
$('#LAY-slider-moving')[0] || $('body').append(elemMove);
elemMove.on('mousemove', move);
elemMove.on('mouseup', upCall).on('mouseleave', upCall);
};
//动态赋值
if(setValue === 'set') return change(value, i);
//滑块滑动
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
$(this).on('mousedown', function(e){
var othis = $(this);
othis.on('mousedown', function(e){
e = e || window.event;
var oldleft = $(this).parent()[0].offsetLeft
var oldleft = othis.parent()[0].offsetLeft
,oldx = e.clientX;
if(options.vertical){
oldleft = sliderWidth - $(this).parent()[0].offsetTop - sliderWrap.height()
if(options.type === 'vertical'){
oldleft = sliderWidth() - othis.parent()[0].offsetTop - sliderWrap.height()
oldx = e.clientY;
};
$(document).on('mousemove', function(e){
var move = function(e){
e = e || window.event;
var left = oldleft + (options.vertical ? (oldx - e.clientY) : (e.clientX - oldx));
var left = oldleft + (options.type === 'vertical' ? (oldx - e.clientY) : (e.clientX - oldx));
if(left < 0)left = 0;
if(left > sliderWidth)left = sliderWidth;
var reaLeft = left / sliderWidth * 100 / step;
if(left > sliderWidth())left = sliderWidth();
var reaLeft = left / sliderWidth() * 100 / step;
change(reaLeft, index);
$(this).addClass('hover');
sliderAct.find('.' + SLIDER_TIPS).css("display", "inline-block");
sliderAct.children('span').css("display", "inline-block");
othis.addClass(ELEM_HOVER);
sliderAct.find('.' + SLIDER_TIPS).show();
sliderAct.children('span').show();
e.preventDefault();
}).on('mouseup', function(e){
$(document).off('mousemove');
$(document).off('mouseup');
$(this).removeClass('hover');
sliderAct.find('.' + SLIDER_TIPS).css("display", "none");
sliderAct.children('span').css("display", "none");
});
};
var up = function(){
othis.removeClass(ELEM_HOVER);
sliderAct.find('.' + SLIDER_TIPS).hide();
sliderAct.children('span').hide();
}
createMoveElem(move, up)
});
});
sliderAct.on('click', function(e){
var main = $('.' + SLIDER_WRAP_BTN);
if(!main.is(event.target) && main.has(event.target).length === 0 && main.length){
var left = options.vertical ? (sliderWidth - e.clientY + $(this).offset().top):(e.clientX - $(this).offset().left), index;
var left = options.type === 'vertical' ? (sliderWidth() - e.clientY + $(this).offset().top):(e.clientX - $(this).offset().left), index;
if(left < 0)left = 0;
if(left > sliderWidth)left = sliderWidth;
var reaLeft = left / sliderWidth * 100 / step;
if(left > sliderWidth())left = sliderWidth();
var reaLeft = left / sliderWidth() * 100 / step;
if(options.range){
if(options.vertical){
if(options.type === 'vertical'){
index = Math.abs(left - parseInt($(sliderWrap[0]).css('bottom'))) > Math.abs(left - parseInt($(sliderWrap[1]).css('bottom'))) ? 1 : 0;
}else{
index = Math.abs(left - sliderWrap[0].offsetLeft) > Math.abs(left - sliderWrap[1].offsetLeft) ? 1 : 0;
@ -272,16 +326,14 @@ layui.define(['jquery', 'form'], function(exports){
});
//输入框
sliderTxt.hover(
function(){
$(this).addClass("hover");
$(this).children('.' + SLIDER_INPUT_BTN).fadeIn('fast');
},
function(){
$(this).removeClass("hover");
$(this).children('.' + SLIDER_INPUT_BTN).fadeOut('fast');
}
);
sliderTxt.hover(function(){
var othis = $(this);
othis.children('.' + SLIDER_INPUT_BTN).fadeIn('fast');
}, function(){
var othis = $(this);
othis.children('.' + SLIDER_INPUT_BTN).fadeOut('fast');
});
sliderTxt.children('.' + SLIDER_INPUT_BTN).children('i').each(function(index){
$(this).on('click', function(){
if(index == 1){
@ -293,18 +345,23 @@ layui.define(['jquery', 'form'], function(exports){
change(inputScale, 0);
});
});
//获取输入框值
var getInputValue = function(){
var realValue = this.value;
realValue = isNaN(realValue) ? 0 : realValue;
realValue = realValue < options.min ? options.min : realValue;
realValue = realValue > options.max ? options.max : realValue;
this.value = realValue;
var inputScale = (realValue - options.min) / (options.max - options.min) * 100 / step;
change(inputScale, 0);
};
sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').on('keydown', function(e){
if(e.keyCode === 13){
e.preventDefault();
var realValue = this.value;
realValue = isNaN(realValue) ? 0 : realValue;
realValue = realValue < options.min ? options.min : realValue;
realValue = realValue > options.max ? options.max : realValue;
this.value = realValue;
var inputScale = (realValue - options.min) / (options.max - options.min) * 100 / step
change(inputScale, 0);
getInputValue.call(this);
}
});
}).on('change', getInputValue);
};
//事件处理
@ -316,6 +373,7 @@ layui.define(['jquery', 'form'], function(exports){
//核心入口
slider.render = function(options){
var inst = new Class(options);
return thisSlider.call(inst);
};
exports(MOD_NAME, slider);

View File

@ -447,26 +447,24 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
that.autoColNums = autoColNums;
//设置列宽
layui.each(options.cols, function(i1, item1){
layui.each(item1, function(i2, item2){
var minWidth = item2.minWidth || options.cellMinWidth
,field = item2.field;
if(item2.colspan > 1) return;
//给位分配宽的列平均分配宽
if(item2.width === 0){
that.getCssRule(field, function(item){
item.style.width = Math.floor(autoWidth >= minWidth ? autoWidth : minWidth) + 'px';
});
}
//给设定百分比的列分配列宽
else if(/\d+%$/.test(item2.width)){
that.getCssRule(field, function(item){
item.style.width = Math.floor((parseFloat(item2.width) / 100) * cntrWidth) + 'px';
});
}
});
that.eachCols(function(i3, item3){
var minWidth = item3.minWidth || options.cellMinWidth
,field = item3.field || i3;
if(item3.colspan > 1) return;
//给位分配宽的列平均分配宽
if(item3.width === 0){
that.getCssRule(field, function(item){
item.style.width = Math.floor(autoWidth >= minWidth ? autoWidth : minWidth) + 'px';
});
}
//给设定百分比的列分配列宽
else if(/\d+%$/.test(item3.width)){
that.getCssRule(field, function(item){
item.style.width = Math.floor((parseFloat(item3.width) / 100) * cntrWidth) + 'px';
});
}
});
//填补 Math.floor 造成的数差
@ -1115,6 +1113,9 @@ layui.define(['laytpl', 'laypage', 'layer', 'form', 'util'], function(exports){
item2.hide = !obj.elem.checked;
that.elem.find('*[data-field="'+ obj.elem.name +'"]')
[obj.elem.checked ? 'removeClass' : 'addClass'](HIDE);
that.fullSize();
that.scrollPatch();
that.setColsWidth();
}
});