theluyuan/layui-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新版

Browse Source
This commit is contained in:
贤心
2018-08-28 15:43:16 +08:00
parent e2a2c08402 5e30e00cfa
commit 9964879f08
44 changed files with 724 additions and 479 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/css/layui.css
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;}

BIN
src/font/iconfont.eot
View File

Binary file not shown.

10
src/font/iconfont.svg
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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 274 KiB

After

Width:  |  Height:  |  Size: 274 KiB

BIN
src/font/iconfont.ttf
View File

Binary file not shown.

BIN
src/font/iconfont.woff
View File

Binary file not shown.

598
src/lay/modules/colorpicker.js
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);
})
});

2
src/lay/modules/laydate.js
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);

208
src/lay/modules/slider.js
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);

41
src/lay/modules/table.js
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();
}
});