mirror of https://github.com/layui/layui
贤心
GitHub
commit
5fc1d5a6af
|
|
@ -16,18 +16,88 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<form class="layui-form" method="get" lay-filter="top" id="AAA">
|
||||
<form class="layui-form" method="get" lay-filter="top">
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="arr[]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
<div class="layui-inline layui-input-group">
|
||||
<div class="layui-input-split layui-input-prefix">
|
||||
前置信息
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="arr[]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="arr[title]" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
<input type="text" name="arr[]" required lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
<div class="layui-input-split layui-input-suffix">
|
||||
后置信息
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
<div class="layui-input-split">
|
||||
<i class="layui-icon layui-icon-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline layui-input-wrap layui-input-wrap-prefix">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
<div class="layui-inline layui-input-wrap layui-input-wrap-prefix">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
</div>
|
||||
<input type="password" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="eye">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline layui-input-wrap layui-input-wrap-prefix">
|
||||
<div class="layui-input-prefix layui-input-split">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear" style="padding-left: 45px;">
|
||||
</div>
|
||||
<div class="layui-inline layui-input-wrap">
|
||||
<input type="text" name="arr[]" value="" required placeholder="请输入" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<div class="layui-input-wrap layui-input-wrap-prefix">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-date"></i>
|
||||
</div>
|
||||
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
<div class="layui-input-suffix">
|
||||
<i class="layui-icon layui-icon-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<div class="layui-input-wrap">
|
||||
<input type="text" name="arr[]" required placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
<div class="layui-input-suffix">
|
||||
<i class="layui-icon layui-icon-more-vertical"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline layui-input-wrap layui-input-wrap-prefix">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
</div>
|
||||
<select name="selectdemo">
|
||||
<option value="">请选择</option>
|
||||
<option value="北京">北京</option>
|
||||
<option value="上海">上海</option>
|
||||
<option value="广州">广州</option>
|
||||
<option value="深圳">深圳</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" id="testSubmit">立即提交</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>滑块 - layui</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>滑块 - layui</title>
|
||||
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
|
||||
<style>
|
||||
body{padding:100px 0;}
|
||||
|
||||
</style>
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
<style>
|
||||
body{padding:100px 0;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -31,14 +29,18 @@ layui.use('slider', function(){
|
|||
//,type: 'vertical'
|
||||
//,min: -20 //最小值
|
||||
//,max: 20 //最大值
|
||||
//,value: 10 //[40, 60] //初始值
|
||||
//,step: 10 //间隔值
|
||||
//,value: 11 //[40, 60] //初始值
|
||||
//,step: 1 //间隔值
|
||||
//,showstep: true //间隔点
|
||||
//,tips: false //关闭提示文本
|
||||
,input: true //输入框
|
||||
//,range: true //范围选择
|
||||
,change: function(value){ //回调实时显示当前值
|
||||
console.log(value)
|
||||
//,theme: '#FF5722'
|
||||
,change: function(value){ // 选中值发生改变的回调
|
||||
console.log('change', value)
|
||||
}
|
||||
,done: function(value){ // 值完成选中的回调 -- v2.8.0 新增
|
||||
console.log('done', value);
|
||||
}
|
||||
,setTips: function(value){ //自定义提示文本
|
||||
return value + '%';
|
||||
|
|
@ -51,7 +53,7 @@ layui.use('slider', function(){
|
|||
//,theme: '#c00' //主题色
|
||||
});
|
||||
|
||||
sliderInst.setValue(30);
|
||||
//sliderInst.setValue(30);
|
||||
|
||||
|
||||
slider.render({
|
||||
|
|
|
|||
|
|
@ -64,182 +64,190 @@ a cite{font-style: normal; *cursor:pointer;}
|
|||
}
|
||||
|
||||
/* font-class */
|
||||
.layui-icon-reply-fill:before{content:"\e611"}
|
||||
.layui-icon-set-fill:before{content:"\e614"}
|
||||
.layui-icon-menu-fill:before{content:"\e60f"}
|
||||
.layui-icon-search:before{content:"\e615"}
|
||||
.layui-icon-share:before{content:"\e641"}
|
||||
.layui-icon-set-sm:before{content:"\e620"}
|
||||
.layui-icon-engine:before{content:"\e628"}
|
||||
.layui-icon-close:before{content:"\1006"}
|
||||
.layui-icon-close-fill:before{content:"\1007"}
|
||||
.layui-icon-chart-screen:before{content:"\e629"}
|
||||
.layui-icon-star:before{content:"\e600"}
|
||||
.layui-icon-circle-dot:before{content:"\e617"}
|
||||
.layui-icon-chat:before{content:"\e606"}
|
||||
.layui-icon-release:before{content:"\e609"}
|
||||
.layui-icon-list:before{content:"\e60a"}
|
||||
.layui-icon-chart:before{content:"\e62c"}
|
||||
.layui-icon-ok-circle:before{content:"\1005"}
|
||||
.layui-icon-layim-theme:before{content:"\e61b"}
|
||||
.layui-icon-table:before{content:"\e62d"}
|
||||
.layui-icon-right:before{content:"\e602"}
|
||||
.layui-icon-left:before{content:"\e603"}
|
||||
.layui-icon-eye:before{content:"\e695"}
|
||||
.layui-icon-eye-invisible:before{content:"\e696"}
|
||||
.layui-icon-backspace:before{content:"\e694"}
|
||||
.layui-icon-help-circle:before{content:"\e77c"}
|
||||
.layui-icon-tips-fill:before{content:"\eb2e"}
|
||||
.layui-icon-test:before{content:"\e692"}
|
||||
.layui-icon-clear:before{content:"\e788"}
|
||||
.layui-icon-heart-fill:before{content:"\e68f"}
|
||||
.layui-icon-light:before{content:"\e748"}
|
||||
.layui-icon-music:before{content:"\e690"}
|
||||
.layui-icon-time:before{content:"\e68d"}
|
||||
.layui-icon-ie:before{content:"\e7bb"}
|
||||
.layui-icon-firefox:before{content:"\e686"}
|
||||
.layui-icon-at:before{content:"\e687"}
|
||||
.layui-icon-bluetooth:before{content:"\e689"}
|
||||
.layui-icon-chrome:before{content:"\e68a"}
|
||||
.layui-icon-edge:before{content:"\e68b"}
|
||||
.layui-icon-heart:before{content:"\e68c"}
|
||||
.layui-icon-key:before{content:"\e683"}
|
||||
.layui-icon-android:before{content:"\e684"}
|
||||
.layui-icon-mike:before{content:"\e6dc"}
|
||||
.layui-icon-mute:before{content:"\e685"}
|
||||
.layui-icon-gift:before{content:"\e627"}
|
||||
.layui-icon-windows:before{content:"\e67f"}
|
||||
.layui-icon-ios:before{content:"\e680"}
|
||||
.layui-icon-logout:before{content:"\e682"}
|
||||
.layui-icon-wifi:before{content:"\e7e0"}
|
||||
.layui-icon-rss:before{content:"\e808"}
|
||||
.layui-icon-email:before{content:"\e618"}
|
||||
.layui-icon-reduce-circle:before{content:"\e616"}
|
||||
.layui-icon-transfer:before{content:"\e691"}
|
||||
.layui-icon-service:before{content:"\e626"}
|
||||
.layui-icon-addition:before{content:"\e624"}
|
||||
.layui-icon-subtraction:before{content:"\e67e"}
|
||||
.layui-icon-slider:before{content:"\e714"}
|
||||
.layui-icon-print:before{content:"\e66d"}
|
||||
.layui-icon-export:before{content:"\e67d"}
|
||||
.layui-icon-cols:before{content:"\e610"}
|
||||
.layui-icon-screen-full:before{content:"\e622"}
|
||||
.layui-icon-screen-restore:before{content:"\e758"}
|
||||
.layui-icon-rate-half:before{content:"\e6c9"}
|
||||
.layui-icon-rate-solid:before{content:"\e67a"}
|
||||
.layui-icon-rate:before{content:"\e67b"}
|
||||
.layui-icon-cellphone:before{content:"\e678"}
|
||||
.layui-icon-vercode:before{content:"\e679"}
|
||||
.layui-icon-login-weibo:before{content:"\e675"}
|
||||
.layui-icon-login-qq:before{content:"\e676"}
|
||||
.layui-icon-login-wechat:before{content:"\e677"}
|
||||
.layui-icon-username:before{content:"\e66f"}
|
||||
.layui-icon-password:before{content:"\e673"}
|
||||
.layui-icon-refresh-3:before{content:"\e9aa"}
|
||||
.layui-icon-auz:before{content:"\e672"}
|
||||
.layui-icon-shrink-right:before{content:"\e668"}
|
||||
.layui-icon-spread-left:before{content:"\e66b"}
|
||||
.layui-icon-snowflake:before{content:"\e6b1"}
|
||||
.layui-icon-tips:before{content:"\e702"}
|
||||
.layui-icon-note:before{content:"\e66e"}
|
||||
.layui-icon-senior:before{content:"\e674"}
|
||||
.layui-icon-refresh-1:before{content:"\e666"}
|
||||
.layui-icon-refresh:before{content:"\e669"}
|
||||
.layui-icon-flag:before{content:"\e66c"}
|
||||
.layui-icon-theme:before{content:"\e66a"}
|
||||
.layui-icon-notice:before{content:"\e667"}
|
||||
.layui-icon-console:before{content:"\e665"}
|
||||
.layui-icon-website:before{content:"\e7ae"}
|
||||
.layui-icon-face-surprised:before{content:"\e664"}
|
||||
.layui-icon-set:before{content:"\e716"}
|
||||
.layui-icon-template:before{content:"\e663"}
|
||||
.layui-icon-app:before{content:"\e653"}
|
||||
.layui-icon-template-1:before{content:"\e656"}
|
||||
.layui-icon-home:before{content:"\e68e"}
|
||||
.layui-icon-female:before{content:"\e661"}
|
||||
.layui-icon-male:before{content:"\e662"}
|
||||
.layui-icon-tread:before{content:"\e6c5"}
|
||||
.layui-icon-praise:before{content:"\e6c6"}
|
||||
.layui-icon-rmb:before{content:"\e65e"}
|
||||
.layui-icon-more:before{content:"\e65f"}
|
||||
.layui-icon-camera:before{content:"\e660"}
|
||||
.layui-icon-cart-simple:before{content:"\e698"}
|
||||
.layui-icon-face-cry:before{content:"\e69c"}
|
||||
.layui-icon-face-smile:before{content:"\e6af"}
|
||||
.layui-icon-survey:before{content:"\e6b2"}
|
||||
.layui-icon-tree:before{content:"\e62e"}
|
||||
.layui-icon-ie:before{content:"\e7bb"}
|
||||
.layui-icon-upload-circle:before{content:"\e62f"}
|
||||
.layui-icon-add-circle:before{content:"\e61f"}
|
||||
.layui-icon-download-circle:before{content:"\e601"}
|
||||
.layui-icon-templeate-1:before{content:"\e630"}
|
||||
.layui-icon-util:before{content:"\e631"}
|
||||
.layui-icon-face-surprised:before{content:"\e664"}
|
||||
.layui-icon-edit:before{content:"\e642"}
|
||||
.layui-icon-speaker:before{content:"\e645"}
|
||||
.layui-icon-down:before{content:"\e61a"}
|
||||
.layui-icon-file:before{content:"\e621"}
|
||||
.layui-icon-layouts:before{content:"\e632"}
|
||||
.layui-icon-rate-half:before{content:"\e6c9"}
|
||||
.layui-icon-add-circle-fine:before{content:"\e608"}
|
||||
.layui-icon-prev-circle:before{content:"\e633"}
|
||||
.layui-icon-read:before{content:"\e705"}
|
||||
.layui-icon-404:before{content:"\e61c"}
|
||||
.layui-icon-carousel:before{content:"\e634"}
|
||||
.layui-icon-help:before{content:"\e607"}
|
||||
.layui-icon-code-circle:before{content:"\e635"}
|
||||
.layui-icon-windows:before{content:"\e67f"}
|
||||
.layui-icon-water:before{content:"\e636"}
|
||||
.layui-icon-username:before{content:"\e66f"}
|
||||
.layui-icon-find-fill:before{content:"\e670"}
|
||||
.layui-icon-about:before{content:"\e60b"}
|
||||
.layui-icon-location:before{content:"\e715"}
|
||||
.layui-icon-up:before{content:"\e619"}
|
||||
.layui-icon-pause:before{content:"\e651"}
|
||||
.layui-icon-date:before{content:"\e637"}
|
||||
.layui-icon-layim-uploadfile:before{content:"\e61d"}
|
||||
.layui-icon-delete:before{content:"\e640"}
|
||||
.layui-icon-play:before{content:"\e652"}
|
||||
.layui-icon-top:before{content:"\e604"}
|
||||
.layui-icon-firefox:before{content:"\e686"}
|
||||
.layui-icon-friends:before{content:"\e612"}
|
||||
.layui-icon-refresh-3:before{content:"\e9aa"}
|
||||
.layui-icon-ok:before{content:"\e605"}
|
||||
.layui-icon-layer:before{content:"\e638"}
|
||||
.layui-icon-face-smile-fine:before{content:"\e60c"}
|
||||
.layui-icon-dollar:before{content:"\e659"}
|
||||
.layui-icon-group:before{content:"\e613"}
|
||||
.layui-icon-layim-download:before{content:"\e61e"}
|
||||
.layui-icon-picture-fine:before{content:"\e60d"}
|
||||
.layui-icon-link:before{content:"\e64c"}
|
||||
.layui-icon-diamond:before{content:"\e735"}
|
||||
.layui-icon-log:before{content:"\e60e"}
|
||||
.layui-icon-key:before{content:"\e683"}
|
||||
.layui-icon-rate-solid:before{content:"\e67a"}
|
||||
.layui-icon-return:before{content:"\e65c"}
|
||||
.layui-icon-camera-fill:before{content:"\e65d"}
|
||||
.layui-icon-fire:before{content:"\e756"}
|
||||
.layui-icon-more-vertical:before{content:"\e671"}
|
||||
.layui-icon-cart:before{content:"\e657"}
|
||||
.layui-icon-star-fill:before{content:"\e658"}
|
||||
.layui-icon-prev:before{content:"\e65a"}
|
||||
.layui-icon-next:before{content:"\e65b"}
|
||||
.layui-icon-upload:before{content:"\e67c"}
|
||||
.layui-icon-upload-drag:before{content:"\e681"}
|
||||
.layui-icon-user:before{content:"\e770"}
|
||||
.layui-icon-file-b:before{content:"\e655"}
|
||||
.layui-icon-component:before{content:"\e857"}
|
||||
.layui-icon-find-fill:before{content:"\e670"}
|
||||
.layui-icon-loading:before{content:"\e63d"}
|
||||
.layui-icon-loading-1:before{content:"\e63e"}
|
||||
.layui-icon-add-1:before{content:"\e654"}
|
||||
.layui-icon-pause:before{content:"\e651"}
|
||||
.layui-icon-play:before{content:"\e652"}
|
||||
.layui-icon-video:before{content:"\e6ed"}
|
||||
.layui-icon-headset:before{content:"\e6fc"}
|
||||
.layui-icon-voice:before{content:"\e688"}
|
||||
.layui-icon-speaker:before{content:"\e645"}
|
||||
.layui-icon-fonts-del:before{content:"\e64f"}
|
||||
.layui-icon-fonts-html:before{content:"\e64b"}
|
||||
.layui-icon-fonts-code:before{content:"\e64e"}
|
||||
.layui-icon-fonts-strong:before{content:"\e62b"}
|
||||
.layui-icon-unlink:before{content:"\e64d"}
|
||||
.layui-icon-fonts-clear:before{content:"\e639"}
|
||||
.layui-icon-triangle-r:before{content:"\e623"}
|
||||
.layui-icon-circle:before{content:"\e63f"}
|
||||
.layui-icon-radio:before{content:"\e643"}
|
||||
.layui-icon-picture:before{content:"\e64a"}
|
||||
.layui-icon-link:before{content:"\e64c"}
|
||||
.layui-icon-face-smile-b:before{content:"\e650"}
|
||||
.layui-icon-align-center:before{content:"\e647"}
|
||||
.layui-icon-align-right:before{content:"\e648"}
|
||||
.layui-icon-align-left:before{content:"\e649"}
|
||||
.layui-icon-loading-1:before{content:"\e63e"}
|
||||
.layui-icon-return:before{content:"\e65c"}
|
||||
.layui-icon-fonts-strong:before{content:"\e62b"}
|
||||
.layui-icon-upload:before{content:"\e67c"}
|
||||
.layui-icon-dialogue:before{content:"\e63a"}
|
||||
.layui-icon-video:before{content:"\e6ed"}
|
||||
.layui-icon-headset:before{content:"\e6fc"}
|
||||
.layui-icon-cellphone-fine:before{content:"\e63b"}
|
||||
.layui-icon-add-1:before{content:"\e654"}
|
||||
.layui-icon-face-smile-b:before{content:"\e650"}
|
||||
.layui-icon-fonts-html:before{content:"\e64b"}
|
||||
.layui-icon-screen-full:before{content:"\e622"}
|
||||
.layui-icon-form:before{content:"\e63c"}
|
||||
.layui-icon-cart:before{content:"\e657"}
|
||||
.layui-icon-camera-fill:before{content:"\e65d"}
|
||||
.layui-icon-tabs:before{content:"\e62a"}
|
||||
.layui-icon-heart-fill:before{content:"\e68f"}
|
||||
.layui-icon-fonts-code:before{content:"\e64e"}
|
||||
.layui-icon-ios:before{content:"\e680"}
|
||||
.layui-icon-at:before{content:"\e687"}
|
||||
.layui-icon-fire:before{content:"\e756"}
|
||||
.layui-icon-set:before{content:"\e716"}
|
||||
.layui-icon-fonts-u:before{content:"\e646"}
|
||||
.layui-icon-triangle-d:before{content:"\e625"}
|
||||
.layui-icon-tips:before{content:"\e702"}
|
||||
.layui-icon-picture:before{content:"\e64a"}
|
||||
.layui-icon-more-vertical:before{content:"\e671"}
|
||||
.layui-icon-bluetooth:before{content:"\e689"}
|
||||
.layui-icon-flag:before{content:"\e66c"}
|
||||
.layui-icon-loading:before{content:"\e63d"}
|
||||
.layui-icon-fonts-i:before{content:"\e644"}
|
||||
.layui-icon-refresh-1:before{content:"\e666"}
|
||||
.layui-icon-rmb:before{content:"\e65e"}
|
||||
.layui-icon-addition:before{content:"\e624"}
|
||||
.layui-icon-home:before{content:"\e68e"}
|
||||
.layui-icon-time:before{content:"\e68d"}
|
||||
.layui-icon-user:before{content:"\e770"}
|
||||
.layui-icon-notice:before{content:"\e667"}
|
||||
.layui-icon-chrome:before{content:"\e68a"}
|
||||
.layui-icon-edge:before{content:"\e68b"}
|
||||
.layui-icon-login-weibo:before{content:"\e675"}
|
||||
.layui-icon-voice:before{content:"\e688"}
|
||||
.layui-icon-upload-drag:before{content:"\e681"}
|
||||
.layui-icon-login-qq:before{content:"\e676"}
|
||||
.layui-icon-snowflake:before{content:"\e6b1"}
|
||||
.layui-icon-heart:before{content:"\e68c"}
|
||||
.layui-icon-logout:before{content:"\e682"}
|
||||
.layui-icon-file-b:before{content:"\e655"}
|
||||
.layui-icon-template:before{content:"\e663"}
|
||||
.layui-icon-transfer:before{content:"\e691"}
|
||||
.layui-icon-auz:before{content:"\e672"}
|
||||
.layui-icon-console:before{content:"\e665"}
|
||||
.layui-icon-app:before{content:"\e653"}
|
||||
.layui-icon-prev:before{content:"\e65a"}
|
||||
.layui-icon-website:before{content:"\e7ae"}
|
||||
.layui-icon-next:before{content:"\e65b"}
|
||||
.layui-icon-component:before{content:"\e857"}
|
||||
.layui-icon-android:before{content:"\e684"}
|
||||
.layui-icon-more:before{content:"\e65f"}
|
||||
.layui-icon-login-wechat:before{content:"\e677"}
|
||||
.layui-icon-shrink-right:before{content:"\e668"}
|
||||
.layui-icon-spread-left:before{content:"\e66b"}
|
||||
.layui-icon-camera:before{content:"\e660"}
|
||||
.layui-icon-note:before{content:"\e66e"}
|
||||
.layui-icon-refresh:before{content:"\e669"}
|
||||
.layui-icon-female:before{content:"\e661"}
|
||||
.layui-icon-male:before{content:"\e662"}
|
||||
.layui-icon-screen-restore:before{content:"\e758"}
|
||||
.layui-icon-password:before{content:"\e673"}
|
||||
.layui-icon-senior:before{content:"\e674"}
|
||||
.layui-icon-theme:before{content:"\e66a"}
|
||||
.layui-icon-tread:before{content:"\e6c5"}
|
||||
.layui-icon-praise:before{content:"\e6c6"}
|
||||
.layui-icon-star-fill:before{content:"\e658"}
|
||||
.layui-icon-rate:before{content:"\e67b"}
|
||||
.layui-icon-template-1:before{content:"\e656"}
|
||||
.layui-icon-vercode:before{content:"\e679"}
|
||||
.layui-icon-service:before{content:"\e626"}
|
||||
.layui-icon-cellphone:before{content:"\e678"}
|
||||
.layui-icon-print:before{content:"\e66d"}
|
||||
.layui-icon-cols:before{content:"\e610"}
|
||||
.layui-icon-wifi:before{content:"\e7e0"}
|
||||
.layui-icon-export:before{content:"\e67d"}
|
||||
.layui-icon-rss:before{content:"\e808"}
|
||||
.layui-icon-slider:before{content:"\e714"}
|
||||
.layui-icon-email:before{content:"\e618"}
|
||||
.layui-icon-subtraction:before{content:"\e67e"}
|
||||
.layui-icon-mike:before{content:"\e6dc"}
|
||||
.layui-icon-light:before{content:"\e748"}
|
||||
.layui-icon-gift:before{content:"\e627"}
|
||||
.layui-icon-mute:before{content:"\e685"}
|
||||
.layui-icon-reduce-circle:before{content:"\e616"}
|
||||
.layui-icon-music:before{content:"\e690"}
|
||||
.layui-icon-tabs:before{content:"\e62a"}
|
||||
.layui-icon-circle:before{content:"\e63f"}
|
||||
.layui-icon-radio:before{content:"\e643"}
|
||||
.layui-icon-share:before{content:"\e641"}
|
||||
.layui-icon-edit:before{content:"\e642"}
|
||||
.layui-icon-delete:before{content:"\e640"}
|
||||
.layui-icon-engine:before{content:"\e628"}
|
||||
.layui-icon-chart-screen:before{content:"\e629"}
|
||||
.layui-icon-chart:before{content:"\e62c"}
|
||||
.layui-icon-table:before{content:"\e62d"}
|
||||
.layui-icon-tree:before{content:"\e62e"}
|
||||
.layui-icon-upload-circle:before{content:"\e62f"}
|
||||
.layui-icon-templeate-1:before{content:"\e630"}
|
||||
.layui-icon-util:before{content:"\e631"}
|
||||
.layui-icon-layouts:before{content:"\e632"}
|
||||
.layui-icon-prev-circle:before{content:"\e633"}
|
||||
.layui-icon-carousel:before{content:"\e634"}
|
||||
.layui-icon-code-circle:before{content:"\e635"}
|
||||
.layui-icon-water:before{content:"\e636"}
|
||||
.layui-icon-date:before{content:"\e637"}
|
||||
.layui-icon-layer:before{content:"\e638"}
|
||||
.layui-icon-fonts-clear:before{content:"\e639"}
|
||||
.layui-icon-dialogue:before{content:"\e63a"}
|
||||
.layui-icon-cellphone-fine:before{content:"\e63b"}
|
||||
.layui-icon-form:before{content:"\e63c"}
|
||||
.layui-icon-file:before{content:"\e621"}
|
||||
.layui-icon-triangle-r:before{content:"\e623"}
|
||||
.layui-icon-triangle-d:before{content:"\e625"}
|
||||
.layui-icon-set-sm:before{content:"\e620"}
|
||||
.layui-icon-add-circle:before{content:"\e61f"}
|
||||
.layui-icon-layim-download:before{content:"\e61e"}
|
||||
.layui-icon-layim-uploadfile:before{content:"\e61d"}
|
||||
.layui-icon-404:before{content:"\e61c"}
|
||||
.layui-icon-about:before{content:"\e60b"}
|
||||
.layui-icon-layim-theme:before{content:"\e61b"}
|
||||
.layui-icon-down:before{content:"\e61a"}
|
||||
.layui-icon-up:before{content:"\e619"}
|
||||
.layui-icon-circle-dot:before{content:"\e617"}
|
||||
.layui-icon-set-fill:before{content:"\e614"}
|
||||
.layui-icon-search:before{content:"\e615"}
|
||||
.layui-icon-friends:before{content:"\e612"}
|
||||
.layui-icon-group:before{content:"\e613"}
|
||||
.layui-icon-reply-fill:before{content:"\e611"}
|
||||
.layui-icon-menu-fill:before{content:"\e60f"}
|
||||
.layui-icon-face-smile-fine:before{content:"\e60c"}
|
||||
.layui-icon-picture-fine:before{content:"\e60d"}
|
||||
.layui-icon-log:before{content:"\e60e"}
|
||||
.layui-icon-list:before{content:"\e60a"}
|
||||
.layui-icon-release:before{content:"\e609"}
|
||||
.layui-icon-add-circle-fine:before{content:"\e608"}
|
||||
.layui-icon-ok:before{content:"\e605"}
|
||||
.layui-icon-help:before{content:"\e607"}
|
||||
.layui-icon-chat:before{content:"\e606"}
|
||||
.layui-icon-top:before{content:"\e604"}
|
||||
.layui-icon-right:before{content:"\e602"}
|
||||
.layui-icon-left:before{content:"\e603"}
|
||||
.layui-icon-star:before{content:"\e600"}
|
||||
.layui-icon-download-circle:before{content:"\e601"}
|
||||
.layui-icon-close:before{content:"\1006"}
|
||||
.layui-icon-close-fill:before{content:"\1007"}
|
||||
.layui-icon-ok-circle:before{content:"\1005"}
|
||||
|
||||
|
||||
/* 基本布局 */
|
||||
.layui-main{position: relative; width: 1160px; margin: 0 auto;}
|
||||
|
|
@ -543,6 +551,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
|||
.layui-tab-card,
|
||||
|
||||
.layui-input, .layui-textarea, .layui-select,
|
||||
.layui-input-split,
|
||||
.layui-form-pane .layui-form-label,
|
||||
.layui-form-pane .layui-form-item[pane]{border-color: #eee;}
|
||||
|
||||
|
|
@ -679,8 +688,43 @@ a cite{font-style: normal; *cursor:pointer;}
|
|||
.layui-form-danger:focus,
|
||||
.layui-form-danger+.layui-form-select .layui-input{border-color: #FF5722 !important;}
|
||||
|
||||
/* 输入框套件 */
|
||||
.layui-input-wrap{position: relative; height: 38px; line-height: 38px;}
|
||||
.layui-input-wrap .layui-input{padding-right: 35px; cursor: pointer;}
|
||||
.layui-input-wrap .layui-input::-ms-clear,
|
||||
.layui-input-wrap .layui-input::-ms-reveal{display: none;}
|
||||
.layui-input-wrap-prefix .layui-input{padding-left:35px;}
|
||||
|
||||
.layui-input-prefix,
|
||||
.layui-input-suffix,
|
||||
.layui-input-split{position: absolute; right: 0; top: 0; padding: 0 10px; width: 35px; height: 100%; text-align: center; transition: all .3s; cursor: pointer; pointer-events: none; box-sizing: border-box;}
|
||||
.layui-input-prefix{left: 0; border-radius: 2px 0 0 2px;}
|
||||
.layui-input-suffix{right: 0; border-radius: 0 2px 2px 0;}
|
||||
|
||||
.layui-input-wrap .layui-input:focus + .layui-input-split{border-color: #d2d2d2;}
|
||||
.layui-input-prefix .layui-icon,
|
||||
.layui-input-suffix .layui-icon,
|
||||
.layui-input-split .layui-icon{position: relative; font-size: 16px; color: #5F5F5F; transition: all .3s;}
|
||||
.layui-input-wrap .layui-input-prefix.layui-input-split{border-width: 0; border-right-width: 1px;}
|
||||
|
||||
.layui-input-wrap-prefix .layui-form-select{position: static;}
|
||||
|
||||
.layui-input-affix-event .layui-icon{color: rgba(0,0,0,.8);}
|
||||
.layui-input-affix-event .layui-icon-clear{color: rgba(0,0,0,.3);}
|
||||
.layui-input-affix-event .layui-icon:hover{color: rgba(0,0,0,.6);}
|
||||
|
||||
.layui-input-split{border-width: 1px; border-style: solid;}
|
||||
.layui-input-affix-event{pointer-events: auto;}
|
||||
|
||||
/* 输入框组 */
|
||||
.layui-input-group{position: relative; display: inline-table; cursor: pointer}
|
||||
.layui-input-group>*{display: table-cell; vertical-align: middle; position: relative; cursor: pointer;}
|
||||
.layui-input-group .layui-input{padding-right: 15px;}
|
||||
.layui-input-group .layui-input-prefix{width: auto; border-right: 0;}
|
||||
.layui-input-group .layui-input-suffix{width: auto; border-left: 0;}
|
||||
|
||||
/* 下拉选择 */
|
||||
.layui-form-select{position: relative;}
|
||||
.layui-form-select{position: relative; color: #5F5F5F;}
|
||||
.layui-form-select .layui-input{padding-right: 30px; cursor: pointer;}
|
||||
.layui-form-select .layui-edge{position: absolute; right: 10px; top: 50%; margin-top: -3px; cursor: pointer; border-width: 6px; border-top-color: #c2c2c2; border-top-style: solid; transition: all .3s; -webkit-transition: all .3s;}
|
||||
.layui-form-select dl{display: none; position: absolute; left: 0; top: 42px; padding: 5px 0; z-index: 899; min-width: 100%; border: 1px solid #eee; max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 1px 1px 4px rgb(0 0 0 / 8%); box-sizing: border-box;}
|
||||
|
|
@ -691,7 +735,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
|||
.layui-form-select dl dd:hover{background-color: #F6F6F6; -webkit-transition: .5s all; transition: .5s all;}
|
||||
.layui-form-select .layui-select-group dd{padding-left: 20px;}
|
||||
.layui-form-select dl dd.layui-select-tips{padding-left: 10px !important; color: #999;}
|
||||
.layui-form-select dl dd.layui-this{background-color: #5FB878; color: #fff;}
|
||||
.layui-form-select dl dd.layui-this{background-color: #F7F7F7; color: #5FB878; font-weight: 700;}
|
||||
/*.layui-form-select dl dd.layui-this{background-color: #F6F6F6; color: #5FB878; font-weight: 700;}*/
|
||||
.layui-form-select dl dd.layui-disabled{background-color: #fff;}
|
||||
.layui-form-selected dl{display: block;}
|
||||
|
|
|
|||
Binary file not shown.
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 299 KiB After Width: | Height: | Size: 309 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -145,18 +145,81 @@ layui.define(['layer', 'util'], function(exports){
|
|||
|
||||
// 表单控件渲染
|
||||
Form.prototype.render = function(type, filter){
|
||||
var that = this
|
||||
,options = that.config
|
||||
,elemForm = $(ELEM + function(){
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var elemForm = $(ELEM + function(){
|
||||
return filter ? ('[lay-filter="' + filter +'"]') : '';
|
||||
}())
|
||||
,items = {
|
||||
}());
|
||||
var items = {
|
||||
// 输入框
|
||||
input: function(elem){
|
||||
var inputs = elem || elemForm.find('input,textarea');
|
||||
|
||||
// 初始化全局的 autocomplete
|
||||
options.autocomplete && inputs.attr('autocomplete', options.autocomplete);
|
||||
|
||||
// 初始化 input 套件
|
||||
elemForm.find('input[lay-affix],textarea[lay-affix]').each(function(){
|
||||
var othis = $(this);
|
||||
var affix = othis.attr('lay-affix');
|
||||
var CLASS_SUFFIX = 'layui-input-suffix';
|
||||
var elemNext = othis.next('.'+ CLASS_SUFFIX);
|
||||
var hideElem = function(elem, value){
|
||||
if(!elem) return;
|
||||
elem[$.trim(value) ? 'removeClass' : 'addClass'](HIDE);
|
||||
};
|
||||
var renderSuffix = function(type){
|
||||
elemNext.remove();
|
||||
elemNext = $(['<div class="layui-input-suffix layui-input-affix-event">'
|
||||
,'<i class="layui-icon layui-icon-'+ type +'"></i>'
|
||||
,'</div>'].join(''));
|
||||
|
||||
othis.after(elemNext);
|
||||
hideElem(elemNext, othis.val());
|
||||
|
||||
// 输入事件
|
||||
othis.on('input propertychange', function(){
|
||||
var value = this.value;
|
||||
hideElem(elemNext, value);
|
||||
});
|
||||
|
||||
// 点击后缀套件事件
|
||||
elemNext.on('click', function(){
|
||||
var filter = othis.attr('lay-filter');
|
||||
obj[affix] && obj[affix][1].call(this);
|
||||
|
||||
// 对外事件
|
||||
layui.event.call(this, MOD_NAME, 'input-affix('+ filter +')', {
|
||||
elem: othis[0]
|
||||
,affix: affix
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// 渲染内置套件
|
||||
var obj = {
|
||||
// 清空
|
||||
clear: [function(){ // 渲染
|
||||
renderSuffix('clear');
|
||||
}, function(){ // 事件
|
||||
othis.val('').focus();
|
||||
hideElem(elemNext, null);
|
||||
}]
|
||||
|
||||
// 密码显隐
|
||||
,eye: [function(){ // 渲染
|
||||
renderSuffix('eye');
|
||||
}, function(){ // 事件
|
||||
var SHOW_NAME = 'LAY_FORM_INPUT_AFFIX_SHOW';
|
||||
var isShow = othis.data(SHOW_NAME);
|
||||
|
||||
othis.attr('type', isShow ? 'password' : 'text').data(SHOW_NAME, !isShow);
|
||||
renderSuffix(isShow ? 'eye' : 'eye-invisible');
|
||||
}]
|
||||
};
|
||||
|
||||
obj[affix] && obj[affix][0]();
|
||||
});
|
||||
}
|
||||
|
||||
// 下拉选择框
|
||||
|
|
@ -440,7 +503,8 @@ layui.define(['layer', 'util'], function(exports){
|
|||
}
|
||||
|
||||
othis.siblings().removeClass(THIS);
|
||||
select.val(value).removeClass('layui-form-danger')
|
||||
select.val(value).removeClass('layui-form-danger');
|
||||
|
||||
layui.event.call(this, MOD_NAME, 'select('+ filter +')', {
|
||||
elem: select[0]
|
||||
,value: value
|
||||
|
|
@ -488,9 +552,11 @@ layui.define(['layer', 'util'], function(exports){
|
|||
,function(options){
|
||||
var arr = [];
|
||||
layui.each(options, function(index, item){
|
||||
if(index === 0 && !item.value){
|
||||
var tagName = item.tagName.toLowerCase();
|
||||
|
||||
if(index === 0 && !item.value && tagName !== 'optgroup'){
|
||||
arr.push('<dd lay-value="" class="layui-select-tips">'+ $.trim(item.innerHTML || TIPS) +'</dd>');
|
||||
} else if(item.tagName.toLowerCase() === 'optgroup'){
|
||||
} else if(tagName === 'optgroup'){
|
||||
arr.push('<dt>'+ item.label +'</dt>');
|
||||
} else {
|
||||
arr.push('<dd lay-value="'+ util.escape(item.value) +'" class="'+ (value === item.value ? THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ $.trim(item.innerHTML) +'</dd>');
|
||||
|
|
@ -562,7 +628,7 @@ layui.define(['layer', 'util'], function(exports){
|
|||
,type = {
|
||||
// 复选框
|
||||
checkbox: [
|
||||
(title ? ('<span>'+ check.title +'</span>') : '')
|
||||
(title ? ('<span>'+ util.escape(check.title) +'</span>') : '')
|
||||
,'<i class="layui-icon layui-icon-ok"></i>'
|
||||
].join('')
|
||||
|
||||
|
|
@ -625,7 +691,7 @@ layui.define(['layer', 'util'], function(exports){
|
|||
,(disabled ? ' layui-radio-disabled '+DISABLED : '') +'">' // 禁用状态
|
||||
,'<i class="layui-anim layui-icon">'+ ICON[radio.checked ? 0 : 1] +'</i>'
|
||||
,'<div>'+ function(){
|
||||
var title = radio.title || '';
|
||||
var title = util.escape(radio.title || '');
|
||||
if(typeof othis.next().attr('lay-radio') === 'string'){
|
||||
title = othis.next().html();
|
||||
// othis.next().remove();
|
||||
|
|
@ -668,7 +734,7 @@ layui.define(['layer', 'util'], function(exports){
|
|||
return that;
|
||||
};
|
||||
|
||||
// elem 即要验证的区域表单选择器 - return true or false
|
||||
// 主动触发验证 -- elem 即要验证的区域表单选择器 / return true or false
|
||||
Form.prototype.validate = function(elem){
|
||||
var that = this;
|
||||
var stop = null; // 验证不通过状态
|
||||
|
|
|
|||
|
|
@ -3,53 +3,64 @@
|
|||
*/
|
||||
|
||||
layui.define('jquery', function(exports){
|
||||
"use strict";
|
||||
'use strict';
|
||||
|
||||
var $ = layui.$
|
||||
|
||||
//外部接口
|
||||
,slider = {
|
||||
// 外部接口
|
||||
var slider = {
|
||||
config: {}
|
||||
,index: layui.slider ? (layui.slider.index + 10000) : 0
|
||||
|
||||
//设置全局项
|
||||
// 设置全局项
|
||||
,set: function(options){
|
||||
var that = this;
|
||||
that.config = $.extend({}, that.config, options);
|
||||
return that;
|
||||
}
|
||||
|
||||
//事件
|
||||
// 事件
|
||||
,on: function(events, callback){
|
||||
return layui.onevent.call(this, MOD_NAME, events, callback);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//操作当前实例
|
||||
,thisSlider = function(){
|
||||
// 操作当前实例
|
||||
var thisSlider = function(){
|
||||
var that = this
|
||||
,options = that.config;
|
||||
|
||||
return {
|
||||
setValue: function(value, index){ //设置值
|
||||
setValue: function(value, index){ // 设置值
|
||||
options.value = value;
|
||||
return that.slide('set', value, index || 0);
|
||||
}
|
||||
,config: options
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
//字符常量
|
||||
,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'
|
||||
// 字符常量
|
||||
var MOD_NAME = 'slider';
|
||||
var DISABLED = 'layui-disabled';
|
||||
var ELEM_VIEW = 'layui-slider';
|
||||
var SLIDER_BAR = 'layui-slider-bar';
|
||||
var SLIDER_WRAP = 'layui-slider-wrap';
|
||||
var SLIDER_WRAP_BTN = 'layui-slider-wrap-btn';
|
||||
var SLIDER_TIPS = 'layui-slider-tips';
|
||||
var SLIDER_INPUT = 'layui-slider-input';
|
||||
var SLIDER_INPUT_TXT = 'layui-slider-input-txt';
|
||||
var SLIDER_INPUT_BTN = 'layui-slider-input-btn';
|
||||
var ELEM_HOVER = 'layui-slider-hover';
|
||||
|
||||
//构造器
|
||||
,Class = function(options){
|
||||
// 构造器
|
||||
var Class = function(options){
|
||||
var that = this;
|
||||
that.index = ++slider.index;
|
||||
that.config = $.extend({}, that.config, slider.config, options);
|
||||
that.render();
|
||||
};
|
||||
|
||||
//默认配置
|
||||
// 默认配置
|
||||
Class.prototype.config = {
|
||||
type: 'default' //滑块类型，垂直：vertical
|
||||
,min: 0 //最小值
|
||||
|
|
@ -217,7 +228,7 @@ layui.define('jquery', function(exports){
|
|||
,sliderTxt = sliderAct.next('.' + SLIDER_INPUT)
|
||||
,inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val()
|
||||
,step = 100 / ((options.max - options.min) / Math.ceil(options.step))
|
||||
,change = function(offsetValue, index){
|
||||
,change = function(offsetValue, index, from){
|
||||
if(Math.ceil(offsetValue) * step > 100){
|
||||
offsetValue = Math.ceil(offsetValue) * step
|
||||
}else{
|
||||
|
|
@ -258,8 +269,11 @@ layui.define('jquery', function(exports){
|
|||
if(arrValue[0] > arrValue[1]) arrValue.reverse(); //如果前面的圆点超过了后面的圆点值，则调换顺序
|
||||
}
|
||||
|
||||
//回调
|
||||
options.change && options.change(options.range ? arrValue : selfValue);
|
||||
that.value = options.range ? arrValue : selfValue; // 最新值
|
||||
options.change && options.change(that.value); // change 回调
|
||||
|
||||
// 值完成选中的事件
|
||||
if(from === 'done') options.done && options.done(that.value);
|
||||
}
|
||||
,valueTo = function(value){
|
||||
var oldLeft = value / sliderWidth() * 100 / step
|
||||
|
|
@ -276,6 +290,7 @@ layui.define('jquery', function(exports){
|
|||
var upCall = function(){
|
||||
up && up();
|
||||
elemMove.remove();
|
||||
options.done && options.done(that.value);
|
||||
};
|
||||
$('#LAY-slider-moving')[0] || $('body').append(elemMove);
|
||||
elemMove.on('mousemove', move);
|
||||
|
|
@ -283,7 +298,7 @@ layui.define('jquery', function(exports){
|
|||
};
|
||||
|
||||
//动态赋值
|
||||
if(setValue === 'set') return change(value, i);
|
||||
if(setValue === 'set') return change(value, i, 'done');
|
||||
|
||||
//滑块滑动
|
||||
sliderAct.find('.' + SLIDER_WRAP_BTN).each(function(index){
|
||||
|
|
@ -341,7 +356,7 @@ layui.define('jquery', function(exports){
|
|||
} else {
|
||||
index = 0;
|
||||
};
|
||||
change(reaLeft, index);
|
||||
change(reaLeft, index, 'done');
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
|
@ -360,7 +375,7 @@ layui.define('jquery', function(exports){
|
|||
: Number(inputValue) + options.step;
|
||||
};
|
||||
var inputScale = (inputValue - options.min) / (options.max - options.min) * 100 / step;
|
||||
change(inputScale, 0);
|
||||
change(inputScale, 0, 'done');
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -372,7 +387,7 @@ layui.define('jquery', function(exports){
|
|||
realValue = realValue > options.max ? options.max : realValue;
|
||||
this.value = realValue;
|
||||
var inputScale = (realValue - options.min) / (options.max - options.min) * 100 / step;
|
||||
change(inputScale, 0);
|
||||
change(inputScale, 0, 'done');
|
||||
};
|
||||
sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').on('keydown', function(e){
|
||||
if(e.keyCode === 13){
|
||||
|
|
|
|||
Loading…
Reference in New Issue