mirror of https://github.com/helloxz/onenav.git
63 changed files with 32929 additions and 2 deletions
@ -0,0 +1,32 @@ |
|||||||
|
# OneNav主题 |
||||||
|
onenav导航的主题 |
||||||
|
 |
||||||
|
 |
||||||
|
|
||||||
|
## 天气插件 |
||||||
|
天气插件采用的是【和风天气】的标准版天气插件，可无限制免费试用，需要先注册和风天气账号， |
||||||
|
[和风天气账号注册](https://id.qweather.com/#/register)； |
||||||
|
[和风天气创建插件页面](https://widget.qweather.com/create-standard) |
||||||
|
插件 选择【横版】、【款：240px】、【高:180px】;否则会出现样式偏移的问题。其他条件任选。 |
||||||
|
生成代码后 除第一行`<div id="he-plugin-standard"></div>`外，其他代码复制到主题文件夹下`index.php`底部对应位置即可。 |
||||||
|
|
||||||
|
|
||||||
|
## 一键添加 |
||||||
|
 |
||||||
|
|
||||||
|
在浏览器标签栏添加新标签 |
||||||
|
标签名称栏随意填写 |
||||||
|
标签地址栏，填写一下地址代码 |
||||||
|
|
||||||
|
``` |
||||||
|
javascript: var url = location.href; |
||||||
|
var title = document.title; |
||||||
|
void(open('http://www.你的域名.com/index.php?c=admin&page=add_quick_tpl&url=' + encodeURIComponent(url) + '&title=' + encodeURIComponent(title), "_blank", "toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, left=200,top=200,width=400, height=460")); |
||||||
|
``` |
||||||
|
注意域名要替换成你的域名，然后保存即可。 |
||||||
|
|
||||||
|
|
||||||
|
## 相关链接 |
||||||
|
|
||||||
|
* [OneNav官网](https://nav.rss.ink/) |
||||||
|
* [onenav作者](https://www.xiaoz.me/) |
||||||
@ -0,0 +1,945 @@ |
|||||||
|
/*百素(1099116749@qq.com)*/ |
||||||
|
|
||||||
|
@charset "utf-8"; |
||||||
|
* { |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
font-family: Arial, 'PingFang SC', SimHei, SimSun; |
||||||
|
box-sizing: border-box; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
input:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
textarea:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
input {} |
||||||
|
|
||||||
|
body { |
||||||
|
background-color: #f5f6fa; |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
li { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6 { |
||||||
|
font-weight: normal; |
||||||
|
} |
||||||
|
|
||||||
|
a { |
||||||
|
color: inherit; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.cl { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
|
||||||
|
.kongs, |
||||||
|
.kongs:hover { |
||||||
|
height: 0 !important; |
||||||
|
margin: 0 !important; |
||||||
|
padding: 0 !important; |
||||||
|
border: none !important; |
||||||
|
background-color: transparent !important; |
||||||
|
box-shadow: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/**/ |
||||||
|
|
||||||
|
.index-nav { |
||||||
|
width: 240px; |
||||||
|
height: 100vh; |
||||||
|
background-color: #FFFFFF; |
||||||
|
padding: 20px 5px 100px 0px; |
||||||
|
box-shadow: 1px 0px 5px 0 #eeeeee; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
z-index: 9; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .logo { |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .logo a { |
||||||
|
display: block; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 24px; |
||||||
|
height: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .logo img { |
||||||
|
display: block; |
||||||
|
height: 100%; |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .type-list { |
||||||
|
height: calc(100% - 60px); |
||||||
|
padding: 0 25px 100px; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
/* 整个滚动条 */ |
||||||
|
.index-nav .type-list::-webkit-scrollbar { |
||||||
|
width: 6px; |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
/* 滚动条上的按钮 (上下箭头). */ |
||||||
|
|
||||||
|
.index-nav .type-list::-webkit-scrollbar-button { |
||||||
|
height: 0px; |
||||||
|
width: 0px; |
||||||
|
} |
||||||
|
/* 滚动条上的滚动滑块. */ |
||||||
|
.index-nav .type-list::-webkit-scrollbar-thumb { |
||||||
|
background-color: #64a15e; |
||||||
|
border-radius: 50px; |
||||||
|
} |
||||||
|
/* 滚动条轨道. */ |
||||||
|
.index-nav .type-list::-webkit-scrollbar-track { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
/* 滚动条没有滑块的轨道部分 */ |
||||||
|
.index-nav .type-list::-webkit-scrollbar-track-piece { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .type-list .list { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-start; |
||||||
|
align-items: center; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: bold; |
||||||
|
padding: 10px; |
||||||
|
border-radius: 5px; |
||||||
|
margin-bottom: 10px; |
||||||
|
color: #555555; |
||||||
|
transition: 0.3s all; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .type-list .list i { |
||||||
|
display: block; |
||||||
|
margin-right: 6px; |
||||||
|
font-size: 22px; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .type-list .list:hover { |
||||||
|
background-color: #64a15e; |
||||||
|
color: #FFFFFF; |
||||||
|
transition: 0.3s all; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .user-info { |
||||||
|
width: 100%; |
||||||
|
background-color: #ffffff; |
||||||
|
padding: 25px; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-start; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .user-info .pic { |
||||||
|
display: block; |
||||||
|
width: 45px; |
||||||
|
height: 45px; |
||||||
|
border-radius: 100%; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .user-info .pic img { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .user-info .text { |
||||||
|
padding-left: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .user-info .text p.t1 { |
||||||
|
font-weight: bold; |
||||||
|
color: #555555; |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
.index-nav .user-info .text p.t2 { |
||||||
|
color: #c2c2c2; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/**/ |
||||||
|
|
||||||
|
.index-main { |
||||||
|
width: 100%; |
||||||
|
padding-left: 260px; |
||||||
|
padding-top: 20px; |
||||||
|
padding-right: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.search { |
||||||
|
width: 100%; |
||||||
|
display: none; |
||||||
|
/*display: flex;*/ |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.search .list { |
||||||
|
width: 370px; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.search .list input.kw { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 40px; |
||||||
|
padding: 0 55px 0 25px; |
||||||
|
border-radius: 40px; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
.search .list button { |
||||||
|
display: block; |
||||||
|
height: 40px; |
||||||
|
width: 50px; |
||||||
|
background-color: transparent; |
||||||
|
border: none; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.search .list button i { |
||||||
|
display: block; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 16px; |
||||||
|
color: #64a15e; |
||||||
|
} |
||||||
|
|
||||||
|
.search .addsite { |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
text-align: center; |
||||||
|
line-height: 40px; |
||||||
|
background-color: #64a15e; |
||||||
|
border-radius: 6px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.search .addsite i { |
||||||
|
display: block; |
||||||
|
font-size: 26px; |
||||||
|
color: #FFFFFF; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/**/ |
||||||
|
|
||||||
|
.search-main-w { |
||||||
|
width: 100%; |
||||||
|
height: 180px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main { |
||||||
|
width: calc(100% - 500px); |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
border-radius: 6px; |
||||||
|
background-color: #64a15e; |
||||||
|
background-image: url(../images/search-bj.jpg); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-size: cover; |
||||||
|
background-position: center; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main .search-input { |
||||||
|
width: 600px; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main .search-input input.kw { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 50px; |
||||||
|
padding: 0 65px 0 25px; |
||||||
|
border-radius: 10px; |
||||||
|
border: 1px solid #F2F2F2; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main .search-input button.search-bendi { |
||||||
|
display: block; |
||||||
|
height: 50px; |
||||||
|
width: 60px; |
||||||
|
background-color: transparent; |
||||||
|
border: none; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main .search-input button.search-bendi i { |
||||||
|
display: block; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 20px; |
||||||
|
color: #64a15e; |
||||||
|
} |
||||||
|
.search-main .search-btnlist{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.search-main button.search-btn { |
||||||
|
width: 140px; |
||||||
|
height: 50px; |
||||||
|
border: none; |
||||||
|
border-radius: 10px 0px 0px 10px; |
||||||
|
background-color: #fff; |
||||||
|
color: #555; |
||||||
|
margin-left: 12px; |
||||||
|
font-size: 16px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
cursor: pointer; |
||||||
|
border-right: 1px solid #64a15e; |
||||||
|
} |
||||||
|
.search-main button.search-btn img{ |
||||||
|
display: block; |
||||||
|
width: 25px; |
||||||
|
height: 25px; |
||||||
|
border-radius: 6px; |
||||||
|
margin-right: 6px; |
||||||
|
} |
||||||
|
.search-main button.search-btn i { |
||||||
|
display: block; |
||||||
|
margin-right: 4px; |
||||||
|
font-size: 20px; |
||||||
|
line-height: 50px; |
||||||
|
} |
||||||
|
.search-main button.search-change { |
||||||
|
width: 30px; |
||||||
|
height: 50px; |
||||||
|
text-align: center; |
||||||
|
border: none; |
||||||
|
border-radius: 0px 10px 10px 0px; |
||||||
|
background-color: #64a15e; |
||||||
|
color: #ffffff; |
||||||
|
font-size: 16px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main button.search-change i { |
||||||
|
display: block; |
||||||
|
font-size: 16px; |
||||||
|
line-height: 50px; |
||||||
|
} |
||||||
|
.search-main .search-btnlist .search-lists{ |
||||||
|
width: 390px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
position: absolute; |
||||||
|
top: 60px; |
||||||
|
right: 0; |
||||||
|
background-color: #FFFFFF; |
||||||
|
padding: 12px; |
||||||
|
border-radius: 6px; |
||||||
|
z-index: 100; |
||||||
|
box-shadow: 0px 0px 6px #000000; |
||||||
|
} |
||||||
|
.search-main .search-btnlist .search-lists.hide{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.search-main .search-btnlist .search-lists .list{ |
||||||
|
width: 33%; |
||||||
|
line-height: 40px; |
||||||
|
padding: 0 10px; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-start; |
||||||
|
align-items: center; |
||||||
|
font-size: 15px; |
||||||
|
border-radius: 6px; |
||||||
|
cursor: pointer; |
||||||
|
transition: 0.3s all; |
||||||
|
} |
||||||
|
.search-main .search-btnlist .search-lists .list img{ |
||||||
|
display: block; |
||||||
|
width: 20px; |
||||||
|
height: 20px; |
||||||
|
margin-right: 8px; |
||||||
|
border-radius: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main .search-btnlist .search-lists .list:hover{ |
||||||
|
background-color: #64a15e; |
||||||
|
color: #FFFFFF; |
||||||
|
transition: 0.3s all; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main-w .date-main { |
||||||
|
width: 240px; |
||||||
|
height: 100%; |
||||||
|
background-color: #477975; |
||||||
|
border-radius: 6px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
flex-direction: column; |
||||||
|
transition: 0.3s all; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main-w .date-main .times { |
||||||
|
width: 100%; |
||||||
|
display: block; |
||||||
|
text-align: center; |
||||||
|
color: #FFFFFF; |
||||||
|
font-size: 40px; |
||||||
|
font-weight: bolder; |
||||||
|
letter-spacing: 2px; |
||||||
|
margin-bottom: 15px; |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main-w .date-main .list { |
||||||
|
width: 100%; |
||||||
|
align-items: center; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main-w .date-main span { |
||||||
|
width: 49%; |
||||||
|
color: #FFFFFF; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main-w .date-main span.dates { |
||||||
|
width: 100%; |
||||||
|
display: block; |
||||||
|
text-align: center; |
||||||
|
margin-bottom: 12px; |
||||||
|
font-weight: bold; |
||||||
|
} |
||||||
|
|
||||||
|
.search-main-w .date-main span.weeks { |
||||||
|
margin-left: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.search-main-w .weather-main { |
||||||
|
width: 240px; |
||||||
|
height: 100%; |
||||||
|
background-color: #01AAED; |
||||||
|
border-radius: 6px; |
||||||
|
transition: 0.3s all; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main { |
||||||
|
width: 100%; |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-name { |
||||||
|
display: flex; |
||||||
|
justify-content: flex-start; |
||||||
|
align-items: center; |
||||||
|
align-self: center; |
||||||
|
font-size: 18px; |
||||||
|
line-height: 30px; |
||||||
|
font-weight: bold; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-name i { |
||||||
|
display: block; |
||||||
|
font-size: 20px; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-name span { |
||||||
|
display: block; |
||||||
|
height: 25px; |
||||||
|
width: 25px; |
||||||
|
line-height: 25px; |
||||||
|
text-align: center; |
||||||
|
background-color: #64a15e; |
||||||
|
border-radius: 5px; |
||||||
|
margin-left: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-name span i { |
||||||
|
color: #ffffff; |
||||||
|
text-align: center; |
||||||
|
font-size: 14px; |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-name.hidden { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-list { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-list .list { |
||||||
|
width: 16%; |
||||||
|
background-color: #ffffff; |
||||||
|
border-radius: 4px; |
||||||
|
transition: 0.3s all; |
||||||
|
margin-bottom: 15px; |
||||||
|
position: relative; |
||||||
|
display: flex; |
||||||
|
justify-content: flex-start; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-list .list span { |
||||||
|
display: block; |
||||||
|
width: 25px; |
||||||
|
height: 25px; |
||||||
|
text-align: center; |
||||||
|
line-height: 25px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-list .list span i { |
||||||
|
display: block; |
||||||
|
color: #64a15e; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-list .list a { |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: flex-start; |
||||||
|
width: 100%; |
||||||
|
padding: 0 5%; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-list .list p.name { |
||||||
|
color: #666666; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 15px; |
||||||
|
line-height: 44px; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
position: relative; |
||||||
|
padding-left: 25px; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-list .list p.name em { |
||||||
|
width: 18px; |
||||||
|
height: 18px; |
||||||
|
display: block; |
||||||
|
margin-right: 10px; |
||||||
|
border-radius: 100%; |
||||||
|
line-height: 44px; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-list .list p.name img { |
||||||
|
width: 18px; |
||||||
|
height: 18px; |
||||||
|
margin: auto; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-list .list:hover { |
||||||
|
box-shadow: 0px 0px 6px #333; |
||||||
|
background-color: #64a15e; |
||||||
|
transition: 0.3s all; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-list .list:hover p.name { |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-list .list.hidden { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.site-main .site-list .list.visible { |
||||||
|
display: flex; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/**/ |
||||||
|
|
||||||
|
footer { |
||||||
|
width: 100%; |
||||||
|
padding-left: 240px; |
||||||
|
font-size: 14px; |
||||||
|
color: #C2C2C2; |
||||||
|
position: fixed; |
||||||
|
bottom: 10px; |
||||||
|
left: 0; |
||||||
|
margin: auto; |
||||||
|
text-align: center; |
||||||
|
height: 56px; |
||||||
|
line-height: 23px; |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
footer a { |
||||||
|
color: #C2C2C2; |
||||||
|
} |
||||||
|
|
||||||
|
footer.show { |
||||||
|
position: static; |
||||||
|
} |
||||||
|
|
||||||
|
footer a:hover { |
||||||
|
color: #64a15e !important; |
||||||
|
} |
||||||
|
.tool-list{ |
||||||
|
position: fixed; |
||||||
|
bottom: 30px; |
||||||
|
right: 15px; |
||||||
|
z-index: 99; |
||||||
|
width: 45px; |
||||||
|
} |
||||||
|
.tool-list .list{ |
||||||
|
width: 45px; |
||||||
|
height: 45px; |
||||||
|
display: block; |
||||||
|
background-color: #64a15e; |
||||||
|
color: white; |
||||||
|
text-align: center; |
||||||
|
line-height: 45px; |
||||||
|
border-radius: 6px; |
||||||
|
cursor: pointer; |
||||||
|
margin-top: 12px; |
||||||
|
} |
||||||
|
.tool-list .list i{ |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
.tool-list .addsite i{ |
||||||
|
font-size: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
/**/ |
||||||
|
|
||||||
|
.addsiteBox { |
||||||
|
border-radius: 6px !important; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main { |
||||||
|
display: none; |
||||||
|
padding-bottom: 15px; |
||||||
|
width: 460px; |
||||||
|
margin: auto; |
||||||
|
background-color: #FFFFFF; |
||||||
|
box-shadow: 0px 0px 6px #ccc; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .title { |
||||||
|
background-color: #64a15e; |
||||||
|
text-align: center; |
||||||
|
line-height: 80px; |
||||||
|
color: #FFFFFF; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 22px; |
||||||
|
margin-bottom: 20px; |
||||||
|
letter-spacing: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list-w { |
||||||
|
width: 100%; |
||||||
|
padding: 0 20px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list { |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 15px; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list span.icon { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
flex-direction: column; |
||||||
|
width: 35px; |
||||||
|
text-align: center; |
||||||
|
height: 100%; |
||||||
|
margin: auto; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list span.icon i { |
||||||
|
color: #64a15e; |
||||||
|
display: block; |
||||||
|
font-size: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list input.text { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 44px; |
||||||
|
padding: 0 8px 0 35px; |
||||||
|
border-radius: 6px; |
||||||
|
background-color: #f5f6fa; |
||||||
|
border: none; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list.type { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 7px; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list.type span { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
width: 19%; |
||||||
|
text-align: center; |
||||||
|
padding: 7px 0px; |
||||||
|
font-size: 13px; |
||||||
|
border: 1px solid #64a15e; |
||||||
|
cursor: pointer; |
||||||
|
border-radius: 6px; |
||||||
|
margin-bottom: 8px; |
||||||
|
transition: 0.3s all; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list.type span:hover, |
||||||
|
.addsite-main .list.type span.hover { |
||||||
|
background-color: #64a15e; |
||||||
|
color: #FFFFFF; |
||||||
|
transition: 0.3s all; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list-2 { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list-2 .li { |
||||||
|
width: 48%; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
line-height: 40px; |
||||||
|
background-color: #f5f6fa; |
||||||
|
padding: 0 10px; |
||||||
|
border-radius: 6px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list-2 .li span { |
||||||
|
display: block; |
||||||
|
width: 40%; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list-2 .li input.num { |
||||||
|
display: block; |
||||||
|
width: 60%; |
||||||
|
height: 40px; |
||||||
|
padding: 0 5px; |
||||||
|
background-color: #f5f6fa; |
||||||
|
border: none; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list textarea { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: 80px; |
||||||
|
padding: 10px; |
||||||
|
border-radius: 6px; |
||||||
|
background-color: #f5f6fa; |
||||||
|
border: none; |
||||||
|
color: #555; |
||||||
|
line-height: 1.4; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list button { |
||||||
|
width: 100%; |
||||||
|
display: block; |
||||||
|
height: 44px; |
||||||
|
background-color: #64a15e; |
||||||
|
border: 1px solid #64a15e; |
||||||
|
border-radius: 6px; |
||||||
|
color: #FFFFFF; |
||||||
|
font-size: 16px; |
||||||
|
cursor: pointer; |
||||||
|
transition: 0.3s all; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .list button:hover { |
||||||
|
transition: 0.3s all; |
||||||
|
box-shadow: 0px 0px 6px #333333; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
/*边距调整*/ |
||||||
|
|
||||||
|
.addsite-main .layui-unselect, |
||||||
|
.addsite-main .layui-unselect * { |
||||||
|
box-sizing: content-box; |
||||||
|
} |
||||||
|
|
||||||
|
.addsite-main .layui-form-switch { |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.m-header{display: none;} |
||||||
|
|
||||||
|
|
||||||
|
/* |
||||||
|
* 手机端 |
||||||
|
*/ |
||||||
|
|
||||||
|
@media only screen and (max-width: 1200px) { |
||||||
|
.index-nav{ |
||||||
|
left: -100%; |
||||||
|
transition: 0.3s all; |
||||||
|
} |
||||||
|
.index-nav.show{ |
||||||
|
left: 0; |
||||||
|
transition: 0.3s all; |
||||||
|
} |
||||||
|
.index-main{ |
||||||
|
padding: 15px !important; |
||||||
|
} |
||||||
|
.search-main-w{ |
||||||
|
width: 100%; |
||||||
|
height: 120px; |
||||||
|
margin-top: 60px; |
||||||
|
} |
||||||
|
.search-main-w .date-main{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
#he-plugin-standard{ |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.search-main{ |
||||||
|
width: 100%; |
||||||
|
padding: 25px 0; |
||||||
|
flex-wrap: wrap; |
||||||
|
background-position: center; |
||||||
|
} |
||||||
|
.search-main .search-input{ |
||||||
|
width: 80%; |
||||||
|
} |
||||||
|
.search-main .search-btnlist{ |
||||||
|
width: 100%; |
||||||
|
display: none; |
||||||
|
} |
||||||
|
.search-main .search-btnlist .search-lists{ |
||||||
|
width: 100%; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
margin: auto; |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.site-main .site-name{ |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
.site-main .site-list .list{ |
||||||
|
width: 48%; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
.site-main .site-list{ |
||||||
|
margin-bottom: 25px; |
||||||
|
} |
||||||
|
.site-main .site-list .list span{ |
||||||
|
position: absolute; |
||||||
|
right: 0px; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
.site-main .site-list .list a{ |
||||||
|
padding: 0 10% 0 5%; |
||||||
|
} |
||||||
|
footer{ |
||||||
|
padding-left: 0; |
||||||
|
} |
||||||
|
.m-header{ |
||||||
|
width: 100%; |
||||||
|
padding: 10px 15px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
background-color: #FFFFFF; |
||||||
|
z-index: 9999; |
||||||
|
box-shadow: 0px 0px 1px #C0C4CC; |
||||||
|
} |
||||||
|
.m-header .logo{ |
||||||
|
height: 30px; |
||||||
|
} |
||||||
|
.m-header .logo img{ |
||||||
|
display: block; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.m-header .navbar{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
flex-direction: column; |
||||||
|
width: 40px; |
||||||
|
height: 40px; |
||||||
|
font-size: 28px; |
||||||
|
text-align: center; |
||||||
|
border: 1px solid #64a15e; |
||||||
|
color: #64a15e; |
||||||
|
border-radius: 6px; |
||||||
|
} |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 71 KiB |
@ -0,0 +1,302 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
|
||||||
|
<head> |
||||||
|
<meta charset="utf-8" /> |
||||||
|
<meta name="renderer" content="webkit|ie-comp|ie-stand"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> |
||||||
|
<meta http-equiv="Cache-Control" content="no-transform"> |
||||||
|
<meta name="applicable-device" content="pc,mobile"> |
||||||
|
<meta name="MobileOptimized" content="width"> |
||||||
|
<meta name="HandheldFriendly" content="true"> |
||||||
|
<meta name="author" content="BaiSu" /> |
||||||
|
<title> |
||||||
|
<?php echo $site_setting['title']; ?> |
||||||
|
</title> |
||||||
|
<meta name="keywords" content="<?php echo $site_setting['keywords']; ?>" /> |
||||||
|
<meta name="description" content="<?php echo $site_setting['description']; ?>" /> |
||||||
|
<link rel="stylesheet" type="text/css" href="templates/<?php echo TEMPLATE; ?>/css/style.css" /> |
||||||
|
<link rel="stylesheet" href="https://libs.xiaoz.top/font-awesome/4.7.0/css/font-awesome.css"> |
||||||
|
<link rel="stylesheet" type="text/css" href="templates/<?php echo TEMPLATE; ?>/layui/css/layui.css" /> |
||||||
|
</head> |
||||||
|
|
||||||
|
<body> |
||||||
|
<!--手机顶部 S--> |
||||||
|
<div class="m-header"> |
||||||
|
<div class="logo"> |
||||||
|
<a href="/"><img src="templates/<?php echo TEMPLATE; ?>/images/logo.png" /></a> |
||||||
|
</div> |
||||||
|
<div class="navbar"> |
||||||
|
<i class="iconfont icon-caidan"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!--手机顶部 E--> |
||||||
|
<!--左侧分类栏 S--> |
||||||
|
<div class="index-nav"> |
||||||
|
<div class="logo"> |
||||||
|
<a href="/"><img src="templates/<?php echo TEMPLATE; ?>/images/logo.png" /></a> |
||||||
|
</div> |
||||||
|
<div class="type-list"> |
||||||
|
|
||||||
|
<?php |
||||||
|
foreach ($categorys as $category) { |
||||||
|
$font_icon = empty($category['font_icon']) ? '' : "<i class='{$category['font_icon']}'></i> "; |
||||||
|
?> |
||||||
|
<a href="#category-<?php echo $category['id']; ?>" class="list"> |
||||||
|
<?php echo $font_icon; ?><?php echo htmlspecialchars_decode($category['name']); ?> |
||||||
|
</a> |
||||||
|
<?php } ?> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="user-info"> |
||||||
|
<div class="pic"> |
||||||
|
<a href="/"> |
||||||
|
<img src="templates/<?php echo TEMPLATE; ?>/images/touxiang.png" /></a> |
||||||
|
</div> |
||||||
|
<div class="text"> |
||||||
|
<?php |
||||||
|
if( is_login() ) { |
||||||
|
?> |
||||||
|
<a href="/index.php?c=admin" target="_blank"> |
||||||
|
<p class="t1"> |
||||||
|
<?php echo $site_setting['title']; ?> |
||||||
|
</p> |
||||||
|
<p class="t2">管理后台</p> |
||||||
|
</a> |
||||||
|
<?php }else{ ?> |
||||||
|
<a href="/index.php?c=login" target="_blank"> |
||||||
|
<p class="t1">尚未登录</p> |
||||||
|
<p class="t2">请先登录账户！</p> |
||||||
|
</a> |
||||||
|
<?php } ?> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!--左侧分类栏 E--> |
||||||
|
<!--中间主体 S--> |
||||||
|
<div class="index-main"> |
||||||
|
<!--搜索 S--> |
||||||
|
<div class="search-main-w"> |
||||||
|
<div class="search-main"> |
||||||
|
<div class="search-input"> |
||||||
|
<input type="text" class="kw" name="search" id="search" value="" class="kw" placeholder="回车键百度搜索" autocomplete="off" /> |
||||||
|
<button class="search-bendi"><i class="iconfont icon-sousuo"></i></button> |
||||||
|
</div> |
||||||
|
<div class="search-btnlist"> |
||||||
|
<button class="search-btn" data-url="https://www.baidu.com/s?ie=UTF-8&wd="> |
||||||
|
<img src="templates/<?php echo TEMPLATE; ?>/images/icon/baidu.svg" /> |
||||||
|
百度搜索</button> |
||||||
|
<button class="search-change"><i class="iconfont icon-xiangxia"></i></button> |
||||||
|
<div class="search-lists hide"> |
||||||
|
<div class="list" data-url="https://www.baidu.com/s?ie=UTF-8&wd="> |
||||||
|
<img src="templates/<?php echo TEMPLATE; ?>/images/icon/baidu.svg" />百度搜索 |
||||||
|
</div> |
||||||
|
<div class="list" data-url="https://www.google.com/search?q="> |
||||||
|
<img src="templates/<?php echo TEMPLATE; ?>/images/icon/google.svg" />谷歌搜索 |
||||||
|
</div> |
||||||
|
<div class="list" data-url="https://cn.bing.com/search?q="> |
||||||
|
<img src="templates/<?php echo TEMPLATE; ?>/images/icon/bing.svg" />必应搜索 |
||||||
|
</div> |
||||||
|
<div class="list" data-url="https://www.zhihu.com/search?type=content&q="> |
||||||
|
<img src="templates/<?php echo TEMPLATE; ?>/images/icon/zhihu.png" />知乎搜索 |
||||||
|
</div> |
||||||
|
<div class="list" data-url="https://search.bilibili.com/all?keyword="> |
||||||
|
<img src="templates/<?php echo TEMPLATE; ?>/images/icon/bilibili.svg" />Bilibili搜索 |
||||||
|
</div> |
||||||
|
<div class="list" data-url="https://s.weibo.com/weibo?q="> |
||||||
|
<img src="templates/<?php echo TEMPLATE; ?>/images/icon/weibo.svg" />微博搜索 |
||||||
|
</div> |
||||||
|
<div class="list" data-url="https://so.toutiao.com/search?dvpf=pc&source=input&keyword="> |
||||||
|
<img src="templates/<?php echo TEMPLATE; ?>/images/icon/toutiao.ico" />头条搜索 |
||||||
|
</div> |
||||||
|
<!--此处添加搜索引擎 S--> |
||||||
|
<!--<div class="list" data-url="搜索链接"> |
||||||
|
<img src="搜索引擎图标路径" />搜索引擎名称 |
||||||
|
</div>--> |
||||||
|
<!--此处添加搜索引擎 E--> |
||||||
|
|
||||||
|
<div class="list kongs"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="date-main"> |
||||||
|
<time class="times" id="nowTime">00:00:00</time> |
||||||
|
<span class="dates" id="nowYmd">2022年02月28日</span> |
||||||
|
<div class="list"> |
||||||
|
<span class="lunars" id="nowLunar">壬寅年正月廿八 </span> |
||||||
|
<span class="weeks" id="nowWeek">星期一</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="weather-main" id="he-plugin-standard"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="search"> |
||||||
|
<div class="list"> |
||||||
|
<input type="text" name="search" id="search" value="" class="kw" placeholder="输入关键词进行搜索，回车键百度搜索" autocomplete="off" /> |
||||||
|
<button><i class="iconfont icon-sousuo"></i></button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!--搜索 E--> |
||||||
|
<div class="site-main"> |
||||||
|
<!-- 遍历分类目录 --> |
||||||
|
<?php foreach ( $categorys as $category ) { |
||||||
|
$fid = $category['id']; |
||||||
|
$links = get_links($fid); |
||||||
|
$font_icon = empty($category['font_icon']) ? '' : "<i class='{$category['font_icon']}'></i> "; |
||||||
|
//如果分类是私有的 |
||||||
|
if( $category['property'] == 1 ) { |
||||||
|
$property = '<span><i class="one iconfont icon-suo"></i></span>'; |
||||||
|
} |
||||||
|
else { |
||||||
|
$property = ''; |
||||||
|
} |
||||||
|
?> |
||||||
|
|
||||||
|
<div class="site-name" id="category-<?php echo $category['id']; ?>"> |
||||||
|
<?php echo $font_icon; ?><?php echo htmlspecialchars_decode($category['name']); ?> |
||||||
|
<?php echo $property; ?> |
||||||
|
</div> |
||||||
|
<div class="site-list"> |
||||||
|
<!-- 遍历链接 --> |
||||||
|
<?php |
||||||
|
foreach ($links as $link) { |
||||||
|
//默认描述 |
||||||
|
$link['description'] = empty($link['description']) ? '作者很懒，没有填写描述。' : $link['description']; |
||||||
|
?> |
||||||
|
<div class="list urllist" id="id_<?php echo $link['id']; ?>" data-id="<?php echo $link['id']; ?>" data-url="<?php echo $link['url']; ?>"> |
||||||
|
<a href="/index.php?c=click&id=<?php echo $link['id']; ?>" target="_blank"> |
||||||
|
<p class="name"> |
||||||
|
<img src="https://favicon.rss.ink/v1/<?php echo base64($link['url']); ?>"> |
||||||
|
<?php echo $link['title']; ?> |
||||||
|
</p> |
||||||
|
</a> |
||||||
|
<?php if($link['property'] == 1 ) { ?> |
||||||
|
<span><i class="one iconfont icon-suo"></i></span> |
||||||
|
<?php } ?> |
||||||
|
</div> |
||||||
|
<?php } ?> |
||||||
|
<div class="list kongs"></div> |
||||||
|
<div class="list kongs"></div> |
||||||
|
<div class="list kongs"></div> |
||||||
|
<div class="list kongs"></div> |
||||||
|
</div> |
||||||
|
<!-- 遍历链接END --> |
||||||
|
<?php } ?> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!--中间主体 E--> |
||||||
|
|
||||||
|
<!--底部版权 S--> |
||||||
|
<footer> |
||||||
|
© 2022 BaiSu,Powered by |
||||||
|
<a target="_blank" href="https://github.com/helloxz/onenav" title="简约导航/书签管理器" rel="nofollow">OneNav</a> |
||||||
|
<br> The theme author is |
||||||
|
<a href="https://gitee.com/baisucode/onenav-theme" target="_blank">BaiSu</a> |
||||||
|
|
||||||
|
</footer> |
||||||
|
<!--底部版权 E--> |
||||||
|
<!--返回顶部 S--> |
||||||
|
<div class="tool-list"> |
||||||
|
<?php |
||||||
|
if( is_login() ) { |
||||||
|
?> |
||||||
|
<div class="addsite list" id="addsite"> |
||||||
|
<i class="iconfont icon-tianjia"></i> |
||||||
|
</div> |
||||||
|
<?php }else{ ?> |
||||||
|
<a href="/index.php?c=login" class="addsite list"> |
||||||
|
<i class="iconfont icon-zhanghao"></i> |
||||||
|
</a> |
||||||
|
<?php } ?> |
||||||
|
<div class="scroll_top list"> |
||||||
|
<i class="iconfont icon-top"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!--返回顶部 E--> |
||||||
|
<!--添加链接 S--> |
||||||
|
<div class="addsite-main" id="addsiteBox"> |
||||||
|
<div class="title"> |
||||||
|
添加连接 |
||||||
|
</div> |
||||||
|
<form class="layui-form list-w"> |
||||||
|
<div class="list"> |
||||||
|
<span class="icon"><i class="iconfont icon-charulianjie"></i></span> |
||||||
|
<input type="text" class="text" name="url" id="url" required lay-verify="required|url" placeholder="请输入完整的网址链接" autocomplete="off"> |
||||||
|
</div> |
||||||
|
<div class="list"> |
||||||
|
<span class="icon"><i class="iconfont icon-bianji"></i></span> |
||||||
|
<input type="text" class="text" name="title" id="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"> |
||||||
|
</div> |
||||||
|
<div class="list type"> |
||||||
|
<input type="hidden" name="fid" id="fid" value="" required lay-verify="required" /> |
||||||
|
<?php foreach ($categorys as $category) { |
||||||
|
?> |
||||||
|
<span class="fid" data-fid="<?php echo $category['id'] ?>"><?php echo htmlspecialchars_decode($category['name']); ?></span> |
||||||
|
<?php } ?> |
||||||
|
<span class="kongs"></span> |
||||||
|
<span class="kongs"></span> |
||||||
|
<span class="kongs"></span> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="list list-2"> |
||||||
|
<div class="li"> |
||||||
|
<span>权重：</span> |
||||||
|
<input type="text" class="num" name="weight" min="0" max="999" value="0" required lay-verify="required|number" autocomplete="off"> |
||||||
|
</div> |
||||||
|
<div class="li"> |
||||||
|
私有： |
||||||
|
<input type="checkbox" lay-skin="switch" lay-text="是|否" name="property" value="1"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="list"> |
||||||
|
<textarea name="description" id="description" placeholder="请输入站点描述（选填）"></textarea> |
||||||
|
</div> |
||||||
|
<div class="list"> |
||||||
|
<button lay-submit lay-filter="add_link">添加</button> |
||||||
|
</div> |
||||||
|
|
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<!--添加链接 E--> |
||||||
|
|
||||||
|
<!--iconfont--> |
||||||
|
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_3000268_oov6h4vru0h.css" /> |
||||||
|
<script src="//at.alicdn.com/t/font_3000268_oov6h4vru0h.js" type="text/javascript" charset="utf-8"></script> |
||||||
|
<!--JS--> |
||||||
|
<script src="templates/<?php echo TEMPLATE; ?>/js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script> |
||||||
|
<script src="templates/<?php echo TEMPLATE; ?>/layui/layui.js" type="text/javascript" charset="utf-8"></script> |
||||||
|
<script src="templates/<?php echo TEMPLATE; ?>/js/clipboard.min.js" type="text/javascript" charset="utf-8"></script> |
||||||
|
<script src="templates/<?php echo TEMPLATE; ?>/js/holmes.js" type="text/javascript" charset="utf-8"></script> |
||||||
|
<script src="templates/<?php echo TEMPLATE; ?>/js/lunar.js" type="text/javascript" charset="utf-8"></script> |
||||||
|
<script src="templates/<?php echo TEMPLATE; ?>/js/common.js" type="text/javascript" charset="utf-8"></script> |
||||||
|
<?php |
||||||
|
if( is_login() ) { |
||||||
|
?> |
||||||
|
<script src="templates/<?php echo TEMPLATE; ?>/js/admin.js" type="text/javascript" charset="utf-8"></script> |
||||||
|
|
||||||
|
<?php } ?> |
||||||
|
|
||||||
|
<!--天气代码替换处 S--> |
||||||
|
<script type="text/javascript"> |
||||||
|
WIDGET = { |
||||||
|
"CONFIG": { |
||||||
|
"layout": "1", |
||||||
|
"width": "240", |
||||||
|
"height": "180", |
||||||
|
"background": "1", |
||||||
|
"dataColor": "FFFFFF", |
||||||
|
"borderRadius": "6", |
||||||
|
"modules": "10", |
||||||
|
"key": "7423b182d5cb48239f19df9e25cdf320" |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<script src="https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0"></script> |
||||||
|
<!--天气代码替换处 E--> |
||||||
|
|
||||||
|
</body> |
||||||
|
|
||||||
|
</html> |
||||||
|
|
||||||
@ -0,0 +1,96 @@ |
|||||||
|
layui.use(['dropdown', 'layer', 'form'], function() { |
||||||
|
var dropdown = layui.dropdown, |
||||||
|
layer = layui.layer, |
||||||
|
form = layui.form, |
||||||
|
$ = layui.jquery; |
||||||
|
//右键菜单
|
||||||
|
dropdown.render({ |
||||||
|
elem: '.urllist', |
||||||
|
trigger: 'contextmenu' //右键事件
|
||||||
|
, |
||||||
|
data: [{ |
||||||
|
title: '访问', |
||||||
|
templet: '<i class="iconfont icon-charulianjie"></i> {{d.title}}', |
||||||
|
id: 1 |
||||||
|
}, { |
||||||
|
title: '复制', |
||||||
|
templet: '<div class="copybtn"><i class="iconfont icon-fuzhi"></i> {{d.title}}</div>', |
||||||
|
id: 2 |
||||||
|
}, { |
||||||
|
title: '编辑', |
||||||
|
templet: '<i class="iconfont icon-bianji"></i> {{d.title}}', |
||||||
|
id: 3 |
||||||
|
}, { |
||||||
|
title: '删除', |
||||||
|
templet: '<i class="iconfont icon-shanchu"></i> {{d.title}}', |
||||||
|
id: 4 |
||||||
|
}], |
||||||
|
click: function(data, othis) { |
||||||
|
var elem = $(this.elem), |
||||||
|
listId = elem.data('id'); |
||||||
|
listUrl = elem.data('url'); |
||||||
|
switch(data.id) { |
||||||
|
case 1: |
||||||
|
window.open('index.php?c=click&id=' + listId, '_blank'); |
||||||
|
break; |
||||||
|
case 2: |
||||||
|
copyUrl(listUrl); |
||||||
|
console.log('复制' + listId); |
||||||
|
break; |
||||||
|
case 3: |
||||||
|
window.open('index.php?c=admin&page=edit_link&id=' + listId, '_blank'); |
||||||
|
console.log('编辑' + listId); |
||||||
|
break; |
||||||
|
case 4: |
||||||
|
layer.confirm('一定要删除吗？', { |
||||||
|
btn: ['删除', '取消'] //按钮
|
||||||
|
}, function() { |
||||||
|
deleteUrl(listId) |
||||||
|
}, function() { |
||||||
|
layer.msg('取消删除！', { |
||||||
|
time: 600, |
||||||
|
}); |
||||||
|
}); |
||||||
|
console.log('删除' + listId); |
||||||
|
break; |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
//添加弹窗
|
||||||
|
$('#addsite').click(function() { |
||||||
|
layer.open({ |
||||||
|
type: 1, |
||||||
|
title: false, |
||||||
|
closeBtn: 0, |
||||||
|
shadeClose: true, |
||||||
|
skin: 'addsiteBox', |
||||||
|
content: $('#addsiteBox') |
||||||
|
}); |
||||||
|
}) |
||||||
|
$('.addsite-main .list.type span.fid').click(function() { |
||||||
|
var fid = $(this).data('fid'); |
||||||
|
$('#fid').val(fid); |
||||||
|
$(this).addClass("hover").siblings().removeClass('hover'); |
||||||
|
}); |
||||||
|
//监听提交
|
||||||
|
form.on('submit(add_link)', function(data) { |
||||||
|
// layer.msg(JSON.stringify(data.field));
|
||||||
|
var datas = JSON.stringify(data.field); |
||||||
|
addUrl(data.field); |
||||||
|
return false; |
||||||
|
}); |
||||||
|
|
||||||
|
//识别链接信息
|
||||||
|
$("input#title").focus(function() { |
||||||
|
var titleval = $("input#title").val(); |
||||||
|
var urlval = $("input#url").val(); |
||||||
|
if(urlval !== "" && titleval == "") { |
||||||
|
layer.msg('链接信息识别中', { |
||||||
|
icon: 16, |
||||||
|
}); |
||||||
|
getUrlinfo(urlval) |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
}); |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,259 @@ |
|||||||
|
var bodyH = $('.index-main').height(); |
||||||
|
var winH = $(window).height(); |
||||||
|
if(bodyH > winH) { |
||||||
|
$('footer').addClass('show'); |
||||||
|
}; |
||||||
|
|
||||||
|
//删除链接
|
||||||
|
function deleteUrl(id) { |
||||||
|
$.post("index.php?c=api&method=del_link", { |
||||||
|
id: id |
||||||
|
}, function(data, status) { |
||||||
|
//如果删除成功，则移除元素
|
||||||
|
console.log(data) |
||||||
|
if(data.code == 0) { |
||||||
|
layer.msg('删除成功！', { |
||||||
|
icon: 6, |
||||||
|
time: 600, |
||||||
|
}); |
||||||
|
$("#id_" + id).remove(); |
||||||
|
} else { |
||||||
|
//删除失败
|
||||||
|
layer.msg('删除失败，请重试！', { |
||||||
|
icon: 5, |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//复制链接
|
||||||
|
function copyUrl(url) { |
||||||
|
var clipboard = new ClipboardJS('.copybtn', { |
||||||
|
text: function() { |
||||||
|
return url; |
||||||
|
} |
||||||
|
}); |
||||||
|
clipboard.on('success', function(e) { |
||||||
|
layer.msg('复制成功！', { |
||||||
|
icon: 6, |
||||||
|
time: 600, |
||||||
|
}); |
||||||
|
e.clearSelection(); |
||||||
|
}); |
||||||
|
|
||||||
|
clipboard.on('error', function(e) { |
||||||
|
layer.msg('复制失败！', { |
||||||
|
icon: 5, |
||||||
|
time: 600, |
||||||
|
}); |
||||||
|
console.error('Action:', e.action); |
||||||
|
console.error('Trigger:', e.trigger); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//添加链接
|
||||||
|
function addUrl(data) { |
||||||
|
console.log(data.fid) |
||||||
|
|
||||||
|
$.post("index.php?c=api&method=add_link", { |
||||||
|
url: data.url, |
||||||
|
title: data.title, |
||||||
|
fid: data.fid, |
||||||
|
weight: data.weight, |
||||||
|
property: data.property, |
||||||
|
description: data.description, |
||||||
|
}, function(data, status) { |
||||||
|
console.log(data) |
||||||
|
if(data.code == 0) { |
||||||
|
layer.msg('添加成功！', { |
||||||
|
icon: 6, |
||||||
|
time: 600, |
||||||
|
end: function() { |
||||||
|
window.location.reload(); |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
} else { |
||||||
|
//添加失败
|
||||||
|
layer.msg('添加失败，请重试！', { |
||||||
|
icon: 5, |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//识别链接信息
|
||||||
|
function getUrlinfo(url) { |
||||||
|
console.log(url); |
||||||
|
$.post('/index.php?c=api&method=get_link_info', { |
||||||
|
url: url |
||||||
|
}, function(data, status) { |
||||||
|
//如果添加成功
|
||||||
|
layer.close(layer.index); |
||||||
|
if(data.code == 0) { |
||||||
|
console.log(data); |
||||||
|
if(data.data.title == null) { |
||||||
|
layer.msg('标题获取失败，请手动输入！', { |
||||||
|
icon: 5, |
||||||
|
time: 1000, |
||||||
|
}); |
||||||
|
}; |
||||||
|
$("input#title").val(data.data.title); |
||||||
|
$("textarea#description").val(data.data.description); |
||||||
|
} else { |
||||||
|
layer.msg(data.err_msg, { |
||||||
|
icon: 5, |
||||||
|
time: 1000, |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//搜索引擎切换
|
||||||
|
function searchChange() { |
||||||
|
$(".search-change").click(function() { |
||||||
|
$('.search-lists').toggleClass('hide'); |
||||||
|
console.log('1') |
||||||
|
}); |
||||||
|
$(".search-lists .list").click(function() { |
||||||
|
var souurl = $(this).data('url'); |
||||||
|
var text = $(this).html(); |
||||||
|
$('.search-btn').html(text); |
||||||
|
$('.search-btn').attr('data-url', souurl); |
||||||
|
$('.search-lists').addClass('hide'); |
||||||
|
console.log(souurl); |
||||||
|
|
||||||
|
}); |
||||||
|
$(".search-btn").click(function() { |
||||||
|
var url = $(this).attr('data-url'); |
||||||
|
var kw = $('#search').val(); |
||||||
|
if(kw !== "") { |
||||||
|
window.open(url + kw); |
||||||
|
} else { |
||||||
|
layer.msg('未输入搜索框关键词！', { |
||||||
|
time: 1000, |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
searchChange(); |
||||||
|
//回车键、本地搜索
|
||||||
|
function keyClick() { |
||||||
|
$('body').keyup(function(e) { |
||||||
|
if(e.keyCode === 13) { |
||||||
|
var isFocus = $("#search").is(":focus"); |
||||||
|
if(true == isFocus) { |
||||||
|
console.log(isFocus); |
||||||
|
var url = $('.search-btn').attr('data-url'); |
||||||
|
var kw = $('#search').val(); |
||||||
|
if(kw !== "") { |
||||||
|
window.open(url + kw); |
||||||
|
} else { |
||||||
|
layer.msg('未输入搜索框关键词！', { |
||||||
|
time: 1000, |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
$("#search").focus(function(data, status) { |
||||||
|
$('.search-lists').addClass('hide'); |
||||||
|
}); |
||||||
|
$("#search").blur(function(data, status) { |
||||||
|
if($("#search").val() == '') { |
||||||
|
$(".site-name").removeClass("hidden"); |
||||||
|
}; |
||||||
|
}); |
||||||
|
var h = holmes({ |
||||||
|
input: '#search', |
||||||
|
find: '.urllist', |
||||||
|
placeholder: '<div class="empty">未搜索到匹配结果！</div>', |
||||||
|
mark: false, |
||||||
|
hiddenAttr: true, |
||||||
|
class: { |
||||||
|
visible: 'visible', |
||||||
|
hidden: 'hidden' |
||||||
|
}, |
||||||
|
onFound(el) { |
||||||
|
$(".site-name").addClass("hidden"); |
||||||
|
}, |
||||||
|
onInput(el) { |
||||||
|
$(".site-name").addClass("hidden"); |
||||||
|
}, |
||||||
|
onVisible(el) { |
||||||
|
$(".site-name").removeClass("hidden"); |
||||||
|
}, |
||||||
|
onEmpty(el) { |
||||||
|
$(".site-name").removeClass("hidden"); |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
} |
||||||
|
keyClick(); |
||||||
|
|
||||||
|
//锚点、返回顶部
|
||||||
|
$("a.list").click(function() { |
||||||
|
$("html, body").animate({ |
||||||
|
scrollTop: $($(this).attr("href")).offset().top - 5 + "px" |
||||||
|
}, 500); |
||||||
|
return false; |
||||||
|
}); |
||||||
|
$('.scroll_top').click(function() { |
||||||
|
$('html,body').animate({ |
||||||
|
scrollTop: '0px' |
||||||
|
}, 500); |
||||||
|
}); |
||||||
|
$(window).scroll(function() { |
||||||
|
if($(window).scrollTop() >= 100) { |
||||||
|
$(".scroll_top").fadeIn(1000); |
||||||
|
} else { |
||||||
|
$(".scroll_top").stop(true, true).fadeOut(1000); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//时间
|
||||||
|
function getNow(Mytime) { |
||||||
|
return Mytime < 10 ? '0' + Mytime : Mytime; |
||||||
|
} |
||||||
|
|
||||||
|
function CurrentTime() { |
||||||
|
var myDate = new Date(); |
||||||
|
//获取当前小时数(0-23)
|
||||||
|
var h = myDate.getHours(); |
||||||
|
//获取当前分钟数(0-59)
|
||||||
|
var m = myDate.getMinutes(); |
||||||
|
//获取当前秒数(0-59)
|
||||||
|
var s = myDate.getSeconds(); |
||||||
|
var nowTime = getNow(h) + ':' + getNow(m) + ":" + getNow(s); |
||||||
|
$('#nowTime').text(nowTime); |
||||||
|
setTimeout("CurrentTime()", 1000); //设定定时器，循环运行
|
||||||
|
} |
||||||
|
CurrentTime(); |
||||||
|
|
||||||
|
var myDate = new Date(); |
||||||
|
//获取当前年份
|
||||||
|
var year = myDate.getFullYear(); |
||||||
|
//获取当前月份
|
||||||
|
var month = myDate.getMonth() + 1; |
||||||
|
//获取当前日期
|
||||||
|
var date = myDate.getDate(); |
||||||
|
var nowDate = year + ' 年 ' + getNow(month) + " 月 " + getNow(date) + " 日"; |
||||||
|
$('#nowYmd').text(nowDate); |
||||||
|
|
||||||
|
$('.date-main').click(function() { |
||||||
|
window.open('https://wannianli.tianqi.com/'); |
||||||
|
}); |
||||||
|
//获取农历
|
||||||
|
var lunarD = Lunar.fromDate(myDate); |
||||||
|
console.log(lunarD); |
||||||
|
var lunarNowDate = lunarD.getYearInGanZhi() + '年' + lunarD.getMonthInChinese() + "月" + lunarD.getDayInChinese(); |
||||||
|
$('#nowLunar').text(lunarNowDate); |
||||||
|
|
||||||
|
//获取星期
|
||||||
|
var nowWeek = lunarD.getWeekInChinese(); |
||||||
|
$('#nowWeek').text('星期' + nowWeek); |
||||||
|
|
||||||
|
//手机端
|
||||||
|
$(".navbar").click(function() { |
||||||
|
$(".index-nav").toggleClass("show"); |
||||||
|
}); |
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,29 @@ |
|||||||
|
/** |
||||||
|
|
||||||
|
@Name: layui.code |
||||||
|
@Description：Classic modular front-end UI framework |
||||||
|
@License：MIT |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
/* 加载就绪标志 */ |
||||||
|
html #layuicss-skincodecss{display:none; position: absolute; width:1989px;} |
||||||
|
|
||||||
|
/* 默认风格 */ |
||||||
|
.layui-code-view{display: block; position: relative; margin: 10px 0; padding: 0; border: 1px solid #eee; border-left-width: 6px; background-color: #FAFAFA; color: #333; font-family: Courier New; font-size: 12px;} |
||||||
|
.layui-code-h3{position: relative; padding: 0 10px; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; font-size: 12px;} |
||||||
|
.layui-code-h3 a{position: absolute; right: 10px; top: 0; color: #999;} |
||||||
|
.layui-code-view .layui-code-ol{position: relative; overflow: auto;} |
||||||
|
.layui-code-view .layui-code-ol li{position: relative; margin-left: 45px; line-height: 20px; padding: 0 10px; border-left: 1px solid #e2e2e2; list-style-type: decimal-leading-zero; *list-style-type: decimal; background-color: #fff;} |
||||||
|
.layui-code-view .layui-code-ol li:first-child{padding-top: 10px;} |
||||||
|
.layui-code-view .layui-code-ol li:last-child{padding-bottom: 10px;} |
||||||
|
.layui-code-view pre{margin: 0;} |
||||||
|
|
||||||
|
/* notepadd++风格 */ |
||||||
|
.layui-code-notepad{border: 1px solid #0C0C0C; border-left-color: #3F3F3F; background-color: #0C0C0C; color: #C2BE9E} |
||||||
|
.layui-code-notepad .layui-code-h3{border-bottom: none;} |
||||||
|
.layui-code-notepad .layui-code-ol li{background-color: #3F3F3F; border-left: none;} |
||||||
|
|
||||||
|
/* 代码预览 */ |
||||||
|
.layui-code-demo .layui-code{visibility: visible !important; margin: -15px; border-top: none; border-right: none; border-bottom: none;} |
||||||
|
.layui-code-demo .layui-tab-content{padding: 15px; border-top: none} |
||||||
@ -0,0 +1,16 @@ |
|||||||
|
/** 图标字体 **/ |
||||||
|
@font-face {font-family: 'laydate-icon'; |
||||||
|
src: url('./font/iconfont.eot'); |
||||||
|
src: url('./font/iconfont.eot#iefix') format('embedded-opentype'), |
||||||
|
url('./font/iconfont.svg#iconfont') format('svg'), |
||||||
|
url('./font/iconfont.woff') format('woff'), |
||||||
|
url('./font/iconfont.ttf') format('truetype'); |
||||||
|
} |
||||||
|
|
||||||
|
.laydate-icon{ |
||||||
|
font-family:"laydate-icon" !important; |
||||||
|
font-size: 16px; |
||||||
|
font-style: normal; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
@ -0,0 +1,152 @@ |
|||||||
|
/** |
||||||
|
|
||||||
|
@Name: laydata |
||||||
|
|
||||||
|
**/ |
||||||
|
|
||||||
|
|
||||||
|
html #layuicss-laydate{display: none; position: absolute; width: 1989px;} |
||||||
|
|
||||||
|
/* 初始化 */ |
||||||
|
.layui-laydate *{margin: 0; padding: 0;} |
||||||
|
|
||||||
|
/* 主体结构 */ |
||||||
|
.layui-laydate, .layui-laydate *{box-sizing: border-box;} |
||||||
|
.layui-laydate{position: absolute; z-index: 66666666; margin: 5px 0; border-radius: 2px; font-size: 14px; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both;} |
||||||
|
.layui-laydate-main{width: 272px;} |
||||||
|
.layui-laydate-header *, |
||||||
|
.layui-laydate-content td, |
||||||
|
.layui-laydate-list li{transition-duration: .3s; -webkit-transition-duration: .3s;} |
||||||
|
|
||||||
|
/* 微微往下滑入 */ |
||||||
|
@keyframes laydate-downbit { |
||||||
|
0% {opacity: 0.3; transform: translate3d(0, -5px, 0);} |
||||||
|
100% {opacity: 1; transform: translate3d(0, 0, 0);} |
||||||
|
} |
||||||
|
|
||||||
|
.layui-laydate{animation-name: laydate-downbit;} |
||||||
|
.layui-laydate-static{ position: relative; z-index: 0; display: inline-block; margin: 0; -webkit-animation: none; animation: none;} |
||||||
|
|
||||||
|
/* 展开年月列表时 */ |
||||||
|
.laydate-ym-show .laydate-prev-m, |
||||||
|
.laydate-ym-show .laydate-next-m{display: none !important;} |
||||||
|
.laydate-ym-show .laydate-prev-y, |
||||||
|
.laydate-ym-show .laydate-next-y{display: inline-block !important;} |
||||||
|
.laydate-ym-show .laydate-set-ym span[lay-type="month"]{display: none !important;} |
||||||
|
|
||||||
|
/* 展开时间列表时 */ |
||||||
|
.laydate-time-show .layui-laydate-header .layui-icon, |
||||||
|
.laydate-time-show .laydate-set-ym span[lay-type="year"], |
||||||
|
.laydate-time-show .laydate-set-ym span[lay-type="month"]{display: none !important;} |
||||||
|
|
||||||
|
/* 头部结构 */ |
||||||
|
.layui-laydate-header{position: relative; line-height:30px; padding: 10px 70px 5px;} |
||||||
|
.layui-laydate-header *{display: inline-block; vertical-align: bottom;} |
||||||
|
.layui-laydate-header i{position: absolute; top: 10px; padding: 0 5px; color: #999; font-size: 18px; cursor: pointer;} |
||||||
|
.layui-laydate-header i.laydate-prev-y{left: 15px;} |
||||||
|
.layui-laydate-header i.laydate-prev-m{left: 45px;} |
||||||
|
.layui-laydate-header i.laydate-next-y{right: 15px;} |
||||||
|
.layui-laydate-header i.laydate-next-m{right: 45px;} |
||||||
|
.laydate-set-ym{width: 100%; text-align: center; box-sizing: border-box; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} |
||||||
|
.laydate-set-ym span{padding: 0 10px; cursor: pointer;} |
||||||
|
.laydate-time-text{cursor: default !important;} |
||||||
|
|
||||||
|
/* 主体结构 */ |
||||||
|
.layui-laydate-content{position: relative; padding: 10px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;} |
||||||
|
.layui-laydate-content table{border-collapse: collapse; border-spacing: 0;} |
||||||
|
.layui-laydate-content th, |
||||||
|
.layui-laydate-content td{width: 36px; height: 30px; padding: 5px; text-align: center;} |
||||||
|
.layui-laydate-content th{font-weight: 400;} |
||||||
|
.layui-laydate-content td{position: relative; cursor: pointer;} |
||||||
|
.laydate-day-mark{position: absolute; left: 0; top: 0; width: 100%; line-height: 30px; font-size: 12px; overflow: hidden;} |
||||||
|
.laydate-day-mark::after{position: absolute; content:''; right: 2px; top: 2px; width: 5px; height: 5px; border-radius: 50%;} |
||||||
|
|
||||||
|
/* 底部结构 */ |
||||||
|
.layui-laydate-footer{position: relative; height: 46px; line-height: 26px; padding: 10px;} |
||||||
|
.layui-laydate-footer span{display: inline-block; vertical-align: top; height: 26px; line-height: 24px; padding: 0 10px; border: 1px solid #C9C9C9; border-radius: 2px; background-color: #fff; font-size: 12px; cursor: pointer; white-space: nowrap; transition: all .3s;} |
||||||
|
.layui-laydate-footer span:hover{color: #5FB878;} |
||||||
|
.layui-laydate-footer span.layui-laydate-preview{cursor: default; border-color: transparent !important;} |
||||||
|
.layui-laydate-footer span.layui-laydate-preview:hover{color: #666;} |
||||||
|
.layui-laydate-footer span:first-child.layui-laydate-preview{padding-left: 0;} |
||||||
|
.laydate-footer-btns{position: absolute; right: 10px; top: 10px;} |
||||||
|
.laydate-footer-btns span{margin: 0 0 0 -1px;} |
||||||
|
|
||||||
|
/* 年月列表 */ |
||||||
|
.layui-laydate-list{position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; background-color: #fff;} |
||||||
|
.layui-laydate-list>li{position: relative; display: inline-block; width: 33.3%; height: 36px; line-height: 36px; margin: 3px 0; vertical-align: middle; text-align: center; cursor: pointer;} |
||||||
|
.laydate-month-list>li{width: 25%; margin: 17px 0;} |
||||||
|
.laydate-time-list{} |
||||||
|
.laydate-time-list>li{height: 100%; margin: 0; line-height: normal; cursor: default;} |
||||||
|
.laydate-time-list p{position: relative; top: -4px; line-height: 29px;} |
||||||
|
.laydate-time-list ol{height: 181px; overflow: hidden;} |
||||||
|
.laydate-time-list>li:hover ol{overflow-y: auto;} |
||||||
|
.laydate-time-list ol li{width: 130%; padding-left: 33px; height: 30px; line-height: 30px; text-align: left; cursor: pointer;} |
||||||
|
|
||||||
|
/* 提示 */ |
||||||
|
.layui-laydate-hint{position: absolute; top: 115px; left: 50%; width: 250px; margin-left: -125px; line-height: 20px; padding: 15px; text-align: center; font-size: 12px; color: #FF5722;} |
||||||
|
|
||||||
|
|
||||||
|
/* 双日历 */ |
||||||
|
.layui-laydate-range{width: 546px;} |
||||||
|
.layui-laydate-range .layui-laydate-main{display: inline-block; vertical-align: middle;} |
||||||
|
.layui-laydate-range .laydate-main-list-1 .layui-laydate-header, |
||||||
|
.layui-laydate-range .laydate-main-list-1 .layui-laydate-content{border-left: 1px solid #e2e2e2;} |
||||||
|
|
||||||
|
|
||||||
|
/* 默认简约主题 */ |
||||||
|
.layui-laydate, .layui-laydate-hint{border: 1px solid #d2d2d2; box-shadow: 0 2px 4px rgba(0,0,0,.12); background-color: #fff; color: #666;} |
||||||
|
.layui-laydate-header{border-bottom: 1px solid #e2e2e2;} |
||||||
|
.layui-laydate-header i:hover, |
||||||
|
.layui-laydate-header span:hover{color: #5FB878;} |
||||||
|
.layui-laydate-content{border-top: none 0; border-bottom: none 0;} |
||||||
|
.layui-laydate-content th{color: #333;} |
||||||
|
.layui-laydate-content td{color: #666;} |
||||||
|
.layui-laydate-content td.laydate-selected{background-color: #B5FFF8;} |
||||||
|
.laydate-selected:hover{background-color: #00F7DE !important;} |
||||||
|
.layui-laydate-content td:hover, |
||||||
|
.layui-laydate-list li:hover{background-color: #eee; color: #333;} |
||||||
|
.laydate-time-list li ol{margin: 0; padding: 0; border: 1px solid #e2e2e2; border-left-width: 0;} |
||||||
|
.laydate-time-list li:first-child ol{border-left-width: 1px;} |
||||||
|
.laydate-time-list>li:hover{background: none;} |
||||||
|
.layui-laydate-content .laydate-day-prev, |
||||||
|
.layui-laydate-content .laydate-day-next{color: #d2d2d2;} |
||||||
|
.laydate-selected.laydate-day-prev, |
||||||
|
.laydate-selected.laydate-day-next{background-color: #f8f8f8 !important;} |
||||||
|
.layui-laydate-footer{border-top: 1px solid #e2e2e2;} |
||||||
|
.layui-laydate-hint{color: #FF5722;} |
||||||
|
.laydate-day-mark::after{background-color: #5FB878;} |
||||||
|
.layui-laydate-content td.layui-this .laydate-day-mark::after{display: none;} |
||||||
|
.layui-laydate-footer span[lay-type="date"]{color: #5FB878;} |
||||||
|
.layui-laydate .layui-this{background-color: #009688 !important; color: #fff !important;} |
||||||
|
.layui-laydate .laydate-disabled, |
||||||
|
.layui-laydate .laydate-disabled:hover{background:none !important; color: #d2d2d2 !important; cursor: not-allowed !important; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;} |
||||||
|
|
||||||
|
/* 墨绿/自定义背景色主题 */ |
||||||
|
.laydate-theme-molv{border: none;} |
||||||
|
.laydate-theme-molv.layui-laydate-range{width: 548px} |
||||||
|
.laydate-theme-molv .layui-laydate-main{width: 274px;} |
||||||
|
.laydate-theme-molv .layui-laydate-header{border: none; background-color: #009688;} |
||||||
|
.laydate-theme-molv .layui-laydate-header i, |
||||||
|
.laydate-theme-molv .layui-laydate-header span{color: #f6f6f6;} |
||||||
|
.laydate-theme-molv .layui-laydate-header i:hover, |
||||||
|
.laydate-theme-molv .layui-laydate-header span:hover{color: #fff;} |
||||||
|
.laydate-theme-molv .layui-laydate-content{border: 1px solid #e2e2e2; border-top: none; border-bottom: none;} |
||||||
|
.laydate-theme-molv .laydate-main-list-1 .layui-laydate-content{border-left: none;} |
||||||
|
.laydate-theme-molv .layui-laydate-footer{border: 1px solid #e2e2e2;} |
||||||
|
|
||||||
|
/* 格子主题 */ |
||||||
|
.laydate-theme-grid .layui-laydate-content td, |
||||||
|
.laydate-theme-grid .layui-laydate-content thead, |
||||||
|
.laydate-theme-grid .laydate-year-list>li, |
||||||
|
.laydate-theme-grid .laydate-month-list>li{border: 1px solid #e2e2e2;} |
||||||
|
.laydate-theme-grid .laydate-selected, |
||||||
|
.laydate-theme-grid .laydate-selected:hover{background-color: #f2f2f2 !important; color: #009688 !important;} |
||||||
|
.laydate-theme-grid .laydate-selected.laydate-day-prev, |
||||||
|
.laydate-theme-grid .laydate-selected.laydate-day-next{color: #d2d2d2 !important;} |
||||||
|
.laydate-theme-grid .laydate-year-list, |
||||||
|
.laydate-theme-grid .laydate-month-list{margin: 1px 0 0 1px;} |
||||||
|
.laydate-theme-grid .laydate-year-list>li, |
||||||
|
.laydate-theme-grid .laydate-month-list>li{margin: 0 -1px -1px 0;} |
||||||
|
.laydate-theme-grid .laydate-year-list>li{height: 43px; line-height: 43px;} |
||||||
|
.laydate-theme-grid .laydate-month-list>li{height: 71px; line-height: 71px;} |
||||||
|
|
||||||
|
After Width: | Height: | Size: 5.8 KiB |
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,179 @@ |
|||||||
|
/** |
||||||
|
|
||||||
|
@Name: layer |
||||||
|
|
||||||
|
**/ |
||||||
|
|
||||||
|
/* *html{background-image: url(about:blank); background-attachment: fixed;} */ |
||||||
|
html #layuicss-layer{display: none; position: absolute; width: 1989px;} |
||||||
|
|
||||||
|
/* common */ |
||||||
|
.layui-layer-shade, .layui-layer{position:fixed; _position:absolute; pointer-events: auto;} |
||||||
|
.layui-layer-shade{top:0; left:0; width:100%; height:100%; _height:expression(document.body.offsetHeight+"px");} |
||||||
|
.layui-layer{-webkit-overflow-scrolling: touch;} |
||||||
|
.layui-layer{top:150px; left: 0; margin:0; padding:0; background-color:#fff; -webkit-background-clip: content; border-radius: 2px; box-shadow: 1px 1px 50px rgba(0,0,0,.3);} |
||||||
|
.layui-layer-close{position:absolute;} |
||||||
|
.layui-layer-content{position:relative;} |
||||||
|
.layui-layer-border{border: 1px solid #B2B2B2; border: 1px solid rgba(0,0,0,.1); box-shadow: 1px 1px 5px rgba(0,0,0,.2);} |
||||||
|
.layui-layer-load{background:url(loading-1.gif) #eee center center no-repeat;} |
||||||
|
.layui-layer-ico{ background:url(icon.png) no-repeat;} |
||||||
|
.layui-layer-dialog .layui-layer-ico, |
||||||
|
.layui-layer-setwin a, |
||||||
|
.layui-layer-btn a{display:inline-block; *display:inline; *zoom:1; vertical-align:top;} |
||||||
|
|
||||||
|
.layui-layer-move{display: none; position: fixed; *position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; cursor: move; opacity: 0; filter:alpha(opacity=0); background-color: #fff; z-index: 2147483647;} |
||||||
|
.layui-layer-resize{position: absolute; width: 15px; height: 15px; right: 0; bottom: 0; cursor: se-resize;} |
||||||
|
|
||||||
|
/* 动画 */ |
||||||
|
.layer-anim{-webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.3s; animation-duration:.3s;} |
||||||
|
|
||||||
|
@-webkit-keyframes layer-bounceIn { /* 默认 */ |
||||||
|
0% {opacity: 0; -webkit-transform: scale(.5); transform: scale(.5)} |
||||||
|
100% {opacity: 1; -webkit-transform: scale(1); transform: scale(1)} |
||||||
|
} |
||||||
|
@keyframes layer-bounceIn { |
||||||
|
0% {opacity: 0; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5)} |
||||||
|
100% {opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1)} |
||||||
|
} |
||||||
|
.layer-anim-00{-webkit-animation-name: layer-bounceIn;animation-name: layer-bounceIn} |
||||||
|
|
||||||
|
@-webkit-keyframes layer-zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInDown{0%{opacity:0;-webkit-transform:scale(.1) translateY(-2000px);-ms-transform:scale(.1) translateY(-2000px);transform:scale(.1) translateY(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateY(60px);-ms-transform:scale(.475) translateY(60px);transform:scale(.475) translateY(60px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-01{-webkit-animation-name:layer-zoomInDown;animation-name:layer-zoomInDown} |
||||||
|
|
||||||
|
@-webkit-keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layer-fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.layer-anim-02{-webkit-animation-name:layer-fadeInUpBig;animation-name:layer-fadeInUpBig} |
||||||
|
|
||||||
|
@-webkit-keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes layer-zoomInLeft{0%{opacity:0;-webkit-transform:scale(.1) translateX(-2000px);-ms-transform:scale(.1) translateX(-2000px);transform:scale(.1) translateX(-2000px);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}60%{opacity:1;-webkit-transform:scale(.475) translateX(48px);-ms-transform:scale(.475) translateX(48px);transform:scale(.475) translateX(48px);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.layer-anim-03{-webkit-animation-name:layer-zoomInLeft;animation-name:layer-zoomInLeft} |
||||||
|
|
||||||
|
@-webkit-keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}@keyframes layer-rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}.layer-anim-04{-webkit-animation-name:layer-rollIn;animation-name:layer-rollIn} |
||||||
|
|
||||||
|
@keyframes layer-fadeIn{0%{opacity:0}100%{opacity:1}}.layer-anim-05{-webkit-animation-name:layer-fadeIn;animation-name:layer-fadeIn} |
||||||
|
|
||||||
|
@-webkit-keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes layer-shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.layer-anim-06{-webkit-animation-name:layer-shake;animation-name:layer-shake}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}} |
||||||
|
|
||||||
|
/* 标题栏 */ |
||||||
|
.layui-layer-title{padding:0 80px 0 20px; height: 50px; line-height: 50px; border-bottom:1px solid #F0F0F0; font-size: 14px; color:#333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 2px 2px 0 0;} |
||||||
|
.layui-layer-setwin{position:absolute; right: 15px; *right:0; top: 17px; font-size:0; line-height: initial;} |
||||||
|
.layui-layer-setwin a{position:relative; width: 16px; height:16px; margin-left:10px; font-size:12px; _overflow:hidden;} |
||||||
|
.layui-layer-setwin .layui-layer-min cite{position:absolute; width:14px; height:2px; left:0; top:50%; margin-top:-1px; background-color:#2E2D3C; cursor:pointer; _overflow:hidden;} |
||||||
|
.layui-layer-setwin .layui-layer-min:hover cite{background-color:#2D93CA; } |
||||||
|
.layui-layer-setwin .layui-layer-max{background-position:-32px -40px;} |
||||||
|
.layui-layer-setwin .layui-layer-max:hover{background-position:-16px -40px;} |
||||||
|
.layui-layer-setwin .layui-layer-maxmin{background-position:-65px -40px;} |
||||||
|
.layui-layer-setwin .layui-layer-maxmin:hover{background-position:-49px -40px;} |
||||||
|
.layui-layer-setwin .layui-layer-close1{background-position: 1px -40px; cursor: pointer;} |
||||||
|
.layui-layer-setwin .layui-layer-close1:hover{opacity:0.7;} |
||||||
|
.layui-layer-setwin .layui-layer-close2{position:absolute; right:-28px; top:-28px; width:30px; height:30px; margin-left:0; background-position:-149px -31px; *right:-18px; _display:none;} |
||||||
|
.layui-layer-setwin .layui-layer-close2:hover{ background-position:-180px -31px;} |
||||||
|
|
||||||
|
/* 按钮栏 */ |
||||||
|
.layui-layer-btn{text-align: right; padding: 0 15px 12px; pointer-events: auto; user-select: none; -webkit-user-select: none;} |
||||||
|
.layui-layer-btn a{height: 28px; line-height: 28px; margin: 5px 5px 0; padding: 0 15px; border: 1px solid #dedede; background-color:#fff; color: #333; border-radius: 2px; font-weight:400; cursor:pointer; text-decoration: none;} |
||||||
|
.layui-layer-btn a:hover{opacity: 0.9; text-decoration: none;} |
||||||
|
.layui-layer-btn a:active{opacity: 0.8;} |
||||||
|
.layui-layer-btn .layui-layer-btn0{border-color: #1E9FFF; background-color: #1E9FFF; color:#fff;} |
||||||
|
.layui-layer-btn-l{text-align: left;} |
||||||
|
.layui-layer-btn-c{text-align: center;} |
||||||
|
|
||||||
|
/* 定制化 */ |
||||||
|
.layui-layer-dialog{min-width: 300px;} |
||||||
|
.layui-layer-dialog .layui-layer-content{position: relative; padding:20px; line-height:24px; word-break: break-all; overflow:hidden; font-size:14px; overflow-x: hidden; overflow-y:auto;} |
||||||
|
.layui-layer-dialog .layui-layer-content .layui-layer-ico{position:absolute; top:16px; left:15px; _left:-40px; width:30px; height:30px;} |
||||||
|
.layui-layer-ico1{background-position:-30px 0 } |
||||||
|
.layui-layer-ico2{background-position:-60px 0;} |
||||||
|
.layui-layer-ico3{background-position:-90px 0;} |
||||||
|
.layui-layer-ico4{background-position:-120px 0;} |
||||||
|
.layui-layer-ico5{background-position:-150px 0;} |
||||||
|
.layui-layer-ico6{background-position:-180px 0;} |
||||||
|
.layui-layer-rim{border:6px solid #8D8D8D; border:6px solid rgba(0,0,0,.3); border-radius:5px; box-shadow: none;} |
||||||
|
.layui-layer-msg{min-width:180px; border:1px solid #D3D4D3; box-shadow: none;} |
||||||
|
.layui-layer-hui{min-width:100px; background-color: #000; filter:alpha(opacity=60); background-color: rgba(0,0,0,0.6); color: #fff; border:none;} |
||||||
|
.layui-layer-hui .layui-layer-content{padding:12px 25px; text-align:center;} |
||||||
|
.layui-layer-dialog .layui-layer-padding{padding: 20px 20px 20px 55px; text-align: left;} |
||||||
|
.layui-layer-page .layui-layer-content{position:relative; overflow:auto;} |
||||||
|
.layui-layer-page .layui-layer-btn,.layui-layer-iframe .layui-layer-btn{padding-top:10px;} |
||||||
|
.layui-layer-nobg{background:none;} |
||||||
|
.layui-layer-iframe iframe{display: block; width: 100%;} |
||||||
|
|
||||||
|
.layui-layer-loading{border-radius:100%; background:none; box-shadow:none; border:none;} |
||||||
|
.layui-layer-loading .layui-layer-content{width:60px; height:24px; background:url(loading-0.gif) no-repeat;} |
||||||
|
.layui-layer-loading .layui-layer-loading1{width:37px; height:37px; background:url(loading-1.gif) no-repeat;} |
||||||
|
.layui-layer-loading .layui-layer-loading2, .layui-layer-ico16{width:32px; height:32px; background:url(loading-2.gif) no-repeat;} |
||||||
|
.layui-layer-tips{background: none; box-shadow:none; border:none;} |
||||||
|
.layui-layer-tips .layui-layer-content{position: relative; line-height: 22px; min-width: 12px; padding: 8px 15px; font-size: 12px; _float:left; border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.2); background-color: #000; color: #fff;} |
||||||
|
.layui-layer-tips .layui-layer-close{right:-2px; top:-1px;} |
||||||
|
.layui-layer-tips i.layui-layer-TipsG{ position:absolute; width:0; height:0; border-width:8px; border-color:transparent; border-style:dashed; *overflow:hidden;} |
||||||
|
.layui-layer-tips i.layui-layer-TipsT, .layui-layer-tips i.layui-layer-TipsB{left:5px; border-right-style:solid; border-right-color: #000;} |
||||||
|
.layui-layer-tips i.layui-layer-TipsT{bottom:-8px;} |
||||||
|
.layui-layer-tips i.layui-layer-TipsB{top:-8px;} |
||||||
|
.layui-layer-tips i.layui-layer-TipsR, .layui-layer-tips i.layui-layer-TipsL{top: 5px; border-bottom-style:solid; border-bottom-color: #000;} |
||||||
|
.layui-layer-tips i.layui-layer-TipsR{left:-8px;} |
||||||
|
.layui-layer-tips i.layui-layer-TipsL{right:-8px;} |
||||||
|
|
||||||
|
/* skin */ |
||||||
|
.layui-layer-lan[type="dialog"]{min-width:280px;} |
||||||
|
.layui-layer-lan .layui-layer-title{background:#4476A7; color:#fff; border: none;} |
||||||
|
.layui-layer-lan .layui-layer-btn{padding: 5px 10px 10px; text-align: right; border-top:1px solid #E9E7E7} |
||||||
|
.layui-layer-lan .layui-layer-btn a{background: #fff; border-color: #E9E7E7; color: #333;} |
||||||
|
.layui-layer-lan .layui-layer-btn .layui-layer-btn1{background:#C9C5C5;} |
||||||
|
.layui-layer-molv .layui-layer-title{background: #009f95; color:#fff; border: none;} |
||||||
|
.layui-layer-molv .layui-layer-btn a{background: #009f95; border-color: #009f95;} |
||||||
|
.layui-layer-molv .layui-layer-btn .layui-layer-btn1{background:#92B8B1;} |
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
|
||||||
|
@Name: layer拓展样式 |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
.layui-layer-iconext{background:url(icon-ext.png) no-repeat;} |
||||||
|
|
||||||
|
/* prompt模式 */ |
||||||
|
.layui-layer-prompt .layui-layer-input{display: block; width: 260px; height: 36px; margin: 0 auto; line-height: 30px; padding-left: 10px; border: 1px solid #e6e6e6; color: #333;} |
||||||
|
.layui-layer-prompt textarea.layui-layer-input{width: 300px; height: 100px; line-height: 20px; padding: 6px 10px;} |
||||||
|
.layui-layer-prompt .layui-layer-content{padding: 20px;} |
||||||
|
.layui-layer-prompt .layui-layer-btn{padding-top: 0;} |
||||||
|
|
||||||
|
/* tab模式 */ |
||||||
|
.layui-layer-tab{box-shadow:1px 1px 50px rgba(0,0,0,.4);} |
||||||
|
.layui-layer-tab .layui-layer-title{padding-left:0; overflow: visible;} |
||||||
|
.layui-layer-tab .layui-layer-title span{position:relative; float:left; min-width:80px; max-width: 300px; padding:0 20px; text-align:center; cursor:default; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; cursor: pointer;} |
||||||
|
.layui-layer-tab .layui-layer-title span.layui-this{height: 51px; border-left: 1px solid #eee; border-right: 1px solid #eee; background-color: #fff; z-index: 10;} |
||||||
|
.layui-layer-tab .layui-layer-title span:first-child{border-left:none;} |
||||||
|
.layui-layer-tabmain{line-height:24px; clear:both;} |
||||||
|
.layui-layer-tabmain .layui-layer-tabli{display:none;} |
||||||
|
.layui-layer-tabmain .layui-layer-tabli.layui-this{display: block;} |
||||||
|
|
||||||
|
/* photo模式 */ |
||||||
|
.layui-layer-photos{background: none; box-shadow: none;} |
||||||
|
.layui-layer-photos .layui-layer-content{overflow:hidden; text-align: center;} |
||||||
|
.layui-layer-photos .layui-layer-phimg img{position: relative; width:100%; display: inline-block; *display:inline; *zoom:1; vertical-align:top;} |
||||||
|
.layui-layer-imgprev, .layui-layer-imgnext{position: fixed; top: 50%; width: 27px; _width: 44px; height: 44px; margin-top:-22px; outline:none;blr:expression(this.onFocus=this.blur());} |
||||||
|
.layui-layer-imgprev{left: 30px; background-position:-5px -5px; _background-position:-70px -5px;} |
||||||
|
.layui-layer-imgprev:hover{background-position:-33px -5px; _background-position:-120px -5px;} |
||||||
|
.layui-layer-imgnext{right: 30px; _right:8px; background-position:-5px -50px; _background-position:-70px -50px;} |
||||||
|
.layui-layer-imgnext:hover{background-position: -33px -50px; _background-position: -120px -50px;} |
||||||
|
.layui-layer-imgbar{position: fixed; left:0; right: 0; bottom:0; width:100%; height: 40px; line-height: 40px; background-color:#000\9; filter:Alpha(opacity=60); background-color: rgba(2,0,0,.35); color: #fff; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size:0;} |
||||||
|
.layui-layer-imgtit{/*position:absolute; left:20px;*/} |
||||||
|
.layui-layer-imgtit *{display:inline-block; *display:inline; *zoom:1; vertical-align:top; font-size:12px;} |
||||||
|
.layui-layer-imgtit a{max-width:65%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color:#fff;} |
||||||
|
.layui-layer-imgtit a:hover{color:#fff; text-decoration:underline;} |
||||||
|
.layui-layer-imgtit em{padding-left:10px; font-style: normal;} |
||||||
|
|
||||||
|
/* 关闭动画 */ |
||||||
|
@-webkit-keyframes layer-bounceOut { |
||||||
|
100% {opacity: 0; -webkit-transform: scale(.7); transform: scale(.7)} |
||||||
|
30% {-webkit-transform: scale(1.05); transform: scale(1.05)} |
||||||
|
0% {-webkit-transform: scale(1); transform: scale(1);} |
||||||
|
} |
||||||
|
@keyframes layer-bounceOut { |
||||||
|
100% {opacity: 0; -webkit-transform: scale(.7); -ms-transform: scale(.7); transform: scale(.7);} |
||||||
|
30% {-webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05);} |
||||||
|
0% {-webkit-transform: scale(1); -ms-transform: scale(1);transform: scale(1);} |
||||||
|
} |
||||||
|
.layer-anim-close{-webkit-animation-name: layer-bounceOut; animation-name: layer-bounceOut; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration:.2s; animation-duration:.2s;} |
||||||
|
|
||||||
|
@media screen and (max-width: 1100px) { |
||||||
|
.layui-layer-iframe{overflow-y: auto; -webkit-overflow-scrolling: touch;} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 701 B |
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 299 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,754 @@ |
|||||||
|
|
||||||
|
/*! |
||||||
|
* Layui |
||||||
|
* Classic modular Front-End UI library |
||||||
|
* MIT Licensed |
||||||
|
*/ |
||||||
|
|
||||||
|
;!function(win){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var doc = win.document, config = { |
||||||
|
modules: {} //记录模块物理路径
|
||||||
|
,status: {} //记录模块加载状态
|
||||||
|
,timeout: 10 //符合规范的模块请求最长等待秒数
|
||||||
|
,event: {} //记录模块自定义事件
|
||||||
|
} |
||||||
|
|
||||||
|
,Layui = function(){ |
||||||
|
this.v = '2.6.8'; // layui 版本号
|
||||||
|
} |
||||||
|
|
||||||
|
//识别预先可能定义的指定全局对象
|
||||||
|
,GLOBAL = win.LAYUI_GLOBAL || {} |
||||||
|
|
||||||
|
//获取 layui 所在目录
|
||||||
|
,getPath = function(){ |
||||||
|
var jsPath = doc.currentScript ? doc.currentScript.src : function(){ |
||||||
|
var js = doc.scripts |
||||||
|
,last = js.length - 1 |
||||||
|
,src; |
||||||
|
for(var i = last; i > 0; i--){ |
||||||
|
if(js[i].readyState === 'interactive'){ |
||||||
|
src = js[i].src; |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
return src || js[last].src; |
||||||
|
}(); |
||||||
|
|
||||||
|
return config.dir = GLOBAL.dir || jsPath.substring(0, jsPath.lastIndexOf('/') + 1); |
||||||
|
}() |
||||||
|
|
||||||
|
//异常提示
|
||||||
|
,error = function(msg, type){ |
||||||
|
type = type || 'log'; |
||||||
|
win.console && console[type] && console[type]('layui error hint: ' + msg); |
||||||
|
} |
||||||
|
|
||||||
|
,isOpera = typeof opera !== 'undefined' && opera.toString() === '[object Opera]' |
||||||
|
|
||||||
|
//内置模块
|
||||||
|
,modules = config.builtin = { |
||||||
|
lay: 'lay' //基础 DOM 操作
|
||||||
|
,layer: 'layer' //弹层
|
||||||
|
,laydate: 'laydate' //日期
|
||||||
|
,laypage: 'laypage' //分页
|
||||||
|
,laytpl: 'laytpl' //模板引擎
|
||||||
|
,layedit: 'layedit' //富文本编辑器
|
||||||
|
,form: 'form' //表单集
|
||||||
|
,upload: 'upload' //上传
|
||||||
|
,dropdown: 'dropdown' //下拉菜单
|
||||||
|
,transfer: 'transfer' //穿梭框
|
||||||
|
,tree: 'tree' //树结构
|
||||||
|
,table: 'table' //表格
|
||||||
|
,element: 'element' //常用元素操作
|
||||||
|
,rate: 'rate' //评分组件
|
||||||
|
,colorpicker: 'colorpicker' //颜色选择器
|
||||||
|
,slider: 'slider' //滑块
|
||||||
|
,carousel: 'carousel' //轮播
|
||||||
|
,flow: 'flow' //流加载
|
||||||
|
,util: 'util' //工具块
|
||||||
|
,code: 'code' //代码修饰器
|
||||||
|
,jquery: 'jquery' //DOM 库（第三方）
|
||||||
|
|
||||||
|
,all: 'all' |
||||||
|
,'layui.all': 'layui.all' //聚合标识（功能性的，非真实模块）
|
||||||
|
}; |
||||||
|
|
||||||
|
//记录基础数据
|
||||||
|
Layui.prototype.cache = config; |
||||||
|
|
||||||
|
//定义模块
|
||||||
|
Layui.prototype.define = function(deps, factory){ |
||||||
|
var that = this |
||||||
|
,type = typeof deps === 'function' |
||||||
|
,callback = function(){ |
||||||
|
var setApp = function(app, exports){ |
||||||
|
layui[app] = exports; |
||||||
|
config.status[app] = true; |
||||||
|
}; |
||||||
|
typeof factory === 'function' && factory(function(app, exports){ |
||||||
|
setApp(app, exports); |
||||||
|
config.callback[app] = function(){ |
||||||
|
factory(setApp); |
||||||
|
} |
||||||
|
}); |
||||||
|
return this; |
||||||
|
}; |
||||||
|
|
||||||
|
type && ( |
||||||
|
factory = deps, |
||||||
|
deps = [] |
||||||
|
); |
||||||
|
|
||||||
|
that.use(deps, callback, null, 'define'); |
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//使用特定模块
|
||||||
|
Layui.prototype.use = function(apps, callback, exports, from){ |
||||||
|
var that = this |
||||||
|
,dir = config.dir = config.dir ? config.dir : getPath |
||||||
|
,head = doc.getElementsByTagName('head')[0]; |
||||||
|
|
||||||
|
apps = function(){ |
||||||
|
if(typeof apps === 'string'){ |
||||||
|
return [apps]; |
||||||
|
} |
||||||
|
//当第一个参数为 function 时，则自动加载所有内置模块，且执行的回调即为该 function 参数；
|
||||||
|
else if(typeof apps === 'function'){ |
||||||
|
callback = apps; |
||||||
|
return ['all']; |
||||||
|
} |
||||||
|
return apps; |
||||||
|
}(); |
||||||
|
|
||||||
|
//如果页面已经存在 jQuery 1.7+ 库且所定义的模块依赖 jQuery，则不加载内部 jquery 模块
|
||||||
|
if(win.jQuery && jQuery.fn.on){ |
||||||
|
that.each(apps, function(index, item){ |
||||||
|
if(item === 'jquery'){ |
||||||
|
apps.splice(index, 1); |
||||||
|
} |
||||||
|
}); |
||||||
|
layui.jquery = layui.$ = jQuery; |
||||||
|
} |
||||||
|
|
||||||
|
var item = apps[0] |
||||||
|
,timeout = 0; |
||||||
|
exports = exports || []; |
||||||
|
|
||||||
|
//静态资源host
|
||||||
|
config.host = config.host || (dir.match(/\/\/([\s\S]+?)\//)||['//'+ location.host +'/'])[0]; |
||||||
|
|
||||||
|
//加载完毕
|
||||||
|
function onScriptLoad(e, url){ |
||||||
|
var readyRegExp = navigator.platform === 'PLaySTATION 3' ? /^complete$/ : /^(complete|loaded)$/ |
||||||
|
if (e.type === 'load' || (readyRegExp.test((e.currentTarget || e.srcElement).readyState))) { |
||||||
|
config.modules[item] = url; |
||||||
|
head.removeChild(node); |
||||||
|
(function poll() { |
||||||
|
if(++timeout > config.timeout * 1000 / 4){ |
||||||
|
return error(item + ' is not a valid module', 'error'); |
||||||
|
}; |
||||||
|
config.status[item] ? onCallback() : setTimeout(poll, 4); |
||||||
|
}()); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//回调
|
||||||
|
function onCallback(){ |
||||||
|
exports.push(layui[item]); |
||||||
|
apps.length > 1 ? |
||||||
|
that.use(apps.slice(1), callback, exports, from) |
||||||
|
: ( typeof callback === 'function' && function(){ |
||||||
|
//保证文档加载完毕再执行回调
|
||||||
|
if(layui.jquery && typeof layui.jquery === 'function' && from !== 'define'){ |
||||||
|
return layui.jquery(function(){ |
||||||
|
callback.apply(layui, exports); |
||||||
|
}); |
||||||
|
} |
||||||
|
callback.apply(layui, exports); |
||||||
|
}() ); |
||||||
|
} |
||||||
|
|
||||||
|
//如果引入了聚合板，内置的模块则不必重复加载
|
||||||
|
if( apps.length === 0 || (layui['layui.all'] && modules[item]) ){ |
||||||
|
return onCallback(), that; |
||||||
|
} |
||||||
|
|
||||||
|
//获取加载的模块 URL
|
||||||
|
//如果是内置模块，则按照 dir 参数拼接模块路径
|
||||||
|
//如果是扩展模块，则判断模块路径值是否为 {/} 开头，
|
||||||
|
//如果路径值是 {/} 开头，则模块路径即为后面紧跟的字符。
|
||||||
|
//否则，则按照 base 参数拼接模块路径
|
||||||
|
|
||||||
|
var url = ( modules[item] ? (dir + 'modules/') |
||||||
|
: (/^\{\/\}/.test(that.modules[item]) ? '' : (config.base || '')) |
||||||
|
) + (that.modules[item] || item) + '.js'; |
||||||
|
url = url.replace(/^\{\/\}/, ''); |
||||||
|
|
||||||
|
//如果扩展模块（即：非内置模块）对象已经存在，则不必再加载
|
||||||
|
if(!config.modules[item] && layui[item]){ |
||||||
|
config.modules[item] = url; //并记录起该扩展模块的 url
|
||||||
|
} |
||||||
|
|
||||||
|
//首次加载模块
|
||||||
|
if(!config.modules[item]){ |
||||||
|
var node = doc.createElement('script'); |
||||||
|
|
||||||
|
node.async = true; |
||||||
|
node.charset = 'utf-8'; |
||||||
|
node.src = url + function(){ |
||||||
|
var version = config.version === true |
||||||
|
? (config.v || (new Date()).getTime()) |
||||||
|
: (config.version||''); |
||||||
|
return version ? ('?v=' + version) : ''; |
||||||
|
}(); |
||||||
|
|
||||||
|
head.appendChild(node); |
||||||
|
|
||||||
|
if(node.attachEvent && !(node.attachEvent.toString && node.attachEvent.toString().indexOf('[native code') < 0) && !isOpera){ |
||||||
|
node.attachEvent('onreadystatechange', function(e){ |
||||||
|
onScriptLoad(e, url); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
node.addEventListener('load', function(e){ |
||||||
|
onScriptLoad(e, url); |
||||||
|
}, false); |
||||||
|
} |
||||||
|
|
||||||
|
config.modules[item] = url; |
||||||
|
} else { //缓存
|
||||||
|
(function poll() { |
||||||
|
if(++timeout > config.timeout * 1000 / 4){ |
||||||
|
return error(item + ' is not a valid module', 'error'); |
||||||
|
}; |
||||||
|
(typeof config.modules[item] === 'string' && config.status[item]) |
||||||
|
? onCallback() |
||||||
|
: setTimeout(poll, 4); |
||||||
|
}()); |
||||||
|
} |
||||||
|
|
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//获取节点的 style 属性值
|
||||||
|
Layui.prototype.getStyle = function(node, name){ |
||||||
|
var style = node.currentStyle ? node.currentStyle : win.getComputedStyle(node, null); |
||||||
|
return style[style.getPropertyValue ? 'getPropertyValue' : 'getAttribute'](name); |
||||||
|
}; |
||||||
|
|
||||||
|
//css外部加载器
|
||||||
|
Layui.prototype.link = function(href, fn, cssname){ |
||||||
|
var that = this |
||||||
|
,head = doc.getElementsByTagName('head')[0] |
||||||
|
,link = doc.createElement('link'); |
||||||
|
|
||||||
|
if(typeof fn === 'string') cssname = fn; |
||||||
|
|
||||||
|
var app = (cssname || href).replace(/\.|\//g, '') |
||||||
|
,id = link.id = 'layuicss-'+ app |
||||||
|
,STAUTS_NAME = 'creating' |
||||||
|
,timeout = 0; |
||||||
|
|
||||||
|
link.rel = 'stylesheet'; |
||||||
|
link.href = href + (config.debug ? '?v='+new Date().getTime() : ''); |
||||||
|
link.media = 'all'; |
||||||
|
|
||||||
|
if(!doc.getElementById(id)){ |
||||||
|
head.appendChild(link); |
||||||
|
} |
||||||
|
|
||||||
|
if(typeof fn !== 'function') return that; |
||||||
|
|
||||||
|
//轮询 css 是否加载完毕
|
||||||
|
(function poll(status) { |
||||||
|
var delay = 100 |
||||||
|
,getLinkElem = doc.getElementById(id); //获取动态插入的 link 元素
|
||||||
|
|
||||||
|
//如果轮询超过指定秒数，则视为请求文件失败或 css 文件不符合规范
|
||||||
|
if(++timeout > config.timeout * 1000 / delay){ |
||||||
|
return error(href + ' timeout'); |
||||||
|
}; |
||||||
|
|
||||||
|
//css 加载就绪
|
||||||
|
if(parseInt(that.getStyle(getLinkElem, 'width')) === 1989){ |
||||||
|
//如果参数来自于初始轮询（即未加载就绪时的），则移除 link 标签状态
|
||||||
|
if(status === STAUTS_NAME) getLinkElem.removeAttribute('lay-status'); |
||||||
|
//如果 link 标签的状态仍为「创建中」，则继续进入轮询，直到状态改变，则执行回调
|
||||||
|
getLinkElem.getAttribute('lay-status') === STAUTS_NAME ? setTimeout(poll, delay) : fn(); |
||||||
|
} else { |
||||||
|
getLinkElem.setAttribute('lay-status', STAUTS_NAME); |
||||||
|
setTimeout(function(){ |
||||||
|
poll(STAUTS_NAME); |
||||||
|
}, delay); |
||||||
|
} |
||||||
|
}()); |
||||||
|
|
||||||
|
//轮询css是否加载完毕
|
||||||
|
/* |
||||||
|
(function poll() { |
||||||
|
if(++timeout > config.timeout * 1000 / 100){ |
||||||
|
return error(href + ' timeout'); |
||||||
|
}; |
||||||
|
parseInt(that.getStyle(doc.getElementById(id), 'width')) === 1989 ? function(){ |
||||||
|
fn(); |
||||||
|
}() : setTimeout(poll, 100); |
||||||
|
}()); |
||||||
|
*/ |
||||||
|
|
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//css 内部加载器
|
||||||
|
Layui.prototype.addcss = function(firename, fn, cssname){ |
||||||
|
return layui.link(config.dir + 'css/' + firename, fn, cssname); |
||||||
|
}; |
||||||
|
|
||||||
|
//存储模块的回调
|
||||||
|
config.callback = {}; |
||||||
|
|
||||||
|
//重新执行模块的工厂函数
|
||||||
|
Layui.prototype.factory = function(modName){ |
||||||
|
if(layui[modName]){ |
||||||
|
return typeof config.callback[modName] === 'function' |
||||||
|
? config.callback[modName] |
||||||
|
: null; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//图片预加载
|
||||||
|
Layui.prototype.img = function(url, callback, error) { |
||||||
|
var img = new Image(); |
||||||
|
img.src = url; |
||||||
|
if(img.complete){ |
||||||
|
return callback(img); |
||||||
|
} |
||||||
|
img.onload = function(){ |
||||||
|
img.onload = null; |
||||||
|
typeof callback === 'function' && callback(img); |
||||||
|
}; |
||||||
|
img.onerror = function(e){ |
||||||
|
img.onerror = null; |
||||||
|
typeof error === 'function' && error(e); |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
//全局配置
|
||||||
|
Layui.prototype.config = function(options){ |
||||||
|
options = options || {}; |
||||||
|
for(var key in options){ |
||||||
|
config[key] = options[key]; |
||||||
|
} |
||||||
|
return this; |
||||||
|
}; |
||||||
|
|
||||||
|
//记录全部模块
|
||||||
|
Layui.prototype.modules = function(){ |
||||||
|
var clone = {}; |
||||||
|
for(var o in modules){ |
||||||
|
clone[o] = modules[o]; |
||||||
|
} |
||||||
|
return clone; |
||||||
|
}(); |
||||||
|
|
||||||
|
//拓展模块
|
||||||
|
Layui.prototype.extend = function(options){ |
||||||
|
var that = this; |
||||||
|
|
||||||
|
//验证模块是否被占用
|
||||||
|
options = options || {}; |
||||||
|
for(var o in options){ |
||||||
|
if(that[o] || that.modules[o]){ |
||||||
|
error(o+ ' Module already exists', 'error'); |
||||||
|
} else { |
||||||
|
that.modules[o] = options[o]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
// location.hash 路由解析
|
||||||
|
Layui.prototype.router = function(hash){ |
||||||
|
var that = this |
||||||
|
,hash = hash || location.hash |
||||||
|
,data = { |
||||||
|
path: [] |
||||||
|
,search: {} |
||||||
|
,hash: (hash.match(/[^#](#.*$)/) || [])[1] || '' |
||||||
|
}; |
||||||
|
|
||||||
|
if(!/^#\//.test(hash)) return data; //禁止非路由规范
|
||||||
|
hash = hash.replace(/^#\//, ''); |
||||||
|
data.href = '/' + hash; |
||||||
|
hash = hash.replace(/([^#])(#.*$)/, '$1').split('/') || []; |
||||||
|
|
||||||
|
//提取 Hash 结构
|
||||||
|
that.each(hash, function(index, item){ |
||||||
|
/^\w+=/.test(item) ? function(){ |
||||||
|
item = item.split('='); |
||||||
|
data.search[item[0]] = item[1]; |
||||||
|
}() : data.path.push(item); |
||||||
|
}); |
||||||
|
|
||||||
|
return data; |
||||||
|
}; |
||||||
|
|
||||||
|
//URL 解析
|
||||||
|
Layui.prototype.url = function(href){ |
||||||
|
var that = this |
||||||
|
,data = { |
||||||
|
//提取 url 路径
|
||||||
|
pathname: function(){ |
||||||
|
var pathname = href |
||||||
|
? function(){ |
||||||
|
var str = (href.match(/\.[^.]+?\/.+/) || [])[0] || ''; |
||||||
|
return str.replace(/^[^\/]+/, '').replace(/\?.+/, ''); |
||||||
|
}() |
||||||
|
: location.pathname; |
||||||
|
return pathname.replace(/^\//, '').split('/'); |
||||||
|
}() |
||||||
|
|
||||||
|
//提取 url 参数
|
||||||
|
,search: function(){ |
||||||
|
var obj = {} |
||||||
|
,search = (href |
||||||
|
? function(){ |
||||||
|
var str = (href.match(/\?.+/) || [])[0] || ''; |
||||||
|
return str.replace(/\#.+/, ''); |
||||||
|
}() |
||||||
|
: location.search |
||||||
|
).replace(/^\?+/, '').split('&'); //去除 ?，按 & 分割参数
|
||||||
|
|
||||||
|
//遍历分割后的参数
|
||||||
|
that.each(search, function(index, item){ |
||||||
|
var _index = item.indexOf('=') |
||||||
|
,key = function(){ //提取 key
|
||||||
|
if(_index < 0){ |
||||||
|
return item.substr(0, item.length); |
||||||
|
} else if(_index === 0){ |
||||||
|
return false; |
||||||
|
} else { |
||||||
|
return item.substr(0, _index); |
||||||
|
} |
||||||
|
}(); |
||||||
|
//提取 value
|
||||||
|
if(key){ |
||||||
|
obj[key] = _index > 0 ? item.substr(_index + 1) : null; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
return obj; |
||||||
|
}() |
||||||
|
|
||||||
|
//提取 Hash
|
||||||
|
,hash: that.router(function(){ |
||||||
|
return href |
||||||
|
? ((href.match(/#.+/) || [])[0] || '/') |
||||||
|
: location.hash; |
||||||
|
}()) |
||||||
|
}; |
||||||
|
|
||||||
|
return data; |
||||||
|
}; |
||||||
|
|
||||||
|
//本地持久性存储
|
||||||
|
Layui.prototype.data = function(table, settings, storage){ |
||||||
|
table = table || 'layui'; |
||||||
|
storage = storage || localStorage; |
||||||
|
|
||||||
|
if(!win.JSON || !win.JSON.parse) return; |
||||||
|
|
||||||
|
//如果settings为null，则删除表
|
||||||
|
if(settings === null){ |
||||||
|
return delete storage[table]; |
||||||
|
} |
||||||
|
|
||||||
|
settings = typeof settings === 'object' |
||||||
|
? settings |
||||||
|
: {key: settings}; |
||||||
|
|
||||||
|
try{ |
||||||
|
var data = JSON.parse(storage[table]); |
||||||
|
} catch(e){ |
||||||
|
var data = {}; |
||||||
|
} |
||||||
|
|
||||||
|
if('value' in settings) data[settings.key] = settings.value; |
||||||
|
if(settings.remove) delete data[settings.key]; |
||||||
|
storage[table] = JSON.stringify(data); |
||||||
|
|
||||||
|
return settings.key ? data[settings.key] : data; |
||||||
|
}; |
||||||
|
|
||||||
|
//本地会话性存储
|
||||||
|
Layui.prototype.sessionData = function(table, settings){ |
||||||
|
return this.data(table, settings, sessionStorage); |
||||||
|
} |
||||||
|
|
||||||
|
//设备信息
|
||||||
|
Layui.prototype.device = function(key){ |
||||||
|
var agent = navigator.userAgent.toLowerCase() |
||||||
|
|
||||||
|
//获取版本号
|
||||||
|
,getVersion = function(label){ |
||||||
|
var exp = new RegExp(label + '/([^\\s\\_\\-]+)'); |
||||||
|
label = (agent.match(exp)||[])[1]; |
||||||
|
return label || false; |
||||||
|
} |
||||||
|
|
||||||
|
//返回结果集
|
||||||
|
,result = { |
||||||
|
os: function(){ //底层操作系统
|
||||||
|
if(/windows/.test(agent)){ |
||||||
|
return 'windows'; |
||||||
|
} else if(/linux/.test(agent)){ |
||||||
|
return 'linux'; |
||||||
|
} else if(/iphone|ipod|ipad|ios/.test(agent)){ |
||||||
|
return 'ios'; |
||||||
|
} else if(/mac/.test(agent)){ |
||||||
|
return 'mac'; |
||||||
|
} |
||||||
|
}() |
||||||
|
,ie: function(){ //ie版本
|
||||||
|
return (!!win.ActiveXObject || "ActiveXObject" in win) ? ( |
||||||
|
(agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于ie11并没有msie的标识
|
||||||
|
) : false; |
||||||
|
}() |
||||||
|
,weixin: getVersion('micromessenger') //是否微信
|
||||||
|
}; |
||||||
|
|
||||||
|
//任意的key
|
||||||
|
if(key && !result[key]){ |
||||||
|
result[key] = getVersion(key); |
||||||
|
} |
||||||
|
|
||||||
|
//移动设备
|
||||||
|
result.android = /android/.test(agent); |
||||||
|
result.ios = result.os === 'ios'; |
||||||
|
result.mobile = (result.android || result.ios) ? true : false; |
||||||
|
|
||||||
|
return result; |
||||||
|
}; |
||||||
|
|
||||||
|
//提示
|
||||||
|
Layui.prototype.hint = function(){ |
||||||
|
return { |
||||||
|
error: error |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
//typeof 类型细分 -> string/number/boolean/undefined/null、object/array/function/…
|
||||||
|
Layui.prototype._typeof = function(operand){ |
||||||
|
if(operand === null) return String(operand); |
||||||
|
|
||||||
|
//细分引用类型
|
||||||
|
return (typeof operand === 'object' || typeof operand === 'function') ? function(){ |
||||||
|
var type = Object.prototype.toString.call(operand).match(/\s(.+)\]$/) || [] //匹配类型字符
|
||||||
|
,classType = 'Function|Array|Date|RegExp|Object|Error|Symbol'; //常见类型字符
|
||||||
|
|
||||||
|
type = type[1] || 'Object'; |
||||||
|
|
||||||
|
//除匹配到的类型外，其他对象均返回 object
|
||||||
|
return new RegExp('\\b('+ classType + ')\\b').test(type) |
||||||
|
? type.toLowerCase() |
||||||
|
: 'object'; |
||||||
|
}() : typeof operand; |
||||||
|
}; |
||||||
|
|
||||||
|
//对象是否具备数组结构（此处为兼容 jQuery 对象）
|
||||||
|
Layui.prototype._isArray = function(obj){ |
||||||
|
var that = this |
||||||
|
,len |
||||||
|
,type = that._typeof(obj); |
||||||
|
|
||||||
|
if(!obj || (typeof obj !== 'object') || obj === win) return false; |
||||||
|
|
||||||
|
len = 'length' in obj && obj.length; //兼容 ie
|
||||||
|
return type === 'array' || len === 0 || ( |
||||||
|
typeof len === 'number' && len > 0 && (len - 1) in obj //兼容 jQuery 对象
|
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
//遍历
|
||||||
|
Layui.prototype.each = function(obj, fn){ |
||||||
|
var key |
||||||
|
,that = this |
||||||
|
,callFn = function(key, obj){ //回调
|
||||||
|
return fn.call(obj[key], key, obj[key]) |
||||||
|
}; |
||||||
|
|
||||||
|
if(typeof fn !== 'function') return that; |
||||||
|
obj = obj || []; |
||||||
|
|
||||||
|
//优先处理数组结构
|
||||||
|
if(that._isArray(obj)){ |
||||||
|
for(key = 0; key < obj.length; key++){ |
||||||
|
if(callFn(key, obj)) break; |
||||||
|
} |
||||||
|
} else { |
||||||
|
for(key in obj){ |
||||||
|
if(callFn(key, obj)) break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//将数组中的对象按其某个成员排序
|
||||||
|
Layui.prototype.sort = function(obj, key, desc){ |
||||||
|
var clone = JSON.parse( |
||||||
|
JSON.stringify(obj || []) |
||||||
|
); |
||||||
|
|
||||||
|
if(!key) return clone; |
||||||
|
|
||||||
|
//如果是数字，按大小排序；如果是非数字，则按字典序排序
|
||||||
|
clone.sort(function(o1, o2){ |
||||||
|
var v1 = o1[key] |
||||||
|
,v2 = o2[key] |
||||||
|
,isNum = [ |
||||||
|
!isNaN(v1) |
||||||
|
,!isNaN(v2) |
||||||
|
]; |
||||||
|
|
||||||
|
|
||||||
|
//若为数字比较
|
||||||
|
if(isNum[0] && isNum[1]){ |
||||||
|
if(v1 && (!v2 && v2 !== 0)){ //数字 vs 空
|
||||||
|
return 1; |
||||||
|
} else if((!v1 && v1 !== 0) && v2){ //空 vs 数字
|
||||||
|
return -1; |
||||||
|
} else { //数字 vs 数字
|
||||||
|
return v1 - v2; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
/** |
||||||
|
* 字典序排序 |
||||||
|
*/ |
||||||
|
|
||||||
|
//若为非数字比较
|
||||||
|
if(!isNum[0] && !isNum[1]){ |
||||||
|
//字典序比较
|
||||||
|
if(v1 > v2){ |
||||||
|
return 1; |
||||||
|
} else if (v1 < v2) { |
||||||
|
return -1; |
||||||
|
} else { |
||||||
|
return 0; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//若为混合比较
|
||||||
|
if(isNum[0] || !isNum[1]){ //数字 vs 非数字
|
||||||
|
return -1; |
||||||
|
} else if(!isNum[0] || isNum[1]) { //非数字 vs 数字
|
||||||
|
return 1; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
//老版本
|
||||||
|
if(v1 && !v2){ |
||||||
|
return 1; |
||||||
|
} else if(!v1 && v2){ |
||||||
|
return -1; |
||||||
|
} |
||||||
|
|
||||||
|
if(v1 > v2){ |
||||||
|
return 1; |
||||||
|
} else if (v1 < v2) { |
||||||
|
return -1; |
||||||
|
} else { |
||||||
|
return 0; |
||||||
|
} |
||||||
|
*/ |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
desc && clone.reverse(); //倒序
|
||||||
|
return clone; |
||||||
|
}; |
||||||
|
|
||||||
|
//阻止事件冒泡
|
||||||
|
Layui.prototype.stope = function(thisEvent){ |
||||||
|
thisEvent = thisEvent || win.event; |
||||||
|
try { thisEvent.stopPropagation() } catch(e){ |
||||||
|
thisEvent.cancelBubble = true; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//字符常理
|
||||||
|
var EV_REMOVE = 'LAYUI-EVENT-REMOVE'; |
||||||
|
|
||||||
|
//自定义模块事件
|
||||||
|
Layui.prototype.onevent = function(modName, events, callback){ |
||||||
|
if(typeof modName !== 'string' |
||||||
|
|| typeof callback !== 'function') return this; |
||||||
|
|
||||||
|
return Layui.event(modName, events, null, callback); |
||||||
|
}; |
||||||
|
|
||||||
|
//执行自定义模块事件
|
||||||
|
Layui.prototype.event = Layui.event = function(modName, events, params, fn){ |
||||||
|
var that = this |
||||||
|
,result = null |
||||||
|
,filter = (events || '').match(/\((.*)\)$/)||[] //提取事件过滤器字符结构，如：select(xxx)
|
||||||
|
,eventName = (modName + '.'+ events).replace(filter[0], '') //获取事件名称，如：form.select
|
||||||
|
,filterName = filter[1] || '' //获取过滤器名称,，如：xxx
|
||||||
|
,callback = function(_, item){ |
||||||
|
var res = item && item.call(that, params); |
||||||
|
res === false && result === null && (result = false); |
||||||
|
}; |
||||||
|
|
||||||
|
//如果参数传入特定字符，则执行移除事件
|
||||||
|
if(params === EV_REMOVE){ |
||||||
|
delete (that.cache.event[eventName] || {})[filterName]; |
||||||
|
return that; |
||||||
|
} |
||||||
|
|
||||||
|
//添加事件
|
||||||
|
if(fn){ |
||||||
|
config.event[eventName] = config.event[eventName] || {}; |
||||||
|
|
||||||
|
//这里不再对重复事件做支持
|
||||||
|
//config.event[eventName][filterName] ? config.event[eventName][filterName].push(fn) :
|
||||||
|
config.event[eventName][filterName] = [fn]; |
||||||
|
return this; |
||||||
|
} |
||||||
|
|
||||||
|
//执行事件回调
|
||||||
|
layui.each(config.event[eventName], function(key, item){ |
||||||
|
//执行当前模块的全部事件
|
||||||
|
if(filterName === '{*}'){ |
||||||
|
layui.each(item, callback); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
//执行指定事件
|
||||||
|
key === '' && layui.each(item, callback); |
||||||
|
(filterName && key === filterName) && layui.each(item, callback); |
||||||
|
}); |
||||||
|
|
||||||
|
return result; |
||||||
|
}; |
||||||
|
|
||||||
|
//新增模块事件
|
||||||
|
Layui.prototype.on = function(events, modName, callback){ |
||||||
|
var that = this; |
||||||
|
return that.onevent.call(that, modName, events, callback); |
||||||
|
} |
||||||
|
|
||||||
|
//移除模块事件
|
||||||
|
Layui.prototype.off = function(events, modName){ |
||||||
|
var that = this; |
||||||
|
return that.event.call(that, modName, events, EV_REMOVE); |
||||||
|
}; |
||||||
|
|
||||||
|
//exports layui
|
||||||
|
win.layui = new Layui(); |
||||||
|
|
||||||
|
}(window); //gulp build: layui-footer
|
||||||
|
|
||||||
@ -0,0 +1,313 @@ |
|||||||
|
|
||||||
|
/*! |
||||||
|
* carousel 轮播模块 |
||||||
|
* MIT Licensed |
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define('jquery', function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.$ |
||||||
|
,hint = layui.hint() |
||||||
|
,device = layui.device() |
||||||
|
|
||||||
|
//外部接口
|
||||||
|
,carousel = { |
||||||
|
config: {} //全局配置项
|
||||||
|
|
||||||
|
//设置全局项
|
||||||
|
,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); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//字符常量
|
||||||
|
,MOD_NAME = 'carousel', ELEM = '.layui-carousel', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled' |
||||||
|
|
||||||
|
,ELEM_ITEM = '>*[carousel-item]>*', ELEM_LEFT = 'layui-carousel-left', ELEM_RIGHT = 'layui-carousel-right', ELEM_PREV = 'layui-carousel-prev', ELEM_NEXT = 'layui-carousel-next', ELEM_ARROW = 'layui-carousel-arrow', ELEM_IND = 'layui-carousel-ind' |
||||||
|
|
||||||
|
//构造器
|
||||||
|
,Class = function(options){ |
||||||
|
var that = this; |
||||||
|
that.config = $.extend({}, that.config, carousel.config, options); |
||||||
|
that.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
//默认配置
|
||||||
|
Class.prototype.config = { |
||||||
|
width: '600px' |
||||||
|
,height: '280px' |
||||||
|
,full: false //是否全屏
|
||||||
|
,arrow: 'hover' //切换箭头默认显示状态：hover/always/none
|
||||||
|
,indicator: 'inside' //指示器位置：inside/outside/none
|
||||||
|
,autoplay: true //是否自动切换
|
||||||
|
,interval: 3000 //自动切换的时间间隔，不能低于800ms
|
||||||
|
,anim: '' //动画类型：default/updown/fade
|
||||||
|
,trigger: 'click' //指示器的触发方式：click/hover
|
||||||
|
,index: 0 //初始开始的索引
|
||||||
|
}; |
||||||
|
|
||||||
|
//轮播渲染
|
||||||
|
Class.prototype.render = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
options.elem = $(options.elem); |
||||||
|
if(!options.elem[0]) return; |
||||||
|
that.elemItem = options.elem.find(ELEM_ITEM); |
||||||
|
|
||||||
|
if(options.index < 0) options.index = 0; |
||||||
|
if(options.index >= that.elemItem.length) options.index = that.elemItem.length - 1; |
||||||
|
if(options.interval < 800) options.interval = 800; |
||||||
|
|
||||||
|
//是否全屏模式
|
||||||
|
if(options.full){ |
||||||
|
options.elem.css({ |
||||||
|
position: 'fixed' |
||||||
|
,width: '100%' |
||||||
|
,height: '100%' |
||||||
|
,zIndex: 9999 |
||||||
|
}); |
||||||
|
} else { |
||||||
|
options.elem.css({ |
||||||
|
width: options.width |
||||||
|
,height: options.height |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
options.elem.attr('lay-anim', options.anim); |
||||||
|
|
||||||
|
//初始焦点状态
|
||||||
|
that.elemItem.eq(options.index).addClass(THIS); |
||||||
|
|
||||||
|
//指示器等动作
|
||||||
|
if(that.elemItem.length <= 1) return; |
||||||
|
that.indicator(); |
||||||
|
that.arrow(); |
||||||
|
that.autoplay(); |
||||||
|
that.events(); |
||||||
|
}; |
||||||
|
|
||||||
|
//重置轮播
|
||||||
|
Class.prototype.reload = function(options){ |
||||||
|
var that = this; |
||||||
|
clearInterval(that.timer); |
||||||
|
that.config = $.extend({}, that.config, options); |
||||||
|
that.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
//获取上一个等待条目的索引
|
||||||
|
Class.prototype.prevIndex = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
var prevIndex = options.index - 1; |
||||||
|
if(prevIndex < 0){ |
||||||
|
prevIndex = that.elemItem.length - 1; |
||||||
|
} |
||||||
|
return prevIndex; |
||||||
|
}; |
||||||
|
|
||||||
|
//获取下一个等待条目的索引
|
||||||
|
Class.prototype.nextIndex = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
var nextIndex = options.index + 1; |
||||||
|
if(nextIndex >= that.elemItem.length){ |
||||||
|
nextIndex = 0; |
||||||
|
} |
||||||
|
return nextIndex; |
||||||
|
}; |
||||||
|
|
||||||
|
//索引递增
|
||||||
|
Class.prototype.addIndex = function(num){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
num = num || 1; |
||||||
|
options.index = options.index + num; |
||||||
|
|
||||||
|
//index不能超过轮播总数量
|
||||||
|
if(options.index >= that.elemItem.length){ |
||||||
|
options.index = 0; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//索引递减
|
||||||
|
Class.prototype.subIndex = function(num){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
num = num || 1; |
||||||
|
options.index = options.index - num; |
||||||
|
|
||||||
|
//index不能超过轮播总数量
|
||||||
|
if(options.index < 0){ |
||||||
|
options.index = that.elemItem.length - 1; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//自动轮播
|
||||||
|
Class.prototype.autoplay = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
if(!options.autoplay) return; |
||||||
|
clearInterval(that.timer); |
||||||
|
|
||||||
|
that.timer = setInterval(function(){ |
||||||
|
that.slide(); |
||||||
|
}, options.interval); |
||||||
|
}; |
||||||
|
|
||||||
|
//箭头
|
||||||
|
Class.prototype.arrow = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
//模板
|
||||||
|
var tplArrow = $([ |
||||||
|
'<button class="layui-icon '+ ELEM_ARROW +'" lay-type="sub">'+ (options.anim === 'updown' ? '' : '') +'</button>' |
||||||
|
,'<button class="layui-icon '+ ELEM_ARROW +'" lay-type="add">'+ (options.anim === 'updown' ? '' : '') +'</button>' |
||||||
|
].join('')); |
||||||
|
|
||||||
|
//预设基础属性
|
||||||
|
options.elem.attr('lay-arrow', options.arrow); |
||||||
|
|
||||||
|
//避免重复插入
|
||||||
|
if(options.elem.find('.'+ELEM_ARROW)[0]){ |
||||||
|
options.elem.find('.'+ELEM_ARROW).remove(); |
||||||
|
}; |
||||||
|
options.elem.append(tplArrow); |
||||||
|
|
||||||
|
//事件
|
||||||
|
tplArrow.on('click', function(){ |
||||||
|
var othis = $(this) |
||||||
|
,type = othis.attr('lay-type') |
||||||
|
that.slide(type); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//指示器
|
||||||
|
Class.prototype.indicator = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
//模板
|
||||||
|
var tplInd = that.elemInd = $(['<div class="'+ ELEM_IND +'"><ul>' |
||||||
|
,function(){ |
||||||
|
var li = []; |
||||||
|
layui.each(that.elemItem, function(index){ |
||||||
|
li.push('<li'+ (options.index === index ? ' class="layui-this"' : '') +'></li>'); |
||||||
|
}); |
||||||
|
return li.join(''); |
||||||
|
}() |
||||||
|
,'</ul></div>'].join('')); |
||||||
|
|
||||||
|
//预设基础属性
|
||||||
|
options.elem.attr('lay-indicator', options.indicator); |
||||||
|
|
||||||
|
//避免重复插入
|
||||||
|
if(options.elem.find('.'+ELEM_IND)[0]){ |
||||||
|
options.elem.find('.'+ELEM_IND).remove(); |
||||||
|
}; |
||||||
|
options.elem.append(tplInd); |
||||||
|
|
||||||
|
if(options.anim === 'updown'){ |
||||||
|
tplInd.css('margin-top', -(tplInd.height()/2)); |
||||||
|
} |
||||||
|
|
||||||
|
//事件
|
||||||
|
tplInd.find('li').on(options.trigger === 'hover' ? 'mouseover' : options.trigger, function(){ |
||||||
|
var othis = $(this) |
||||||
|
,index = othis.index(); |
||||||
|
if(index > options.index){ |
||||||
|
that.slide('add', index - options.index); |
||||||
|
} else if(index < options.index){ |
||||||
|
that.slide('sub', options.index - index); |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//滑动切换
|
||||||
|
Class.prototype.slide = function(type, num){ |
||||||
|
var that = this |
||||||
|
,elemItem = that.elemItem |
||||||
|
,options = that.config |
||||||
|
,thisIndex = options.index |
||||||
|
,filter = options.elem.attr('lay-filter'); |
||||||
|
|
||||||
|
if(that.haveSlide) return; |
||||||
|
|
||||||
|
//滑动方向
|
||||||
|
if(type === 'sub'){ |
||||||
|
that.subIndex(num); |
||||||
|
elemItem.eq(options.index).addClass(ELEM_PREV); |
||||||
|
setTimeout(function(){ |
||||||
|
elemItem.eq(thisIndex).addClass(ELEM_RIGHT); |
||||||
|
elemItem.eq(options.index).addClass(ELEM_RIGHT); |
||||||
|
}, 50); |
||||||
|
} else { //默认递增滑
|
||||||
|
that.addIndex(num); |
||||||
|
elemItem.eq(options.index).addClass(ELEM_NEXT); |
||||||
|
setTimeout(function(){ |
||||||
|
elemItem.eq(thisIndex).addClass(ELEM_LEFT); |
||||||
|
elemItem.eq(options.index).addClass(ELEM_LEFT); |
||||||
|
}, 50); |
||||||
|
}; |
||||||
|
|
||||||
|
//移除过度类
|
||||||
|
setTimeout(function(){ |
||||||
|
elemItem.removeClass(THIS + ' ' + ELEM_PREV + ' ' + ELEM_NEXT + ' ' + ELEM_LEFT + ' ' + ELEM_RIGHT); |
||||||
|
elemItem.eq(options.index).addClass(THIS); |
||||||
|
that.haveSlide = false; //解锁
|
||||||
|
}, 300); |
||||||
|
|
||||||
|
//指示器焦点
|
||||||
|
that.elemInd.find('li').eq(options.index).addClass(THIS) |
||||||
|
.siblings().removeClass(THIS); |
||||||
|
|
||||||
|
that.haveSlide = true; |
||||||
|
|
||||||
|
layui.event.call(this, MOD_NAME, 'change('+ filter +')', { |
||||||
|
index: options.index |
||||||
|
,prevIndex: thisIndex |
||||||
|
,item: elemItem.eq(options.index) |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//事件处理
|
||||||
|
Class.prototype.events = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
if(options.elem.data('haveEvents')) return; |
||||||
|
|
||||||
|
//移入移出容器
|
||||||
|
options.elem.on('mouseenter', function(){ |
||||||
|
clearInterval(that.timer); |
||||||
|
}).on('mouseleave', function(){ |
||||||
|
that.autoplay(); |
||||||
|
}); |
||||||
|
|
||||||
|
options.elem.data('haveEvents', true); |
||||||
|
}; |
||||||
|
|
||||||
|
//核心入口
|
||||||
|
carousel.render = function(options){ |
||||||
|
var inst = new Class(options); |
||||||
|
return inst; |
||||||
|
}; |
||||||
|
|
||||||
|
exports(MOD_NAME, carousel); |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,59 @@ |
|||||||
|
|
||||||
|
/** |
||||||
|
* code 代码修饰器 |
||||||
|
* MIT Licensed |
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define('jquery', function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.$; |
||||||
|
|
||||||
|
exports('code', function(options){ |
||||||
|
var elems = []; |
||||||
|
options = options || {}; |
||||||
|
options.elem = $(options.elem||'.layui-code'); |
||||||
|
options.lang = 'lang' in options ? options.lang : 'code'; |
||||||
|
|
||||||
|
options.elem.each(function(){ |
||||||
|
elems.push(this); |
||||||
|
}); |
||||||
|
|
||||||
|
layui.each(elems.reverse(), function(index, item){ |
||||||
|
var othis = $(item), html = othis.html(); |
||||||
|
|
||||||
|
//转义HTML标签
|
||||||
|
if(othis.attr('lay-encode') || options.encode){ |
||||||
|
html = html.replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&') |
||||||
|
.replace(/</g, '<').replace(/>/g, '>').replace(/'/g, ''').replace(/"/g, '"') |
||||||
|
} |
||||||
|
|
||||||
|
othis.html('<ol class="layui-code-ol"><li>' + html.replace(/[\r\t\n]+/g, '</li><li>') + '</li></ol>') |
||||||
|
|
||||||
|
if(!othis.find('>.layui-code-h3')[0]){ |
||||||
|
othis.prepend('<h3 class="layui-code-h3">'+ (othis.attr('lay-title')||options.title||'</>') + '<a href="javascript:;">'+ (othis.attr('lay-lang')||options.lang||'') +'</a>' + '</h3>'); |
||||||
|
} |
||||||
|
|
||||||
|
var ol = othis.find('>.layui-code-ol'); |
||||||
|
othis.addClass('layui-box layui-code-view'); |
||||||
|
|
||||||
|
//识别皮肤
|
||||||
|
if(othis.attr('lay-skin') || options.skin){ |
||||||
|
othis.addClass('layui-code-' +(othis.attr('lay-skin') || options.skin)); |
||||||
|
} |
||||||
|
|
||||||
|
//按行数适配左边距
|
||||||
|
if((ol.find('li').length/100|0) > 0){ |
||||||
|
ol.css('margin-left', (ol.find('li').length/100|0) + 'px'); |
||||||
|
} |
||||||
|
|
||||||
|
//设置最大高度
|
||||||
|
if(othis.attr('lay-height') || options.height){ |
||||||
|
ol.css('max-height', othis.attr('lay-height') || options.height); |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
}); |
||||||
|
}).addcss('modules/code.css?v=2', 'skincodecss'); |
||||||
|
|
||||||
@ -0,0 +1,691 @@ |
|||||||
|
|
||||||
|
/*! |
||||||
|
* colorpicker |
||||||
|
* 颜色选择组件 |
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define(['jquery', 'lay'], function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.jquery |
||||||
|
,lay = layui.lay |
||||||
|
,device = layui.device() |
||||||
|
,clickOrMousedown = (device.mobile ? 'click' : 'mousedown') |
||||||
|
|
||||||
|
//外部接口
|
||||||
|
,colorpicker = { |
||||||
|
config: {} |
||||||
|
,index: layui.colorpicker ? (layui.colorpicker.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, 'colorpicker', events, callback); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//操作当前实例
|
||||||
|
,thisColorPicker = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
return { |
||||||
|
config: options |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//字符常量
|
||||||
|
,MOD_NAME = 'colorpicker', SHOW = 'layui-show', THIS = 'layui-this', ELEM = '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 = '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){ |
||||||
|
var hsb = {h:0, s:0, b:0}; |
||||||
|
var min = Math.min(rgb.r, rgb.g, rgb.b); |
||||||
|
var max = Math.max(rgb.r, rgb.g, rgb.b); |
||||||
|
var delta = max - min; |
||||||
|
hsb.b = max; |
||||||
|
hsb.s = max != 0 ? 255*delta/max : 0; |
||||||
|
if(hsb.s != 0){ |
||||||
|
if(rgb.r == max){ |
||||||
|
hsb.h = (rgb.g - rgb.b) / delta; |
||||||
|
}else if(rgb.g == max){ |
||||||
|
hsb.h = 2 + (rgb.b - rgb.r) / delta; |
||||||
|
}else{ |
||||||
|
hsb.h = 4 + (rgb.r - rgb.g) / delta; |
||||||
|
} |
||||||
|
}else{ |
||||||
|
hsb.h = -1; |
||||||
|
}; |
||||||
|
if(max == min){ |
||||||
|
hsb.h = 0; |
||||||
|
}; |
||||||
|
hsb.h *= 60; |
||||||
|
if(hsb.h < 0) { |
||||||
|
hsb.h += 360; |
||||||
|
}; |
||||||
|
hsb.s *= 100/255; |
||||||
|
hsb.b *= 100/255; |
||||||
|
return hsb; |
||||||
|
} |
||||||
|
|
||||||
|
//HEX转HSB
|
||||||
|
,HEXToHSB = function(hex){ |
||||||
|
var hex = hex.indexOf('#') > -1 ? hex.substring(1) : hex; |
||||||
|
if(hex.length == 3){ |
||||||
|
var num = hex.split(""); |
||||||
|
hex = num[0]+num[0]+num[1]+num[1]+num[2]+num[2] |
||||||
|
}; |
||||||
|
hex = parseInt(hex, 16); |
||||||
|
var rgb = {r:hex >> 16, g:(hex & 0x00FF00) >> 8, b:(hex & 0x0000FF)}; |
||||||
|
return RGBToHSB(rgb); |
||||||
|
} |
||||||
|
|
||||||
|
//HSB转RGB
|
||||||
|
,HSBToRGB = function(hsb){ |
||||||
|
var rgb = {}; |
||||||
|
var h = hsb.h; |
||||||
|
var s = hsb.s*255/100; |
||||||
|
var b = hsb.b*255/100; |
||||||
|
if(s == 0){ |
||||||
|
rgb.r = rgb.g = rgb.b = b; |
||||||
|
}else{ |
||||||
|
var t1 = b; |
||||||
|
var t2 = (255 - s) * b /255; |
||||||
|
var t3 = (t1 - t2) * (h % 60) /60; |
||||||
|
if(h == 360) h = 0; |
||||||
|
if(h < 60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3} |
||||||
|
else if(h < 120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3} |
||||||
|
else if(h < 180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3} |
||||||
|
else if(h < 240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3} |
||||||
|
else if(h < 300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3} |
||||||
|
else if(h < 360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3} |
||||||
|
else {rgb.r=0; rgb.g=0; rgb.b=0} |
||||||
|
} |
||||||
|
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)}; |
||||||
|
} |
||||||
|
|
||||||
|
//HSB转HEX
|
||||||
|
,HSBToHEX = function(hsb){ |
||||||
|
var rgb = HSBToRGB(hsb); |
||||||
|
var hex = [ |
||||||
|
rgb.r.toString(16) |
||||||
|
,rgb.g.toString(16) |
||||||
|
,rgb.b.toString(16) |
||||||
|
]; |
||||||
|
$.each(hex, function(nr, val){ |
||||||
|
if(val.length == 1){ |
||||||
|
hex[nr] = '0' + val; |
||||||
|
} |
||||||
|
}); |
||||||
|
return hex.join(''); |
||||||
|
} |
||||||
|
|
||||||
|
//转化成所需rgb格式
|
||||||
|
,RGBSTo = function(rgbs){ |
||||||
|
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 = { |
||||||
|
color: '' //默认颜色，默认没有
|
||||||
|
,size: null //选择器大小
|
||||||
|
,alpha: false //是否开启透明度
|
||||||
|
,format: 'hex' //颜色显示/输入格式，可选 rgb,hex
|
||||||
|
,predefine: false //预定义颜色是否开启
|
||||||
|
,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 |
||||||
|
|
||||||
|
//颜色选择框对象
|
||||||
|
,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); |
||||||
|
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.renderPicker = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,elemColorBox = that.elemColorBox[0] |
||||||
|
|
||||||
|
//颜色选择器对象
|
||||||
|
,elemPicker = that.elemPicker = $(['<div id="layui-colorpicker'+ that.index +'" data-index="'+ that.index +'" class="layui-anim layui-anim-downbit 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('')) |
||||||
|
|
||||||
|
,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.removePicker = function(index){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
$('#layui-colorpicker'+ (index || that.index)).remove(); |
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//定位算法
|
||||||
|
Class.prototype.position = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
lay.position(that.bindElem || that.elemColorBox[0], that.elemPicker[0], { |
||||||
|
position: options.position |
||||||
|
,align: 'center' |
||||||
|
}); |
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//颜色选择器赋值
|
||||||
|
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)) |
||||||
|
,type = elemColorBox.attr('lay-type'); |
||||||
|
|
||||||
|
//同步滑块的位置及颜色选择器的选择
|
||||||
|
that.select(hsb.h, hsb.s, hsb.b); |
||||||
|
|
||||||
|
//如果格式要求为rgb
|
||||||
|
if(type === 'torgb'){ |
||||||
|
elemPickerInput.find('input').val(bgcolor); |
||||||
|
}; |
||||||
|
|
||||||
|
//如果格式要求为rgba
|
||||||
|
if(type === 'rgba'){ |
||||||
|
var rgb = RGBSTo(bgcolor); |
||||||
|
|
||||||
|
//如果开启透明度而没有设置，则给默认值
|
||||||
|
if((bgcolor.match(/[0-9]{1,3}/g) || []).length == 3){ |
||||||
|
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; |
||||||
|
that.elemPicker.find('.'+ PICKER_ALPHA_SLIDER).css("left", left); |
||||||
|
}; |
||||||
|
|
||||||
|
//设置span背景色
|
||||||
|
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); |
||||||
|
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(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
|
||||||
|
,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 |
||||||
|
|
||||||
|
,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(type === 'torgb'){ |
||||||
|
that.elemPicker.find('.' + PICKER_INPUT).find('input').val('rgb('+ rgb.r +', '+ rgb.g +', '+ rgb.b +')'); |
||||||
|
}; |
||||||
|
|
||||||
|
if(type === 'rgba'){ |
||||||
|
var left = 0; |
||||||
|
left = a * 280; |
||||||
|
alphaslider.css("left", left); |
||||||
|
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(that.elemPicker.find('.' + PICKER_INPUT).find('input').val()); |
||||||
|
} |
||||||
|
|
||||||
|
//拖拽元素
|
||||||
|
,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(); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//右侧主色选择
|
||||||
|
slider.on('mousedown', function(e){ |
||||||
|
var oldtop = this.offsetTop |
||||||
|
,oldy = e.clientY; |
||||||
|
var move = function(e){ |
||||||
|
var top = oldtop + (e.clientY - oldy) |
||||||
|
,maxh = side[0].offsetHeight; |
||||||
|
if(top < 0)top = 0; |
||||||
|
if(top > maxh)top = maxh; |
||||||
|
var h = top/180*360; |
||||||
|
_h = h; |
||||||
|
change(h, _s, _b, _a); |
||||||
|
e.preventDefault(); |
||||||
|
}; |
||||||
|
|
||||||
|
createMoveElem(move); |
||||||
|
//layui.stope(e);
|
||||||
|
e.preventDefault(); |
||||||
|
}); |
||||||
|
|
||||||
|
side.on('click', function(e){ |
||||||
|
var top = e.clientY - $(this).offset().top; |
||||||
|
if(top < 0)top = 0; |
||||||
|
if(top > this.offsetHeight)top = this.offsetHeight; |
||||||
|
var h = top/180*360; |
||||||
|
_h = h; |
||||||
|
change(h, _s, _b, _a); |
||||||
|
e.preventDefault(); |
||||||
|
}); |
||||||
|
|
||||||
|
//中间小圆点颜色选择
|
||||||
|
choose.on('mousedown', function(e){ |
||||||
|
var oldtop = this.offsetTop |
||||||
|
,oldleft = this.offsetLeft |
||||||
|
,oldy = e.clientY |
||||||
|
,oldx = e.clientX; |
||||||
|
var move = function(e){ |
||||||
|
var top = oldtop + (e.clientY - oldy) |
||||||
|
,left = oldleft + (e.clientX - oldx) |
||||||
|
,maxh = basis[0].offsetHeight - 3 |
||||||
|
,maxw = basis[0].offsetWidth - 3; |
||||||
|
if(top < -3)top = -3; |
||||||
|
if(top > maxh)top = maxh; |
||||||
|
if(left < -3)left = -3; |
||||||
|
if(left > maxw)left = maxw; |
||||||
|
var s = (left + 3)/260*100 |
||||||
|
,b = 100 - (top + 3)/180*100; |
||||||
|
_b = b; |
||||||
|
_s = s; |
||||||
|
change(_h, s, b, _a); |
||||||
|
e.preventDefault(); |
||||||
|
}; |
||||||
|
layui.stope(e); |
||||||
|
createMoveElem(move); |
||||||
|
e.preventDefault(); |
||||||
|
}); |
||||||
|
|
||||||
|
basis.on('mousedown', function(e){ |
||||||
|
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; |
||||||
|
if(left > this.offsetWidth - 3)left = this.offsetWidth - 3; |
||||||
|
var s = (left + 3)/260*100 |
||||||
|
,b = 100 - (top + 3)/180*100; |
||||||
|
_b = b; |
||||||
|
_s = s; |
||||||
|
change(_h, s, b, _a); |
||||||
|
layui.stope(e); |
||||||
|
e.preventDefault(); |
||||||
|
choose.trigger(e, 'mousedown'); |
||||||
|
}); |
||||||
|
|
||||||
|
//底部透明度选择
|
||||||
|
alphaslider.on('mousedown', function(e){ |
||||||
|
var oldleft = this.offsetLeft |
||||||
|
,oldx = e.clientX; |
||||||
|
var move = function(e){ |
||||||
|
var left = oldleft + (e.clientX - oldx) |
||||||
|
,maxw = alphacolor[0].offsetWidth; |
||||||
|
if(left < 0)left = 0; |
||||||
|
if(left > maxw)left = maxw; |
||||||
|
var a = Math.round(left /280*100) /100; |
||||||
|
_a = a; |
||||||
|
change(_h, _s, _b, a); |
||||||
|
e.preventDefault(); |
||||||
|
}; |
||||||
|
|
||||||
|
createMoveElem(move); |
||||||
|
e.preventDefault(); |
||||||
|
}); |
||||||
|
alphacolor.on('click', function(e){ |
||||||
|
var left = e.clientX - $(this).offset().left |
||||||
|
if(left < 0)left = 0; |
||||||
|
if(left > this.offsetWidth)left = this.offsetWidth; |
||||||
|
var a = Math.round(left /280*100) /100; |
||||||
|
_a = a; |
||||||
|
change(_h, _s, _b, a); |
||||||
|
e.preventDefault(); |
||||||
|
}); |
||||||
|
|
||||||
|
//预定义颜色选择
|
||||||
|
pre.each(function(){ |
||||||
|
$(this).on('click', function(){ |
||||||
|
$(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; |
||||||
|
_h = hsb.h; |
||||||
|
_s = hsb.s; |
||||||
|
_b = hsb.b; |
||||||
|
if((color.match(/[0-9]{1,3}/g) || []).length == 3) a = 1; |
||||||
|
_a = a; |
||||||
|
left = a * 280; |
||||||
|
change(hsb.h, hsb.s, hsb.b, a); |
||||||
|
}) |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//颜色选择器hsb转换
|
||||||
|
Class.prototype.select = function(h, s, b, type){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,hex = HSBToHEX({h:h, s:100, b:100}) |
||||||
|
,color = HSBToHEX({h:h, s:s, b:b}) |
||||||
|
,sidetop = h/360*180 |
||||||
|
,top = 180 - b/100*180 - 3 |
||||||
|
,left = s/100*260 - 3; |
||||||
|
|
||||||
|
that.elemPicker.find('.' + PICKER_SIDE_SLIDER).css("top", sidetop); //滑块的top
|
||||||
|
that.elemPicker.find('.' + PICKER_BASIS)[0].style.background = '#' + hex; //颜色选择器的背景
|
||||||
|
|
||||||
|
//选择器的top left
|
||||||
|
that.elemPicker.find('.' + PICKER_BASIS_CUR).css({ |
||||||
|
"top": top |
||||||
|
,"left": left |
||||||
|
}); |
||||||
|
|
||||||
|
if(type === 'change') return; |
||||||
|
|
||||||
|
//选中的颜色
|
||||||
|
that.elemPicker.find('.' + PICKER_INPUT).find('input').val('#' + color); |
||||||
|
}; |
||||||
|
|
||||||
|
Class.prototype.pickerEvents = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
|
||||||
|
,elemColorBoxSpan = that.elemColorBox.find('.' + PICKER_TRIG_SPAN) //颜色盒子
|
||||||
|
,elemPickerInput = that.elemPicker.find('.' + PICKER_INPUT + ' 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, change){ |
||||||
|
var value = elemPickerInput.val() |
||||||
|
,colorValue = value |
||||||
|
,hsb = {}; |
||||||
|
|
||||||
|
if(value.indexOf(',') > -1){ |
||||||
|
hsb = RGBToHSB(RGBSTo(value)); |
||||||
|
that.select(hsb.h, hsb.s, hsb.b); |
||||||
|
elemColorBoxSpan[0].style.background = (colorValue = '#' + 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; |
||||||
|
colorValue = value; |
||||||
|
}; |
||||||
|
} else { |
||||||
|
hsb = HEXToHSB(value); |
||||||
|
elemColorBoxSpan[0].style.background = (colorValue = '#' + HSBToHEX(hsb)); |
||||||
|
that.elemColorBox.find('.' + PICKER_TRIG_I).removeClass(ICON_PICKER_CLOSE).addClass(ICON_PICKER_DOWN); |
||||||
|
}; |
||||||
|
|
||||||
|
if(change === 'change'){ |
||||||
|
that.select(hsb.h, hsb.s, hsb.b, change); |
||||||
|
options.change && options.change(colorValue); |
||||||
|
return; |
||||||
|
} |
||||||
|
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); |
||||||
|
}); |
||||||
|
|
||||||
|
//输入框事件
|
||||||
|
elemPickerInput.on('keyup', function(e){ |
||||||
|
var othis = $(this) |
||||||
|
pickerEvents.confirm.call(this, othis, e.keyCode === 13 ? null : 'change'); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//颜色选择器输入
|
||||||
|
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(clickOrMousedown, 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); |
||||||
|
return thisColorPicker.call(inst); |
||||||
|
}; |
||||||
|
|
||||||
|
exports(MOD_NAME, colorpicker); |
||||||
|
}); |
||||||
@ -0,0 +1,135 @@ |
|||||||
|
|
||||||
|
/*! |
||||||
|
* MODULE_DEMO_NAME 模块组件通用结构 |
||||||
|
* MIT Licensed |
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define([''], function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.$ |
||||||
|
|
||||||
|
//模块名
|
||||||
|
,MOD_NAME = 'MODULE_DEMO_NAME' |
||||||
|
,MOD_INDEX = 'layui_'+ MOD_NAME +'_index' //模块索引名
|
||||||
|
|
||||||
|
//外部接口
|
||||||
|
,MODULE_DEMO_NAME = { |
||||||
|
config: {} |
||||||
|
,index: layui[MOD_NAME] ? (layui[MOD_NAME].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); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//操作当前实例
|
||||||
|
,thisModule = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,id = options.id || that.index; |
||||||
|
|
||||||
|
thisModule.that[id] = that; //记录当前实例对象
|
||||||
|
|
||||||
|
return { |
||||||
|
config: options |
||||||
|
//重置实例
|
||||||
|
,reload: function(options){ |
||||||
|
that.reload.call(that, options); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//字符常量
|
||||||
|
,STR_ELEM = 'layui-MODULE_DEMO_NAME', STR_HIDE = 'layui-hide', STR_DISABLED = 'layui-disabled', STR_NONE = 'layui-none' |
||||||
|
|
||||||
|
//主模板
|
||||||
|
,TPL_MAIN = [''].join('') |
||||||
|
|
||||||
|
//构造器
|
||||||
|
,Class = function(options){ |
||||||
|
var that = this; |
||||||
|
that.index = ++MODULE_DEMO_NAME.index; |
||||||
|
that.config = $.extend({}, that.config, MODULE_DEMO_NAME.config, options); |
||||||
|
that.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
//默认配置
|
||||||
|
Class.prototype.config = { |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
//重载实例
|
||||||
|
Class.prototype.reload = function(options){ |
||||||
|
var that = this; |
||||||
|
|
||||||
|
//防止数组深度合并
|
||||||
|
layui.each(options, function(key, item){ |
||||||
|
if(layui._typeof(item) === 'array') delete that.config[key]; |
||||||
|
}); |
||||||
|
|
||||||
|
that.config = $.extend(true, {}, that.config, options); |
||||||
|
that.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
//渲染
|
||||||
|
Class.prototype.render = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
//解析模板
|
||||||
|
var thisElem = that.elem = $(laytpl(TPL_MAIN).render({ |
||||||
|
data: options |
||||||
|
,index: that.index //索引
|
||||||
|
})); |
||||||
|
|
||||||
|
var othis = options.elem = $(options.elem); |
||||||
|
if(!othis[0]) return; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
that.events(); //事件
|
||||||
|
}; |
||||||
|
|
||||||
|
//事件
|
||||||
|
Class.prototype.events = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
//记录所有实例
|
||||||
|
thisModule.that = {}; //记录所有实例对象
|
||||||
|
|
||||||
|
//获取当前实例对象
|
||||||
|
thisModule.getThis = function(id){ |
||||||
|
var that = thisModule.that[id]; |
||||||
|
if(!that) hint.error(id ? (MOD_NAME +' instance with ID \''+ id +'\' not found') : 'ID argument required'); |
||||||
|
return that |
||||||
|
}; |
||||||
|
|
||||||
|
//重载实例
|
||||||
|
MODULE_DEMO_NAME.reload = function(id, options){ |
||||||
|
var that = thisModule.that[id]; |
||||||
|
that.reload(options); |
||||||
|
|
||||||
|
return thisModule.call(that); |
||||||
|
}; |
||||||
|
|
||||||
|
//核心入口
|
||||||
|
MODULE_DEMO_NAME.render = function(options){ |
||||||
|
var inst = new Class(options); |
||||||
|
return thisModule.call(inst); |
||||||
|
}; |
||||||
|
|
||||||
|
exports(MOD_NAME, MODULE_DEMO_NAME); |
||||||
|
}); |
||||||
@ -0,0 +1,528 @@ |
|||||||
|
/** |
||||||
|
|
||||||
|
@Name：dropdown 下拉菜单组件 |
||||||
|
@License：MIT |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define(['jquery', 'laytpl', 'lay'], function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.$ |
||||||
|
,laytpl = layui.laytpl |
||||||
|
,hint = layui.hint() |
||||||
|
,device = layui.device() |
||||||
|
,clickOrMousedown = (device.mobile ? 'click' : 'mousedown') |
||||||
|
|
||||||
|
//模块名
|
||||||
|
,MOD_NAME = 'dropdown' |
||||||
|
,MOD_INDEX = 'layui_'+ MOD_NAME +'_index' //模块索引名
|
||||||
|
|
||||||
|
//外部接口
|
||||||
|
,dropdown = { |
||||||
|
config: {} |
||||||
|
,index: layui[MOD_NAME] ? (layui[MOD_NAME].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); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//操作当前实例
|
||||||
|
,thisModule = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,id = options.id; |
||||||
|
|
||||||
|
thisModule.that[id] = that; //记录当前实例对象
|
||||||
|
|
||||||
|
return { |
||||||
|
config: options |
||||||
|
//重置实例
|
||||||
|
,reload: function(options){ |
||||||
|
that.reload.call(that, options); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//字符常量
|
||||||
|
,STR_ELEM = 'layui-dropdown', STR_HIDE = 'layui-hide', STR_DISABLED = 'layui-disabled', STR_NONE = 'layui-none' |
||||||
|
,STR_ITEM_UP = 'layui-menu-item-up', STR_ITEM_DOWN = 'layui-menu-item-down', STR_MENU_TITLE = 'layui-menu-body-title', STR_ITEM_GROUP = 'layui-menu-item-group', STR_ITEM_PARENT = 'layui-menu-item-parent', STR_ITEM_DIV = 'layui-menu-item-divider', STR_ITEM_CHECKED = 'layui-menu-item-checked', STR_ITEM_CHECKED2 = 'layui-menu-item-checked2', STR_MENU_PANEL = 'layui-menu-body-panel', STR_MENU_PANEL_L = 'layui-menu-body-panel-left' |
||||||
|
|
||||||
|
,STR_GROUP_TITLE = '.'+ STR_ITEM_GROUP + '>.'+ STR_MENU_TITLE |
||||||
|
|
||||||
|
//构造器
|
||||||
|
,Class = function(options){ |
||||||
|
var that = this; |
||||||
|
that.index = ++dropdown.index; |
||||||
|
that.config = $.extend({}, that.config, dropdown.config, options); |
||||||
|
that.init(); |
||||||
|
}; |
||||||
|
|
||||||
|
//默认配置
|
||||||
|
Class.prototype.config = { |
||||||
|
trigger: 'click' //事件类型
|
||||||
|
,content: '' //自定义菜单内容
|
||||||
|
,className: '' //自定义样式类名
|
||||||
|
,style: '' //设置面板 style 属性
|
||||||
|
,show: false //是否初始即显示菜单面板
|
||||||
|
,isAllowSpread: true //是否允许菜单组展开收缩
|
||||||
|
,isSpreadItem: true //是否初始展开子菜单
|
||||||
|
,data: [] //菜单数据结构
|
||||||
|
,delay: 300 //延迟关闭的毫秒数，若 trigger 为 hover 时才生效
|
||||||
|
}; |
||||||
|
|
||||||
|
//重载实例
|
||||||
|
Class.prototype.reload = function(options){ |
||||||
|
var that = this; |
||||||
|
that.config = $.extend({}, that.config, options); |
||||||
|
that.init(true); |
||||||
|
}; |
||||||
|
|
||||||
|
//初始化准备
|
||||||
|
Class.prototype.init = function(rerender){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,elem = options.elem = $(options.elem); |
||||||
|
|
||||||
|
//若 elem 非唯一
|
||||||
|
if(elem.length > 1){ |
||||||
|
layui.each(elem, function(){ |
||||||
|
dropdown.render($.extend({}, options, { |
||||||
|
elem: this |
||||||
|
})); |
||||||
|
}); |
||||||
|
return that; |
||||||
|
} |
||||||
|
|
||||||
|
//若重复执行 render，则视为 reload 处理
|
||||||
|
if(!rerender && elem[0] && elem.data(MOD_INDEX)){; |
||||||
|
var newThat = thisModule.getThis(elem.data(MOD_INDEX)); |
||||||
|
if(!newThat) return; |
||||||
|
|
||||||
|
return newThat.reload(options); |
||||||
|
}; |
||||||
|
|
||||||
|
//初始化 id 参数
|
||||||
|
options.id = ('id' in options) ? options.id : that.index; |
||||||
|
|
||||||
|
if(options.show) that.render(rerender); //初始即显示
|
||||||
|
that.events(); //事件
|
||||||
|
}; |
||||||
|
|
||||||
|
//渲染
|
||||||
|
Class.prototype.render = function(rerender){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,elemBody = $('body') |
||||||
|
|
||||||
|
//默认菜单内容
|
||||||
|
,getDefaultView = function(){ |
||||||
|
var elemUl = $('<ul class="layui-menu layui-dropdown-menu"></ul>'); |
||||||
|
if(options.data.length > 0 ){ |
||||||
|
eachItemView(elemUl, options.data) |
||||||
|
} else { |
||||||
|
elemUl.html('<li class="layui-menu-item-none">no menu</li>'); |
||||||
|
} |
||||||
|
return elemUl; |
||||||
|
} |
||||||
|
|
||||||
|
//遍历菜单项
|
||||||
|
,eachItemView = function(views, data){ |
||||||
|
//var views = [];
|
||||||
|
layui.each(data, function(index, item){ |
||||||
|
//是否存在子级
|
||||||
|
var isChild = item.child && item.child.length > 0 |
||||||
|
,isSpreadItem = ('isSpreadItem' in item) ? item.isSpreadItem : options.isSpreadItem |
||||||
|
,title = item.templet |
||||||
|
? laytpl(item.templet).render(item) |
||||||
|
: (options.templet ? laytpl(options.templet).render(item) : item.title) |
||||||
|
|
||||||
|
//初始类型
|
||||||
|
,type = function(){ |
||||||
|
if(isChild){ |
||||||
|
item.type = item.type || 'parent'; |
||||||
|
} |
||||||
|
if(item.type){ |
||||||
|
return ({ |
||||||
|
group: 'group' |
||||||
|
,parent: 'parent' |
||||||
|
,'-': '-' |
||||||
|
})[item.type] || 'parent'; |
||||||
|
} |
||||||
|
return ''; |
||||||
|
}(); |
||||||
|
|
||||||
|
if(type !== '-' && (!item.title && !item.id && !isChild)) return; |
||||||
|
|
||||||
|
//列表元素
|
||||||
|
var viewLi = $(['<li'+ function(){ |
||||||
|
var className = { |
||||||
|
group: 'layui-menu-item-group'+ ( |
||||||
|
options.isAllowSpread ? ( |
||||||
|
isSpreadItem ? ' layui-menu-item-down' : ' layui-menu-item-up' |
||||||
|
) : '' |
||||||
|
) |
||||||
|
,parent: STR_ITEM_PARENT |
||||||
|
,'-': 'layui-menu-item-divider' |
||||||
|
}; |
||||||
|
if(isChild || type){ |
||||||
|
return ' class="'+ className[type] +'"'; |
||||||
|
} |
||||||
|
return ''; |
||||||
|
}() +'>' |
||||||
|
|
||||||
|
//标题区
|
||||||
|
,function(){ |
||||||
|
//是否超文本
|
||||||
|
var viewText = ('href' in item) ? ( |
||||||
|
'<a href="'+ item.href +'" target="'+ (item.target || '_self') +'">'+ title +'</a>' |
||||||
|
) : title; |
||||||
|
|
||||||
|
//是否存在子级
|
||||||
|
if(isChild){ |
||||||
|
return '<div class="'+ STR_MENU_TITLE +'">'+ viewText + function(){ |
||||||
|
if(type === 'parent'){ |
||||||
|
return '<i class="layui-icon layui-icon-right"></i>'; |
||||||
|
} else if(type === 'group' && options.isAllowSpread){ |
||||||
|
return '<i class="layui-icon layui-icon-'+ (isSpreadItem ? 'up' : 'down') +'"></i>'; |
||||||
|
} else { |
||||||
|
return ''; |
||||||
|
} |
||||||
|
}() +'</div>' |
||||||
|
|
||||||
|
} |
||||||
|
return '<div class="'+ STR_MENU_TITLE +'">'+ viewText +'</div>'; |
||||||
|
}() |
||||||
|
,'</li>'].join('')); |
||||||
|
|
||||||
|
viewLi.data('item', item); |
||||||
|
|
||||||
|
//子级区
|
||||||
|
if(isChild){ |
||||||
|
var elemPanel = $('<div class="layui-panel layui-menu-body-panel"></div>') |
||||||
|
,elemUl = $('<ul></ul>'); |
||||||
|
|
||||||
|
if(type === 'parent'){ |
||||||
|
elemPanel.append(eachItemView(elemUl, item.child)); |
||||||
|
viewLi.append(elemPanel); |
||||||
|
} else { |
||||||
|
viewLi.append(eachItemView(elemUl, item.child)); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
views.append(viewLi); |
||||||
|
}); |
||||||
|
return views; |
||||||
|
} |
||||||
|
|
||||||
|
//主模板
|
||||||
|
,TPL_MAIN = ['<div class="layui-dropdown layui-border-box layui-panel layui-anim layui-anim-downbit">' |
||||||
|
,'</div>'].join(''); |
||||||
|
|
||||||
|
//如果是右键事件，则每次触发事件时，将允许重新渲染
|
||||||
|
if(options.trigger === 'contextmenu' || lay.isTopElem(options.elem[0])) rerender = true; |
||||||
|
|
||||||
|
//判断是否已经打开了下拉菜单面板
|
||||||
|
if(!rerender && options.elem.data(MOD_INDEX +'_opened')) return; |
||||||
|
|
||||||
|
//记录模板对象
|
||||||
|
that.elemView = $(TPL_MAIN); |
||||||
|
that.elemView.append(options.content || getDefaultView()); |
||||||
|
|
||||||
|
//初始化某些属性
|
||||||
|
if(options.className) that.elemView.addClass(options.className); |
||||||
|
if(options.style) that.elemView.attr('style', options.style); |
||||||
|
|
||||||
|
|
||||||
|
//记录当前执行的实例索引
|
||||||
|
dropdown.thisId = options.id; |
||||||
|
|
||||||
|
//插入视图
|
||||||
|
that.remove(); //移除非当前绑定元素的面板
|
||||||
|
elemBody.append(that.elemView); |
||||||
|
options.elem.data(MOD_INDEX +'_opened', true); |
||||||
|
|
||||||
|
//坐标定位
|
||||||
|
that.position(); |
||||||
|
thisModule.prevElem = that.elemView; //记录当前打开的元素，以便在下次关闭
|
||||||
|
thisModule.prevElem.data('prevElem', options.elem); //将当前绑定的元素，记录在打开元素的 data 对象中
|
||||||
|
|
||||||
|
//阻止全局事件
|
||||||
|
that.elemView.find('.layui-menu').on(clickOrMousedown, function(e){ |
||||||
|
layui.stope(e); |
||||||
|
}); |
||||||
|
|
||||||
|
//触发菜单列表事件
|
||||||
|
that.elemView.find('.layui-menu li').on('click', function(e){ |
||||||
|
var othis = $(this) |
||||||
|
,data = othis.data('item') || {} |
||||||
|
,isChild = data.child && data.child.length > 0; |
||||||
|
|
||||||
|
if(!isChild && data.type !== '-'){ |
||||||
|
that.remove(); |
||||||
|
typeof options.click === 'function' && options.click(data, othis); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//触发菜单组展开收缩
|
||||||
|
that.elemView.find(STR_GROUP_TITLE).on('click', function(e){ |
||||||
|
var othis = $(this) |
||||||
|
,elemGroup = othis.parent() |
||||||
|
,data = elemGroup.data('item') || {} |
||||||
|
|
||||||
|
if(data.type === 'group' && options.isAllowSpread){ |
||||||
|
thisModule.spread(elemGroup); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//如果是鼠标移入事件，则鼠标移出时自动关闭
|
||||||
|
if(options.trigger === 'mouseenter'){ |
||||||
|
that.elemView.on('mouseenter', function(){ |
||||||
|
clearTimeout(thisModule.timer); |
||||||
|
}).on('mouseleave', function(){ |
||||||
|
that.delayRemove(); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
//位置定位
|
||||||
|
Class.prototype.position = function(obj){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
lay.position(options.elem[0], that.elemView[0], { |
||||||
|
position: options.position |
||||||
|
,e: that.e |
||||||
|
,clickType: options.trigger === 'contextmenu' ? 'right' : null |
||||||
|
,align: options.align || null |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//删除视图
|
||||||
|
Class.prototype.remove = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,elemPrev = thisModule.prevElem; |
||||||
|
|
||||||
|
//若存在已打开的面板元素，则移除
|
||||||
|
if(elemPrev){ |
||||||
|
elemPrev.data('prevElem') && ( |
||||||
|
elemPrev.data('prevElem').data(MOD_INDEX +'_opened', false) |
||||||
|
); |
||||||
|
elemPrev.remove(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//延迟删除视图
|
||||||
|
Class.prototype.delayRemove = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
clearTimeout(thisModule.timer); |
||||||
|
|
||||||
|
thisModule.timer = setTimeout(function(){ |
||||||
|
that.remove(); |
||||||
|
}, options.delay); |
||||||
|
}; |
||||||
|
|
||||||
|
//事件
|
||||||
|
Class.prototype.events = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
//如果传入 hover，则解析为 mouseenter
|
||||||
|
if(options.trigger === 'hover') options.trigger = 'mouseenter'; |
||||||
|
|
||||||
|
//解除上一个事件
|
||||||
|
if(that.prevElem) that.prevElem.off(options.trigger, that.prevElemCallback); |
||||||
|
|
||||||
|
//记录被绑定的元素及回调
|
||||||
|
that.prevElem = options.elem; |
||||||
|
that.prevElemCallback = function(e){ |
||||||
|
clearTimeout(thisModule.timer); |
||||||
|
that.e = e; |
||||||
|
that.render(); |
||||||
|
e.preventDefault(); |
||||||
|
|
||||||
|
//组件打开完毕的时间
|
||||||
|
typeof options.ready === 'function' && options.ready(that.elemView, options.elem, that.e.target); |
||||||
|
}; |
||||||
|
|
||||||
|
//触发元素事件
|
||||||
|
options.elem.on(options.trigger, that.prevElemCallback); |
||||||
|
|
||||||
|
//如果是鼠标移入事件
|
||||||
|
if(options.trigger === 'mouseenter'){ |
||||||
|
//直行鼠标移出事件
|
||||||
|
options.elem.on('mouseleave', function(){ |
||||||
|
that.delayRemove(); |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//记录所有实例
|
||||||
|
thisModule.that = {}; //记录所有实例对象
|
||||||
|
|
||||||
|
//获取当前实例对象
|
||||||
|
thisModule.getThis = function(id){ |
||||||
|
var that = thisModule.that[id]; |
||||||
|
if(!that) hint.error(id ? (MOD_NAME +' instance with ID \''+ id +'\' not found') : 'ID argument required'); |
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//设置菜单组展开和收缩状态
|
||||||
|
thisModule.spread = function(othis){ |
||||||
|
//菜单组展开和收缩
|
||||||
|
var elemIcon = othis.children('.'+ STR_MENU_TITLE).find('.layui-icon'); |
||||||
|
if(othis.hasClass(STR_ITEM_UP)){ |
||||||
|
othis.removeClass(STR_ITEM_UP).addClass(STR_ITEM_DOWN); |
||||||
|
elemIcon.removeClass('layui-icon-down').addClass('layui-icon-up'); |
||||||
|
} else { |
||||||
|
othis.removeClass(STR_ITEM_DOWN).addClass(STR_ITEM_UP); |
||||||
|
elemIcon.removeClass('layui-icon-up').addClass('layui-icon-down') |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//全局事件
|
||||||
|
;!function(){ |
||||||
|
var _WIN = $(window) |
||||||
|
,_DOC = $(document); |
||||||
|
|
||||||
|
//自适应定位
|
||||||
|
_WIN.on('resize', function(){ |
||||||
|
if(!dropdown.thisId) return; |
||||||
|
var that = thisModule.getThis(dropdown.thisId); |
||||||
|
if(!that) return; |
||||||
|
|
||||||
|
if(!that.elemView[0] || !$('.'+ STR_ELEM)[0]){ |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
var options = that.config; |
||||||
|
|
||||||
|
if(options.trigger === 'contextmenu'){ |
||||||
|
that.remove(); |
||||||
|
} else { |
||||||
|
that.position(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//点击任意处关闭
|
||||||
|
_DOC.on(clickOrMousedown, function(e){ |
||||||
|
if(!dropdown.thisId) return; |
||||||
|
var that = thisModule.getThis(dropdown.thisId) |
||||||
|
if(!that) return; |
||||||
|
|
||||||
|
var options = that.config; |
||||||
|
|
||||||
|
//如果触发的是绑定的元素，或者属于绑定元素的子元素，则不关闭
|
||||||
|
//满足条件：当前绑定的元素不是 body document，或者不是鼠标右键事件
|
||||||
|
if(!(lay.isTopElem(options.elem[0]) || options.trigger === 'contextmenu')){ |
||||||
|
if( |
||||||
|
e.target === options.elem[0] || |
||||||
|
options.elem.find(e.target)[0] || |
||||||
|
e.target === that.elemView[0] || |
||||||
|
(that.elemView && that.elemView.find(e.target)[0]) |
||||||
|
) return; |
||||||
|
} |
||||||
|
|
||||||
|
that.remove(); |
||||||
|
}); |
||||||
|
|
||||||
|
//基础菜单的静态元素事件
|
||||||
|
var ELEM_LI = '.layui-menu:not(.layui-dropdown-menu) li'; |
||||||
|
_DOC.on('click', ELEM_LI, function(e){ |
||||||
|
var othis = $(this) |
||||||
|
,parent = othis.parents('.layui-menu').eq(0) |
||||||
|
,isChild = othis.hasClass(STR_ITEM_GROUP) || othis.hasClass(STR_ITEM_PARENT) |
||||||
|
,filter = parent.attr('lay-filter') || parent.attr('id') |
||||||
|
,options = lay.options(this); |
||||||
|
|
||||||
|
//非触发元素
|
||||||
|
if(othis.hasClass(STR_ITEM_DIV)) return; |
||||||
|
|
||||||
|
//非菜单组
|
||||||
|
if(!isChild){ |
||||||
|
//选中
|
||||||
|
parent.find('.'+ STR_ITEM_CHECKED).removeClass(STR_ITEM_CHECKED); //清除选中样式
|
||||||
|
parent.find('.'+ STR_ITEM_CHECKED2).removeClass(STR_ITEM_CHECKED2); //清除父级菜单选中样式
|
||||||
|
othis.addClass(STR_ITEM_CHECKED); //添加选中样式
|
||||||
|
othis.parents('.'+ STR_ITEM_PARENT).addClass(STR_ITEM_CHECKED2); //添加父级菜单选中样式
|
||||||
|
|
||||||
|
//触发事件
|
||||||
|
layui.event.call(this, MOD_NAME, 'click('+ filter +')', options); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//基础菜单的展开收缩事件
|
||||||
|
_DOC.on('click', (ELEM_LI + STR_GROUP_TITLE), function(e){ |
||||||
|
var othis = $(this) |
||||||
|
,elemGroup = othis.parents('.'+ STR_ITEM_GROUP +':eq(0)') |
||||||
|
,options = lay.options(elemGroup[0]); |
||||||
|
|
||||||
|
if(('isAllowSpread' in options) ? options.isAllowSpread : true){ |
||||||
|
thisModule.spread(elemGroup); |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
//判断子级菜单是否超出屏幕
|
||||||
|
var ELEM_LI_PAR = '.layui-menu .'+ STR_ITEM_PARENT |
||||||
|
_DOC.on('mouseenter', ELEM_LI_PAR, function(e){ |
||||||
|
var othis = $(this) |
||||||
|
,elemPanel = othis.find('.'+ STR_MENU_PANEL); |
||||||
|
|
||||||
|
if(!elemPanel[0]) return; |
||||||
|
var rect = elemPanel[0].getBoundingClientRect(); |
||||||
|
|
||||||
|
//是否超出右侧屏幕
|
||||||
|
if(rect.right > _WIN.width()){ |
||||||
|
elemPanel.addClass(STR_MENU_PANEL_L); |
||||||
|
//不允许超出左侧屏幕
|
||||||
|
rect = elemPanel[0].getBoundingClientRect(); |
||||||
|
if(rect.left < 0){ |
||||||
|
elemPanel.removeClass(STR_MENU_PANEL_L); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//是否超出底部屏幕
|
||||||
|
if(rect.bottom > _WIN.height()){ |
||||||
|
elemPanel.eq(0).css('margin-top', -(rect.bottom - _WIN.height())); |
||||||
|
}; |
||||||
|
}).on('mouseleave', ELEM_LI_PAR, function(e){ |
||||||
|
var othis = $(this) |
||||||
|
,elemPanel = othis.children('.'+ STR_MENU_PANEL); |
||||||
|
|
||||||
|
elemPanel.removeClass(STR_MENU_PANEL_L); |
||||||
|
elemPanel.css('margin-top', 0); |
||||||
|
}); |
||||||
|
|
||||||
|
}(); |
||||||
|
|
||||||
|
//重载实例
|
||||||
|
dropdown.reload = function(id, options){ |
||||||
|
var that = thisModule.getThis(id); |
||||||
|
if(!that) return this; |
||||||
|
|
||||||
|
that.reload(options); |
||||||
|
return thisModule.call(that); |
||||||
|
}; |
||||||
|
|
||||||
|
//核心入口
|
||||||
|
dropdown.render = function(options){ |
||||||
|
var inst = new Class(options); |
||||||
|
return thisModule.call(inst); |
||||||
|
}; |
||||||
|
|
||||||
|
exports(MOD_NAME, dropdown); |
||||||
|
}); |
||||||
@ -0,0 +1,510 @@ |
|||||||
|
|
||||||
|
/*! |
||||||
|
* element 常用元素操作 |
||||||
|
* MIT Licensed |
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define('jquery', function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.$ |
||||||
|
,hint = layui.hint() |
||||||
|
,device = layui.device() |
||||||
|
|
||||||
|
,MOD_NAME = 'element', THIS = 'layui-this', SHOW = 'layui-show' |
||||||
|
|
||||||
|
,Element = function(){ |
||||||
|
this.config = {}; |
||||||
|
}; |
||||||
|
|
||||||
|
//全局设置
|
||||||
|
Element.prototype.set = function(options){ |
||||||
|
var that = this; |
||||||
|
$.extend(true, that.config, options); |
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//表单事件
|
||||||
|
Element.prototype.on = function(events, callback){ |
||||||
|
return layui.onevent.call(this, MOD_NAME, events, callback); |
||||||
|
}; |
||||||
|
|
||||||
|
//外部Tab新增
|
||||||
|
Element.prototype.tabAdd = function(filter, options){ |
||||||
|
var TITLE = '.layui-tab-title' |
||||||
|
,tabElem = $('.layui-tab[lay-filter='+ filter +']') |
||||||
|
,titElem = tabElem.children(TITLE) |
||||||
|
,barElem = titElem.children('.layui-tab-bar') |
||||||
|
,contElem = tabElem.children('.layui-tab-content') |
||||||
|
,li = '<li'+ function(){ |
||||||
|
var layAttr = []; |
||||||
|
layui.each(options, function(key, value){ |
||||||
|
if(/^(title|content)$/.test(key)) return; |
||||||
|
layAttr.push('lay-'+ key +'="'+ value +'"'); |
||||||
|
}); |
||||||
|
if(layAttr.length > 0) layAttr.unshift(''); //向前插，预留空格
|
||||||
|
return layAttr.join(' '); |
||||||
|
}() +'>'+ (options.title || 'unnaming') +'</li>'; |
||||||
|
|
||||||
|
barElem[0] ? barElem.before(li) : titElem.append(li); |
||||||
|
contElem.append('<div class="layui-tab-item">'+ (options.content || '') +'</div>'); |
||||||
|
call.hideTabMore(true); |
||||||
|
call.tabAuto(); |
||||||
|
return this; |
||||||
|
}; |
||||||
|
|
||||||
|
//外部Tab删除
|
||||||
|
Element.prototype.tabDelete = function(filter, layid){ |
||||||
|
var TITLE = '.layui-tab-title' |
||||||
|
,tabElem = $('.layui-tab[lay-filter='+ filter +']') |
||||||
|
,titElem = tabElem.children(TITLE) |
||||||
|
,liElem = titElem.find('>li[lay-id="'+ layid +'"]'); |
||||||
|
call.tabDelete(null, liElem); |
||||||
|
return this; |
||||||
|
}; |
||||||
|
|
||||||
|
//外部Tab切换
|
||||||
|
Element.prototype.tabChange = function(filter, layid){ |
||||||
|
var TITLE = '.layui-tab-title' |
||||||
|
,tabElem = $('.layui-tab[lay-filter='+ filter +']') |
||||||
|
,titElem = tabElem.children(TITLE) |
||||||
|
,liElem = titElem.find('>li[lay-id="'+ layid +'"]'); |
||||||
|
call.tabClick.call(liElem[0], null, null, liElem); |
||||||
|
return this; |
||||||
|
}; |
||||||
|
|
||||||
|
//自定义Tab选项卡
|
||||||
|
Element.prototype.tab = function(options){ |
||||||
|
options = options || {}; |
||||||
|
dom.on('click', options.headerElem, function(e){ |
||||||
|
var index = $(this).index(); |
||||||
|
call.tabClick.call(this, e, index, null, options); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
//动态改变进度条
|
||||||
|
Element.prototype.progress = function(filter, percent){ |
||||||
|
var ELEM = 'layui-progress' |
||||||
|
,elem = $('.'+ ELEM +'[lay-filter='+ filter +']') |
||||||
|
,elemBar = elem.find('.'+ ELEM +'-bar') |
||||||
|
,text = elemBar.find('.'+ ELEM +'-text'); |
||||||
|
elemBar.css('width', percent).attr('lay-percent', percent); |
||||||
|
text.text(percent); |
||||||
|
return this; |
||||||
|
}; |
||||||
|
|
||||||
|
var NAV_ELEM = '.layui-nav', NAV_ITEM = 'layui-nav-item', NAV_BAR = 'layui-nav-bar' |
||||||
|
,NAV_TREE = 'layui-nav-tree', NAV_CHILD = 'layui-nav-child', NAV_CHILD_C = 'layui-nav-child-c' |
||||||
|
,NAV_MORE = 'layui-nav-more', NAV_DOWN = 'layui-icon-down', NAV_ANIM = 'layui-anim layui-anim-upbit' |
||||||
|
|
||||||
|
//基础事件体
|
||||||
|
,call = { |
||||||
|
//Tab 点击
|
||||||
|
tabClick: function(e, index, liElem, options){ |
||||||
|
options = options || {}; |
||||||
|
var othis = liElem || $(this) |
||||||
|
,index = index || othis.parent().children('li').index(othis) |
||||||
|
,parents = options.headerElem ? othis.parent() : othis.parents('.layui-tab').eq(0) |
||||||
|
,item = options.bodyElem ? $(options.bodyElem) : parents.children('.layui-tab-content').children('.layui-tab-item') |
||||||
|
,elemA = othis.find('a') |
||||||
|
,isJump = elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank' //是否存在跳转
|
||||||
|
,unselect = typeof othis.attr('lay-unselect') === 'string' //是否禁用选中
|
||||||
|
,filter = parents.attr('lay-filter'); |
||||||
|
|
||||||
|
//执行切换
|
||||||
|
if(!(isJump || unselect)){ |
||||||
|
othis.addClass(THIS).siblings().removeClass(THIS); |
||||||
|
item.eq(index).addClass(SHOW).siblings().removeClass(SHOW); |
||||||
|
} |
||||||
|
|
||||||
|
layui.event.call(this, MOD_NAME, 'tab('+ filter +')', { |
||||||
|
elem: parents |
||||||
|
,index: index |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//Tab删除
|
||||||
|
,tabDelete: function(e, othis){ |
||||||
|
var li = othis || $(this).parent(), index = li.index() |
||||||
|
,parents = li.parents('.layui-tab').eq(0) |
||||||
|
,item = parents.children('.layui-tab-content').children('.layui-tab-item') |
||||||
|
,filter = parents.attr('lay-filter'); |
||||||
|
|
||||||
|
if(li.hasClass(THIS)){ |
||||||
|
if(li.next()[0]){ |
||||||
|
call.tabClick.call(li.next()[0], null, index + 1); |
||||||
|
} else if(li.prev()[0]){ |
||||||
|
call.tabClick.call(li.prev()[0], null, index - 1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
li.remove(); |
||||||
|
item.eq(index).remove(); |
||||||
|
setTimeout(function(){ |
||||||
|
call.tabAuto(); |
||||||
|
}, 50); |
||||||
|
|
||||||
|
layui.event.call(this, MOD_NAME, 'tabDelete('+ filter +')', { |
||||||
|
elem: parents |
||||||
|
,index: index |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//Tab自适应
|
||||||
|
,tabAuto: function(){ |
||||||
|
var SCROLL = 'layui-tab-scroll', MORE = 'layui-tab-more', BAR = 'layui-tab-bar' |
||||||
|
,CLOSE = 'layui-tab-close', that = this; |
||||||
|
|
||||||
|
$('.layui-tab').each(function(){ |
||||||
|
var othis = $(this) |
||||||
|
,title = othis.children('.layui-tab-title') |
||||||
|
,item = othis.children('.layui-tab-content').children('.layui-tab-item') |
||||||
|
,STOPE = 'lay-stope="tabmore"' |
||||||
|
,span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon"></i></span>'); |
||||||
|
|
||||||
|
if(that === window && device.ie != 8){ |
||||||
|
call.hideTabMore(true) |
||||||
|
} |
||||||
|
|
||||||
|
//允许关闭
|
||||||
|
if(othis.attr('lay-allowClose')){ |
||||||
|
title.find('li').each(function(){ |
||||||
|
var li = $(this); |
||||||
|
if(!li.find('.'+CLOSE)[0]){ |
||||||
|
var close = $('<i class="layui-icon layui-icon-close layui-unselect '+ CLOSE +'"></i>'); |
||||||
|
close.on('click', call.tabDelete); |
||||||
|
li.append(close); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
if(typeof othis.attr('lay-unauto') === 'string') return; |
||||||
|
|
||||||
|
//响应式
|
||||||
|
if(title.prop('scrollWidth') > title.outerWidth()+1){ |
||||||
|
if(title.find('.'+BAR)[0]) return; |
||||||
|
title.append(span); |
||||||
|
othis.attr('overflow', ''); |
||||||
|
span.on('click', function(e){ |
||||||
|
title[this.title ? 'removeClass' : 'addClass'](MORE); |
||||||
|
this.title = this.title ? '' : '收缩'; |
||||||
|
}); |
||||||
|
} else { |
||||||
|
title.find('.'+BAR).remove(); |
||||||
|
othis.removeAttr('overflow'); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
//隐藏更多Tab
|
||||||
|
,hideTabMore: function(e){ |
||||||
|
var tsbTitle = $('.layui-tab-title'); |
||||||
|
if(e === true || $(e.target).attr('lay-stope') !== 'tabmore'){ |
||||||
|
tsbTitle.removeClass('layui-tab-more'); |
||||||
|
tsbTitle.find('.layui-tab-bar').attr('title',''); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//点击一级菜单
|
||||||
|
/* |
||||||
|
,clickThis: function(){ |
||||||
|
var othis = $(this), parents = othis.parents(NAV_ELEM) |
||||||
|
,filter = parents.attr('lay-filter') |
||||||
|
,elemA = othis.find('a') |
||||||
|
,unselect = typeof othis.attr('lay-unselect') === 'string'; |
||||||
|
|
||||||
|
if(othis.find('.'+NAV_CHILD)[0]) return; |
||||||
|
|
||||||
|
if(!(elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank') && !unselect){ |
||||||
|
parents.find('.'+THIS).removeClass(THIS); |
||||||
|
othis.addClass(THIS); |
||||||
|
} |
||||||
|
|
||||||
|
layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis); |
||||||
|
} |
||||||
|
) |
||||||
|
*/ |
||||||
|
|
||||||
|
//点击菜单 - a标签触发
|
||||||
|
,clickThis: function(){ |
||||||
|
var othis = $(this) |
||||||
|
,parents = othis.parents(NAV_ELEM) |
||||||
|
,filter = parents.attr('lay-filter') |
||||||
|
,parent = othis.parent() |
||||||
|
,child = othis.siblings('.'+NAV_CHILD) |
||||||
|
,unselect = typeof parent.attr('lay-unselect') === 'string'; //是否禁用选中
|
||||||
|
|
||||||
|
if(!(othis.attr('href') !== 'javascript:;' && othis.attr('target') === '_blank') && !unselect){ |
||||||
|
if(!child[0]){ |
||||||
|
parents.find('.'+THIS).removeClass(THIS); |
||||||
|
parent.addClass(THIS); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//如果是垂直菜单
|
||||||
|
if(parents.hasClass(NAV_TREE)){ |
||||||
|
child.removeClass(NAV_ANIM); |
||||||
|
|
||||||
|
//如果有子菜单，则展开
|
||||||
|
if(child[0]){ |
||||||
|
parent[child.css('display') === 'none' ? 'addClass': 'removeClass'](NAV_ITEM+'ed'); |
||||||
|
if(parents.attr('lay-shrink') === 'all'){ |
||||||
|
parent.siblings().removeClass(NAV_ITEM + 'ed'); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis); |
||||||
|
} |
||||||
|
|
||||||
|
//点击子菜单选中
|
||||||
|
/* |
||||||
|
,clickChild: function(){ |
||||||
|
var othis = $(this), parents = othis.parents(NAV_ELEM) |
||||||
|
,filter = parents.attr('lay-filter'); |
||||||
|
parents.find('.'+THIS).removeClass(THIS); |
||||||
|
othis.addClass(THIS); |
||||||
|
layui.event.call(this, MOD_NAME, 'nav('+ filter +')', othis); |
||||||
|
} |
||||||
|
*/ |
||||||
|
|
||||||
|
//折叠面板
|
||||||
|
,collapse: function(){ |
||||||
|
var othis = $(this), icon = othis.find('.layui-colla-icon') |
||||||
|
,elemCont = othis.siblings('.layui-colla-content') |
||||||
|
,parents = othis.parents('.layui-collapse').eq(0) |
||||||
|
,filter = parents.attr('lay-filter') |
||||||
|
,isNone = elemCont.css('display') === 'none'; |
||||||
|
|
||||||
|
//是否手风琴
|
||||||
|
if(typeof parents.attr('lay-accordion') === 'string'){ |
||||||
|
var show = parents.children('.layui-colla-item').children('.'+SHOW); |
||||||
|
show.siblings('.layui-colla-title').children('.layui-colla-icon').html(''); |
||||||
|
show.removeClass(SHOW); |
||||||
|
} |
||||||
|
|
||||||
|
elemCont[isNone ? 'addClass' : 'removeClass'](SHOW); |
||||||
|
icon.html(isNone ? '' : ''); |
||||||
|
|
||||||
|
layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', { |
||||||
|
title: othis |
||||||
|
,content: elemCont |
||||||
|
,show: isNone |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//初始化元素操作
|
||||||
|
Element.prototype.init = function(type, filter){ |
||||||
|
var that = this, elemFilter = function(){ |
||||||
|
return filter ? ('[lay-filter="' + filter +'"]') : ''; |
||||||
|
}(), items = { |
||||||
|
|
||||||
|
//Tab选项卡
|
||||||
|
tab: function(){ |
||||||
|
call.tabAuto.call({}); |
||||||
|
} |
||||||
|
|
||||||
|
//导航菜单
|
||||||
|
,nav: function(){ |
||||||
|
var TIME = 200, timer = {}, timerMore = {}, timeEnd = {}, NAV_TITLE = 'layui-nav-title' |
||||||
|
|
||||||
|
//滑块跟随
|
||||||
|
,follow = function(bar, nav, index){ |
||||||
|
var othis = $(this), child = othis.find('.'+NAV_CHILD); |
||||||
|
if(nav.hasClass(NAV_TREE)){ |
||||||
|
//无子菜单时跟随
|
||||||
|
if(!child[0]){ |
||||||
|
var thisA = othis.children('.'+ NAV_TITLE); |
||||||
|
bar.css({ |
||||||
|
top: othis.offset().top - nav.offset().top |
||||||
|
,height: (thisA[0] ? thisA : othis).outerHeight() |
||||||
|
,opacity: 1 |
||||||
|
}); |
||||||
|
} |
||||||
|
} else { |
||||||
|
child.addClass(NAV_ANIM); |
||||||
|
|
||||||
|
//若居中对齐
|
||||||
|
if(child.hasClass(NAV_CHILD_C)) child.css({ |
||||||
|
left: -(child.outerWidth() - othis.width())/2 |
||||||
|
}); |
||||||
|
|
||||||
|
//滑块定位
|
||||||
|
if(child[0]){ //若有子菜单，则滑块消失
|
||||||
|
bar.css({ |
||||||
|
left: bar.position().left + bar.width()/2 |
||||||
|
,width: 0 |
||||||
|
,opacity: 0 |
||||||
|
}); |
||||||
|
} else { //bar 跟随
|
||||||
|
bar.css({ |
||||||
|
left: othis.position().left + parseFloat(othis.css('marginLeft')) |
||||||
|
,top: othis.position().top + othis.height() - bar.height() |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//渐显滑块并适配宽度
|
||||||
|
timer[index] = setTimeout(function(){ |
||||||
|
bar.css({ |
||||||
|
width: child[0] ? 0 : othis.width() |
||||||
|
,opacity: child[0] ? 0 : 1 |
||||||
|
}); |
||||||
|
}, device.ie && device.ie < 10 ? 0 : TIME); |
||||||
|
|
||||||
|
//显示子菜单
|
||||||
|
clearTimeout(timeEnd[index]); |
||||||
|
if(child.css('display') === 'block'){ |
||||||
|
clearTimeout(timerMore[index]); |
||||||
|
} |
||||||
|
timerMore[index] = setTimeout(function(){ |
||||||
|
child.addClass(SHOW); |
||||||
|
othis.find('.'+NAV_MORE).addClass(NAV_MORE+'d'); |
||||||
|
}, 300); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//遍历导航
|
||||||
|
$(NAV_ELEM + elemFilter).each(function(index){ |
||||||
|
var othis = $(this) |
||||||
|
,bar = $('<span class="'+ NAV_BAR +'"></span>') |
||||||
|
,itemElem = othis.find('.'+NAV_ITEM); |
||||||
|
|
||||||
|
//hover 滑动效果
|
||||||
|
if(!othis.find('.'+NAV_BAR)[0]){ |
||||||
|
othis.append(bar); |
||||||
|
(othis.hasClass(NAV_TREE) |
||||||
|
? itemElem.find('dd,>.'+ NAV_TITLE) |
||||||
|
: itemElem).on('mouseenter', function(){ |
||||||
|
follow.call(this, bar, othis, index); |
||||||
|
}).on('mouseleave', function(){ //鼠标移出
|
||||||
|
//是否为垂直导航
|
||||||
|
if(othis.hasClass(NAV_TREE)){ |
||||||
|
bar.css({ |
||||||
|
height: 0 |
||||||
|
,opacity: 0 |
||||||
|
}); |
||||||
|
} else { |
||||||
|
//隐藏子菜单
|
||||||
|
clearTimeout(timerMore[index]); |
||||||
|
timerMore[index] = setTimeout(function(){ |
||||||
|
othis.find('.'+NAV_CHILD).removeClass(SHOW); |
||||||
|
othis.find('.'+NAV_MORE).removeClass(NAV_MORE+'d'); |
||||||
|
}, 300); |
||||||
|
} |
||||||
|
}); |
||||||
|
othis.on('mouseleave', function(){ |
||||||
|
clearTimeout(timer[index]) |
||||||
|
timeEnd[index] = setTimeout(function(){ |
||||||
|
if(!othis.hasClass(NAV_TREE)){ |
||||||
|
bar.css({ |
||||||
|
width: 0 |
||||||
|
,left: bar.position().left + bar.width()/2 |
||||||
|
,opacity: 0 |
||||||
|
}); |
||||||
|
} |
||||||
|
}, TIME); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//展开子菜单
|
||||||
|
itemElem.find('a').each(function(){ |
||||||
|
var thisA = $(this) |
||||||
|
,parent = thisA.parent() |
||||||
|
,child = thisA.siblings('.'+NAV_CHILD); |
||||||
|
|
||||||
|
//输出小箭头
|
||||||
|
if(child[0] && !thisA.children('.'+NAV_MORE)[0]){ |
||||||
|
thisA.append('<i class="layui-icon '+ NAV_DOWN +' '+ NAV_MORE +'"></i>'); |
||||||
|
} |
||||||
|
|
||||||
|
thisA.off('click', call.clickThis).on('click', call.clickThis); //点击菜单
|
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//面包屑
|
||||||
|
,breadcrumb: function(){ |
||||||
|
var ELEM = '.layui-breadcrumb'; |
||||||
|
|
||||||
|
$(ELEM + elemFilter).each(function(){ |
||||||
|
var othis = $(this) |
||||||
|
,ATTE_SPR = 'lay-separator' |
||||||
|
,separator = othis.attr(ATTE_SPR) || '/' |
||||||
|
,aNode = othis.find('a'); |
||||||
|
if(aNode.next('span['+ ATTE_SPR +']')[0]) return; |
||||||
|
aNode.each(function(index){ |
||||||
|
if(index === aNode.length - 1) return; |
||||||
|
$(this).after('<span '+ ATTE_SPR +'>'+ separator +'</span>'); |
||||||
|
}); |
||||||
|
othis.css('visibility', 'visible'); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//进度条
|
||||||
|
,progress: function(){ |
||||||
|
var ELEM = 'layui-progress'; |
||||||
|
$('.' + ELEM + elemFilter).each(function(){ |
||||||
|
var othis = $(this) |
||||||
|
,elemBar = othis.find('.layui-progress-bar') |
||||||
|
,percent = elemBar.attr('lay-percent'); |
||||||
|
|
||||||
|
elemBar.css('width', function(){ |
||||||
|
return /^.+\/.+$/.test(percent) |
||||||
|
? (new Function('return '+ percent)() * 100) + '%' |
||||||
|
: percent; |
||||||
|
}()); |
||||||
|
|
||||||
|
if(othis.attr('lay-showPercent')){ |
||||||
|
setTimeout(function(){ |
||||||
|
elemBar.html('<span class="'+ ELEM +'-text">'+ percent +'</span>'); |
||||||
|
},350); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//折叠面板
|
||||||
|
,collapse: function(){ |
||||||
|
var ELEM = 'layui-collapse'; |
||||||
|
|
||||||
|
$('.' + ELEM + elemFilter).each(function(){ |
||||||
|
var elemItem = $(this).find('.layui-colla-item') |
||||||
|
elemItem.each(function(){ |
||||||
|
var othis = $(this) |
||||||
|
,elemTitle = othis.find('.layui-colla-title') |
||||||
|
,elemCont = othis.find('.layui-colla-content') |
||||||
|
,isNone = elemCont.css('display') === 'none'; |
||||||
|
|
||||||
|
//初始状态
|
||||||
|
elemTitle.find('.layui-colla-icon').remove(); |
||||||
|
elemTitle.append('<i class="layui-icon layui-colla-icon">'+ (isNone ? '' : '') +'</i>'); |
||||||
|
|
||||||
|
//点击标题
|
||||||
|
elemTitle.off('click', call.collapse).on('click', call.collapse); |
||||||
|
}); |
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return items[type] ? items[type]() : layui.each(items, function(index, item){ |
||||||
|
item(); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
Element.prototype.render = Element.prototype.init; |
||||||
|
|
||||||
|
var element = new Element(), dom = $(document); |
||||||
|
|
||||||
|
$(function(){ |
||||||
|
element.render(); |
||||||
|
}); |
||||||
|
|
||||||
|
var TITLE = '.layui-tab-title li'; |
||||||
|
dom.on('click', TITLE, call.tabClick); //Tab切换
|
||||||
|
dom.on('click', call.hideTabMore); //隐藏展开的Tab
|
||||||
|
$(window).on('resize', call.tabAuto); //自适应
|
||||||
|
|
||||||
|
exports(MOD_NAME, element); |
||||||
|
}); |
||||||
|
|
||||||
@ -0,0 +1,179 @@ |
|||||||
|
/** |
||||||
|
|
||||||
|
@Name flow 流加载组件 |
||||||
|
@License：MIT |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
|
layui.define('jquery', function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.$, Flow = function(options){} |
||||||
|
,ELEM_MORE = 'layui-flow-more' |
||||||
|
,ELEM_LOAD = '<i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon "></i>'; |
||||||
|
|
||||||
|
//主方法
|
||||||
|
Flow.prototype.load = function(options){ |
||||||
|
var that = this, page = 0, lock, isOver, lazyimg, timer; |
||||||
|
options = options || {}; |
||||||
|
|
||||||
|
var elem = $(options.elem); if(!elem[0]) return; |
||||||
|
var scrollElem = $(options.scrollElem || document); //滚动条所在元素
|
||||||
|
var mb = options.mb || 50; //与底部的临界距离
|
||||||
|
var isAuto = 'isAuto' in options ? options.isAuto : true; //是否自动滚动加载
|
||||||
|
var end = options.end || '没有更多了'; //“末页”显示文案
|
||||||
|
|
||||||
|
//滚动条所在元素是否为document
|
||||||
|
var notDocment = options.scrollElem && options.scrollElem !== document; |
||||||
|
|
||||||
|
//加载更多
|
||||||
|
var ELEM_TEXT = '<cite>加载更多</cite>' |
||||||
|
,more = $('<div class="layui-flow-more"><a href="javascript:;">'+ ELEM_TEXT +'</a></div>'); |
||||||
|
|
||||||
|
if(!elem.find('.layui-flow-more')[0]){ |
||||||
|
elem.append(more); |
||||||
|
} |
||||||
|
|
||||||
|
//加载下一个元素
|
||||||
|
var next = function(html, over){ |
||||||
|
html = $(html); |
||||||
|
more.before(html); |
||||||
|
over = over == 0 ? true : null; |
||||||
|
over ? more.html(end) : more.find('a').html(ELEM_TEXT); |
||||||
|
isOver = over; |
||||||
|
lock = null; |
||||||
|
lazyimg && lazyimg(); |
||||||
|
}; |
||||||
|
|
||||||
|
//触发请求
|
||||||
|
var done = function(){ |
||||||
|
lock = true; |
||||||
|
more.find('a').html(ELEM_LOAD); |
||||||
|
typeof options.done === 'function' && options.done(++page, next); |
||||||
|
}; |
||||||
|
|
||||||
|
done(); |
||||||
|
|
||||||
|
//不自动滚动加载
|
||||||
|
more.find('a').on('click', function(){ |
||||||
|
var othis = $(this); |
||||||
|
if(isOver) return; |
||||||
|
lock || done(); |
||||||
|
}); |
||||||
|
|
||||||
|
//如果允许图片懒加载
|
||||||
|
if(options.isLazyimg){ |
||||||
|
var lazyimg = that.lazyimg({ |
||||||
|
elem: options.elem + ' img' |
||||||
|
,scrollElem: options.scrollElem |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
if(!isAuto) return that; |
||||||
|
|
||||||
|
scrollElem.on('scroll', function(){ |
||||||
|
var othis = $(this), top = othis.scrollTop(); |
||||||
|
|
||||||
|
if(timer) clearTimeout(timer); |
||||||
|
if(isOver || !elem.width()) return; //如果已经结束，或者元素处于隐藏状态，则不执行滚动加载
|
||||||
|
|
||||||
|
timer = setTimeout(function(){ |
||||||
|
//计算滚动所在容器的可视高度
|
||||||
|
var height = notDocment ? othis.height() : $(window).height(); |
||||||
|
|
||||||
|
//计算滚动所在容器的实际高度
|
||||||
|
var scrollHeight = notDocment |
||||||
|
? othis.prop('scrollHeight') |
||||||
|
: document.documentElement.scrollHeight; |
||||||
|
|
||||||
|
//临界点
|
||||||
|
if(scrollHeight - top - height <= mb){ |
||||||
|
lock || done(); |
||||||
|
} |
||||||
|
}, 100); |
||||||
|
}); |
||||||
|
|
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//图片懒加载
|
||||||
|
Flow.prototype.lazyimg = function(options){ |
||||||
|
var that = this, index = 0, haveScroll; |
||||||
|
options = options || {}; |
||||||
|
|
||||||
|
var scrollElem = $(options.scrollElem || document); //滚动条所在元素
|
||||||
|
var elem = options.elem || 'img'; |
||||||
|
|
||||||
|
//滚动条所在元素是否为document
|
||||||
|
var notDocment = options.scrollElem && options.scrollElem !== document; |
||||||
|
|
||||||
|
//显示图片
|
||||||
|
var show = function(item, height){ |
||||||
|
var start = scrollElem.scrollTop(), end = start + height; |
||||||
|
var elemTop = notDocment ? function(){ |
||||||
|
return item.offset().top - scrollElem.offset().top + start; |
||||||
|
}() : item.offset().top; |
||||||
|
|
||||||
|
/* 始终只加载在当前屏范围内的图片 */ |
||||||
|
if(elemTop >= start && elemTop <= end){ |
||||||
|
if(item.attr('lay-src')){ |
||||||
|
var src = item.attr('lay-src'); |
||||||
|
layui.img(src, function(){ |
||||||
|
var next = that.lazyimg.elem.eq(index); |
||||||
|
item.attr('src', src).removeAttr('lay-src'); |
||||||
|
|
||||||
|
/* 当前图片加载就绪后，检测下一个图片是否在当前屏 */ |
||||||
|
next[0] && render(next); |
||||||
|
index++; |
||||||
|
}, function(){ |
||||||
|
var next = that.lazyimg.elem.eq(index); |
||||||
|
item.removeAttr('lay-src'); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}, render = function(othis, scroll){ |
||||||
|
|
||||||
|
//计算滚动所在容器的可视高度
|
||||||
|
var height = notDocment ? (scroll||scrollElem).height() : $(window).height(); |
||||||
|
var start = scrollElem.scrollTop(), end = start + height; |
||||||
|
|
||||||
|
that.lazyimg.elem = $(elem); |
||||||
|
|
||||||
|
if(othis){ |
||||||
|
show(othis, height); |
||||||
|
} else { |
||||||
|
//计算未加载过的图片
|
||||||
|
for(var i = 0; i < that.lazyimg.elem.length; i++){ |
||||||
|
var item = that.lazyimg.elem.eq(i), elemTop = notDocment ? function(){ |
||||||
|
return item.offset().top - scrollElem.offset().top + start; |
||||||
|
}() : item.offset().top; |
||||||
|
|
||||||
|
show(item, height); |
||||||
|
index = i; |
||||||
|
|
||||||
|
//如果图片的top坐标，超出了当前屏，则终止后续图片的遍历
|
||||||
|
if(elemTop > end) break; |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
render(); |
||||||
|
|
||||||
|
if(!haveScroll){ |
||||||
|
var timer; |
||||||
|
scrollElem.on('scroll', function(){ |
||||||
|
var othis = $(this); |
||||||
|
if(timer) clearTimeout(timer) |
||||||
|
timer = setTimeout(function(){ |
||||||
|
render(null, othis); |
||||||
|
}, 50); |
||||||
|
}); |
||||||
|
haveScroll = true; |
||||||
|
} |
||||||
|
return render; |
||||||
|
}; |
||||||
|
|
||||||
|
//暴露接口
|
||||||
|
exports('flow', new Flow()); |
||||||
|
}); |
||||||
@ -0,0 +1,742 @@ |
|||||||
|
|
||||||
|
/*! |
||||||
|
* form 表单组件 |
||||||
|
* MIT Licensed |
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define('layer', function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.$ |
||||||
|
,layer = layui.layer |
||||||
|
,hint = layui.hint() |
||||||
|
,device = layui.device() |
||||||
|
|
||||||
|
,MOD_NAME = 'form', ELEM = '.layui-form', THIS = 'layui-this' |
||||||
|
,SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled' |
||||||
|
|
||||||
|
,Form = function(){ |
||||||
|
this.config = { |
||||||
|
verify: { |
||||||
|
required: [ |
||||||
|
/[\S]+/ |
||||||
|
,'必填项不能为空' |
||||||
|
] |
||||||
|
,phone: [ |
||||||
|
/^1\d{10}$/ |
||||||
|
,'请输入正确的手机号' |
||||||
|
] |
||||||
|
,email: [ |
||||||
|
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/ |
||||||
|
,'邮箱格式不正确' |
||||||
|
] |
||||||
|
,url: [ |
||||||
|
/^(#|(http(s?)):\/\/|\/\/)[^\s]+\.[^\s]+$/ |
||||||
|
,'链接格式不正确' |
||||||
|
] |
||||||
|
,number: function(value){ |
||||||
|
if(!value || isNaN(value)) return '只能填写数字' |
||||||
|
} |
||||||
|
,date: [ |
||||||
|
/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/ |
||||||
|
,'日期格式不正确' |
||||||
|
] |
||||||
|
,identity: [ |
||||||
|
/(^\d{15}$)|(^\d{17}(x|X|\d)$)/ |
||||||
|
,'请输入正确的身份证号' |
||||||
|
] |
||||||
|
} |
||||||
|
,autocomplete: null //全局 autocomplete 状态。null 表示不干预
|
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
//全局设置
|
||||||
|
Form.prototype.set = function(options){ |
||||||
|
var that = this; |
||||||
|
$.extend(true, that.config, options); |
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//验证规则设定
|
||||||
|
Form.prototype.verify = function(settings){ |
||||||
|
var that = this; |
||||||
|
$.extend(true, that.config.verify, settings); |
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//表单事件
|
||||||
|
Form.prototype.on = function(events, callback){ |
||||||
|
return layui.onevent.call(this, MOD_NAME, events, callback); |
||||||
|
}; |
||||||
|
|
||||||
|
//赋值/取值
|
||||||
|
Form.prototype.val = function(filter, object){ |
||||||
|
var that = this |
||||||
|
,formElem = $(ELEM + '[lay-filter="' + filter +'"]'); |
||||||
|
|
||||||
|
//遍历
|
||||||
|
formElem.each(function(index, item){ |
||||||
|
var itemForm = $(this); |
||||||
|
|
||||||
|
//赋值
|
||||||
|
layui.each(object, function(key, value){ |
||||||
|
var itemElem = itemForm.find('[name="'+ key +'"]') |
||||||
|
,type; |
||||||
|
|
||||||
|
//如果对应的表单不存在，则不执行
|
||||||
|
if(!itemElem[0]) return; |
||||||
|
type = itemElem[0].type; |
||||||
|
|
||||||
|
//如果为复选框
|
||||||
|
if(type === 'checkbox'){ |
||||||
|
itemElem[0].checked = value; |
||||||
|
} else if(type === 'radio') { //如果为单选框
|
||||||
|
itemElem.each(function(){ |
||||||
|
if(this.value == value ){ |
||||||
|
this.checked = true |
||||||
|
} |
||||||
|
}); |
||||||
|
} else { //其它类型的表单
|
||||||
|
itemElem.val(value); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
form.render(null, filter); |
||||||
|
|
||||||
|
//返回值
|
||||||
|
return that.getValue(filter); |
||||||
|
}; |
||||||
|
|
||||||
|
//取值
|
||||||
|
Form.prototype.getValue = function(filter, itemForm){ |
||||||
|
itemForm = itemForm || $(ELEM + '[lay-filter="' + filter +'"]').eq(0); |
||||||
|
|
||||||
|
var nameIndex = {} //数组 name 索引
|
||||||
|
,field = {} |
||||||
|
,fieldElem = itemForm.find('input,select,textarea') //获取所有表单域
|
||||||
|
|
||||||
|
layui.each(fieldElem, function(_, item){ |
||||||
|
var othis = $(this) |
||||||
|
,init_name; //初始 name
|
||||||
|
|
||||||
|
item.name = (item.name || '').replace(/^\s*|\s*&/, ''); |
||||||
|
if(!item.name) return; |
||||||
|
|
||||||
|
//用于支持数组 name
|
||||||
|
if(/^.*\[\]$/.test(item.name)){ |
||||||
|
var key = item.name.match(/^(.*)\[\]$/g)[0]; |
||||||
|
nameIndex[key] = nameIndex[key] | 0; |
||||||
|
init_name = item.name.replace(/^(.*)\[\]$/, '$1['+ (nameIndex[key]++) +']'); |
||||||
|
} |
||||||
|
|
||||||
|
if(/^checkbox|radio$/.test(item.type) && !item.checked) return; //复选框和单选框未选中，不记录字段
|
||||||
|
field[init_name || item.name] = item.value; |
||||||
|
}); |
||||||
|
|
||||||
|
return field; |
||||||
|
}; |
||||||
|
|
||||||
|
//表单控件渲染
|
||||||
|
Form.prototype.render = function(type, filter){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,elemForm = $(ELEM + function(){ |
||||||
|
return filter ? ('[lay-filter="' + filter +'"]') : ''; |
||||||
|
}()) |
||||||
|
,items = { |
||||||
|
//输入框
|
||||||
|
input: function(){ |
||||||
|
var inputs = elemForm.find('input,textarea'); |
||||||
|
|
||||||
|
//初始化全局的 autocomplete
|
||||||
|
options.autocomplete && inputs.attr('autocomplete', options.autocomplete); |
||||||
|
} |
||||||
|
|
||||||
|
//下拉选择框
|
||||||
|
,select: function(){ |
||||||
|
var TIPS = '请选择', CLASS = 'layui-form-select', TITLE = 'layui-select-title' |
||||||
|
,NONE = 'layui-select-none', initValue = '', thatInput |
||||||
|
,selects = elemForm.find('select') |
||||||
|
|
||||||
|
//隐藏 select
|
||||||
|
,hide = function(e, clear){ |
||||||
|
if(!$(e.target).parent().hasClass(TITLE) || clear){ |
||||||
|
$('.'+CLASS).removeClass(CLASS+'ed ' + CLASS+'up'); |
||||||
|
thatInput && initValue && thatInput.val(initValue); |
||||||
|
} |
||||||
|
thatInput = null; |
||||||
|
} |
||||||
|
|
||||||
|
//各种事件
|
||||||
|
,events = function(reElem, disabled, isSearch){ |
||||||
|
var select = $(this) |
||||||
|
,title = reElem.find('.' + TITLE) |
||||||
|
,input = title.find('input') |
||||||
|
,dl = reElem.find('dl') |
||||||
|
,dds = dl.children('dd') |
||||||
|
,index = this.selectedIndex //当前选中的索引
|
||||||
|
,nearElem; //select 组件当前选中的附近元素，用于辅助快捷键功能
|
||||||
|
|
||||||
|
if(disabled) return; |
||||||
|
|
||||||
|
//展开下拉
|
||||||
|
var showDown = function(){ |
||||||
|
var top = reElem.offset().top + reElem.outerHeight() + 5 - $win.scrollTop() |
||||||
|
,dlHeight = dl.outerHeight(); |
||||||
|
|
||||||
|
index = select[0].selectedIndex; //获取最新的 selectedIndex
|
||||||
|
reElem.addClass(CLASS+'ed'); |
||||||
|
dds.removeClass(HIDE); |
||||||
|
nearElem = null; |
||||||
|
|
||||||
|
//初始选中样式
|
||||||
|
dds.eq(index).addClass(THIS).siblings().removeClass(THIS); |
||||||
|
|
||||||
|
//上下定位识别
|
||||||
|
if(top + dlHeight > $win.height() && top >= dlHeight){ |
||||||
|
reElem.addClass(CLASS + 'up'); |
||||||
|
} |
||||||
|
|
||||||
|
followScroll(); |
||||||
|
} |
||||||
|
|
||||||
|
//隐藏下拉
|
||||||
|
,hideDown = function(choose){ |
||||||
|
reElem.removeClass(CLASS+'ed ' + CLASS+'up'); |
||||||
|
input.blur(); |
||||||
|
nearElem = null; |
||||||
|
|
||||||
|
if(choose) return; |
||||||
|
|
||||||
|
notOption(input.val(), function(none){ |
||||||
|
var selectedIndex = select[0].selectedIndex; |
||||||
|
|
||||||
|
//未查询到相关值
|
||||||
|
if(none){ |
||||||
|
initValue = $(select[0].options[selectedIndex]).html(); //重新获得初始选中值
|
||||||
|
|
||||||
|
//如果是第一项，且文本值等于 placeholder，则清空初始值
|
||||||
|
if(selectedIndex === 0 && initValue === input.attr('placeholder')){ |
||||||
|
initValue = ''; |
||||||
|
}; |
||||||
|
|
||||||
|
//如果有选中值，则将输入框纠正为该值。否则清空输入框
|
||||||
|
input.val(initValue || ''); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//定位下拉滚动条
|
||||||
|
,followScroll = function(){ |
||||||
|
var thisDd = dl.children('dd.'+ THIS); |
||||||
|
|
||||||
|
if(!thisDd[0]) return; |
||||||
|
|
||||||
|
var posTop = thisDd.position().top |
||||||
|
,dlHeight = dl.height() |
||||||
|
,ddHeight = thisDd.height(); |
||||||
|
|
||||||
|
//若选中元素在滚动条不可见底部
|
||||||
|
if(posTop > dlHeight){ |
||||||
|
dl.scrollTop(posTop + dl.scrollTop() - dlHeight + ddHeight - 5); |
||||||
|
} |
||||||
|
|
||||||
|
//若选择玄素在滚动条不可见顶部
|
||||||
|
if(posTop < 0){ |
||||||
|
dl.scrollTop(posTop + dl.scrollTop() - 5); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//点击标题区域
|
||||||
|
title.on('click', function(e){ |
||||||
|
reElem.hasClass(CLASS+'ed') ? ( |
||||||
|
hideDown() |
||||||
|
) : ( |
||||||
|
hide(e, true), |
||||||
|
showDown() |
||||||
|
); |
||||||
|
dl.find('.'+NONE).remove(); |
||||||
|
}); |
||||||
|
|
||||||
|
//点击箭头获取焦点
|
||||||
|
title.find('.layui-edge').on('click', function(){ |
||||||
|
input.focus(); |
||||||
|
}); |
||||||
|
|
||||||
|
//select 中 input 键盘事件
|
||||||
|
input.on('keyup', function(e){ //键盘松开
|
||||||
|
var keyCode = e.keyCode; |
||||||
|
|
||||||
|
//Tab键展开
|
||||||
|
if(keyCode === 9){ |
||||||
|
showDown(); |
||||||
|
} |
||||||
|
}).on('keydown', function(e){ //键盘按下
|
||||||
|
var keyCode = e.keyCode; |
||||||
|
|
||||||
|
//Tab键隐藏
|
||||||
|
if(keyCode === 9){ |
||||||
|
hideDown(); |
||||||
|
} |
||||||
|
|
||||||
|
//标注 dd 的选中状态
|
||||||
|
var setThisDd = function(prevNext, thisElem1){ |
||||||
|
var nearDd, cacheNearElem |
||||||
|
e.preventDefault(); |
||||||
|
|
||||||
|
//得到当前队列元素
|
||||||
|
var thisElem = function(){ |
||||||
|
var thisDd = dl.children('dd.'+ THIS); |
||||||
|
|
||||||
|
//如果是搜索状态，且按 Down 键，且当前可视 dd 元素在选中元素之前，
|
||||||
|
//则将当前可视 dd 元素的上一个元素作为虚拟的当前选中元素，以保证递归不中断
|
||||||
|
if(dl.children('dd.'+ HIDE)[0] && prevNext === 'next'){ |
||||||
|
var showDd = dl.children('dd:not(.'+ HIDE +',.'+ DISABLED +')') |
||||||
|
,firstIndex = showDd.eq(0).index(); |
||||||
|
if(firstIndex >=0 && firstIndex < thisDd.index() && !showDd.hasClass(THIS)){ |
||||||
|
return showDd.eq(0).prev()[0] ? showDd.eq(0).prev() : dl.children(':last'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if(thisElem1 && thisElem1[0]){ |
||||||
|
return thisElem1; |
||||||
|
} |
||||||
|
if(nearElem && nearElem[0]){ |
||||||
|
return nearElem; |
||||||
|
} |
||||||
|
|
||||||
|
return thisDd; |
||||||
|
//return dds.eq(index);
|
||||||
|
}(); |
||||||
|
|
||||||
|
cacheNearElem = thisElem[prevNext](); //当前元素的附近元素
|
||||||
|
nearDd = thisElem[prevNext]('dd:not(.'+ HIDE +')'); //当前可视元素的 dd 元素
|
||||||
|
|
||||||
|
//如果附近的元素不存在，则停止执行，并清空 nearElem
|
||||||
|
if(!cacheNearElem[0]) return nearElem = null; |
||||||
|
|
||||||
|
//记录附近的元素，让其成为下一个当前元素
|
||||||
|
nearElem = thisElem[prevNext](); |
||||||
|
|
||||||
|
//如果附近不是 dd ，或者附近的 dd 元素是禁用状态，则进入递归查找
|
||||||
|
if((!nearDd[0] || nearDd.hasClass(DISABLED)) && nearElem[0]){ |
||||||
|
return setThisDd(prevNext, nearElem); |
||||||
|
} |
||||||
|
|
||||||
|
nearDd.addClass(THIS).siblings().removeClass(THIS); //标注样式
|
||||||
|
followScroll(); //定位滚动条
|
||||||
|
}; |
||||||
|
|
||||||
|
if(keyCode === 38) setThisDd('prev'); //Up 键
|
||||||
|
if(keyCode === 40) setThisDd('next'); //Down 键
|
||||||
|
|
||||||
|
//Enter 键
|
||||||
|
if(keyCode === 13){ |
||||||
|
e.preventDefault(); |
||||||
|
dl.children('dd.'+THIS).trigger('click'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//检测值是否不属于 select 项
|
||||||
|
var notOption = function(value, callback, origin){ |
||||||
|
var num = 0; |
||||||
|
layui.each(dds, function(){ |
||||||
|
var othis = $(this) |
||||||
|
,text = othis.text() |
||||||
|
,not = text.indexOf(value) === -1; |
||||||
|
if(value === '' || (origin === 'blur') ? value !== text : not) num++; |
||||||
|
origin === 'keyup' && othis[not ? 'addClass' : 'removeClass'](HIDE); |
||||||
|
}); |
||||||
|
var none = num === dds.length; |
||||||
|
return callback(none), none; |
||||||
|
}; |
||||||
|
|
||||||
|
//搜索匹配
|
||||||
|
var search = function(e){ |
||||||
|
var value = this.value, keyCode = e.keyCode; |
||||||
|
|
||||||
|
if(keyCode === 9 || keyCode === 13 |
||||||
|
|| keyCode === 37 || keyCode === 38 |
||||||
|
|| keyCode === 39 || keyCode === 40 |
||||||
|
){ |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
notOption(value, function(none){ |
||||||
|
if(none){ |
||||||
|
dl.find('.'+NONE)[0] || dl.append('<p class="'+ NONE +'">无匹配项</p>'); |
||||||
|
} else { |
||||||
|
dl.find('.'+NONE).remove(); |
||||||
|
} |
||||||
|
}, 'keyup'); |
||||||
|
|
||||||
|
if(value === ''){ |
||||||
|
dl.find('.'+NONE).remove(); |
||||||
|
} |
||||||
|
|
||||||
|
followScroll(); //定位滚动条
|
||||||
|
}; |
||||||
|
|
||||||
|
if(isSearch){ |
||||||
|
input.on('keyup', search).on('blur', function(e){ |
||||||
|
var selectedIndex = select[0].selectedIndex; |
||||||
|
|
||||||
|
thatInput = input; //当前的 select 中的 input 元素
|
||||||
|
initValue = $(select[0].options[selectedIndex]).html(); //重新获得初始选中值
|
||||||
|
|
||||||
|
//如果是第一项，且文本值等于 placeholder，则清空初始值
|
||||||
|
if(selectedIndex === 0 && initValue === input.attr('placeholder')){ |
||||||
|
initValue = ''; |
||||||
|
}; |
||||||
|
|
||||||
|
setTimeout(function(){ |
||||||
|
notOption(input.val(), function(none){ |
||||||
|
initValue || input.val(''); //none && !initValue
|
||||||
|
}, 'blur'); |
||||||
|
}, 200); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//选择
|
||||||
|
dds.on('click', function(){ |
||||||
|
var othis = $(this), value = othis.attr('lay-value'); |
||||||
|
var filter = select.attr('lay-filter'); //获取过滤器
|
||||||
|
|
||||||
|
if(othis.hasClass(DISABLED)) return false; |
||||||
|
|
||||||
|
if(othis.hasClass('layui-select-tips')){ |
||||||
|
input.val(''); |
||||||
|
} else { |
||||||
|
input.val(othis.text()); |
||||||
|
othis.addClass(THIS); |
||||||
|
} |
||||||
|
|
||||||
|
othis.siblings().removeClass(THIS); |
||||||
|
select.val(value).removeClass('layui-form-danger') |
||||||
|
layui.event.call(this, MOD_NAME, 'select('+ filter +')', { |
||||||
|
elem: select[0] |
||||||
|
,value: value |
||||||
|
,othis: reElem |
||||||
|
}); |
||||||
|
|
||||||
|
hideDown(true); |
||||||
|
return false; |
||||||
|
}); |
||||||
|
|
||||||
|
reElem.find('dl>dt').on('click', function(e){ |
||||||
|
return false; |
||||||
|
}); |
||||||
|
|
||||||
|
$(document).off('click', hide).on('click', hide); //点击其它元素关闭 select
|
||||||
|
} |
||||||
|
|
||||||
|
selects.each(function(index, select){ |
||||||
|
var othis = $(this) |
||||||
|
,hasRender = othis.next('.'+CLASS) |
||||||
|
,disabled = this.disabled |
||||||
|
,value = select.value |
||||||
|
,selected = $(select.options[select.selectedIndex]) //获取当前选中项
|
||||||
|
,optionsFirst = select.options[0]; |
||||||
|
|
||||||
|
if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); |
||||||
|
|
||||||
|
var isSearch = typeof othis.attr('lay-search') === 'string' |
||||||
|
,placeholder = optionsFirst ? ( |
||||||
|
optionsFirst.value ? TIPS : (optionsFirst.innerHTML || TIPS) |
||||||
|
) : TIPS; |
||||||
|
|
||||||
|
//替代元素
|
||||||
|
var reElem = $(['<div class="'+ (isSearch ? '' : 'layui-unselect ') + CLASS |
||||||
|
,(disabled ? ' layui-select-disabled' : '') +'">' |
||||||
|
,'<div class="'+ TITLE +'">' |
||||||
|
,('<input type="text" placeholder="'+ $.trim(placeholder) +'" ' |
||||||
|
+('value="'+ $.trim(value ? selected.html() : '') +'"') //默认值
|
||||||
|
+((!disabled && isSearch) ? '' : ' readonly') //是否开启搜索
|
||||||
|
+' class="layui-input' |
||||||
|
+(isSearch ? '' : ' layui-unselect') |
||||||
|
+ (disabled ? (' ' + DISABLED) : '') +'">') //禁用状态
|
||||||
|
,'<i class="layui-edge"></i></div>' |
||||||
|
,'<dl class="layui-anim layui-anim-upbit'+ (othis.find('optgroup')[0] ? ' layui-select-group' : '') +'">' |
||||||
|
,function(options){ |
||||||
|
var arr = []; |
||||||
|
layui.each(options, function(index, item){ |
||||||
|
if(index === 0 && !item.value){ |
||||||
|
arr.push('<dd lay-value="" class="layui-select-tips">'+ $.trim(item.innerHTML || TIPS) +'</dd>'); |
||||||
|
} else if(item.tagName.toLowerCase() === 'optgroup'){ |
||||||
|
arr.push('<dt>'+ item.label +'</dt>'); |
||||||
|
} else { |
||||||
|
arr.push('<dd lay-value="'+ item.value +'" class="'+ (value === item.value ? THIS : '') + (item.disabled ? (' '+DISABLED) : '') +'">'+ $.trim(item.innerHTML) +'</dd>'); |
||||||
|
} |
||||||
|
}); |
||||||
|
arr.length === 0 && arr.push('<dd lay-value="" class="'+ DISABLED +'">没有选项</dd>'); |
||||||
|
return arr.join(''); |
||||||
|
}(othis.find('*')) +'</dl>' |
||||||
|
,'</div>'].join('')); |
||||||
|
|
||||||
|
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||||
|
othis.after(reElem); |
||||||
|
events.call(this, reElem, disabled, isSearch); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//复选框/开关
|
||||||
|
,checkbox: function(){ |
||||||
|
var CLASS = { |
||||||
|
checkbox: ['layui-form-checkbox', 'layui-form-checked', 'checkbox'] |
||||||
|
,_switch: ['layui-form-switch', 'layui-form-onswitch', 'switch'] |
||||||
|
} |
||||||
|
,checks = elemForm.find('input[type=checkbox]') |
||||||
|
|
||||||
|
,events = function(reElem, RE_CLASS){ |
||||||
|
var check = $(this); |
||||||
|
|
||||||
|
//勾选
|
||||||
|
reElem.on('click', function(){ |
||||||
|
var filter = check.attr('lay-filter') //获取过滤器
|
||||||
|
,text = (check.attr('lay-text')||'').split('|'); |
||||||
|
|
||||||
|
if(check[0].disabled) return; |
||||||
|
|
||||||
|
check[0].checked ? ( |
||||||
|
check[0].checked = false |
||||||
|
,reElem.removeClass(RE_CLASS[1]).find('em').text(text[1]) |
||||||
|
) : ( |
||||||
|
check[0].checked = true |
||||||
|
,reElem.addClass(RE_CLASS[1]).find('em').text(text[0]) |
||||||
|
); |
||||||
|
|
||||||
|
layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', { |
||||||
|
elem: check[0] |
||||||
|
,value: check[0].value |
||||||
|
,othis: reElem |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
checks.each(function(index, check){ |
||||||
|
var othis = $(this), skin = othis.attr('lay-skin') |
||||||
|
,text = (othis.attr('lay-text') || '').split('|'), disabled = this.disabled; |
||||||
|
if(skin === 'switch') skin = '_'+skin; |
||||||
|
var RE_CLASS = CLASS[skin] || CLASS.checkbox; |
||||||
|
|
||||||
|
if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); |
||||||
|
|
||||||
|
//替代元素
|
||||||
|
var hasRender = othis.next('.' + RE_CLASS[0]) |
||||||
|
,reElem = $(['<div class="layui-unselect '+ RE_CLASS[0] |
||||||
|
,(check.checked ? (' '+ RE_CLASS[1]) : '') //选中状态
|
||||||
|
,(disabled ? ' layui-checkbox-disabled '+ DISABLED : '') //禁用状态
|
||||||
|
,'"' |
||||||
|
,(skin ? ' lay-skin="'+ skin +'"' : '') //风格
|
||||||
|
,'>' |
||||||
|
,function(){ //不同风格的内容
|
||||||
|
var title = check.title.replace(/\s/g, '') |
||||||
|
,type = { |
||||||
|
//复选框
|
||||||
|
checkbox: [ |
||||||
|
(title ? ('<span>'+ check.title +'</span>') : '') |
||||||
|
,'<i class="layui-icon layui-icon-ok"></i>' |
||||||
|
].join('') |
||||||
|
|
||||||
|
//开关
|
||||||
|
,_switch: '<em>'+ ((check.checked ? text[0] : text[1]) || '') +'</em><i></i>' |
||||||
|
}; |
||||||
|
return type[skin] || type['checkbox']; |
||||||
|
}() |
||||||
|
,'</div>'].join('')); |
||||||
|
|
||||||
|
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||||
|
othis.after(reElem); |
||||||
|
events.call(this, reElem, RE_CLASS); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//单选框
|
||||||
|
,radio: function(){ |
||||||
|
var CLASS = 'layui-form-radio', ICON = ['', ''] |
||||||
|
,radios = elemForm.find('input[type=radio]') |
||||||
|
|
||||||
|
,events = function(reElem){ |
||||||
|
var radio = $(this), ANIM = 'layui-anim-scaleSpring'; |
||||||
|
|
||||||
|
reElem.on('click', function(){ |
||||||
|
var name = radio[0].name, forms = radio.parents(ELEM); |
||||||
|
var filter = radio.attr('lay-filter'); //获取过滤器
|
||||||
|
var sameRadio = forms.find('input[name='+ name.replace(/(\.|#|\[|\])/g, '\\$1') +']'); //找到相同name的兄弟
|
||||||
|
|
||||||
|
if(radio[0].disabled) return; |
||||||
|
|
||||||
|
layui.each(sameRadio, function(){ |
||||||
|
var next = $(this).next('.'+CLASS); |
||||||
|
this.checked = false; |
||||||
|
next.removeClass(CLASS+'ed'); |
||||||
|
next.find('.layui-icon').removeClass(ANIM).html(ICON[1]); |
||||||
|
}); |
||||||
|
|
||||||
|
radio[0].checked = true; |
||||||
|
reElem.addClass(CLASS+'ed'); |
||||||
|
reElem.find('.layui-icon').addClass(ANIM).html(ICON[0]); |
||||||
|
|
||||||
|
layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', { |
||||||
|
elem: radio[0] |
||||||
|
,value: radio[0].value |
||||||
|
,othis: reElem |
||||||
|
}); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
radios.each(function(index, radio){ |
||||||
|
var othis = $(this), hasRender = othis.next('.' + CLASS), disabled = this.disabled; |
||||||
|
|
||||||
|
if(typeof othis.attr('lay-ignore') === 'string') return othis.show(); |
||||||
|
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||||
|
|
||||||
|
//替代元素
|
||||||
|
var reElem = $(['<div class="layui-unselect '+ CLASS |
||||||
|
,(radio.checked ? (' '+CLASS+'ed') : '') //选中状态
|
||||||
|
,(disabled ? ' layui-radio-disabled '+DISABLED : '') +'">' //禁用状态
|
||||||
|
,'<i class="layui-anim layui-icon">'+ ICON[radio.checked ? 0 : 1] +'</i>' |
||||||
|
,'<div>'+ function(){ |
||||||
|
var title = radio.title || ''; |
||||||
|
if(typeof othis.next().attr('lay-radio') === 'string'){ |
||||||
|
title = othis.next().html(); |
||||||
|
//othis.next().remove();
|
||||||
|
} |
||||||
|
return title |
||||||
|
}() +'</div>' |
||||||
|
,'</div>'].join('')); |
||||||
|
|
||||||
|
othis.after(reElem); |
||||||
|
events.call(this, reElem); |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
type ? ( |
||||||
|
items[type] ? items[type]() : hint.error('不支持的 "'+ type + '" 表单渲染') |
||||||
|
) : layui.each(items, function(index, item){ |
||||||
|
item(); |
||||||
|
}); |
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//表单提交校验
|
||||||
|
var submit = function(){ |
||||||
|
var stop = null //验证不通过状态
|
||||||
|
,verify = form.config.verify //验证规则
|
||||||
|
,DANGER = 'layui-form-danger' //警示样式
|
||||||
|
,field = {} //字段集合
|
||||||
|
,button = $(this) //当前触发的按钮
|
||||||
|
,elem = button.parents(ELEM).eq(0) //当前所在表单域
|
||||||
|
,verifyElem = elem.find('*[lay-verify]') //获取需要校验的元素
|
||||||
|
,formElem = button.parents('form')[0] //获取当前所在的 form 元素，如果存在的话
|
||||||
|
,filter = button.attr('lay-filter'); //获取过滤器
|
||||||
|
|
||||||
|
|
||||||
|
//开始校验
|
||||||
|
layui.each(verifyElem, function(_, item){ |
||||||
|
var othis = $(this) |
||||||
|
,vers = othis.attr('lay-verify').split('|') |
||||||
|
,verType = othis.attr('lay-verType') //提示方式
|
||||||
|
,value = othis.val(); |
||||||
|
|
||||||
|
othis.removeClass(DANGER); //移除警示样式
|
||||||
|
|
||||||
|
//遍历元素绑定的验证规则
|
||||||
|
layui.each(vers, function(_, thisVer){ |
||||||
|
var isTrue //是否命中校验
|
||||||
|
,errorText = '' //错误提示文本
|
||||||
|
,isFn = typeof verify[thisVer] === 'function'; |
||||||
|
|
||||||
|
//匹配验证规则
|
||||||
|
if(verify[thisVer]){ |
||||||
|
var isTrue = isFn ? errorText = verify[thisVer](value, item) : !verify[thisVer][0].test(value) |
||||||
|
//是否属于美化替换后的表单元素
|
||||||
|
,isForm2Elem = item.tagName.toLowerCase() === 'select' || /^checkbox|radio$/.test(item.type); |
||||||
|
|
||||||
|
errorText = errorText || verify[thisVer][1]; |
||||||
|
|
||||||
|
if(thisVer === 'required'){ |
||||||
|
errorText = othis.attr('lay-reqText') || errorText; |
||||||
|
} |
||||||
|
|
||||||
|
//如果是必填项或者非空命中校验，则阻止提交，弹出提示
|
||||||
|
if(isTrue){ |
||||||
|
//提示层风格
|
||||||
|
if(verType === 'tips'){ |
||||||
|
layer.tips(errorText, function(){ |
||||||
|
if(typeof othis.attr('lay-ignore') !== 'string'){ |
||||||
|
if(isForm2Elem){ |
||||||
|
return othis.next(); |
||||||
|
} |
||||||
|
} |
||||||
|
return othis; |
||||||
|
}(), {tips: 1}); |
||||||
|
} else if(verType === 'alert') { |
||||||
|
layer.alert(errorText, {title: '提示', shadeClose: true}); |
||||||
|
} |
||||||
|
//如果返回的为字符或数字，则自动弹出默认提示框；否则由 verify 方法中处理提示
|
||||||
|
else if(/\bstring|number\b/.test(typeof errorText)){ |
||||||
|
layer.msg(errorText, {icon: 5, shift: 6}); |
||||||
|
} |
||||||
|
|
||||||
|
//非移动设备自动定位焦点
|
||||||
|
if(!device.mobile){ |
||||||
|
setTimeout(function(){ |
||||||
|
(isForm2Elem ? othis.next().find('input') : item).focus(); |
||||||
|
}, 7); |
||||||
|
} else { //移动设备定位
|
||||||
|
$dom.scrollTop(function(){ |
||||||
|
try { |
||||||
|
return (isForm2Elem ? othis.next() : othis).offset().top - 15 |
||||||
|
} catch(e){ |
||||||
|
return 0; |
||||||
|
} |
||||||
|
}()); |
||||||
|
} |
||||||
|
|
||||||
|
othis.addClass(DANGER); |
||||||
|
return stop = true; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
if(stop) return stop; |
||||||
|
}); |
||||||
|
|
||||||
|
if(stop) return false; |
||||||
|
|
||||||
|
//获取当前表单值
|
||||||
|
field = form.getValue(null, elem); |
||||||
|
|
||||||
|
//返回字段
|
||||||
|
return layui.event.call(this, MOD_NAME, 'submit('+ filter +')', { |
||||||
|
elem: this |
||||||
|
,form: formElem |
||||||
|
,field: field |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//自动完成渲染
|
||||||
|
var form = new Form() |
||||||
|
,$dom = $(document), $win = $(window); |
||||||
|
|
||||||
|
$(function(){ |
||||||
|
form.render(); |
||||||
|
}); |
||||||
|
|
||||||
|
//表单reset重置渲染
|
||||||
|
$dom.on('reset', ELEM, function(){ |
||||||
|
var filter = $(this).attr('lay-filter'); |
||||||
|
setTimeout(function(){ |
||||||
|
form.render(null, filter); |
||||||
|
}, 50); |
||||||
|
}); |
||||||
|
|
||||||
|
//表单提交事件
|
||||||
|
$dom.on('submit', ELEM, submit) |
||||||
|
.on('click', '*[lay-submit]', submit); |
||||||
|
|
||||||
|
exports(MOD_NAME, form); |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,418 @@ |
|||||||
|
|
||||||
|
/*! lay 基础 DOM 操作 | MIT Licensed */ |
||||||
|
|
||||||
|
;!function(window){ //gulp build: lay-header
|
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var MOD_NAME = 'lay' //模块名
|
||||||
|
,document = window.document |
||||||
|
|
||||||
|
//DOM查找
|
||||||
|
,lay = function(selector){ |
||||||
|
return new LAY(selector); |
||||||
|
} |
||||||
|
|
||||||
|
//DOM构造器
|
||||||
|
,LAY = function(selector){ |
||||||
|
var index = 0 |
||||||
|
,nativeDOM = typeof selector === 'object' ? [selector] : ( |
||||||
|
this.selector = selector |
||||||
|
,document.querySelectorAll(selector || null) |
||||||
|
); |
||||||
|
for(; index < nativeDOM.length; index++){ |
||||||
|
this.push(nativeDOM[index]); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
/* |
||||||
|
lay 对象操作 |
||||||
|
*/ |
||||||
|
|
||||||
|
LAY.prototype = []; |
||||||
|
LAY.prototype.constructor = LAY; |
||||||
|
|
||||||
|
//普通对象深度扩展
|
||||||
|
lay.extend = function(){ |
||||||
|
var ai = 1, args = arguments |
||||||
|
,clone = function(target, obj){ |
||||||
|
target = target || (layui._typeof(obj) === 'array' ? [] : {}); //目标对象
|
||||||
|
for(var i in obj){ |
||||||
|
//如果值为普通对象，则进入递归，继续深度合并
|
||||||
|
target[i] = (obj[i] && obj[i].constructor === Object) |
||||||
|
? clone(target[i], obj[i]) |
||||||
|
: obj[i]; |
||||||
|
} |
||||||
|
return target; |
||||||
|
} |
||||||
|
|
||||||
|
args[0] = typeof args[0] === 'object' ? args[0] : {}; |
||||||
|
|
||||||
|
for(; ai < args.length; ai++){ |
||||||
|
if(typeof args[ai] === 'object'){ |
||||||
|
clone(args[0], args[ai]); |
||||||
|
} |
||||||
|
} |
||||||
|
return args[0]; |
||||||
|
}; |
||||||
|
|
||||||
|
//lay 模块版本
|
||||||
|
lay.v = '1.0.8'; |
||||||
|
|
||||||
|
//ie版本
|
||||||
|
lay.ie = function(){ |
||||||
|
var agent = navigator.userAgent.toLowerCase(); |
||||||
|
return (!!window.ActiveXObject || "ActiveXObject" in window) ? ( |
||||||
|
(agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于 ie11 并没有 msie 的标识
|
||||||
|
) : false; |
||||||
|
}(); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/** |
||||||
|
* 获取 layui 常见方法，以便用于组件单独版 |
||||||
|
*/ |
||||||
|
|
||||||
|
lay.layui = layui || {}; |
||||||
|
lay.getPath = layui.cache.dir; //获取当前 JS 所在目录
|
||||||
|
lay.stope = layui.stope; //中止冒泡
|
||||||
|
lay.each = function(){ //遍历
|
||||||
|
layui.each.apply(layui, arguments); |
||||||
|
return this; |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//数字前置补零
|
||||||
|
lay.digit = function(num, length, end){ |
||||||
|
var str = ''; |
||||||
|
num = String(num); |
||||||
|
length = length || 2; |
||||||
|
for(var i = num.length; i < length; i++){ |
||||||
|
str += '0'; |
||||||
|
} |
||||||
|
return num < Math.pow(10, length) ? str + (num|0) : num; |
||||||
|
}; |
||||||
|
|
||||||
|
//创建元素
|
||||||
|
lay.elem = function(elemName, attr){ |
||||||
|
var elem = document.createElement(elemName); |
||||||
|
lay.each(attr || {}, function(key, value){ |
||||||
|
elem.setAttribute(key, value); |
||||||
|
}); |
||||||
|
return elem; |
||||||
|
}; |
||||||
|
|
||||||
|
//当前页面是否存在滚动条
|
||||||
|
lay.hasScrollbar = function(){ |
||||||
|
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight); |
||||||
|
}; |
||||||
|
|
||||||
|
//元素定位
|
||||||
|
lay.position = function(elem, elemView, obj){ |
||||||
|
if(!elemView) return; |
||||||
|
obj = obj || {}; |
||||||
|
|
||||||
|
//如果绑定的是 document 或 body 元素，则直接获取鼠标坐标
|
||||||
|
if(elem === document || elem === lay('body')[0]){ |
||||||
|
obj.clickType = 'right'; |
||||||
|
} |
||||||
|
|
||||||
|
//绑定绑定元素的坐标
|
||||||
|
var rect = obj.clickType === 'right' ? function(){ |
||||||
|
var e = obj.e || window.event || {}; |
||||||
|
return { |
||||||
|
left: e.clientX |
||||||
|
,top: e.clientY |
||||||
|
,right: e.clientX |
||||||
|
,bottom: e.clientY |
||||||
|
} |
||||||
|
}() : elem.getBoundingClientRect() |
||||||
|
,elemWidth = elemView.offsetWidth //控件的宽度
|
||||||
|
,elemHeight = elemView.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; |
||||||
|
|
||||||
|
//相对元素居中
|
||||||
|
if(obj.align === 'center'){ |
||||||
|
left = left - (elemWidth - elem.offsetWidth)/2; |
||||||
|
} else if(obj.align === 'right'){ |
||||||
|
left = left - elemWidth + elem.offsetWidth; |
||||||
|
} |
||||||
|
|
||||||
|
//判断右侧是否超出边界
|
||||||
|
if(left + elemWidth + margin > winArea('width')){ |
||||||
|
left = winArea('width') - elemWidth - margin; //如果超出右侧，则将面板向右靠齐
|
||||||
|
} |
||||||
|
//左侧是否超出边界
|
||||||
|
if(left < margin) left = margin; |
||||||
|
|
||||||
|
//判断底部和顶部是否超出边界
|
||||||
|
if(top + elemHeight + margin > winArea()){ |
||||||
|
//优先顶部是否有足够区域显示完全
|
||||||
|
if(rect.top > elemHeight + margin){ |
||||||
|
top = rect.top - elemHeight - margin*2; //顶部有足够的区域显示
|
||||||
|
} else { |
||||||
|
//如果面板是鼠标右键弹出，且顶部没有足够区域显示，则将面板向底部靠齐
|
||||||
|
if(obj.clickType === 'right'){ |
||||||
|
top = winArea() - elemHeight - margin*2; |
||||||
|
if(top < 0) top = 0; //不能溢出窗口顶部
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//定位类型
|
||||||
|
var position = obj.position; |
||||||
|
if(position) elemView.style.position = position; |
||||||
|
|
||||||
|
//设置坐标
|
||||||
|
elemView.style.left = left + (position === 'fixed' ? 0 : scrollArea(1)) + 'px'; |
||||||
|
elemView.style.top = top + (position === 'fixed' ? 0 : scrollArea()) + 'px'; |
||||||
|
|
||||||
|
//防止页面无滚动条时，又因为弹出面板而出现滚动条导致的坐标计算偏差
|
||||||
|
if(!lay.hasScrollbar()){ |
||||||
|
var rect1 = elemView.getBoundingClientRect(); |
||||||
|
//如果弹出面板的溢出窗口底部，则表示将出现滚动条，此时需要重新计算坐标
|
||||||
|
if(!obj.SYSTEM_RELOAD && (rect1.bottom + margin) > winArea()){ |
||||||
|
obj.SYSTEM_RELOAD = true; |
||||||
|
setTimeout(function(){ |
||||||
|
lay.position(elem, elemView, obj); |
||||||
|
}, 50); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//获取元素上的参数配置上
|
||||||
|
lay.options = function(elem, attr){ |
||||||
|
var othis = lay(elem) |
||||||
|
,attrName = attr || 'lay-options'; |
||||||
|
try { |
||||||
|
return new Function('return '+ (othis.attr(attrName) || '{}'))(); |
||||||
|
} catch(ev) { |
||||||
|
hint.error('parseerror：'+ ev, 'error'); |
||||||
|
return {}; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//元素是否属于顶级元素（document 或 body）
|
||||||
|
lay.isTopElem = function(elem){ |
||||||
|
var topElems = [document, lay('body')[0]] |
||||||
|
,matched = false; |
||||||
|
lay.each(topElems, function(index, item){ |
||||||
|
if(item === elem){ |
||||||
|
return matched = true |
||||||
|
} |
||||||
|
}); |
||||||
|
return matched; |
||||||
|
}; |
||||||
|
|
||||||
|
//追加字符
|
||||||
|
LAY.addStr = function(str, new_str){ |
||||||
|
str = str.replace(/\s+/, ' '); |
||||||
|
new_str = new_str.replace(/\s+/, ' ').split(' '); |
||||||
|
lay.each(new_str, function(ii, item){ |
||||||
|
if(!new RegExp('\\b'+ item + '\\b').test(str)){ |
||||||
|
str = str + ' ' + item; |
||||||
|
} |
||||||
|
}); |
||||||
|
return str.replace(/^\s|\s$/, ''); |
||||||
|
}; |
||||||
|
|
||||||
|
//移除值
|
||||||
|
LAY.removeStr = function(str, new_str){ |
||||||
|
str = str.replace(/\s+/, ' '); |
||||||
|
new_str = new_str.replace(/\s+/, ' ').split(' '); |
||||||
|
lay.each(new_str, function(ii, item){ |
||||||
|
var exp = new RegExp('\\b'+ item + '\\b') |
||||||
|
if(exp.test(str)){ |
||||||
|
str = str.replace(exp, ''); |
||||||
|
} |
||||||
|
}); |
||||||
|
return str.replace(/\s+/, ' ').replace(/^\s|\s$/, ''); |
||||||
|
}; |
||||||
|
|
||||||
|
//查找子元素
|
||||||
|
LAY.prototype.find = function(selector){ |
||||||
|
var that = this; |
||||||
|
var index = 0, arr = [] |
||||||
|
,isObject = typeof selector === 'object'; |
||||||
|
|
||||||
|
this.each(function(i, item){ |
||||||
|
var nativeDOM = isObject ? item.contains(selector) : item.querySelectorAll(selector || null); |
||||||
|
for(; index < nativeDOM.length; index++){ |
||||||
|
arr.push(nativeDOM[index]); |
||||||
|
} |
||||||
|
that.shift(); |
||||||
|
}); |
||||||
|
|
||||||
|
if(!isObject){ |
||||||
|
that.selector = (that.selector ? that.selector + ' ' : '') + selector |
||||||
|
} |
||||||
|
|
||||||
|
lay.each(arr, function(i, item){ |
||||||
|
that.push(item); |
||||||
|
}); |
||||||
|
|
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//DOM遍历
|
||||||
|
LAY.prototype.each = function(fn){ |
||||||
|
return lay.each.call(this, this, fn); |
||||||
|
}; |
||||||
|
|
||||||
|
//添加css类
|
||||||
|
LAY.prototype.addClass = function(className, type){ |
||||||
|
return this.each(function(index, item){ |
||||||
|
item.className = LAY[type ? 'removeStr' : 'addStr'](item.className, className) |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//移除 css 类
|
||||||
|
LAY.prototype.removeClass = function(className){ |
||||||
|
return this.addClass(className, true); |
||||||
|
}; |
||||||
|
|
||||||
|
//是否包含 css 类
|
||||||
|
LAY.prototype.hasClass = function(className){ |
||||||
|
var has = false; |
||||||
|
this.each(function(index, item){ |
||||||
|
if(new RegExp('\\b'+ className +'\\b').test(item.className)){ |
||||||
|
has = true; |
||||||
|
} |
||||||
|
}); |
||||||
|
return has; |
||||||
|
}; |
||||||
|
|
||||||
|
//添加或获取 css style
|
||||||
|
LAY.prototype.css = function(key, value){ |
||||||
|
var that = this |
||||||
|
,parseValue = function(v){ |
||||||
|
return isNaN(v) ? v : (v +'px'); |
||||||
|
}; |
||||||
|
return (typeof key === 'string' && value === undefined) ? function(){ |
||||||
|
if(that.length > 0) return that[0].style[key]; |
||||||
|
}() : that.each(function(index, item){ |
||||||
|
typeof key === 'object' ? lay.each(key, function(thisKey, thisValue){ |
||||||
|
item.style[thisKey] = parseValue(thisValue); |
||||||
|
}) : item.style[key] = parseValue(value); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//添加或获取宽度
|
||||||
|
LAY.prototype.width = function(value){ |
||||||
|
var that = this; |
||||||
|
return value === undefined ? function(){ |
||||||
|
if(that.length > 0) return that[0].offsetWidth; //此处还需做兼容
|
||||||
|
}() : that.each(function(index, item){ |
||||||
|
that.css('width', value); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//添加或获取高度
|
||||||
|
LAY.prototype.height = function(value){ |
||||||
|
var that = this; |
||||||
|
return value === undefined ? function(){ |
||||||
|
if(that.length > 0) return that[0].offsetHeight; //此处还需做兼容
|
||||||
|
}() : that.each(function(index, item){ |
||||||
|
that.css('height', value); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//添加或获取属性
|
||||||
|
LAY.prototype.attr = function(key, value){ |
||||||
|
var that = this; |
||||||
|
return value === undefined ? function(){ |
||||||
|
if(that.length > 0) return that[0].getAttribute(key); |
||||||
|
}() : that.each(function(index, item){ |
||||||
|
item.setAttribute(key, value); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//移除属性
|
||||||
|
LAY.prototype.removeAttr = function(key){ |
||||||
|
return this.each(function(index, item){ |
||||||
|
item.removeAttribute(key); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//设置或获取 HTML 内容
|
||||||
|
LAY.prototype.html = function(html){ |
||||||
|
var that = this; |
||||||
|
return html === undefined ? function(){ |
||||||
|
if(that.length > 0) return that[0].innerHTML; |
||||||
|
}() : this.each(function(index, item){ |
||||||
|
item.innerHTML = html; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//设置或获取值
|
||||||
|
LAY.prototype.val = function(value){ |
||||||
|
var that = this; |
||||||
|
return value === undefined ? function(){ |
||||||
|
if(that.length > 0) return that[0].value; |
||||||
|
}() : this.each(function(index, item){ |
||||||
|
item.value = value; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//追加内容
|
||||||
|
LAY.prototype.append = function(elem){ |
||||||
|
return this.each(function(index, item){ |
||||||
|
typeof elem === 'object' |
||||||
|
? item.appendChild(elem) |
||||||
|
: item.innerHTML = item.innerHTML + elem; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//移除内容
|
||||||
|
LAY.prototype.remove = function(elem){ |
||||||
|
return this.each(function(index, item){ |
||||||
|
elem ? item.removeChild(elem) : item.parentNode.removeChild(item); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//事件绑定
|
||||||
|
LAY.prototype.on = function(eventName, fn){ |
||||||
|
return this.each(function(index, item){ |
||||||
|
item.attachEvent ? item.attachEvent('on' + eventName, function(e){ |
||||||
|
e.target = e.srcElement; |
||||||
|
fn.call(item, e); |
||||||
|
}) : item.addEventListener(eventName, fn, false); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//解除事件
|
||||||
|
LAY.prototype.off = function(eventName, fn){ |
||||||
|
return this.each(function(index, item){ |
||||||
|
item.detachEvent |
||||||
|
? item.detachEvent('on'+ eventName, fn) |
||||||
|
: item.removeEventListener(eventName, fn, false); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//暴露 lay 到全局作用域
|
||||||
|
window.lay = lay; |
||||||
|
|
||||||
|
//如果在 layui 体系中
|
||||||
|
if(window.layui && layui.define){ |
||||||
|
layui.define(function(exports){ //layui 加载
|
||||||
|
exports(MOD_NAME, lay); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
}(window, window.document); |
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,648 @@ |
|||||||
|
/** |
||||||
|
|
||||||
|
@Name：layedit 富文本编辑器 |
||||||
|
@License：MIT |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define(['layer', 'form'], function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.$ |
||||||
|
,layer = layui.layer |
||||||
|
,form = layui.form |
||||||
|
,hint = layui.hint() |
||||||
|
,device = layui.device() |
||||||
|
|
||||||
|
,MOD_NAME = 'layedit', THIS = 'layui-this', SHOW = 'layui-show', ABLED = 'layui-disabled' |
||||||
|
|
||||||
|
,Edit = function(){ |
||||||
|
var that = this; |
||||||
|
that.index = 0; |
||||||
|
|
||||||
|
//全局配置
|
||||||
|
that.config = { |
||||||
|
//默认工具bar
|
||||||
|
tool: [ |
||||||
|
'strong', 'italic', 'underline', 'del' |
||||||
|
,'|' |
||||||
|
,'left', 'center', 'right' |
||||||
|
,'|' |
||||||
|
,'link', 'unlink', 'face', 'image' |
||||||
|
] |
||||||
|
,hideTool: [] |
||||||
|
,height: 280 //默认高
|
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
//全局设置
|
||||||
|
Edit.prototype.set = function(options){ |
||||||
|
var that = this; |
||||||
|
$.extend(true, that.config, options); |
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//事件
|
||||||
|
Edit.prototype.on = function(events, callback){ |
||||||
|
return layui.onevent(MOD_NAME, events, callback); |
||||||
|
}; |
||||||
|
|
||||||
|
//建立编辑器
|
||||||
|
Edit.prototype.build = function(id, settings){ |
||||||
|
settings = settings || {}; |
||||||
|
|
||||||
|
var that = this |
||||||
|
,config = that.config |
||||||
|
,ELEM = 'layui-layedit', textArea = $(typeof(id)=='string'?'#'+id:id) |
||||||
|
,name = 'LAY_layedit_'+ (++that.index) |
||||||
|
,haveBuild = textArea.next('.'+ELEM) |
||||||
|
|
||||||
|
,set = $.extend({}, config, settings) |
||||||
|
|
||||||
|
,tool = function(){ |
||||||
|
var node = [], hideTools = {}; |
||||||
|
layui.each(set.hideTool, function(_, item){ |
||||||
|
hideTools[item] = true; |
||||||
|
}); |
||||||
|
layui.each(set.tool, function(_, item){ |
||||||
|
if(tools[item] && !hideTools[item]){ |
||||||
|
node.push(tools[item]); |
||||||
|
} |
||||||
|
}); |
||||||
|
return node.join(''); |
||||||
|
}() |
||||||
|
|
||||||
|
|
||||||
|
,editor = $(['<div class="'+ ELEM +'">' |
||||||
|
,'<div class="layui-unselect layui-layedit-tool">'+ tool +'</div>' |
||||||
|
,'<div class="layui-layedit-iframe">' |
||||||
|
,'<iframe id="'+ name +'" name="'+ name +'" textarea="'+ id +'" frameborder="0"></iframe>' |
||||||
|
,'</div>' |
||||||
|
,'</div>'].join('')) |
||||||
|
|
||||||
|
//编辑器不兼容ie8以下
|
||||||
|
if(device.ie && device.ie < 8){ |
||||||
|
return textArea.removeClass('layui-hide').addClass(SHOW); |
||||||
|
} |
||||||
|
|
||||||
|
haveBuild[0] && (haveBuild.remove()); |
||||||
|
|
||||||
|
setIframe.call(that, editor, textArea[0], set) |
||||||
|
textArea.addClass('layui-hide').after(editor); |
||||||
|
|
||||||
|
return that.index; |
||||||
|
}; |
||||||
|
|
||||||
|
//获得编辑器中内容
|
||||||
|
Edit.prototype.getContent = function(index){ |
||||||
|
var iframeWin = getWin(index); |
||||||
|
if(!iframeWin[0]) return; |
||||||
|
return toLower(iframeWin[0].document.body.innerHTML); |
||||||
|
}; |
||||||
|
|
||||||
|
//获得编辑器中纯文本内容
|
||||||
|
Edit.prototype.getText = function(index){ |
||||||
|
var iframeWin = getWin(index); |
||||||
|
if(!iframeWin[0]) return; |
||||||
|
return $(iframeWin[0].document.body).text(); |
||||||
|
}; |
||||||
|
/** |
||||||
|
* 设置编辑器内容 |
||||||
|
* @param {[type]} index 编辑器索引 |
||||||
|
* @param {[type]} content 要设置的内容 |
||||||
|
* @param {[type]} flag 是否追加模式 |
||||||
|
*/ |
||||||
|
Edit.prototype.setContent = function(index, content, flag){ |
||||||
|
var iframeWin = getWin(index); |
||||||
|
if(!iframeWin[0]) return; |
||||||
|
if(flag){ |
||||||
|
$(iframeWin[0].document.body).append(content) |
||||||
|
}else{ |
||||||
|
$(iframeWin[0].document.body).html(content) |
||||||
|
}; |
||||||
|
layedit.sync(index) |
||||||
|
}; |
||||||
|
//将编辑器内容同步到textarea（一般用于异步提交时）
|
||||||
|
Edit.prototype.sync = function(index){ |
||||||
|
var iframeWin = getWin(index); |
||||||
|
if(!iframeWin[0]) return; |
||||||
|
var textarea = $('#'+iframeWin[1].attr('textarea')); |
||||||
|
textarea.val(toLower(iframeWin[0].document.body.innerHTML)); |
||||||
|
}; |
||||||
|
|
||||||
|
//获取编辑器选中内容
|
||||||
|
Edit.prototype.getSelection = function(index){ |
||||||
|
var iframeWin = getWin(index); |
||||||
|
if(!iframeWin[0]) return; |
||||||
|
var range = Range(iframeWin[0].document); |
||||||
|
return document.selection ? range.text : range.toString(); |
||||||
|
}; |
||||||
|
|
||||||
|
//iframe初始化
|
||||||
|
var setIframe = function(editor, textArea, set){ |
||||||
|
var that = this, iframe = editor.find('iframe'); |
||||||
|
|
||||||
|
iframe.css({ |
||||||
|
height: set.height |
||||||
|
}).on('load', function(){ |
||||||
|
var conts = iframe.contents() |
||||||
|
,iframeWin = iframe.prop('contentWindow') |
||||||
|
,head = conts.find('head') |
||||||
|
,style = $(['<style>' |
||||||
|
,'*{margin: 0; padding: 0;}' |
||||||
|
,'body{padding: 10px; line-height: 20px; overflow-x: hidden; word-wrap: break-word; font: 14px Helvetica Neue,Helvetica,PingFang SC,Microsoft YaHei,Tahoma,Arial,sans-serif; -webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}' |
||||||
|
,'a{color:#01AAED; text-decoration:none;}a:hover{color:#c00}' |
||||||
|
,'p{margin-bottom: 10px;}' |
||||||
|
,'img{display: inline-block; border: none; vertical-align: middle;}' |
||||||
|
,'pre{margin: 10px 0; padding: 10px; line-height: 20px; border: 1px solid #ddd; border-left-width: 6px; background-color: #F2F2F2; color: #333; font-family: Courier New; font-size: 12px;}' |
||||||
|
,'</style>'].join('')) |
||||||
|
,body = conts.find('body'); |
||||||
|
|
||||||
|
head.append(style); |
||||||
|
body.attr('contenteditable', 'true').css({ |
||||||
|
'min-height': set.height |
||||||
|
}).html(textArea.value||''); |
||||||
|
|
||||||
|
hotkey.apply(that, [iframeWin, iframe, textArea, set]); //快捷键处理
|
||||||
|
toolActive.call(that, iframeWin, editor, set); //触发工具
|
||||||
|
|
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//获得iframe窗口对象
|
||||||
|
,getWin = function(index){ |
||||||
|
var iframe = $('#LAY_layedit_'+ index) |
||||||
|
,iframeWin = iframe.prop('contentWindow'); |
||||||
|
return [iframeWin, iframe]; |
||||||
|
} |
||||||
|
|
||||||
|
//IE8下将标签处理成小写
|
||||||
|
,toLower = function(html){ |
||||||
|
if(device.ie == 8){ |
||||||
|
html = html.replace(/<.+>/g, function(str){ |
||||||
|
return str.toLowerCase(); |
||||||
|
}); |
||||||
|
} |
||||||
|
return html; |
||||||
|
} |
||||||
|
|
||||||
|
//快捷键处理
|
||||||
|
,hotkey = function(iframeWin, iframe, textArea, set){ |
||||||
|
var iframeDOM = iframeWin.document, body = $(iframeDOM.body); |
||||||
|
body.on('keydown', function(e){ |
||||||
|
var keycode = e.keyCode; |
||||||
|
//处理回车
|
||||||
|
if(keycode === 13){ |
||||||
|
var range = Range(iframeDOM); |
||||||
|
var container = getContainer(range) |
||||||
|
,parentNode = container.parentNode; |
||||||
|
|
||||||
|
if(parentNode.tagName.toLowerCase() === 'pre'){ |
||||||
|
if(e.shiftKey) return |
||||||
|
layer.msg('请暂时用shift+enter'); |
||||||
|
return false; |
||||||
|
} |
||||||
|
iframeDOM.execCommand('formatBlock', false, '<p>'); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//给textarea同步内容
|
||||||
|
$(textArea).parents('form').on('submit', function(){ |
||||||
|
var html = body.html(); |
||||||
|
//IE8下将标签处理成小写
|
||||||
|
if(device.ie == 8){ |
||||||
|
html = html.replace(/<.+>/g, function(str){ |
||||||
|
return str.toLowerCase(); |
||||||
|
}); |
||||||
|
} |
||||||
|
textArea.value = html; |
||||||
|
}); |
||||||
|
|
||||||
|
//处理粘贴
|
||||||
|
body.on('paste', function(e){ |
||||||
|
iframeDOM.execCommand('formatBlock', false, '<p>'); |
||||||
|
setTimeout(function(){ |
||||||
|
filter.call(iframeWin, body); |
||||||
|
textArea.value = body.html(); |
||||||
|
}, 100); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//标签过滤
|
||||||
|
,filter = function(body){ |
||||||
|
var iframeWin = this |
||||||
|
,iframeDOM = iframeWin.document; |
||||||
|
|
||||||
|
//清除影响版面的css属性
|
||||||
|
body.find('*[style]').each(function(){ |
||||||
|
var textAlign = this.style.textAlign; |
||||||
|
this.removeAttribute('style'); |
||||||
|
$(this).css({ |
||||||
|
'text-align': textAlign || '' |
||||||
|
}) |
||||||
|
}); |
||||||
|
|
||||||
|
//修饰表格
|
||||||
|
body.find('table').addClass('layui-table'); |
||||||
|
|
||||||
|
//移除不安全的标签
|
||||||
|
body.find('script,link').remove(); |
||||||
|
} |
||||||
|
|
||||||
|
//Range对象兼容性处理
|
||||||
|
,Range = function(iframeDOM){ |
||||||
|
return iframeDOM.selection |
||||||
|
? iframeDOM.selection.createRange() |
||||||
|
: iframeDOM.getSelection().getRangeAt(0); |
||||||
|
} |
||||||
|
|
||||||
|
//当前Range对象的endContainer兼容性处理
|
||||||
|
,getContainer = function(range){ |
||||||
|
return range.endContainer || range.parentElement().childNodes[0] |
||||||
|
} |
||||||
|
|
||||||
|
//在选区插入内联元素
|
||||||
|
,insertInline = function(tagName, attr, range){ |
||||||
|
var iframeDOM = this.document |
||||||
|
,elem = document.createElement(tagName) |
||||||
|
for(var key in attr){ |
||||||
|
elem.setAttribute(key, attr[key]); |
||||||
|
} |
||||||
|
elem.removeAttribute('text'); |
||||||
|
|
||||||
|
if(iframeDOM.selection){ //IE
|
||||||
|
var text = range.text || attr.text; |
||||||
|
if(tagName === 'a' && !text) return; |
||||||
|
if(text){ |
||||||
|
elem.innerHTML = text; |
||||||
|
} |
||||||
|
range.pasteHTML($(elem).prop('outerHTML')); |
||||||
|
range.select(); |
||||||
|
} else { //非IE
|
||||||
|
var text = range.toString() || attr.text; |
||||||
|
if(tagName === 'a' && !text) return; |
||||||
|
if(text){ |
||||||
|
elem.innerHTML = text; |
||||||
|
} |
||||||
|
range.deleteContents(); |
||||||
|
range.insertNode(elem); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//工具选中
|
||||||
|
,toolCheck = function(tools, othis){ |
||||||
|
var iframeDOM = this.document |
||||||
|
,CHECK = 'layedit-tool-active' |
||||||
|
,container = getContainer(Range(iframeDOM)) |
||||||
|
,item = function(type){ |
||||||
|
return tools.find('.layedit-tool-'+type) |
||||||
|
} |
||||||
|
|
||||||
|
if(othis){ |
||||||
|
othis[othis.hasClass(CHECK) ? 'removeClass' : 'addClass'](CHECK); |
||||||
|
} |
||||||
|
|
||||||
|
tools.find('>i').removeClass(CHECK); |
||||||
|
item('unlink').addClass(ABLED); |
||||||
|
|
||||||
|
$(container).parents().each(function(){ |
||||||
|
var tagName = this.tagName.toLowerCase() |
||||||
|
,textAlign = this.style.textAlign; |
||||||
|
|
||||||
|
//文字
|
||||||
|
if(tagName === 'b' || tagName === 'strong'){ |
||||||
|
item('b').addClass(CHECK) |
||||||
|
} |
||||||
|
if(tagName === 'i' || tagName === 'em'){ |
||||||
|
item('i').addClass(CHECK) |
||||||
|
} |
||||||
|
if(tagName === 'u'){ |
||||||
|
item('u').addClass(CHECK) |
||||||
|
} |
||||||
|
if(tagName === 'strike'){ |
||||||
|
item('d').addClass(CHECK) |
||||||
|
} |
||||||
|
|
||||||
|
//对齐
|
||||||
|
if(tagName === 'p'){ |
||||||
|
if(textAlign === 'center'){ |
||||||
|
item('center').addClass(CHECK); |
||||||
|
} else if(textAlign === 'right'){ |
||||||
|
item('right').addClass(CHECK); |
||||||
|
} else { |
||||||
|
item('left').addClass(CHECK); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//超链接
|
||||||
|
if(tagName === 'a'){ |
||||||
|
item('link').addClass(CHECK); |
||||||
|
item('unlink').removeClass(ABLED); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//触发工具
|
||||||
|
,toolActive = function(iframeWin, editor, set){ |
||||||
|
var iframeDOM = iframeWin.document |
||||||
|
,body = $(iframeDOM.body) |
||||||
|
,toolEvent = { |
||||||
|
//超链接
|
||||||
|
link: function(range){ |
||||||
|
var container = getContainer(range) |
||||||
|
,parentNode = $(container).parent(); |
||||||
|
|
||||||
|
link.call(body, { |
||||||
|
href: parentNode.attr('href') |
||||||
|
,target: parentNode.attr('target') |
||||||
|
}, function(field){ |
||||||
|
var parent = parentNode[0]; |
||||||
|
if(parent.tagName === 'A'){ |
||||||
|
parent.href = field.url; |
||||||
|
} else { |
||||||
|
insertInline.call(iframeWin, 'a', { |
||||||
|
target: field.target |
||||||
|
,href: field.url |
||||||
|
,text: field.url |
||||||
|
}, range); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
//清除超链接
|
||||||
|
,unlink: function(range){ |
||||||
|
iframeDOM.execCommand('unlink'); |
||||||
|
} |
||||||
|
//表情
|
||||||
|
,face: function(range){ |
||||||
|
face.call(this, function(img){ |
||||||
|
insertInline.call(iframeWin, 'img', { |
||||||
|
src: img.src |
||||||
|
,alt: img.alt |
||||||
|
}, range); |
||||||
|
}); |
||||||
|
} |
||||||
|
//图片
|
||||||
|
,image: function(range){ |
||||||
|
var that = this; |
||||||
|
layui.use('upload', function(upload){ |
||||||
|
var uploadImage = set.uploadImage || {}; |
||||||
|
upload.render({ |
||||||
|
url: uploadImage.url |
||||||
|
,method: uploadImage.type |
||||||
|
,elem: $(that).find('input')[0] |
||||||
|
,done: function(res){ |
||||||
|
if(res.code == 0){ |
||||||
|
res.data = res.data || {}; |
||||||
|
insertInline.call(iframeWin, 'img', { |
||||||
|
src: res.data.src |
||||||
|
,alt: res.data.title |
||||||
|
}, range); |
||||||
|
} else { |
||||||
|
layer.msg(res.msg||'上传失败'); |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
//插入代码
|
||||||
|
,code: function(range){ |
||||||
|
code.call(body, function(pre){ |
||||||
|
insertInline.call(iframeWin, 'pre', { |
||||||
|
text: pre.code |
||||||
|
,'lay-lang': pre.lang |
||||||
|
}, range); |
||||||
|
}); |
||||||
|
} |
||||||
|
//帮助
|
||||||
|
,help: function(){ |
||||||
|
layer.open({ |
||||||
|
type: 2 |
||||||
|
,title: '帮助' |
||||||
|
,area: ['600px', '380px'] |
||||||
|
,shadeClose: true |
||||||
|
,shade: 0.1 |
||||||
|
,skin: 'layui-layer-msg' |
||||||
|
,content: ['', 'no'] |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
,tools = editor.find('.layui-layedit-tool') |
||||||
|
|
||||||
|
,click = function(){ |
||||||
|
var othis = $(this) |
||||||
|
,events = othis.attr('layedit-event') |
||||||
|
,command = othis.attr('lay-command'); |
||||||
|
|
||||||
|
if(othis.hasClass(ABLED)) return; |
||||||
|
|
||||||
|
body.focus(); |
||||||
|
|
||||||
|
var range = Range(iframeDOM) |
||||||
|
,container = range.commonAncestorContainer |
||||||
|
|
||||||
|
if(command){ |
||||||
|
iframeDOM.execCommand(command); |
||||||
|
if(/justifyLeft|justifyCenter|justifyRight/.test(command)){ |
||||||
|
iframeDOM.execCommand('formatBlock', false, '<p>'); |
||||||
|
} |
||||||
|
setTimeout(function(){ |
||||||
|
body.focus(); |
||||||
|
}, 10); |
||||||
|
} else { |
||||||
|
toolEvent[events] && toolEvent[events].call(this, range); |
||||||
|
} |
||||||
|
toolCheck.call(iframeWin, tools, othis); |
||||||
|
} |
||||||
|
|
||||||
|
,isClick = /image/ |
||||||
|
|
||||||
|
tools.find('>i').on('mousedown', function(){ |
||||||
|
var othis = $(this) |
||||||
|
,events = othis.attr('layedit-event'); |
||||||
|
if(isClick.test(events)) return; |
||||||
|
click.call(this) |
||||||
|
}).on('click', function(){ |
||||||
|
var othis = $(this) |
||||||
|
,events = othis.attr('layedit-event'); |
||||||
|
if(!isClick.test(events)) return; |
||||||
|
click.call(this) |
||||||
|
}); |
||||||
|
|
||||||
|
//触发内容区域
|
||||||
|
body.on('click', function(){ |
||||||
|
toolCheck.call(iframeWin, tools); |
||||||
|
layer.close(face.index); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//超链接面板
|
||||||
|
,link = function(options, callback){ |
||||||
|
var body = this, index = layer.open({ |
||||||
|
type: 1 |
||||||
|
,id: 'LAY_layedit_link' |
||||||
|
,area: '350px' |
||||||
|
,shade: 0.05 |
||||||
|
,shadeClose: true |
||||||
|
,moveType: 1 |
||||||
|
,title: '超链接' |
||||||
|
,skin: 'layui-layer-msg' |
||||||
|
,content: ['<ul class="layui-form" style="margin: 15px;">' |
||||||
|
,'<li class="layui-form-item">' |
||||||
|
,'<label class="layui-form-label" style="width: 60px;">URL</label>' |
||||||
|
,'<div class="layui-input-block" style="margin-left: 90px">' |
||||||
|
,'<input name="url" lay-verify="url" value="'+ (options.href||'') +'" autofocus="true" autocomplete="off" class="layui-input">' |
||||||
|
,'</div>' |
||||||
|
,'</li>' |
||||||
|
,'<li class="layui-form-item">' |
||||||
|
,'<label class="layui-form-label" style="width: 60px;">打开方式</label>' |
||||||
|
,'<div class="layui-input-block" style="margin-left: 90px">' |
||||||
|
,'<input type="radio" name="target" value="_self" class="layui-input" title="当前窗口"' |
||||||
|
+ ((options.target==='_self' || !options.target) ? 'checked' : '') +'>' |
||||||
|
,'<input type="radio" name="target" value="_blank" class="layui-input" title="新窗口" ' |
||||||
|
+ (options.target==='_blank' ? 'checked' : '') +'>' |
||||||
|
,'</div>' |
||||||
|
,'</li>' |
||||||
|
,'<li class="layui-form-item" style="text-align: center;">' |
||||||
|
,'<button type="button" lay-submit lay-filter="layedit-link-yes" class="layui-btn"> 确定 </button>' |
||||||
|
,'<button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary"> 取消 </button>' |
||||||
|
,'</li>' |
||||||
|
,'</ul>'].join('') |
||||||
|
,success: function(layero, index){ |
||||||
|
var eventFilter = 'submit(layedit-link-yes)'; |
||||||
|
form.render('radio'); |
||||||
|
layero.find('.layui-btn-primary').on('click', function(){ |
||||||
|
layer.close(index); |
||||||
|
body.focus(); |
||||||
|
}); |
||||||
|
form.on(eventFilter, function(data){ |
||||||
|
layer.close(link.index); |
||||||
|
callback && callback(data.field); |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
link.index = index; |
||||||
|
} |
||||||
|
|
||||||
|
//表情面板
|
||||||
|
,face = function(callback){ |
||||||
|
//表情库
|
||||||
|
var faces = function(){ |
||||||
|
var alt = ["[微笑]", "[嘻嘻]", "[哈哈]", "[可爱]", "[可怜]", "[挖鼻]", "[吃惊]", "[害羞]", "[挤眼]", "[闭嘴]", "[鄙视]", "[爱你]", "[泪]", "[偷笑]", "[亲亲]", "[生病]", "[太开心]", "[白眼]", "[右哼哼]", "[左哼哼]", "[嘘]", "[衰]", "[委屈]", "[吐]", "[哈欠]", "[抱抱]", "[怒]", "[疑问]", "[馋嘴]", "[拜拜]", "[思考]", "[汗]", "[困]", "[睡]", "[钱]", "[失望]", "[酷]", "[色]", "[哼]", "[鼓掌]", "[晕]", "[悲伤]", "[抓狂]", "[黑线]", "[阴险]", "[怒骂]", "[互粉]", "[心]", "[伤心]", "[猪头]", "[熊猫]", "[兔子]", "[ok]", "[耶]", "[good]", "[NO]", "[赞]", "[来]", "[弱]", "[草泥马]", "[神马]", "[囧]", "[浮云]", "[给力]", "[围观]", "[威武]", "[奥特曼]", "[礼物]", "[钟]", "[话筒]", "[蜡烛]", "[蛋糕]"], arr = {}; |
||||||
|
layui.each(alt, function(index, item){ |
||||||
|
arr[item] = layui.cache.dir + 'images/face/'+ index + '.gif'; |
||||||
|
}); |
||||||
|
return arr; |
||||||
|
}(); |
||||||
|
face.hide = face.hide || function(e){ |
||||||
|
if($(e.target).attr('layedit-event') !== 'face'){ |
||||||
|
layer.close(face.index); |
||||||
|
} |
||||||
|
} |
||||||
|
return face.index = layer.tips(function(){ |
||||||
|
var content = []; |
||||||
|
layui.each(faces, function(key, item){ |
||||||
|
content.push('<li title="'+ key +'"><img src="'+ item +'" alt="'+ key +'"></li>'); |
||||||
|
}); |
||||||
|
return '<ul class="layui-clear">' + content.join('') + '</ul>'; |
||||||
|
}(), this, { |
||||||
|
tips: 1 |
||||||
|
,time: 0 |
||||||
|
,skin: 'layui-box layui-util-face' |
||||||
|
,maxWidth: 500 |
||||||
|
,success: function(layero, index){ |
||||||
|
layero.css({ |
||||||
|
marginTop: -4 |
||||||
|
,marginLeft: -10 |
||||||
|
}).find('.layui-clear>li').on('click', function(){ |
||||||
|
callback && callback({ |
||||||
|
src: faces[this.title] |
||||||
|
,alt: this.title |
||||||
|
}); |
||||||
|
layer.close(index); |
||||||
|
}); |
||||||
|
$(document).off('click', face.hide).on('click', face.hide); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//插入代码面板
|
||||||
|
,code = function(callback){ |
||||||
|
var body = this, index = layer.open({ |
||||||
|
type: 1 |
||||||
|
,id: 'LAY_layedit_code' |
||||||
|
,area: '550px' |
||||||
|
,shade: 0.05 |
||||||
|
,shadeClose: true |
||||||
|
,moveType: 1 |
||||||
|
,title: '插入代码' |
||||||
|
,skin: 'layui-layer-msg' |
||||||
|
,content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">' |
||||||
|
,'<li class="layui-form-item">' |
||||||
|
,'<label class="layui-form-label">请选择语言</label>' |
||||||
|
,'<div class="layui-input-block">' |
||||||
|
,'<select name="lang">' |
||||||
|
,'<option value="JavaScript">JavaScript</option>' |
||||||
|
,'<option value="HTML">HTML</option>' |
||||||
|
,'<option value="CSS">CSS</option>' |
||||||
|
,'<option value="Java">Java</option>' |
||||||
|
,'<option value="PHP">PHP</option>' |
||||||
|
,'<option value="C#">C#</option>' |
||||||
|
,'<option value="Python">Python</option>' |
||||||
|
,'<option value="Ruby">Ruby</option>' |
||||||
|
,'<option value="Go">Go</option>' |
||||||
|
,'</select>' |
||||||
|
,'</div>' |
||||||
|
,'</li>' |
||||||
|
,'<li class="layui-form-item layui-form-text">' |
||||||
|
,'<label class="layui-form-label">代码</label>' |
||||||
|
,'<div class="layui-input-block">' |
||||||
|
,'<textarea name="code" lay-verify="required" autofocus="true" class="layui-textarea" style="height: 200px;"></textarea>' |
||||||
|
,'</div>' |
||||||
|
,'</li>' |
||||||
|
,'<li class="layui-form-item" style="text-align: center;">' |
||||||
|
,'<button type="button" lay-submit lay-filter="layedit-code-yes" class="layui-btn"> 确定 </button>' |
||||||
|
,'<button style="margin-left: 20px;" type="button" class="layui-btn layui-btn-primary"> 取消 </button>' |
||||||
|
,'</li>' |
||||||
|
,'</ul>'].join('') |
||||||
|
,success: function(layero, index){ |
||||||
|
var eventFilter = 'submit(layedit-code-yes)'; |
||||||
|
form.render('select'); |
||||||
|
layero.find('.layui-btn-primary').on('click', function(){ |
||||||
|
layer.close(index); |
||||||
|
body.focus(); |
||||||
|
}); |
||||||
|
form.on(eventFilter, function(data){ |
||||||
|
layer.close(code.index); |
||||||
|
callback && callback(data.field); |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
code.index = index; |
||||||
|
} |
||||||
|
|
||||||
|
//全部工具
|
||||||
|
,tools = { |
||||||
|
html: '<i class="layui-icon layedit-tool-html" title="HTML源代码" lay-command="html" layedit-event="html""></i><span class="layedit-tool-mid"></span>' |
||||||
|
,strong: '<i class="layui-icon layedit-tool-b" title="加粗" lay-command="Bold" layedit-event="b""></i>' |
||||||
|
,italic: '<i class="layui-icon layedit-tool-i" title="斜体" lay-command="italic" layedit-event="i""></i>' |
||||||
|
,underline: '<i class="layui-icon layedit-tool-u" title="下划线" lay-command="underline" layedit-event="u""></i>' |
||||||
|
,del: '<i class="layui-icon layedit-tool-d" title="删除线" lay-command="strikeThrough" layedit-event="d""></i>' |
||||||
|
|
||||||
|
,'|': '<span class="layedit-tool-mid"></span>' |
||||||
|
|
||||||
|
,left: '<i class="layui-icon layedit-tool-left" title="左对齐" lay-command="justifyLeft" layedit-event="left""></i>' |
||||||
|
,center: '<i class="layui-icon layedit-tool-center" title="居中对齐" lay-command="justifyCenter" layedit-event="center""></i>' |
||||||
|
,right: '<i class="layui-icon layedit-tool-right" title="右对齐" lay-command="justifyRight" layedit-event="right""></i>' |
||||||
|
,link: '<i class="layui-icon layedit-tool-link" title="插入链接" layedit-event="link""></i>' |
||||||
|
,unlink: '<i class="layui-icon layedit-tool-unlink layui-disabled" title="清除链接" lay-command="unlink" layedit-event="unlink""></i>' |
||||||
|
,face: '<i class="layui-icon layedit-tool-face" title="表情" layedit-event="face""></i>' |
||||||
|
,image: '<i class="layui-icon layedit-tool-image" title="图片" layedit-event="image"><input type="file" name="file"></i>' |
||||||
|
,code: '<i class="layui-icon layedit-tool-code" title="插入代码" layedit-event="code"></i>' |
||||||
|
|
||||||
|
,help: '<i class="layui-icon layedit-tool-help" title="帮助" layedit-event="help"></i>' |
||||||
|
} |
||||||
|
|
||||||
|
,edit = new Edit(); |
||||||
|
|
||||||
|
exports(MOD_NAME, edit); |
||||||
|
}); |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,309 @@ |
|||||||
|
/** |
||||||
|
|
||||||
|
@Name : laypage 分页组件 |
||||||
|
@License：MIT |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define(function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var doc = document |
||||||
|
,id = 'getElementById' |
||||||
|
,tag = 'getElementsByTagName' |
||||||
|
|
||||||
|
//字符常量
|
||||||
|
,MOD_NAME = 'laypage', DISABLED = 'layui-disabled' |
||||||
|
|
||||||
|
//构造器
|
||||||
|
,Class = function(options){ |
||||||
|
var that = this; |
||||||
|
that.config = options || {}; |
||||||
|
that.config.index = ++laypage.index; |
||||||
|
that.render(true); |
||||||
|
}; |
||||||
|
|
||||||
|
//判断传入的容器类型
|
||||||
|
Class.prototype.type = function(){ |
||||||
|
var config = this.config; |
||||||
|
if(typeof config.elem === 'object'){ |
||||||
|
return config.elem.length === undefined ? 2 : 3; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//分页视图
|
||||||
|
Class.prototype.view = function(){ |
||||||
|
var that = this |
||||||
|
,config = that.config |
||||||
|
,groups = config.groups = 'groups' in config ? (config.groups|0) : 5; //连续页码个数
|
||||||
|
|
||||||
|
//排版
|
||||||
|
config.layout = typeof config.layout === 'object' |
||||||
|
? config.layout |
||||||
|
: ['prev', 'page', 'next']; |
||||||
|
|
||||||
|
config.count = config.count|0; //数据总数
|
||||||
|
config.curr = (config.curr|0) || 1; //当前页
|
||||||
|
|
||||||
|
//每页条数的选择项
|
||||||
|
config.limits = typeof config.limits === 'object' |
||||||
|
? config.limits |
||||||
|
: [10, 20, 30, 40, 50]; |
||||||
|
config.limit = (config.limit|0) || 10; //默认条数
|
||||||
|
|
||||||
|
//总页数
|
||||||
|
config.pages = Math.ceil(config.count/config.limit) || 1; |
||||||
|
|
||||||
|
//当前页不能超过总页数
|
||||||
|
if(config.curr > config.pages){ |
||||||
|
config.curr = config.pages; |
||||||
|
} |
||||||
|
|
||||||
|
//连续分页个数不能低于0且不能大于总页数
|
||||||
|
if(groups < 0){ |
||||||
|
groups = 1; |
||||||
|
} else if (groups > config.pages){ |
||||||
|
groups = config.pages; |
||||||
|
} |
||||||
|
|
||||||
|
config.prev = 'prev' in config ? config.prev : '上一页'; //上一页文本
|
||||||
|
config.next = 'next' in config ? config.next : '下一页'; //下一页文本
|
||||||
|
|
||||||
|
//计算当前组
|
||||||
|
var index = config.pages > groups |
||||||
|
? Math.ceil( (config.curr + (groups > 1 ? 1 : 0)) / (groups > 0 ? groups : 1) ) |
||||||
|
: 1 |
||||||
|
|
||||||
|
//视图片段
|
||||||
|
,views = { |
||||||
|
//上一页
|
||||||
|
prev: function(){ |
||||||
|
return config.prev |
||||||
|
? '<a href="javascript:;" class="layui-laypage-prev'+ (config.curr == 1 ? (' ' + DISABLED) : '') +'" data-page="'+ (config.curr - 1) +'">'+ config.prev +'</a>' |
||||||
|
: ''; |
||||||
|
}() |
||||||
|
|
||||||
|
//页码
|
||||||
|
,page: function(){ |
||||||
|
var pager = []; |
||||||
|
|
||||||
|
//数据量为0时，不输出页码
|
||||||
|
if(config.count < 1){ |
||||||
|
return ''; |
||||||
|
} |
||||||
|
|
||||||
|
//首页
|
||||||
|
if(index > 1 && config.first !== false && groups !== 0){ |
||||||
|
pager.push('<a href="javascript:;" class="layui-laypage-first" data-page="1" title="首页">'+ (config.first || 1) +'</a>'); |
||||||
|
} |
||||||
|
|
||||||
|
//计算当前页码组的起始页
|
||||||
|
var halve = Math.floor((groups-1)/2) //页码数等分
|
||||||
|
,start = index > 1 ? config.curr - halve : 1 |
||||||
|
,end = index > 1 ? (function(){ |
||||||
|
var max = config.curr + (groups - halve - 1); |
||||||
|
return max > config.pages ? config.pages : max; |
||||||
|
}()) : groups; |
||||||
|
|
||||||
|
//防止最后一组出现“不规定”的连续页码数
|
||||||
|
if(end - start < groups - 1){ |
||||||
|
start = end - groups + 1; |
||||||
|
} |
||||||
|
|
||||||
|
//输出左分割符
|
||||||
|
if(config.first !== false && start > 2){ |
||||||
|
pager.push('<span class="layui-laypage-spr">…</span>') |
||||||
|
} |
||||||
|
|
||||||
|
//输出连续页码
|
||||||
|
for(; start <= end; start++){ |
||||||
|
if(start === config.curr){ |
||||||
|
//当前页
|
||||||
|
pager.push('<span class="layui-laypage-curr"><em class="layui-laypage-em" '+ (/^#/.test(config.theme) ? 'style="background-color:'+ config.theme +';"' : '') +'></em><em>'+ start +'</em></span>'); |
||||||
|
} else { |
||||||
|
pager.push('<a href="javascript:;" data-page="'+ start +'">'+ start +'</a>'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//输出输出右分隔符 & 末页
|
||||||
|
if(config.pages > groups && config.pages > end && config.last !== false){ |
||||||
|
if(end + 1 < config.pages){ |
||||||
|
pager.push('<span class="layui-laypage-spr">…</span>'); |
||||||
|
} |
||||||
|
if(groups !== 0){ |
||||||
|
pager.push('<a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="'+ config.pages +'">'+ (config.last || config.pages) +'</a>'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return pager.join(''); |
||||||
|
}() |
||||||
|
|
||||||
|
//下一页
|
||||||
|
,next: function(){ |
||||||
|
return config.next |
||||||
|
? '<a href="javascript:;" class="layui-laypage-next'+ (config.curr == config.pages ? (' ' + DISABLED) : '') +'" data-page="'+ (config.curr + 1) +'">'+ config.next +'</a>' |
||||||
|
: ''; |
||||||
|
}() |
||||||
|
|
||||||
|
//数据总数
|
||||||
|
,count: '<span class="layui-laypage-count">共 '+ config.count +' 条</span>' |
||||||
|
|
||||||
|
//每页条数
|
||||||
|
,limit: function(){ |
||||||
|
var options = ['<span class="layui-laypage-limits"><select lay-ignore>']; |
||||||
|
layui.each(config.limits, function(index, item){ |
||||||
|
options.push( |
||||||
|
'<option value="'+ item +'"' |
||||||
|
+(item === config.limit ? 'selected' : '') |
||||||
|
+'>'+ item +' 条/页</option>' |
||||||
|
); |
||||||
|
}); |
||||||
|
return options.join('') +'</select></span>'; |
||||||
|
}() |
||||||
|
|
||||||
|
//刷新当前页
|
||||||
|
,refresh: ['<a href="javascript:;" data-page="'+ config.curr +'" class="layui-laypage-refresh">' |
||||||
|
,'<i class="layui-icon layui-icon-refresh"></i>' |
||||||
|
,'</a>'].join('') |
||||||
|
|
||||||
|
//跳页区域
|
||||||
|
,skip: function(){ |
||||||
|
return ['<span class="layui-laypage-skip">到第' |
||||||
|
,'<input type="text" min="1" value="'+ config.curr +'" class="layui-input">' |
||||||
|
,'页<button type="button" class="layui-laypage-btn">确定</button>' |
||||||
|
,'</span>'].join(''); |
||||||
|
}() |
||||||
|
}; |
||||||
|
|
||||||
|
return ['<div class="layui-box layui-laypage layui-laypage-'+ (config.theme ? ( |
||||||
|
/^#/.test(config.theme) ? 'molv' : config.theme |
||||||
|
) : 'default') +'" id="layui-laypage-'+ config.index +'">' |
||||||
|
,function(){ |
||||||
|
var plate = []; |
||||||
|
layui.each(config.layout, function(index, item){ |
||||||
|
if(views[item]){ |
||||||
|
plate.push(views[item]) |
||||||
|
} |
||||||
|
}); |
||||||
|
return plate.join(''); |
||||||
|
}() |
||||||
|
,'</div>'].join(''); |
||||||
|
}; |
||||||
|
|
||||||
|
//跳页的回调
|
||||||
|
Class.prototype.jump = function(elem, isskip){ |
||||||
|
if(!elem) return; |
||||||
|
var that = this |
||||||
|
,config = that.config |
||||||
|
,childs = elem.children |
||||||
|
,btn = elem[tag]('button')[0] |
||||||
|
,input = elem[tag]('input')[0] |
||||||
|
,select = elem[tag]('select')[0] |
||||||
|
,skip = function(){ |
||||||
|
var curr = input.value.replace(/\s|\D/g, '')|0; |
||||||
|
if(curr){ |
||||||
|
config.curr = curr; |
||||||
|
that.render(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
if(isskip) return skip(); |
||||||
|
|
||||||
|
//页码
|
||||||
|
for(var i = 0, len = childs.length; i < len; i++){ |
||||||
|
if(childs[i].nodeName.toLowerCase() === 'a'){ |
||||||
|
laypage.on(childs[i], 'click', function(){ |
||||||
|
var curr = this.getAttribute('data-page')|0; |
||||||
|
if(curr < 1 || curr > config.pages) return; |
||||||
|
config.curr = curr; |
||||||
|
that.render(); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//条数
|
||||||
|
if(select){ |
||||||
|
laypage.on(select, 'change', function(){ |
||||||
|
var value = this.value; |
||||||
|
if(config.curr*value > config.count){ |
||||||
|
config.curr = Math.ceil(config.count/value); |
||||||
|
} |
||||||
|
config.limit = value; |
||||||
|
that.render(); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//确定
|
||||||
|
if(btn){ |
||||||
|
laypage.on(btn, 'click', function(){ |
||||||
|
skip(); |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//输入页数字控制
|
||||||
|
Class.prototype.skip = function(elem){ |
||||||
|
if(!elem) return; |
||||||
|
var that = this, input = elem[tag]('input')[0]; |
||||||
|
if(!input) return; |
||||||
|
laypage.on(input, 'keyup', function(e){ |
||||||
|
var value = this.value |
||||||
|
,keyCode = e.keyCode; |
||||||
|
if(/^(37|38|39|40)$/.test(keyCode)) return; |
||||||
|
if(/\D/.test(value)){ |
||||||
|
this.value = value.replace(/\D/, ''); |
||||||
|
} |
||||||
|
if(keyCode === 13){ |
||||||
|
that.jump(elem, true) |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//渲染分页
|
||||||
|
Class.prototype.render = function(load){ |
||||||
|
var that = this |
||||||
|
,config = that.config |
||||||
|
,type = that.type() |
||||||
|
,view = that.view(); |
||||||
|
|
||||||
|
if(type === 2){ |
||||||
|
config.elem && (config.elem.innerHTML = view); |
||||||
|
} else if(type === 3){ |
||||||
|
config.elem.html(view); |
||||||
|
} else { |
||||||
|
if(doc[id](config.elem)){ |
||||||
|
doc[id](config.elem).innerHTML = view; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
config.jump && config.jump(config, load); |
||||||
|
|
||||||
|
var elem = doc[id]('layui-laypage-' + config.index); |
||||||
|
that.jump(elem); |
||||||
|
|
||||||
|
if(config.hash && !load){ |
||||||
|
location.hash = '!'+ config.hash +'='+ config.curr; |
||||||
|
} |
||||||
|
|
||||||
|
that.skip(elem); |
||||||
|
}; |
||||||
|
|
||||||
|
//外部接口
|
||||||
|
var laypage = { |
||||||
|
//分页渲染
|
||||||
|
render: function(options){ |
||||||
|
var o = new Class(options); |
||||||
|
return o.index; |
||||||
|
} |
||||||
|
,index: layui.laypage ? (layui.laypage.index + 10000) : 0 |
||||||
|
,on: function(elem, even, fn){ |
||||||
|
elem.attachEvent ? elem.attachEvent('on'+ even, function(e){ //for ie
|
||||||
|
e.target = e.srcElement; |
||||||
|
fn.call(elem, e); |
||||||
|
}) : elem.addEventListener(even, fn, false); |
||||||
|
return this; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
exports(MOD_NAME, laypage); |
||||||
|
}); |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
/** |
||||||
|
|
||||||
|
@Name：layui 移动模块入口 | 构建后则为移动模块集合 |
||||||
|
@License：MIT |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
|
||||||
|
if(!layui['layui.mobile']){ |
||||||
|
layui.config({ |
||||||
|
base: layui.cache.dir + 'lay/modules/mobile/' |
||||||
|
}).extend({ |
||||||
|
'layer-mobile': 'layer-mobile' |
||||||
|
,'zepto': 'zepto' |
||||||
|
,'upload-mobile': 'upload-mobile' |
||||||
|
,'layim-mobile': 'layim-mobile' |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
layui.define([ |
||||||
|
'layer-mobile' |
||||||
|
,'zepto' |
||||||
|
,'layim-mobile' |
||||||
|
], function(exports){ |
||||||
|
exports('mobile', { |
||||||
|
layer: layui['layer-mobile'] //弹层
|
||||||
|
,layim: layui['layim-mobile'] //WebIM
|
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,218 @@ |
|||||||
|
/** |
||||||
|
|
||||||
|
@Title: rate 评分评星组件 |
||||||
|
@License：MIT |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define('jquery',function(exports){ |
||||||
|
"use strict"; |
||||||
|
var $ = layui.jquery |
||||||
|
|
||||||
|
//外部接口
|
||||||
|
,rate = { |
||||||
|
config: {} |
||||||
|
,index: layui.rate ? (layui.rate.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); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//操作当前实例
|
||||||
|
,thisRate = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
return { |
||||||
|
setvalue: function(value){ |
||||||
|
that.setvalue.call(that, value); |
||||||
|
} |
||||||
|
,config: options |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//字符常量
|
||||||
|
,MOD_NAME = 'rate',ELEM_VIEW = 'layui-rate', ICON_RATE = 'layui-icon-rate', ICON_RATE_SOLID = 'layui-icon-rate-solid', ICON_RATE_HALF = 'layui-icon-rate-half' |
||||||
|
|
||||||
|
,ICON_SOLID_HALF = 'layui-icon-rate-solid layui-icon-rate-half', ICON_SOLID_RATE = 'layui-icon-rate-solid layui-icon-rate', ICON_HALF_RATE = 'layui-icon-rate layui-icon-rate-half' |
||||||
|
|
||||||
|
//构造器
|
||||||
|
,Class = function(options){ |
||||||
|
var that = this; |
||||||
|
that.index = ++rate.index; |
||||||
|
that.config = $.extend({}, that.config, rate.config, options); |
||||||
|
that.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
//默认配置
|
||||||
|
Class.prototype.config = { |
||||||
|
length: 5 //初始长度
|
||||||
|
,text: false //是否显示评分等级
|
||||||
|
,readonly: false //是否只读
|
||||||
|
,half: false //是否可以半星
|
||||||
|
,value: 0 //星星选中个数
|
||||||
|
,theme: '' |
||||||
|
}; |
||||||
|
|
||||||
|
//评分渲染
|
||||||
|
Class.prototype.render = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,style = options.theme ? ('style="color: '+ options.theme + ';"') : ''; |
||||||
|
|
||||||
|
options.elem = $(options.elem); |
||||||
|
|
||||||
|
//最大值不能大于总长度
|
||||||
|
if(options.value > options.length){ |
||||||
|
options.value = options.length; |
||||||
|
} |
||||||
|
|
||||||
|
//如果没有选择半星的属性，却给了小数的数值，统一向上或向下取整
|
||||||
|
if(parseInt(options.value) !== options.value){ |
||||||
|
if(!options.half){ |
||||||
|
options.value = (Math.ceil(options.value) - options.value) < 0.5 ? Math.ceil(options.value): Math.floor(options.value) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//组件模板
|
||||||
|
var temp = '<ul class="layui-rate" '+ (options.readonly ? 'readonly' : '') +'>'; |
||||||
|
for(var i = 1;i <= options.length;i++){ |
||||||
|
var item = '<li class="layui-inline"><i class="layui-icon ' |
||||||
|
+ (i>Math.floor(options.value)?ICON_RATE:ICON_RATE_SOLID) |
||||||
|
+ '" '+ style +'></i></li>'; |
||||||
|
|
||||||
|
if(options.half){ |
||||||
|
if(parseInt(options.value) !== options.value){ |
||||||
|
if(i == Math.ceil(options.value)){ |
||||||
|
temp = temp + '<li><i class="layui-icon layui-icon-rate-half" '+ style +'></i></li>'; |
||||||
|
}else{ |
||||||
|
temp = temp + item |
||||||
|
} |
||||||
|
}else{ |
||||||
|
temp = temp + item |
||||||
|
} |
||||||
|
}else{ |
||||||
|
temp = temp +item; |
||||||
|
} |
||||||
|
} |
||||||
|
temp += '</ul>' + (options.text ? ('<span class="layui-inline">'+ options.value + '星') : '') + '</span>'; |
||||||
|
|
||||||
|
//开始插入替代元素
|
||||||
|
var othis = options.elem |
||||||
|
,hasRender = othis.next('.' + ELEM_VIEW); |
||||||
|
|
||||||
|
//生成替代元素
|
||||||
|
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||||
|
|
||||||
|
that.elemTemp = $(temp); |
||||||
|
|
||||||
|
options.span = that.elemTemp.next('span'); |
||||||
|
|
||||||
|
options.setText && options.setText(options.value); |
||||||
|
|
||||||
|
othis.html(that.elemTemp); |
||||||
|
|
||||||
|
othis.addClass("layui-inline"); |
||||||
|
|
||||||
|
//如果不是只读，那么进行触控事件
|
||||||
|
if(!options.readonly) that.action(); |
||||||
|
|
||||||
|
}; |
||||||
|
|
||||||
|
//评分重置
|
||||||
|
Class.prototype.setvalue = function(value){ |
||||||
|
var that = this |
||||||
|
,options = that.config ; |
||||||
|
|
||||||
|
options.value = value ; |
||||||
|
that.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
//li触控事件
|
||||||
|
Class.prototype.action = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,_ul = that.elemTemp |
||||||
|
,wide = _ul.find("i").width(); |
||||||
|
|
||||||
|
_ul.children("li").each(function(index){ |
||||||
|
var ind = index + 1 |
||||||
|
,othis = $(this); |
||||||
|
|
||||||
|
//点击
|
||||||
|
othis.on('click', function(e){ |
||||||
|
//将当前点击li的索引值赋给value
|
||||||
|
options.value = ind; |
||||||
|
if(options.half){ |
||||||
|
//获取鼠标在li上的位置
|
||||||
|
var x = e.pageX - $(this).offset().left; |
||||||
|
if(x <= wide / 2){ |
||||||
|
options.value = options.value - 0.5; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if(options.text) _ul.next("span").text(options.value + "星"); |
||||||
|
|
||||||
|
options.choose && options.choose(options.value); |
||||||
|
options.setText && options.setText(options.value); |
||||||
|
}); |
||||||
|
|
||||||
|
//移入
|
||||||
|
othis.on('mousemove', function(e){ |
||||||
|
_ul.find("i").each(function(){ |
||||||
|
$(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF) |
||||||
|
}); |
||||||
|
_ul.find("i:lt(" + ind + ")").each(function(){ |
||||||
|
$(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE) |
||||||
|
}); |
||||||
|
// 如果设置可选半星，那么判断鼠标相对li的位置
|
||||||
|
if(options.half){ |
||||||
|
var x = e.pageX - $(this).offset().left; |
||||||
|
if(x <= wide / 2){ |
||||||
|
othis.children("i").addClass(ICON_RATE_HALF).removeClass(ICON_RATE_SOLID) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
//移出
|
||||||
|
othis.on('mouseleave', function(){ |
||||||
|
_ul.find("i").each(function(){ |
||||||
|
$(this).addClass(ICON_RATE).removeClass(ICON_SOLID_HALF) |
||||||
|
}); |
||||||
|
_ul.find("i:lt(" + Math.floor(options.value) + ")").each(function(){ |
||||||
|
$(this).addClass(ICON_RATE_SOLID).removeClass(ICON_HALF_RATE) |
||||||
|
}); |
||||||
|
//如果设置可选半星，根据分数判断是否有半星
|
||||||
|
if(options.half){ |
||||||
|
if(parseInt(options.value) !== options.value){ |
||||||
|
_ul.children("li:eq(" + Math.floor(options.value) + ")").children("i").addClass(ICON_RATE_HALF).removeClass(ICON_SOLID_RATE) |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
//事件处理
|
||||||
|
Class.prototype.events = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
}; |
||||||
|
|
||||||
|
//核心入口
|
||||||
|
rate.render = function(options){ |
||||||
|
var inst = new Class(options); |
||||||
|
return thisRate.call(inst); |
||||||
|
}; |
||||||
|
|
||||||
|
exports(MOD_NAME, rate); |
||||||
|
}) |
||||||
@ -0,0 +1,383 @@ |
|||||||
|
/** |
||||||
|
|
||||||
|
@Title: slider 滑块组件 |
||||||
|
@License：MIT |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define('jquery', function(exports){ |
||||||
|
"use strict"; |
||||||
|
var $ = layui.jquery |
||||||
|
|
||||||
|
//外部接口
|
||||||
|
,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 that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
return { |
||||||
|
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' |
||||||
|
|
||||||
|
//构造器
|
||||||
|
,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 //最小值
|
||||||
|
,max: 100 //最大值，默认100
|
||||||
|
,value: 0 //初始值，默认为0
|
||||||
|
,step: 1 //间隔值
|
||||||
|
,showstep: false //间隔点开启
|
||||||
|
,tips: true //文字提示，开启
|
||||||
|
,input: false //输入框，关闭
|
||||||
|
,range: false //范围选择，与输入框不能同时开启，默认关闭
|
||||||
|
,height: 200 //配合 type:"vertical" 使用，默认200px
|
||||||
|
,disabled: false //滑块禁用，默认关闭
|
||||||
|
,theme: '#009688' //主题颜色
|
||||||
|
}; |
||||||
|
|
||||||
|
//滑块渲染
|
||||||
|
Class.prototype.render = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
//间隔值不能小于 1
|
||||||
|
if(options.step < 1) options.step = 1; |
||||||
|
|
||||||
|
//最大值不能小于最小值
|
||||||
|
if(options.max < options.min) options.max = options.min + options.step; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//判断是否开启双滑块
|
||||||
|
if(options.range){ |
||||||
|
options.value = typeof(options.value) == 'object' ? options.value : [options.min, options.value]; |
||||||
|
var minValue = Math.min(options.value[0], options.value[1]) |
||||||
|
,maxValue = Math.max(options.value[0], options.value[1]); |
||||||
|
options.value[0] = minValue > options.min ? minValue : options.min; |
||||||
|
options.value[1] = maxValue > options.min ? maxValue : options.min; |
||||||
|
options.value[0] = options.value[0] > options.max ? options.max : options.value[0]; |
||||||
|
options.value[1] = options.value[1] > options.max ? options.max : options.value[1]; |
||||||
|
|
||||||
|
var scaleFir = Math.floor((options.value[0] - options.min) / (options.max - options.min) * 100) |
||||||
|
,scaleSec = Math.floor((options.value[1] - options.min) / (options.max - options.min) * 100) |
||||||
|
,scale = scaleSec - scaleFir + '%'; |
||||||
|
scaleFir = scaleFir + '%'; |
||||||
|
scaleSec = scaleSec + '%'; |
||||||
|
} else { |
||||||
|
//如果初始值是一个数组，则获取数组的最小值
|
||||||
|
if(typeof options.value == 'object'){ |
||||||
|
options.value = Math.min.apply(null, options.value); |
||||||
|
} |
||||||
|
|
||||||
|
//初始值不能小于最小值且不能大于最大值
|
||||||
|
if(options.value < options.min) options.value = options.min; |
||||||
|
if(options.value > options.max) options.value = options.max; |
||||||
|
|
||||||
|
var scale = Math.floor((options.value - options.min) / (options.max - options.min) * 100) + '%'; |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
//如果禁用，颜色为统一的灰色
|
||||||
|
var theme = options.disabled ? '#c2c2c2' : options.theme; |
||||||
|
|
||||||
|
//滑块
|
||||||
|
var temp = '<div class="layui-slider '+ (options.type === 'vertical' ? 'layui-slider-vertical' : '') +'">'+ (options.tips ? '<div class="layui-slider-tips"></div>' : '') + |
||||||
|
'<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); |
||||||
|
//生成替代元素
|
||||||
|
hasRender[0] && hasRender.remove(); //如果已经渲染，则Rerender
|
||||||
|
that.elemTemp = $(temp); |
||||||
|
|
||||||
|
//把数据缓存到滑块上
|
||||||
|
if(options.range){ |
||||||
|
that.elemTemp.find('.' + SLIDER_WRAP).eq(0).data('value', options.value[0]); |
||||||
|
that.elemTemp.find('.' + SLIDER_WRAP).eq(1).data('value', options.value[1]); |
||||||
|
}else{ |
||||||
|
that.elemTemp.find('.' + SLIDER_WRAP).data('value', options.value); |
||||||
|
}; |
||||||
|
|
||||||
|
//插入替代元素
|
||||||
|
othis.html(that.elemTemp); |
||||||
|
|
||||||
|
//垂直滑块
|
||||||
|
if(options.type === 'vertical'){ |
||||||
|
that.elemTemp.height(options.height + 'px'); |
||||||
|
}; |
||||||
|
|
||||||
|
//显示间断点
|
||||||
|
if(options.showstep){ |
||||||
|
var number = (options.max - options.min) / options.step, item = ''; |
||||||
|
for(var i = 1; i < number + 1; i++) { |
||||||
|
var step = i * 100 / number; |
||||||
|
if(step < 100){ |
||||||
|
item += '<div class="layui-slider-step" style="'+ (options.type === 'vertical' ? 'bottom' : 'left') +':'+ step +'%"></div>' |
||||||
|
} |
||||||
|
}; |
||||||
|
that.elemTemp.append(item); |
||||||
|
}; |
||||||
|
|
||||||
|
//插入输入框
|
||||||
|
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(elemInput); |
||||||
|
othis.find('.' + SLIDER_INPUT_TXT).children('input').val(options.value); |
||||||
|
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.addClass(DISABLED); |
||||||
|
that.elemTemp.find('.' + SLIDER_WRAP_BTN).addClass(DISABLED); |
||||||
|
}; |
||||||
|
|
||||||
|
//划过滑块显示数值
|
||||||
|
that.elemTemp.find('.' + SLIDER_WRAP_BTN).on('mouseover', function(){ |
||||||
|
var sliderWidth = options.type === 'vertical' ? options.height : that.elemTemp[0].offsetWidth |
||||||
|
,sliderWrap = that.elemTemp.find('.' + SLIDER_WRAP) |
||||||
|
,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.type === 'vertical'){ |
||||||
|
that.elemTemp.find('.' + SLIDER_TIPS).css({"bottom":left + '%', "margin-bottom":"20px", "display":"inline-block"}); |
||||||
|
}else{ |
||||||
|
that.elemTemp.find('.' + SLIDER_TIPS).css({"left":left + '%', "display":"inline-block"}); |
||||||
|
}; |
||||||
|
}).on('mouseout', function(){ |
||||||
|
that.elemTemp.find('.' + SLIDER_TIPS).css("display", "none"); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//滑块滑动
|
||||||
|
Class.prototype.slide = function(setValue, value, i){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,sliderAct = that.elemTemp |
||||||
|
,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() |
||||||
|
,step = 100 / ((options.max - options.min) / Math.ceil(options.step)) |
||||||
|
,change = function(offsetValue, index){ |
||||||
|
if(Math.ceil(offsetValue) * step > 100){ |
||||||
|
offsetValue = Math.ceil(offsetValue) * step |
||||||
|
}else{ |
||||||
|
offsetValue = Math.round(offsetValue) * step |
||||||
|
}; |
||||||
|
offsetValue = offsetValue > 100 ? 100: 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.type === 'vertical'){ |
||||||
|
sliderAct.find('.' + SLIDER_TIPS).css({"bottom":offsetValue + '%', "margin-bottom":"20px"}); |
||||||
|
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 + '%'); |
||||||
|
}; |
||||||
|
firLeft = firLeft > 100 ? 100: firLeft; |
||||||
|
secLeft = secLeft > 100 ? 100: secLeft; |
||||||
|
var minLeft = Math.min(firLeft, secLeft) |
||||||
|
,wrapWidth = Math.abs(firLeft - secLeft); |
||||||
|
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); |
||||||
|
inputValue = selfValue; |
||||||
|
sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val(inputValue); |
||||||
|
sliderWrap.eq(index).data('value', selfValue); |
||||||
|
sliderAct.find('.' + SLIDER_TIPS).html(options.setTips ? options.setTips(selfValue) : 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 |
||||||
|
,left = Math.round(oldLeft) * step; |
||||||
|
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){ |
||||||
|
var othis = $(this); |
||||||
|
othis.on('mousedown', function(e){ |
||||||
|
e = e || window.event; |
||||||
|
|
||||||
|
var oldleft = othis.parent()[0].offsetLeft |
||||||
|
,oldx = e.clientX; |
||||||
|
if(options.type === 'vertical'){ |
||||||
|
oldleft = sliderWidth() - othis.parent()[0].offsetTop - sliderWrap.height() |
||||||
|
oldx = e.clientY; |
||||||
|
}; |
||||||
|
|
||||||
|
var move = function(e){ |
||||||
|
e = e || window.event; |
||||||
|
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; |
||||||
|
change(reaLeft, index); |
||||||
|
othis.addClass(ELEM_HOVER); |
||||||
|
sliderAct.find('.' + SLIDER_TIPS).show(); |
||||||
|
e.preventDefault(); |
||||||
|
}; |
||||||
|
|
||||||
|
var up = function(){ |
||||||
|
othis.removeClass(ELEM_HOVER); |
||||||
|
sliderAct.find('.' + SLIDER_TIPS).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.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(options.range){ |
||||||
|
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; |
||||||
|
} |
||||||
|
}else{ |
||||||
|
index = 0; |
||||||
|
}; |
||||||
|
change(reaLeft, index); |
||||||
|
e.preventDefault(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//点击加减输入框
|
||||||
|
sliderTxt.children('.' + SLIDER_INPUT_BTN).children('i').each(function(index){ |
||||||
|
$(this).on('click', function(){ |
||||||
|
inputValue = sliderTxt.children('.' + SLIDER_INPUT_TXT).children('input').val(); |
||||||
|
if(index == 1){ //减
|
||||||
|
inputValue = inputValue - options.step < options.min |
||||||
|
? options.min |
||||||
|
: Number(inputValue) - options.step; |
||||||
|
}else{ |
||||||
|
inputValue = Number(inputValue) + options.step > options.max |
||||||
|
? options.max |
||||||
|
: Number(inputValue) + options.step; |
||||||
|
}; |
||||||
|
var inputScale = (inputValue - options.min) / (options.max - options.min) * 100 / step; |
||||||
|
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(); |
||||||
|
getInputValue.call(this); |
||||||
|
} |
||||||
|
}).on('change', getInputValue); |
||||||
|
}; |
||||||
|
|
||||||
|
//事件处理
|
||||||
|
Class.prototype.events = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
}; |
||||||
|
|
||||||
|
//核心入口
|
||||||
|
slider.render = function(options){ |
||||||
|
var inst = new Class(options); |
||||||
|
return thisSlider.call(inst); |
||||||
|
}; |
||||||
|
|
||||||
|
exports(MOD_NAME, slider); |
||||||
|
}) |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,437 @@ |
|||||||
|
/** |
||||||
|
|
||||||
|
@Name：transfer 穿梭框组件 |
||||||
|
@License：MIT |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define(['laytpl', 'form'], function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.$ |
||||||
|
,laytpl = layui.laytpl |
||||||
|
,form = layui.form |
||||||
|
|
||||||
|
//模块名
|
||||||
|
,MOD_NAME = 'transfer' |
||||||
|
|
||||||
|
//外部接口
|
||||||
|
,transfer = { |
||||||
|
config: {} |
||||||
|
,index: layui[MOD_NAME] ? (layui[MOD_NAME].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); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//操作当前实例
|
||||||
|
,thisModule = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,id = options.id || that.index; |
||||||
|
|
||||||
|
thisModule.that[id] = that; //记录当前实例对象
|
||||||
|
thisModule.config[id] = options; //记录当前实例配置项
|
||||||
|
|
||||||
|
return { |
||||||
|
config: options |
||||||
|
//重置实例
|
||||||
|
,reload: function(options){ |
||||||
|
that.reload.call(that, options); |
||||||
|
} |
||||||
|
//获取右侧数据
|
||||||
|
,getData: function(){ |
||||||
|
return that.getData.call(that); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//获取当前实例配置项
|
||||||
|
,getThisModuleConfig = function(id){ |
||||||
|
var config = thisModule.config[id]; |
||||||
|
if(!config) hint.error('The ID option was not found in the '+ MOD_NAME +' instance'); |
||||||
|
return config || null; |
||||||
|
} |
||||||
|
|
||||||
|
//字符常量
|
||||||
|
,ELEM = 'layui-transfer', HIDE = 'layui-hide', DISABLED = 'layui-btn-disabled', NONE = 'layui-none' |
||||||
|
,ELEM_BOX = 'layui-transfer-box', ELEM_HEADER = 'layui-transfer-header', ELEM_SEARCH = 'layui-transfer-search', ELEM_ACTIVE = 'layui-transfer-active', ELEM_DATA = 'layui-transfer-data' |
||||||
|
|
||||||
|
//穿梭框模板
|
||||||
|
,TPL_BOX = function(obj){ |
||||||
|
obj = obj || {}; |
||||||
|
return ['<div class="layui-transfer-box" data-index="'+ obj.index +'">' |
||||||
|
,'<div class="layui-transfer-header">' |
||||||
|
,'<input type="checkbox" name="'+ obj.checkAllName +'" lay-filter="layTransferCheckbox" lay-type="all" lay-skin="primary" title="{{ d.data.title['+ obj.index +'] || \'list'+ (obj.index + 1) +'\' }}">' |
||||||
|
,'</div>' |
||||||
|
,'{{# if(d.data.showSearch){ }}' |
||||||
|
,'<div class="layui-transfer-search">' |
||||||
|
,'<i class="layui-icon layui-icon-search"></i>' |
||||||
|
,'<input type="input" class="layui-input" placeholder="关键词搜索">' |
||||||
|
,'</div>' |
||||||
|
,'{{# } }}' |
||||||
|
,'<ul class="layui-transfer-data"></ul>' |
||||||
|
,'</div>'].join(''); |
||||||
|
} |
||||||
|
|
||||||
|
//主模板
|
||||||
|
,TPL_MAIN = ['<div class="layui-transfer layui-form layui-border-box" lay-filter="LAY-transfer-{{ d.index }}">' |
||||||
|
,TPL_BOX({ |
||||||
|
index: 0 |
||||||
|
,checkAllName: 'layTransferLeftCheckAll' |
||||||
|
}) |
||||||
|
,'<div class="layui-transfer-active">' |
||||||
|
,'<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="0">' |
||||||
|
,'<i class="layui-icon layui-icon-next"></i>' |
||||||
|
,'</button>' |
||||||
|
,'<button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled" data-index="1">' |
||||||
|
,'<i class="layui-icon layui-icon-prev"></i>' |
||||||
|
,'</button>' |
||||||
|
,'</div>' |
||||||
|
,TPL_BOX({ |
||||||
|
index: 1 |
||||||
|
,checkAllName: 'layTransferRightCheckAll' |
||||||
|
}) |
||||||
|
,'</div>'].join('') |
||||||
|
|
||||||
|
//构造器
|
||||||
|
,Class = function(options){ |
||||||
|
var that = this; |
||||||
|
that.index = ++transfer.index; |
||||||
|
that.config = $.extend({}, that.config, transfer.config, options); |
||||||
|
that.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
//默认配置
|
||||||
|
Class.prototype.config = { |
||||||
|
title: ['列表一', '列表二'] |
||||||
|
,width: 200 |
||||||
|
,height: 360 |
||||||
|
,data: [] //数据源
|
||||||
|
,value: [] //选中的数据
|
||||||
|
,showSearch: false //是否开启搜索
|
||||||
|
,id: '' //唯一索引，默认自增 index
|
||||||
|
,text: { |
||||||
|
none: '无数据' |
||||||
|
,searchNone: '无匹配数据' |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//重载实例
|
||||||
|
Class.prototype.reload = function(options){ |
||||||
|
var that = this; |
||||||
|
that.config = $.extend({}, that.config, options); |
||||||
|
that.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
//渲染
|
||||||
|
Class.prototype.render = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
//解析模板
|
||||||
|
var thisElem = that.elem = $(laytpl(TPL_MAIN).render({ |
||||||
|
data: options |
||||||
|
,index: that.index //索引
|
||||||
|
})); |
||||||
|
|
||||||
|
var othis = options.elem = $(options.elem); |
||||||
|
if(!othis[0]) return; |
||||||
|
|
||||||
|
//初始化属性
|
||||||
|
options.data = options.data || []; |
||||||
|
options.value = options.value || []; |
||||||
|
|
||||||
|
//索引
|
||||||
|
that.key = options.id || that.index; |
||||||
|
|
||||||
|
//插入组件结构
|
||||||
|
othis.html(that.elem); |
||||||
|
|
||||||
|
//各级容器
|
||||||
|
that.layBox = that.elem.find('.'+ ELEM_BOX) |
||||||
|
that.layHeader = that.elem.find('.'+ ELEM_HEADER) |
||||||
|
that.laySearch = that.elem.find('.'+ ELEM_SEARCH) |
||||||
|
that.layData = thisElem.find('.'+ ELEM_DATA); |
||||||
|
that.layBtn = thisElem.find('.'+ ELEM_ACTIVE + ' .layui-btn'); |
||||||
|
|
||||||
|
//初始化尺寸
|
||||||
|
that.layBox.css({ |
||||||
|
width: options.width |
||||||
|
,height: options.height |
||||||
|
}); |
||||||
|
that.layData.css({ |
||||||
|
height: function(){ |
||||||
|
return options.height - that.layHeader.outerHeight() - that.laySearch.outerHeight() - 2 |
||||||
|
}() |
||||||
|
}); |
||||||
|
|
||||||
|
that.renderData(); //渲染数据
|
||||||
|
that.events(); //事件
|
||||||
|
}; |
||||||
|
|
||||||
|
//渲染数据
|
||||||
|
Class.prototype.renderData = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
//左右穿梭框差异数据
|
||||||
|
var arr = [{ |
||||||
|
checkName: 'layTransferLeftCheck' |
||||||
|
,views: [] |
||||||
|
}, { |
||||||
|
checkName: 'layTransferRightCheck' |
||||||
|
,views: [] |
||||||
|
}]; |
||||||
|
|
||||||
|
//解析格式
|
||||||
|
that.parseData(function(item){ |
||||||
|
//标注为 selected 的为右边的数据
|
||||||
|
var _index = item.selected ? 1 : 0 |
||||||
|
,listElem = ['<li>' |
||||||
|
,'<input type="checkbox" name="'+ arr[_index].checkName +'" lay-skin="primary" lay-filter="layTransferCheckbox" title="'+ item.title +'"'+ (item.disabled ? ' disabled' : '') + (item.checked ? ' checked' : '') +' value="'+ item.value +'">' |
||||||
|
,'</li>'].join(''); |
||||||
|
arr[_index].views.push(listElem); |
||||||
|
delete item.selected; |
||||||
|
}); |
||||||
|
|
||||||
|
that.layData.eq(0).html(arr[0].views.join('')); |
||||||
|
that.layData.eq(1).html(arr[1].views.join('')); |
||||||
|
|
||||||
|
that.renderCheckBtn(); |
||||||
|
} |
||||||
|
|
||||||
|
//渲染表单
|
||||||
|
Class.prototype.renderForm = function(type){ |
||||||
|
form.render(type, 'LAY-transfer-'+ this.index); |
||||||
|
}; |
||||||
|
|
||||||
|
//同步复选框和按钮状态
|
||||||
|
Class.prototype.renderCheckBtn = function(obj){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
obj = obj || {}; |
||||||
|
|
||||||
|
that.layBox.each(function(_index){ |
||||||
|
var othis = $(this) |
||||||
|
,thisDataElem = othis.find('.'+ ELEM_DATA) |
||||||
|
,allElemCheckbox = othis.find('.'+ ELEM_HEADER).find('input[type="checkbox"]') |
||||||
|
,listElemCheckbox = thisDataElem.find('input[type="checkbox"]'); |
||||||
|
|
||||||
|
//同步复选框和按钮状态
|
||||||
|
var nums = 0 |
||||||
|
,haveChecked = false; |
||||||
|
listElemCheckbox.each(function(){ |
||||||
|
var isHide = $(this).data('hide'); |
||||||
|
if(this.checked || this.disabled || isHide){ |
||||||
|
nums++; |
||||||
|
} |
||||||
|
if(this.checked && !isHide){ |
||||||
|
haveChecked = true; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
allElemCheckbox.prop('checked', haveChecked && nums === listElemCheckbox.length); //全选复选框状态
|
||||||
|
that.layBtn.eq(_index)[haveChecked ? 'removeClass' : 'addClass'](DISABLED); //对应的按钮状态
|
||||||
|
|
||||||
|
//无数据视图
|
||||||
|
if(!obj.stopNone){ |
||||||
|
var isNone = thisDataElem.children('li:not(.'+ HIDE +')').length |
||||||
|
that.noneView(thisDataElem, isNone ? '' : options.text.none); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
that.renderForm('checkbox'); |
||||||
|
}; |
||||||
|
|
||||||
|
//无数据视图
|
||||||
|
Class.prototype.noneView = function(thisDataElem, text){ |
||||||
|
var createNoneElem = $('<p class="layui-none">'+ (text || '') +'</p>'); |
||||||
|
if(thisDataElem.find('.'+ NONE)[0]){ |
||||||
|
thisDataElem.find('.'+ NONE).remove(); |
||||||
|
} |
||||||
|
text.replace(/\s/g, '') && thisDataElem.append(createNoneElem); |
||||||
|
}; |
||||||
|
|
||||||
|
//同步 value 属性值
|
||||||
|
Class.prototype.setValue = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,arr = []; |
||||||
|
that.layBox.eq(1).find('.'+ ELEM_DATA +' input[type="checkbox"]').each(function(){ |
||||||
|
var isHide = $(this).data('hide'); |
||||||
|
isHide || arr.push(this.value); |
||||||
|
}); |
||||||
|
options.value = arr; |
||||||
|
|
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//解析数据
|
||||||
|
Class.prototype.parseData = function(callback){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,newData = []; |
||||||
|
|
||||||
|
layui.each(options.data, function(index, item){ |
||||||
|
//解析格式
|
||||||
|
item = (typeof options.parseData === 'function' |
||||||
|
? options.parseData(item) |
||||||
|
: item) || item; |
||||||
|
|
||||||
|
newData.push(item = $.extend({}, item)) |
||||||
|
|
||||||
|
layui.each(options.value, function(index2, item2){ |
||||||
|
if(item2 == item.value){ |
||||||
|
item.selected = true; |
||||||
|
} |
||||||
|
}); |
||||||
|
callback && callback(item); |
||||||
|
}); |
||||||
|
|
||||||
|
options.data = newData; |
||||||
|
return that; |
||||||
|
}; |
||||||
|
|
||||||
|
//获得右侧面板数据
|
||||||
|
Class.prototype.getData = function(value){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,selectedData = []; |
||||||
|
|
||||||
|
that.setValue(); |
||||||
|
|
||||||
|
layui.each(value || options.value, function(index, item){ |
||||||
|
layui.each(options.data, function(index2, item2){ |
||||||
|
delete item2.selected; |
||||||
|
if(item == item2.value){ |
||||||
|
selectedData.push(item2); |
||||||
|
}; |
||||||
|
}); |
||||||
|
}); |
||||||
|
return selectedData; |
||||||
|
}; |
||||||
|
|
||||||
|
//事件
|
||||||
|
Class.prototype.events = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
//左右复选框
|
||||||
|
that.elem.on('click', 'input[lay-filter="layTransferCheckbox"]+', function(){ |
||||||
|
var thisElemCheckbox = $(this).prev() |
||||||
|
,checked = thisElemCheckbox[0].checked |
||||||
|
,thisDataElem = thisElemCheckbox.parents('.'+ ELEM_BOX).eq(0).find('.'+ ELEM_DATA); |
||||||
|
|
||||||
|
if(thisElemCheckbox[0].disabled) return; |
||||||
|
|
||||||
|
//判断是否全选
|
||||||
|
if(thisElemCheckbox.attr('lay-type') === 'all'){ |
||||||
|
thisDataElem.find('input[type="checkbox"]').each(function(){ |
||||||
|
if(this.disabled) return; |
||||||
|
this.checked = checked; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
that.renderCheckBtn({stopNone: true}); |
||||||
|
}); |
||||||
|
|
||||||
|
//按钮事件
|
||||||
|
that.layBtn.on('click', function(){ |
||||||
|
var othis = $(this) |
||||||
|
,_index = othis.data('index') |
||||||
|
,thisBoxElem = that.layBox.eq(_index) |
||||||
|
,arr = []; |
||||||
|
if(othis.hasClass(DISABLED)) return; |
||||||
|
|
||||||
|
that.layBox.eq(_index).each(function(_index){ |
||||||
|
var othis = $(this) |
||||||
|
,thisDataElem = othis.find('.'+ ELEM_DATA); |
||||||
|
|
||||||
|
thisDataElem.children('li').each(function(){ |
||||||
|
var thisList = $(this) |
||||||
|
,thisElemCheckbox = thisList.find('input[type="checkbox"]') |
||||||
|
,isHide = thisElemCheckbox.data('hide'); |
||||||
|
|
||||||
|
if(thisElemCheckbox[0].checked && !isHide){ |
||||||
|
thisElemCheckbox[0].checked = false; |
||||||
|
thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_DATA).append(thisList.clone()); |
||||||
|
thisList.remove(); |
||||||
|
|
||||||
|
//记录当前穿梭的数据
|
||||||
|
arr.push(thisElemCheckbox[0].value); |
||||||
|
} |
||||||
|
|
||||||
|
that.setValue(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
that.renderCheckBtn(); |
||||||
|
|
||||||
|
//穿梭时，如果另外一个框正在搜索，则触发匹配
|
||||||
|
var siblingInput = thisBoxElem.siblings('.'+ ELEM_BOX).find('.'+ ELEM_SEARCH +' input') |
||||||
|
siblingInput.val() === '' || siblingInput.trigger('keyup'); |
||||||
|
|
||||||
|
//穿梭时的回调
|
||||||
|
options.onchange && options.onchange(that.getData(arr), _index); |
||||||
|
}); |
||||||
|
|
||||||
|
//搜索
|
||||||
|
that.laySearch.find('input').on('keyup', function(){ |
||||||
|
var value = this.value |
||||||
|
,thisDataElem = $(this).parents('.'+ ELEM_SEARCH).eq(0).siblings('.'+ ELEM_DATA) |
||||||
|
,thisListElem = thisDataElem.children('li'); |
||||||
|
|
||||||
|
thisListElem.each(function(){ |
||||||
|
var thisList = $(this) |
||||||
|
,thisElemCheckbox = thisList.find('input[type="checkbox"]') |
||||||
|
,isMatch = thisElemCheckbox[0].title.indexOf(value) !== -1; |
||||||
|
|
||||||
|
thisList[isMatch ? 'removeClass': 'addClass'](HIDE); |
||||||
|
thisElemCheckbox.data('hide', isMatch ? false : true); |
||||||
|
}); |
||||||
|
|
||||||
|
that.renderCheckBtn(); |
||||||
|
|
||||||
|
//无匹配数据视图
|
||||||
|
var isNone = thisListElem.length === thisDataElem.children('li.'+ HIDE).length; |
||||||
|
that.noneView(thisDataElem, isNone ? options.text.searchNone : ''); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//记录所有实例
|
||||||
|
thisModule.that = {}; //记录所有实例对象
|
||||||
|
thisModule.config = {}; //记录所有实例配置项
|
||||||
|
|
||||||
|
//重载实例
|
||||||
|
transfer.reload = function(id, options){ |
||||||
|
var that = thisModule.that[id]; |
||||||
|
that.reload(options); |
||||||
|
|
||||||
|
return thisModule.call(that); |
||||||
|
}; |
||||||
|
|
||||||
|
//获得选中的数据（右侧面板）
|
||||||
|
transfer.getData = function(id){ |
||||||
|
var that = thisModule.that[id]; |
||||||
|
return that.getData(); |
||||||
|
}; |
||||||
|
|
||||||
|
//核心入口
|
||||||
|
transfer.render = function(options){ |
||||||
|
var inst = new Class(options); |
||||||
|
return thisModule.call(inst); |
||||||
|
}; |
||||||
|
|
||||||
|
exports(MOD_NAME, transfer); |
||||||
|
}); |
||||||
@ -0,0 +1,816 @@ |
|||||||
|
/** |
||||||
|
|
||||||
|
@Name：tree 树组件 |
||||||
|
@License：MIT |
||||||
|
|
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define('form', function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.$ |
||||||
|
,form = layui.form |
||||||
|
,layer = layui.layer |
||||||
|
|
||||||
|
//模块名
|
||||||
|
,MOD_NAME = 'tree' |
||||||
|
|
||||||
|
//外部接口
|
||||||
|
,tree = { |
||||||
|
config: {} |
||||||
|
,index: layui[MOD_NAME] ? (layui[MOD_NAME].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); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//操作当前实例
|
||||||
|
,thisModule = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,id = options.id || that.index; |
||||||
|
|
||||||
|
thisModule.that[id] = that; //记录当前实例对象
|
||||||
|
thisModule.config[id] = options; //记录当前实例配置项
|
||||||
|
|
||||||
|
return { |
||||||
|
config: options |
||||||
|
//重置实例
|
||||||
|
,reload: function(options){ |
||||||
|
that.reload.call(that, options); |
||||||
|
} |
||||||
|
,getChecked: function(){ |
||||||
|
return that.getChecked.call(that); |
||||||
|
} |
||||||
|
,setChecked: function(id){//设置值
|
||||||
|
return that.setChecked.call(that, id); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//获取当前实例配置项
|
||||||
|
,getThisModuleConfig = function(id){ |
||||||
|
var config = thisModule.config[id]; |
||||||
|
if(!config) hint.error('The ID option was not found in the '+ MOD_NAME +' instance'); |
||||||
|
return config || null; |
||||||
|
} |
||||||
|
|
||||||
|
//字符常量
|
||||||
|
,SHOW = 'layui-show', HIDE = 'layui-hide', NONE = 'layui-none', DISABLED = 'layui-disabled' |
||||||
|
|
||||||
|
,ELEM_VIEW = 'layui-tree', ELEM_SET = 'layui-tree-set', ICON_CLICK = 'layui-tree-iconClick' |
||||||
|
,ICON_ADD = 'layui-icon-addition', ICON_SUB = 'layui-icon-subtraction', ELEM_ENTRY = 'layui-tree-entry', ELEM_MAIN = 'layui-tree-main', ELEM_TEXT = 'layui-tree-txt', ELEM_PACK = 'layui-tree-pack', ELEM_SPREAD = 'layui-tree-spread' |
||||||
|
,ELEM_LINE_SHORT = 'layui-tree-setLineShort', ELEM_SHOW = 'layui-tree-showLine', ELEM_EXTEND = 'layui-tree-lineExtend' |
||||||
|
|
||||||
|
//构造器
|
||||||
|
,Class = function(options){ |
||||||
|
var that = this; |
||||||
|
that.index = ++tree.index; |
||||||
|
that.config = $.extend({}, that.config, tree.config, options); |
||||||
|
that.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
//默认配置
|
||||||
|
Class.prototype.config = { |
||||||
|
data: [] //数据
|
||||||
|
|
||||||
|
,showCheckbox: false //是否显示复选框
|
||||||
|
,showLine: true //是否开启连接线
|
||||||
|
,accordion: false //是否开启手风琴模式
|
||||||
|
,onlyIconControl: false //是否仅允许节点左侧图标控制展开收缩
|
||||||
|
,isJump: false //是否允许点击节点时弹出新窗口跳转
|
||||||
|
,edit: false //是否开启节点的操作图标
|
||||||
|
|
||||||
|
,text: { |
||||||
|
defaultNodeName: '未命名' //节点默认名称
|
||||||
|
,none: '无数据' //数据为空时的文本提示
|
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//重载实例
|
||||||
|
Class.prototype.reload = function(options){ |
||||||
|
var that = this; |
||||||
|
|
||||||
|
layui.each(options, function(key, item){ |
||||||
|
if(layui._typeof(item) === 'array') delete that.config[key]; |
||||||
|
}); |
||||||
|
|
||||||
|
that.config = $.extend(true, {}, that.config, options); |
||||||
|
that.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
//主体渲染
|
||||||
|
Class.prototype.render = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
that.checkids = []; |
||||||
|
|
||||||
|
var temp = $('<div class="layui-tree'+ (options.showCheckbox ? " layui-form" : "") + (options.showLine ? " layui-tree-line" : "") +'" lay-filter="LAY-tree-'+ that.index +'"></div>'); |
||||||
|
that.tree(temp); |
||||||
|
|
||||||
|
var othis = options.elem = $(options.elem); |
||||||
|
if(!othis[0]) return; |
||||||
|
|
||||||
|
//索引
|
||||||
|
that.key = options.id || that.index; |
||||||
|
|
||||||
|
//插入组件结构
|
||||||
|
that.elem = temp; |
||||||
|
that.elemNone = $('<div class="layui-tree-emptyText">'+ options.text.none +'</div>'); |
||||||
|
othis.html(that.elem); |
||||||
|
|
||||||
|
if(that.elem.find('.layui-tree-set').length == 0){ |
||||||
|
return that.elem.append(that.elemNone); |
||||||
|
}; |
||||||
|
|
||||||
|
//复选框渲染
|
||||||
|
if(options.showCheckbox){ |
||||||
|
that.renderForm('checkbox'); |
||||||
|
}; |
||||||
|
|
||||||
|
that.elem.find('.layui-tree-set').each(function(){ |
||||||
|
var othis = $(this); |
||||||
|
//最外层
|
||||||
|
if(!othis.parent('.layui-tree-pack')[0]){ |
||||||
|
othis.addClass('layui-tree-setHide'); |
||||||
|
}; |
||||||
|
|
||||||
|
//没有下一个节点 上一层父级有延伸线
|
||||||
|
if(!othis.next()[0] && othis.parents('.layui-tree-pack').eq(1).hasClass('layui-tree-lineExtend')){ |
||||||
|
othis.addClass(ELEM_LINE_SHORT); |
||||||
|
}; |
||||||
|
|
||||||
|
//没有下一个节点 外层最后一个
|
||||||
|
if(!othis.next()[0] && !othis.parents('.layui-tree-set').eq(0).next()[0]){ |
||||||
|
othis.addClass(ELEM_LINE_SHORT); |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
that.events(); |
||||||
|
}; |
||||||
|
|
||||||
|
//渲染表单
|
||||||
|
Class.prototype.renderForm = function(type){ |
||||||
|
form.render(type, 'LAY-tree-'+ this.index); |
||||||
|
}; |
||||||
|
|
||||||
|
//节点解析
|
||||||
|
Class.prototype.tree = function(elem, children){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,data = children || options.data; |
||||||
|
|
||||||
|
//遍历数据
|
||||||
|
layui.each(data, function(index, item){ |
||||||
|
var hasChild = item.children && item.children.length > 0 |
||||||
|
,packDiv = $('<div class="layui-tree-pack" '+ (item.spread ? 'style="display: block;"' : '') +'></div>') |
||||||
|
,entryDiv = $(['<div data-id="'+ item.id +'" class="layui-tree-set'+ (item.spread ? " layui-tree-spread" : "") + (item.checked ? " layui-tree-checkedFirst" : "") +'">' |
||||||
|
,'<div class="layui-tree-entry">' |
||||||
|
,'<div class="layui-tree-main">' |
||||||
|
//箭头
|
||||||
|
,function(){ |
||||||
|
if(options.showLine){ |
||||||
|
if(hasChild){ |
||||||
|
return '<span class="layui-tree-iconClick layui-tree-icon"><i class="layui-icon '+ (item.spread ? "layui-icon-subtraction" : "layui-icon-addition") +'"></i></span>'; |
||||||
|
}else{ |
||||||
|
return '<span class="layui-tree-iconClick"><i class="layui-icon layui-icon-file"></i></span>'; |
||||||
|
}; |
||||||
|
}else{ |
||||||
|
return '<span class="layui-tree-iconClick"><i class="layui-tree-iconArrow '+ (hasChild ? "": HIDE) +'"></i></span>'; |
||||||
|
}; |
||||||
|
}() |
||||||
|
|
||||||
|
//复选框
|
||||||
|
,function(){ |
||||||
|
return options.showCheckbox ? '<input type="checkbox" name="'+ (item.field || ('layuiTreeCheck_'+ item.id)) +'" same="layuiTreeCheck" lay-skin="primary" '+ (item.disabled ? "disabled" : "") +' value="'+ item.id +'">' : ''; |
||||||
|
}() |
||||||
|
|
||||||
|
//节点
|
||||||
|
,function(){ |
||||||
|
if(options.isJump && item.href){ |
||||||
|
return '<a href="'+ item.href +'" target="_blank" class="'+ ELEM_TEXT +'">'+ (item.title || item.label || options.text.defaultNodeName) +'</a>'; |
||||||
|
}else{ |
||||||
|
return '<span class="'+ ELEM_TEXT + (item.disabled ? ' '+ DISABLED : '') +'">'+ (item.title || item.label || options.text.defaultNodeName) +'</span>'; |
||||||
|
} |
||||||
|
}() |
||||||
|
,'</div>' |
||||||
|
|
||||||
|
//节点操作图标
|
||||||
|
,function(){ |
||||||
|
if(!options.edit) return ''; |
||||||
|
|
||||||
|
var editIcon = { |
||||||
|
add: '<i class="layui-icon layui-icon-add-1" data-type="add"></i>' |
||||||
|
,update: '<i class="layui-icon layui-icon-edit" data-type="update"></i>' |
||||||
|
,del: '<i class="layui-icon layui-icon-delete" data-type="del"></i>' |
||||||
|
}, arr = ['<div class="layui-btn-group layui-tree-btnGroup">']; |
||||||
|
|
||||||
|
if(options.edit === true){ |
||||||
|
options.edit = ['update', 'del'] |
||||||
|
} |
||||||
|
|
||||||
|
if(typeof options.edit === 'object'){ |
||||||
|
layui.each(options.edit, function(i, val){ |
||||||
|
arr.push(editIcon[val] || '') |
||||||
|
}); |
||||||
|
return arr.join('') + '</div>'; |
||||||
|
} |
||||||
|
}() |
||||||
|
,'</div></div>'].join('')); |
||||||
|
|
||||||
|
//如果有子节点，则递归继续生成树
|
||||||
|
if(hasChild){ |
||||||
|
entryDiv.append(packDiv); |
||||||
|
that.tree(packDiv, item.children); |
||||||
|
}; |
||||||
|
|
||||||
|
elem.append(entryDiv); |
||||||
|
|
||||||
|
//若有前置节点，前置节点加连接线
|
||||||
|
if(entryDiv.prev('.'+ELEM_SET)[0]){ |
||||||
|
entryDiv.prev().children('.layui-tree-pack').addClass('layui-tree-showLine'); |
||||||
|
}; |
||||||
|
|
||||||
|
//若无子节点，则父节点加延伸线
|
||||||
|
if(!hasChild){ |
||||||
|
entryDiv.parent('.layui-tree-pack').addClass('layui-tree-lineExtend'); |
||||||
|
}; |
||||||
|
|
||||||
|
//展开节点操作
|
||||||
|
that.spread(entryDiv, item); |
||||||
|
|
||||||
|
//选择框
|
||||||
|
if(options.showCheckbox){ |
||||||
|
item.checked && that.checkids.push(item.id); |
||||||
|
that.checkClick(entryDiv, item); |
||||||
|
} |
||||||
|
|
||||||
|
//操作节点
|
||||||
|
options.edit && that.operate(entryDiv, item); |
||||||
|
|
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//展开节点
|
||||||
|
Class.prototype.spread = function(elem, item){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,entry = elem.children('.'+ELEM_ENTRY) |
||||||
|
,elemMain = entry.children('.'+ ELEM_MAIN) |
||||||
|
,elemIcon = entry.find('.'+ ICON_CLICK) |
||||||
|
,elemText = entry.find('.'+ ELEM_TEXT) |
||||||
|
,touchOpen = options.onlyIconControl ? elemIcon : elemMain //判断展开通过节点还是箭头图标
|
||||||
|
,state = ''; |
||||||
|
|
||||||
|
//展开收缩
|
||||||
|
touchOpen.on('click', function(e){ |
||||||
|
var packCont = elem.children('.'+ELEM_PACK) |
||||||
|
,iconClick = touchOpen.children('.layui-icon')[0] ? touchOpen.children('.layui-icon') : touchOpen.find('.layui-tree-icon').children('.layui-icon'); |
||||||
|
|
||||||
|
//若没有子节点
|
||||||
|
if(!packCont[0]){ |
||||||
|
state = 'normal'; |
||||||
|
}else{ |
||||||
|
if(elem.hasClass(ELEM_SPREAD)){ |
||||||
|
elem.removeClass(ELEM_SPREAD); |
||||||
|
packCont.slideUp(200); |
||||||
|
iconClick.removeClass(ICON_SUB).addClass(ICON_ADD); |
||||||
|
}else{ |
||||||
|
elem.addClass(ELEM_SPREAD); |
||||||
|
packCont.slideDown(200); |
||||||
|
iconClick.addClass(ICON_SUB).removeClass(ICON_ADD); |
||||||
|
|
||||||
|
//是否手风琴
|
||||||
|
if(options.accordion){ |
||||||
|
var sibls = elem.siblings('.'+ELEM_SET); |
||||||
|
sibls.removeClass(ELEM_SPREAD); |
||||||
|
sibls.children('.'+ELEM_PACK).slideUp(200); |
||||||
|
sibls.find('.layui-tree-icon').children('.layui-icon').removeClass(ICON_SUB).addClass(ICON_ADD); |
||||||
|
}; |
||||||
|
}; |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
//点击回调
|
||||||
|
elemText.on('click', function(){ |
||||||
|
var othis = $(this); |
||||||
|
|
||||||
|
//判断是否禁用状态
|
||||||
|
if(othis.hasClass(DISABLED)) return; |
||||||
|
|
||||||
|
//判断展开收缩状态
|
||||||
|
if(elem.hasClass(ELEM_SPREAD)){ |
||||||
|
state = options.onlyIconControl ? 'open' : 'close'; |
||||||
|
} else { |
||||||
|
state = options.onlyIconControl ? 'close' : 'open'; |
||||||
|
} |
||||||
|
|
||||||
|
//点击产生的回调
|
||||||
|
options.click && options.click({ |
||||||
|
elem: elem |
||||||
|
,state: state |
||||||
|
,data: item |
||||||
|
}); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//计算复选框选中状态
|
||||||
|
Class.prototype.setCheckbox = function(elem, item, elemCheckbox){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,checked = elemCheckbox.prop('checked'); |
||||||
|
|
||||||
|
if(elemCheckbox.prop('disabled')) return; |
||||||
|
|
||||||
|
//同步子节点选中状态
|
||||||
|
if(typeof item.children === 'object' || elem.find('.'+ELEM_PACK)[0]){ |
||||||
|
var childs = elem.find('.'+ ELEM_PACK).find('input[same="layuiTreeCheck"]'); |
||||||
|
childs.each(function(){ |
||||||
|
if(this.disabled) return; //不可点击则跳过
|
||||||
|
this.checked = checked; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//同步父节点选中状态
|
||||||
|
var setParentsChecked = function(thisNodeElem){ |
||||||
|
//若无父节点，则终止递归
|
||||||
|
if(!thisNodeElem.parents('.'+ ELEM_SET)[0]) return; |
||||||
|
|
||||||
|
var state |
||||||
|
,parentPack = thisNodeElem.parent('.'+ ELEM_PACK) |
||||||
|
,parentNodeElem = parentPack.parent() |
||||||
|
,parentCheckbox = parentPack.prev().find('input[same="layuiTreeCheck"]'); |
||||||
|
|
||||||
|
//如果子节点有任意一条选中，则父节点为选中状态
|
||||||
|
if(checked){ |
||||||
|
parentCheckbox.prop('checked', checked); |
||||||
|
} else { //如果当前节点取消选中，则根据计算“兄弟和子孙”节点选中状态，来同步父节点选中状态
|
||||||
|
parentPack.find('input[same="layuiTreeCheck"]').each(function(){ |
||||||
|
if(this.checked){ |
||||||
|
state = true; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//如果兄弟子孙节点全部未选中，则父节点也应为非选中状态
|
||||||
|
state || parentCheckbox.prop('checked', false); |
||||||
|
} |
||||||
|
|
||||||
|
//向父节点递归
|
||||||
|
setParentsChecked(parentNodeElem); |
||||||
|
}; |
||||||
|
|
||||||
|
setParentsChecked(elem); |
||||||
|
|
||||||
|
that.renderForm('checkbox'); |
||||||
|
}; |
||||||
|
|
||||||
|
//复选框选择
|
||||||
|
Class.prototype.checkClick = function(elem, item){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,entry = elem.children('.'+ ELEM_ENTRY) |
||||||
|
,elemMain = entry.children('.'+ ELEM_MAIN); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//点击复选框
|
||||||
|
elemMain.on('click', 'input[same="layuiTreeCheck"]+', function(e){ |
||||||
|
layui.stope(e); //阻止点击节点事件
|
||||||
|
|
||||||
|
var elemCheckbox = $(this).prev() |
||||||
|
,checked = elemCheckbox.prop('checked'); |
||||||
|
|
||||||
|
if(elemCheckbox.prop('disabled')) return; |
||||||
|
|
||||||
|
that.setCheckbox(elem, item, elemCheckbox); |
||||||
|
|
||||||
|
//复选框点击产生的回调
|
||||||
|
options.oncheck && options.oncheck({ |
||||||
|
elem: elem |
||||||
|
,checked: checked |
||||||
|
,data: item |
||||||
|
}); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//节点操作
|
||||||
|
Class.prototype.operate = function(elem, item){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,entry = elem.children('.'+ ELEM_ENTRY) |
||||||
|
,elemMain = entry.children('.'+ ELEM_MAIN); |
||||||
|
|
||||||
|
entry.children('.layui-tree-btnGroup').on('click', '.layui-icon', function(e){ |
||||||
|
layui.stope(e); //阻止节点操作
|
||||||
|
|
||||||
|
var type = $(this).data("type") |
||||||
|
,packCont = elem.children('.'+ELEM_PACK) |
||||||
|
,returnObj = { |
||||||
|
data: item |
||||||
|
,type: type |
||||||
|
,elem:elem |
||||||
|
}; |
||||||
|
//增加
|
||||||
|
if(type == 'add'){ |
||||||
|
//若节点本身无子节点
|
||||||
|
if(!packCont[0]){ |
||||||
|
//若开启连接线，更改图标样式
|
||||||
|
if(options.showLine){ |
||||||
|
elemMain.find('.'+ICON_CLICK).addClass('layui-tree-icon'); |
||||||
|
elemMain.find('.'+ICON_CLICK).children('.layui-icon').addClass(ICON_ADD).removeClass('layui-icon-file'); |
||||||
|
//若未开启连接线，显示箭头
|
||||||
|
}else{ |
||||||
|
elemMain.find('.layui-tree-iconArrow').removeClass(HIDE); |
||||||
|
}; |
||||||
|
//节点添加子节点容器
|
||||||
|
elem.append('<div class="layui-tree-pack"></div>'); |
||||||
|
}; |
||||||
|
|
||||||
|
//新增节点
|
||||||
|
var key = options.operate && options.operate(returnObj) |
||||||
|
,obj = {}; |
||||||
|
obj.title = options.text.defaultNodeName; |
||||||
|
obj.id = key; |
||||||
|
that.tree(elem.children('.'+ELEM_PACK), [obj]); |
||||||
|
|
||||||
|
//放在新增后面，因为要对元素进行操作
|
||||||
|
if(options.showLine){ |
||||||
|
//节点本身无子节点
|
||||||
|
if(!packCont[0]){ |
||||||
|
//遍历兄弟节点，判断兄弟节点是否有子节点
|
||||||
|
var siblings = elem.siblings('.'+ELEM_SET), num = 1 |
||||||
|
,parentPack = elem.parent('.'+ELEM_PACK); |
||||||
|
layui.each(siblings, function(index, i){ |
||||||
|
if(!$(i).children('.'+ELEM_PACK)[0]){ |
||||||
|
num = 0; |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
//若兄弟节点都有子节点
|
||||||
|
if(num == 1){ |
||||||
|
//兄弟节点添加连接线
|
||||||
|
siblings.children('.'+ELEM_PACK).addClass(ELEM_SHOW); |
||||||
|
siblings.children('.'+ELEM_PACK).children('.'+ELEM_SET).removeClass(ELEM_LINE_SHORT); |
||||||
|
elem.children('.'+ELEM_PACK).addClass(ELEM_SHOW); |
||||||
|
//父级移除延伸线
|
||||||
|
parentPack.removeClass(ELEM_EXTEND); |
||||||
|
//同层节点最后一个更改线的状态
|
||||||
|
parentPack.children('.'+ELEM_SET).last().children('.'+ELEM_PACK).children('.'+ELEM_SET).last().addClass(ELEM_LINE_SHORT); |
||||||
|
}else{ |
||||||
|
elem.children('.'+ELEM_PACK).children('.'+ELEM_SET).addClass(ELEM_LINE_SHORT); |
||||||
|
}; |
||||||
|
}else{ |
||||||
|
//添加延伸线
|
||||||
|
if(!packCont.hasClass(ELEM_EXTEND)){ |
||||||
|
packCont.addClass(ELEM_EXTEND); |
||||||
|
}; |
||||||
|
//子节点添加延伸线
|
||||||
|
elem.find('.'+ELEM_PACK).each(function(){ |
||||||
|
$(this).children('.'+ELEM_SET).last().addClass(ELEM_LINE_SHORT); |
||||||
|
}); |
||||||
|
//如果前一个节点有延伸线
|
||||||
|
if(packCont.children('.'+ELEM_SET).last().prev().hasClass(ELEM_LINE_SHORT)){ |
||||||
|
packCont.children('.'+ELEM_SET).last().prev().removeClass(ELEM_LINE_SHORT); |
||||||
|
}else{ |
||||||
|
//若之前的没有，说明处于连接状态
|
||||||
|
packCont.children('.'+ELEM_SET).last().removeClass(ELEM_LINE_SHORT); |
||||||
|
}; |
||||||
|
//若是最外层，要始终保持相连的状态
|
||||||
|
if(!elem.parent('.'+ELEM_PACK)[0] && elem.next()[0]){ |
||||||
|
packCont.children('.'+ELEM_SET).last().removeClass(ELEM_LINE_SHORT); |
||||||
|
}; |
||||||
|
}; |
||||||
|
}; |
||||||
|
if(!options.showCheckbox) return; |
||||||
|
//若开启复选框，同步新增节点状态
|
||||||
|
if(elemMain.find('input[same="layuiTreeCheck"]')[0].checked){ |
||||||
|
var packLast = elem.children('.'+ELEM_PACK).children('.'+ELEM_SET).last(); |
||||||
|
packLast.find('input[same="layuiTreeCheck"]')[0].checked = true; |
||||||
|
}; |
||||||
|
that.renderForm('checkbox'); |
||||||
|
|
||||||
|
//修改
|
||||||
|
}else if(type == 'update'){ |
||||||
|
var text = elemMain.children('.'+ ELEM_TEXT).html(); |
||||||
|
elemMain.children('.'+ ELEM_TEXT).html(''); |
||||||
|
//添加输入框，覆盖在文字上方
|
||||||
|
elemMain.append('<input type="text" class="layui-tree-editInput">'); |
||||||
|
//获取焦点
|
||||||
|
elemMain.children('.layui-tree-editInput').val(text).focus(); |
||||||
|
//嵌入文字移除输入框
|
||||||
|
var getVal = function(input){ |
||||||
|
var textNew = input.val().trim(); |
||||||
|
textNew = textNew ? textNew : options.text.defaultNodeName; |
||||||
|
input.remove(); |
||||||
|
elemMain.children('.'+ ELEM_TEXT).html(textNew); |
||||||
|
|
||||||
|
//同步数据
|
||||||
|
returnObj.data.title = textNew; |
||||||
|
|
||||||
|
//节点修改的回调
|
||||||
|
options.operate && options.operate(returnObj); |
||||||
|
}; |
||||||
|
//失去焦点
|
||||||
|
elemMain.children('.layui-tree-editInput').blur(function(){ |
||||||
|
getVal($(this)); |
||||||
|
}); |
||||||
|
//回车
|
||||||
|
elemMain.children('.layui-tree-editInput').on('keydown', function(e){ |
||||||
|
if(e.keyCode === 13){ |
||||||
|
e.preventDefault(); |
||||||
|
getVal($(this)); |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
//删除
|
||||||
|
} else { |
||||||
|
layer.confirm('确认删除该节点 "<span style="color: #999;">'+ (item.title || '') +'</span>" 吗？', function(index){ |
||||||
|
options.operate && options.operate(returnObj); //节点删除的回调
|
||||||
|
returnObj.status = 'remove'; //标注节点删除
|
||||||
|
|
||||||
|
layer.close(index); |
||||||
|
|
||||||
|
//若删除最后一个，显示空数据提示
|
||||||
|
if(!elem.prev('.'+ELEM_SET)[0] && !elem.next('.'+ELEM_SET)[0] && !elem.parent('.'+ELEM_PACK)[0]){ |
||||||
|
elem.remove(); |
||||||
|
that.elem.append(that.elemNone); |
||||||
|
return; |
||||||
|
}; |
||||||
|
//若有兄弟节点
|
||||||
|
if(elem.siblings('.'+ELEM_SET).children('.'+ELEM_ENTRY)[0]){ |
||||||
|
//若开启复选框
|
||||||
|
if(options.showCheckbox){ |
||||||
|
//若开启复选框，进行下步操作
|
||||||
|
var elemDel = function(elem){ |
||||||
|
//若无父结点，则不执行
|
||||||
|
if(!elem.parents('.'+ELEM_SET)[0]) return; |
||||||
|
var siblingTree = elem.siblings('.'+ELEM_SET).children('.'+ELEM_ENTRY) |
||||||
|
,parentTree = elem.parent('.'+ELEM_PACK).prev() |
||||||
|
,checkState = parentTree.find('input[same="layuiTreeCheck"]')[0] |
||||||
|
,state = 1, num = 0; |
||||||
|
//若父节点未勾选
|
||||||
|
if(checkState.checked == false){ |
||||||
|
//遍历兄弟节点
|
||||||
|
siblingTree.each(function(i, item1){ |
||||||
|
var input = $(item1).find('input[same="layuiTreeCheck"]')[0] |
||||||
|
if(input.checked == false && !input.disabled){ |
||||||
|
state = 0; |
||||||
|
}; |
||||||
|
//判断是否全为不可勾选框
|
||||||
|
if(!input.disabled){ |
||||||
|
num = 1; |
||||||
|
}; |
||||||
|
}); |
||||||
|
//若有可勾选选择框并且已勾选
|
||||||
|
if(state == 1 && num == 1){ |
||||||
|
//勾选父节点
|
||||||
|
checkState.checked = true; |
||||||
|
that.renderForm('checkbox'); |
||||||
|
//向上遍历祖先节点
|
||||||
|
elemDel(parentTree.parent('.'+ELEM_SET)); |
||||||
|
}; |
||||||
|
}; |
||||||
|
}; |
||||||
|
elemDel(elem); |
||||||
|
}; |
||||||
|
//若开启连接线
|
||||||
|
if(options.showLine){ |
||||||
|
//遍历兄弟节点，判断兄弟节点是否有子节点
|
||||||
|
var siblings = elem.siblings('.'+ELEM_SET), num = 1 |
||||||
|
,parentPack = elem.parent('.'+ELEM_PACK); |
||||||
|
layui.each(siblings, function(index, i){ |
||||||
|
if(!$(i).children('.'+ELEM_PACK)[0]){ |
||||||
|
num = 0; |
||||||
|
}; |
||||||
|
}); |
||||||
|
//若兄弟节点都有子节点
|
||||||
|
if(num == 1){ |
||||||
|
//若节点本身无子节点
|
||||||
|
if(!packCont[0]){ |
||||||
|
//父级去除延伸线，因为此时子节点里没有空节点
|
||||||
|
parentPack.removeClass(ELEM_EXTEND); |
||||||
|
siblings.children('.'+ELEM_PACK).addClass(ELEM_SHOW); |
||||||
|
siblings.children('.'+ELEM_PACK).children('.'+ELEM_SET).removeClass(ELEM_LINE_SHORT); |
||||||
|
}; |
||||||
|
//若为最后一个节点
|
||||||
|
if(!elem.next()[0]){ |
||||||
|
elem.prev().children('.'+ELEM_PACK).children('.'+ELEM_SET).last().addClass(ELEM_LINE_SHORT); |
||||||
|
}else{ |
||||||
|
parentPack.children('.'+ELEM_SET).last().children('.'+ELEM_PACK).children('.'+ELEM_SET).last().addClass(ELEM_LINE_SHORT); |
||||||
|
}; |
||||||
|
//若为最外层最后一个节点，去除前一个结点的连接线
|
||||||
|
if(!elem.next()[0] && !elem.parents('.'+ELEM_SET)[1] && !elem.parents('.'+ELEM_SET).eq(0).next()[0]){ |
||||||
|
elem.prev('.'+ELEM_SET).addClass(ELEM_LINE_SHORT); |
||||||
|
}; |
||||||
|
}else{ |
||||||
|
//若为最后一个节点且有延伸线
|
||||||
|
if(!elem.next()[0] && elem.hasClass(ELEM_LINE_SHORT)){ |
||||||
|
elem.prev().addClass(ELEM_LINE_SHORT); |
||||||
|
}; |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
}else{ |
||||||
|
//若无兄弟节点
|
||||||
|
var prevDiv = elem.parent('.'+ELEM_PACK).prev(); |
||||||
|
//若开启了连接线
|
||||||
|
if(options.showLine){ |
||||||
|
prevDiv.find('.'+ICON_CLICK).removeClass('layui-tree-icon'); |
||||||
|
prevDiv.find('.'+ICON_CLICK).children('.layui-icon').removeClass(ICON_SUB).addClass('layui-icon-file'); |
||||||
|
//父节点所在层添加延伸线
|
||||||
|
var pare = prevDiv.parents('.'+ELEM_PACK).eq(0); |
||||||
|
pare.addClass(ELEM_EXTEND); |
||||||
|
|
||||||
|
//兄弟节点最后子节点添加延伸线
|
||||||
|
pare.children('.'+ELEM_SET).each(function(){ |
||||||
|
$(this).children('.'+ELEM_PACK).children('.'+ELEM_SET).last().addClass(ELEM_LINE_SHORT); |
||||||
|
}); |
||||||
|
}else{ |
||||||
|
//父节点隐藏箭头
|
||||||
|
prevDiv.find('.layui-tree-iconArrow').addClass(HIDE); |
||||||
|
}; |
||||||
|
//移除展开属性
|
||||||
|
elem.parents('.'+ELEM_SET).eq(0).removeClass(ELEM_SPREAD); |
||||||
|
//移除节点容器
|
||||||
|
elem.parent('.'+ELEM_PACK).remove(); |
||||||
|
}; |
||||||
|
|
||||||
|
elem.remove(); |
||||||
|
}); |
||||||
|
|
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//部分事件
|
||||||
|
Class.prototype.events = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,checkWarp = that.elem.find('.layui-tree-checkedFirst'); |
||||||
|
|
||||||
|
//初始选中
|
||||||
|
that.setChecked(that.checkids); |
||||||
|
|
||||||
|
//搜索
|
||||||
|
that.elem.find('.layui-tree-search').on('keyup', function(){ |
||||||
|
var input = $(this) |
||||||
|
,val = input.val() |
||||||
|
,pack = input.nextAll() |
||||||
|
,arr = []; |
||||||
|
|
||||||
|
//遍历所有的值
|
||||||
|
pack.find('.'+ ELEM_TEXT).each(function(){ |
||||||
|
var entry = $(this).parents('.'+ELEM_ENTRY); |
||||||
|
//若值匹配，加一个类以作标识
|
||||||
|
if($(this).html().indexOf(val) != -1){ |
||||||
|
arr.push($(this).parent()); |
||||||
|
|
||||||
|
var select = function(div){ |
||||||
|
div.addClass('layui-tree-searchShow'); |
||||||
|
//向上父节点渲染
|
||||||
|
if(div.parent('.'+ELEM_PACK)[0]){ |
||||||
|
select(div.parent('.'+ELEM_PACK).parent('.'+ELEM_SET)); |
||||||
|
}; |
||||||
|
}; |
||||||
|
select(entry.parent('.'+ELEM_SET)); |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
//根据标志剔除
|
||||||
|
pack.find('.'+ELEM_ENTRY).each(function(){ |
||||||
|
var parent = $(this).parent('.'+ELEM_SET); |
||||||
|
if(!parent.hasClass('layui-tree-searchShow')){ |
||||||
|
parent.addClass(HIDE); |
||||||
|
}; |
||||||
|
}); |
||||||
|
if(pack.find('.layui-tree-searchShow').length == 0){ |
||||||
|
that.elem.append(that.elemNone); |
||||||
|
}; |
||||||
|
|
||||||
|
//节点过滤的回调
|
||||||
|
options.onsearch && options.onsearch({ |
||||||
|
elem: arr |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
//还原搜索初始状态
|
||||||
|
that.elem.find('.layui-tree-search').on('keydown', function(){ |
||||||
|
$(this).nextAll().find('.'+ELEM_ENTRY).each(function(){ |
||||||
|
var parent = $(this).parent('.'+ELEM_SET); |
||||||
|
parent.removeClass('layui-tree-searchShow '+ HIDE); |
||||||
|
}); |
||||||
|
if($('.layui-tree-emptyText')[0]) $('.layui-tree-emptyText').remove(); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//得到选中节点
|
||||||
|
Class.prototype.getChecked = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,checkId = [] |
||||||
|
,checkData = []; |
||||||
|
|
||||||
|
//遍历节点找到选中索引
|
||||||
|
that.elem.find('.layui-form-checked').each(function(){ |
||||||
|
checkId.push($(this).prev()[0].value); |
||||||
|
}); |
||||||
|
|
||||||
|
//遍历节点
|
||||||
|
var eachNodes = function(data, checkNode){ |
||||||
|
layui.each(data, function(index, item){ |
||||||
|
layui.each(checkId, function(index2, item2){ |
||||||
|
if(item.id == item2){ |
||||||
|
var cloneItem = $.extend({}, item); |
||||||
|
delete cloneItem.children; |
||||||
|
|
||||||
|
checkNode.push(cloneItem); |
||||||
|
|
||||||
|
if(item.children){ |
||||||
|
cloneItem.children = []; |
||||||
|
eachNodes(item.children, cloneItem.children); |
||||||
|
} |
||||||
|
return true |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
eachNodes($.extend({}, options.data), checkData); |
||||||
|
|
||||||
|
return checkData; |
||||||
|
}; |
||||||
|
|
||||||
|
//设置选中节点
|
||||||
|
Class.prototype.setChecked = function(checkedId){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
//初始选中
|
||||||
|
that.elem.find('.'+ELEM_SET).each(function(i, item){ |
||||||
|
var thisId = $(this).data('id') |
||||||
|
,input = $(item).children('.'+ELEM_ENTRY).find('input[same="layuiTreeCheck"]') |
||||||
|
,reInput = input.next(); |
||||||
|
|
||||||
|
//若返回数字
|
||||||
|
if(typeof checkedId === 'number'){ |
||||||
|
if(thisId == checkedId){ |
||||||
|
if(!input[0].checked){ |
||||||
|
reInput.click(); |
||||||
|
}; |
||||||
|
return false; |
||||||
|
}; |
||||||
|
} |
||||||
|
//若返回数组
|
||||||
|
else if(typeof checkedId === 'object'){ |
||||||
|
layui.each(checkedId, function(index, value){ |
||||||
|
if(value == thisId && !input[0].checked){ |
||||||
|
reInput.click(); |
||||||
|
return true; |
||||||
|
} |
||||||
|
}); |
||||||
|
}; |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//记录所有实例
|
||||||
|
thisModule.that = {}; //记录所有实例对象
|
||||||
|
thisModule.config = {}; //记录所有实例配置项
|
||||||
|
|
||||||
|
//重载实例
|
||||||
|
tree.reload = function(id, options){ |
||||||
|
var that = thisModule.that[id]; |
||||||
|
that.reload(options); |
||||||
|
|
||||||
|
return thisModule.call(that); |
||||||
|
}; |
||||||
|
|
||||||
|
//获得选中的节点数据
|
||||||
|
tree.getChecked = function(id){ |
||||||
|
var that = thisModule.that[id]; |
||||||
|
return that.getChecked(); |
||||||
|
}; |
||||||
|
|
||||||
|
//设置选中节点
|
||||||
|
tree.setChecked = function(id, checkedId){ |
||||||
|
var that = thisModule.that[id]; |
||||||
|
return that.setChecked(checkedId); |
||||||
|
}; |
||||||
|
|
||||||
|
//核心入口
|
||||||
|
tree.render = function(options){ |
||||||
|
var inst = new Class(options); |
||||||
|
return thisModule.call(inst); |
||||||
|
}; |
||||||
|
|
||||||
|
exports(MOD_NAME, tree); |
||||||
|
}) |
||||||
@ -0,0 +1,565 @@ |
|||||||
|
|
||||||
|
/*! |
||||||
|
* upload 文件上传组件 |
||||||
|
* MIT Licensed |
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define('layer' , function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.$ |
||||||
|
,layer = layui.layer |
||||||
|
,hint = layui.hint() |
||||||
|
,device = layui.device() |
||||||
|
|
||||||
|
//外部接口
|
||||||
|
,upload = { |
||||||
|
config: {} //全局配置项
|
||||||
|
|
||||||
|
//设置全局项
|
||||||
|
,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); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//操作当前实例
|
||||||
|
,thisUpload = function(){ |
||||||
|
var that = this; |
||||||
|
return { |
||||||
|
upload: function(files){ |
||||||
|
that.upload.call(that, files); |
||||||
|
} |
||||||
|
,reload: function(options){ |
||||||
|
that.reload.call(that, options); |
||||||
|
} |
||||||
|
,config: that.config |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//字符常量
|
||||||
|
,MOD_NAME = 'upload', ELEM = 'layui-upload', THIS = 'layui-this', SHOW = 'layui-show', HIDE = 'layui-hide', DISABLED = 'layui-disabled' |
||||||
|
|
||||||
|
,ELEM_FILE = 'layui-upload-file', ELEM_FORM = 'layui-upload-form', ELEM_IFRAME = 'layui-upload-iframe', ELEM_CHOOSE = 'layui-upload-choose', ELEM_DRAG = 'layui-upload-drag' |
||||||
|
|
||||||
|
|
||||||
|
//构造器
|
||||||
|
,Class = function(options){ |
||||||
|
var that = this; |
||||||
|
that.config = $.extend({}, that.config, upload.config, options); |
||||||
|
that.render(); |
||||||
|
}; |
||||||
|
|
||||||
|
//默认配置
|
||||||
|
Class.prototype.config = { |
||||||
|
accept: 'images' //允许上传的文件类型：images/file/video/audio
|
||||||
|
,exts: '' //允许上传的文件后缀名
|
||||||
|
,auto: true //是否选完文件后自动上传
|
||||||
|
,bindAction: '' //手动上传触发的元素
|
||||||
|
,url: '' //上传地址
|
||||||
|
,field: 'file' //文件字段名
|
||||||
|
,acceptMime: '' //筛选出的文件类型，默认为所有文件
|
||||||
|
,method: 'post' //请求上传的 http 类型
|
||||||
|
,data: {} //请求上传的额外参数
|
||||||
|
,drag: true //是否允许拖拽上传
|
||||||
|
,size: 0 //文件限制大小，默认不限制
|
||||||
|
,number: 0 //允许同时上传的文件数，默认不限制
|
||||||
|
,multiple: false //是否允许多文件上传，不支持ie8-9
|
||||||
|
}; |
||||||
|
|
||||||
|
//初始渲染
|
||||||
|
Class.prototype.render = function(options){ |
||||||
|
var that = this |
||||||
|
,options = that.config; |
||||||
|
|
||||||
|
options.elem = $(options.elem); |
||||||
|
options.bindAction = $(options.bindAction); |
||||||
|
|
||||||
|
that.file(); |
||||||
|
that.events(); |
||||||
|
}; |
||||||
|
|
||||||
|
//追加文件域
|
||||||
|
Class.prototype.file = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,elemFile = that.elemFile = $([ |
||||||
|
'<input class="'+ ELEM_FILE +'" type="file" accept="'+ options.acceptMime +'" name="'+ options.field +'"' |
||||||
|
,(options.multiple ? ' multiple' : '') |
||||||
|
,'>' |
||||||
|
].join('')) |
||||||
|
,next = options.elem.next(); |
||||||
|
|
||||||
|
if(next.hasClass(ELEM_FILE) || next.hasClass(ELEM_FORM)){ |
||||||
|
next.remove(); |
||||||
|
} |
||||||
|
|
||||||
|
//包裹ie8/9容器
|
||||||
|
if(device.ie && device.ie < 10){ |
||||||
|
options.elem.wrap('<div class="layui-upload-wrap"></div>'); |
||||||
|
} |
||||||
|
|
||||||
|
that.isFile() ? ( |
||||||
|
that.elemFile = options.elem |
||||||
|
,options.field = options.elem[0].name |
||||||
|
) : options.elem.after(elemFile); |
||||||
|
|
||||||
|
//初始化ie8/9的Form域
|
||||||
|
if(device.ie && device.ie < 10){ |
||||||
|
that.initIE(); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//ie8-9初始化
|
||||||
|
Class.prototype.initIE = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,iframe = $('<iframe id="'+ ELEM_IFRAME +'" class="'+ ELEM_IFRAME +'" name="'+ ELEM_IFRAME +'" frameborder="0"></iframe>') |
||||||
|
,elemForm = $(['<form target="'+ ELEM_IFRAME +'" class="'+ ELEM_FORM +'" method="post" key="set-mine" enctype="multipart/form-data" action="'+ options.url +'">' |
||||||
|
,'</form>'].join('')); |
||||||
|
|
||||||
|
//插入iframe
|
||||||
|
$('#'+ ELEM_IFRAME)[0] || $('body').append(iframe); |
||||||
|
|
||||||
|
//包裹文件域
|
||||||
|
if(!options.elem.next().hasClass(ELEM_FORM)){ |
||||||
|
that.elemFile.wrap(elemForm); |
||||||
|
|
||||||
|
//追加额外的参数
|
||||||
|
options.elem.next('.'+ ELEM_FORM).append(function(){ |
||||||
|
var arr = []; |
||||||
|
layui.each(options.data, function(key, value){ |
||||||
|
value = typeof value === 'function' ? value() : value; |
||||||
|
arr.push('<input type="hidden" name="'+ key +'" value="'+ value +'">') |
||||||
|
}); |
||||||
|
return arr.join(''); |
||||||
|
}()); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//异常提示
|
||||||
|
Class.prototype.msg = function(content){ |
||||||
|
return layer.msg(content, { |
||||||
|
icon: 2 |
||||||
|
,shift: 6 |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//判断绑定元素是否为文件域本身
|
||||||
|
Class.prototype.isFile = function(){ |
||||||
|
var elem = this.config.elem[0]; |
||||||
|
if(!elem) return; |
||||||
|
return elem.tagName.toLocaleLowerCase() === 'input' && elem.type === 'file' |
||||||
|
} |
||||||
|
|
||||||
|
//预读图片信息
|
||||||
|
Class.prototype.preview = function(callback){ |
||||||
|
var that = this; |
||||||
|
if(window.FileReader){ |
||||||
|
layui.each(that.chooseFiles, function(index, file){ |
||||||
|
var reader = new FileReader(); |
||||||
|
reader.readAsDataURL(file); |
||||||
|
reader.onload = function(){ |
||||||
|
callback && callback(index, file, this.result); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
//执行上传
|
||||||
|
Class.prototype.upload = function(files, type){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
,elemFile = that.elemFile[0] |
||||||
|
|
||||||
|
//高级浏览器处理方式，支持跨域
|
||||||
|
,ajaxSend = function(){ |
||||||
|
var successful = 0, aborted = 0 |
||||||
|
,items = files || that.files || that.chooseFiles || elemFile.files |
||||||
|
,allDone = function(){ //多文件全部上传完毕的回调
|
||||||
|
if(options.multiple && successful + aborted === that.fileLength){ |
||||||
|
typeof options.allDone === 'function' && options.allDone({ |
||||||
|
total: that.fileLength |
||||||
|
,successful: successful |
||||||
|
,aborted: aborted |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
layui.each(items, function(index, file){ |
||||||
|
var formData = new FormData(); |
||||||
|
|
||||||
|
formData.append(options.field, file); |
||||||
|
|
||||||
|
//追加额外的参数
|
||||||
|
layui.each(options.data, function(key, value){ |
||||||
|
value = typeof value === 'function' ? value() : value; |
||||||
|
formData.append(key, value); |
||||||
|
}); |
||||||
|
|
||||||
|
//提交文件
|
||||||
|
var opts = { |
||||||
|
url: options.url |
||||||
|
,type: 'post' //统一采用 post 上传
|
||||||
|
,data: formData |
||||||
|
,contentType: false |
||||||
|
,processData: false |
||||||
|
,dataType: 'json' |
||||||
|
,headers: options.headers || {} |
||||||
|
//成功回调
|
||||||
|
,success: function(res){ |
||||||
|
successful++; |
||||||
|
done(index, res); |
||||||
|
allDone(); |
||||||
|
} |
||||||
|
//异常回调
|
||||||
|
,error: function(){ |
||||||
|
aborted++; |
||||||
|
that.msg('请求上传接口出现异常'); |
||||||
|
error(index); |
||||||
|
allDone(); |
||||||
|
} |
||||||
|
}; |
||||||
|
//进度条
|
||||||
|
if(typeof options.progress === 'function'){ |
||||||
|
opts.xhr = function(){ |
||||||
|
var xhr = $.ajaxSettings.xhr(); |
||||||
|
//上传进度
|
||||||
|
xhr.upload.addEventListener("progress", function (obj) { |
||||||
|
if(obj.lengthComputable){ |
||||||
|
var percent = Math.floor((obj.loaded/obj.total)* 100); //百分比
|
||||||
|
options.progress(percent, (options.item ? options.item[0] : options.elem[0]) , obj, index); |
||||||
|
} |
||||||
|
}); |
||||||
|
return xhr; |
||||||
|
} |
||||||
|
} |
||||||
|
$.ajax(opts); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//低版本IE处理方式，不支持跨域
|
||||||
|
,iframeSend = function(){ |
||||||
|
var iframe = $('#'+ ELEM_IFRAME); |
||||||
|
|
||||||
|
that.elemFile.parent().submit(); |
||||||
|
|
||||||
|
//获取响应信息
|
||||||
|
clearInterval(Class.timer); |
||||||
|
Class.timer = setInterval(function() { |
||||||
|
var res, iframeBody = iframe.contents().find('body'); |
||||||
|
try { |
||||||
|
res = iframeBody.text(); |
||||||
|
} catch(e) { |
||||||
|
that.msg('获取上传后的响应信息出现异常'); |
||||||
|
clearInterval(Class.timer); |
||||||
|
error(); |
||||||
|
} |
||||||
|
if(res){ |
||||||
|
clearInterval(Class.timer); |
||||||
|
iframeBody.html(''); |
||||||
|
done(0, res); |
||||||
|
} |
||||||
|
}, 30); |
||||||
|
} |
||||||
|
|
||||||
|
//统一回调
|
||||||
|
,done = function(index, res){ |
||||||
|
that.elemFile.next('.'+ ELEM_CHOOSE).remove(); |
||||||
|
elemFile.value = ''; |
||||||
|
if(typeof res !== 'object'){ |
||||||
|
try { |
||||||
|
res = JSON.parse(res); |
||||||
|
} catch(e){ |
||||||
|
res = {}; |
||||||
|
return that.msg('请对上传接口返回有效JSON'); |
||||||
|
} |
||||||
|
} |
||||||
|
typeof options.done === 'function' && options.done(res, index || 0, function(files){ |
||||||
|
that.upload(files); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//统一网络异常回调
|
||||||
|
,error = function(index){ |
||||||
|
if(options.auto){ |
||||||
|
elemFile.value = ''; |
||||||
|
} |
||||||
|
typeof options.error === 'function' && options.error(index || 0, function(files){ |
||||||
|
that.upload(files); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
,exts = options.exts |
||||||
|
,check ,value = function(){ |
||||||
|
var arr = []; |
||||||
|
layui.each(files || that.chooseFiles, function(i, item){ |
||||||
|
arr.push(item.name); |
||||||
|
}); |
||||||
|
return arr; |
||||||
|
}() |
||||||
|
|
||||||
|
//回调返回的参数
|
||||||
|
,args = { |
||||||
|
//预览
|
||||||
|
preview: function(callback){ |
||||||
|
that.preview(callback); |
||||||
|
} |
||||||
|
//上传
|
||||||
|
,upload: function(index, file){ |
||||||
|
var thisFile = {}; |
||||||
|
thisFile[index] = file; |
||||||
|
that.upload(thisFile); |
||||||
|
} |
||||||
|
//追加文件到队列
|
||||||
|
,pushFile: function(){ |
||||||
|
that.files = that.files || {}; |
||||||
|
layui.each(that.chooseFiles, function(index, item){ |
||||||
|
that.files[index] = item; |
||||||
|
}); |
||||||
|
return that.files; |
||||||
|
} |
||||||
|
//重置文件
|
||||||
|
,resetFile: function(index, file, filename){ |
||||||
|
var newFile = new File([file], filename); |
||||||
|
that.files = that.files || {}; |
||||||
|
that.files[index] = newFile; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//提交上传
|
||||||
|
,send = function(){ |
||||||
|
//选择文件的回调
|
||||||
|
if(type === 'choose' || options.auto){ |
||||||
|
options.choose && options.choose(args); |
||||||
|
if(type === 'choose'){ |
||||||
|
return; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//上传前的回调 - 如果回调函数明确返回false，则停止上传(#pulls55)
|
||||||
|
if(options.before && (options.before(args) === false)) return; |
||||||
|
|
||||||
|
//IE兼容处理
|
||||||
|
if(device.ie){ |
||||||
|
return device.ie > 9 ? ajaxSend() : iframeSend(); |
||||||
|
} |
||||||
|
|
||||||
|
ajaxSend(); |
||||||
|
} |
||||||
|
|
||||||
|
//校验文件格式
|
||||||
|
value = value.length === 0 |
||||||
|
? ((elemFile.value.match(/[^\/\\]+\..+/g)||[]) || '') |
||||||
|
: value; |
||||||
|
|
||||||
|
if(value.length === 0) return; |
||||||
|
|
||||||
|
switch(options.accept){ |
||||||
|
case 'file': //一般文件
|
||||||
|
if(exts && !RegExp('\\w\\.('+ exts +')$', 'i').test(escape(value))){ |
||||||
|
that.msg('选择的文件中包含不支持的格式'); |
||||||
|
return elemFile.value = ''; |
||||||
|
} |
||||||
|
break; |
||||||
|
case 'video': //视频文件
|
||||||
|
if(!RegExp('\\w\\.('+ (exts || 'avi|mp4|wma|rmvb|rm|flash|3gp|flv') +')$', 'i').test(escape(value))){ |
||||||
|
that.msg('选择的视频中包含不支持的格式'); |
||||||
|
return elemFile.value = ''; |
||||||
|
} |
||||||
|
break; |
||||||
|
case 'audio': //音频文件
|
||||||
|
if(!RegExp('\\w\\.('+ (exts || 'mp3|wav|mid') +')$', 'i').test(escape(value))){ |
||||||
|
that.msg('选择的音频中包含不支持的格式'); |
||||||
|
return elemFile.value = ''; |
||||||
|
} |
||||||
|
break; |
||||||
|
default: //图片文件
|
||||||
|
layui.each(value, function(i, item){ |
||||||
|
if(!RegExp('\\w\\.('+ (exts || 'jpg|png|gif|bmp|jpeg$') +')', 'i').test(escape(item))){ |
||||||
|
check = true; |
||||||
|
} |
||||||
|
}); |
||||||
|
if(check){ |
||||||
|
that.msg('选择的图片中包含不支持的格式'); |
||||||
|
return elemFile.value = ''; |
||||||
|
} |
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
|
//检验文件数量
|
||||||
|
that.fileLength = function(){ |
||||||
|
var length = 0 |
||||||
|
,items = files || that.files || that.chooseFiles || elemFile.files; |
||||||
|
layui.each(items, function(){ |
||||||
|
length++; |
||||||
|
}); |
||||||
|
return length; |
||||||
|
}(); |
||||||
|
if(options.number && that.fileLength > options.number){ |
||||||
|
return that.msg('同时最多只能上传的数量为：'+ options.number); |
||||||
|
} |
||||||
|
|
||||||
|
//检验文件大小
|
||||||
|
if(options.size > 0 && !(device.ie && device.ie < 10)){ |
||||||
|
var limitSize; |
||||||
|
|
||||||
|
layui.each(that.chooseFiles, function(index, file){ |
||||||
|
if(file.size > 1024*options.size){ |
||||||
|
var size = options.size/1024; |
||||||
|
size = size >= 1 ? (size.toFixed(2) + 'MB') : options.size + 'KB' |
||||||
|
elemFile.value = ''; |
||||||
|
limitSize = size; |
||||||
|
} |
||||||
|
}); |
||||||
|
if(limitSize) return that.msg('文件不能超过'+ limitSize); |
||||||
|
} |
||||||
|
send(); |
||||||
|
}; |
||||||
|
|
||||||
|
//重置方法
|
||||||
|
Class.prototype.reload = function(options){ |
||||||
|
options = options || {}; |
||||||
|
delete options.elem; |
||||||
|
delete options.bindAction; |
||||||
|
|
||||||
|
var that = this |
||||||
|
,options = that.config = $.extend({}, that.config, upload.config, options) |
||||||
|
,next = options.elem.next(); |
||||||
|
|
||||||
|
//更新文件域相关属性
|
||||||
|
next.attr({ |
||||||
|
name: options.name |
||||||
|
,accept: options.acceptMime |
||||||
|
,multiple: options.multiple |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
//事件处理
|
||||||
|
Class.prototype.events = function(){ |
||||||
|
var that = this |
||||||
|
,options = that.config |
||||||
|
|
||||||
|
//设置当前选择的文件队列
|
||||||
|
,setChooseFile = function(files){ |
||||||
|
that.chooseFiles = {}; |
||||||
|
layui.each(files, function(i, item){ |
||||||
|
var time = new Date().getTime(); |
||||||
|
that.chooseFiles[time + '-' + i] = item; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//设置选择的文本
|
||||||
|
,setChooseText = function(files, filename){ |
||||||
|
var elemFile = that.elemFile |
||||||
|
,item = options.item ? options.item : options.elem |
||||||
|
,value = files.length > 1 |
||||||
|
? files.length + '个文件' |
||||||
|
: ((files[0] || {}).name || (elemFile[0].value.match(/[^\/\\]+\..+/g)||[]) || ''); |
||||||
|
|
||||||
|
if(elemFile.next().hasClass(ELEM_CHOOSE)){ |
||||||
|
elemFile.next().remove(); |
||||||
|
} |
||||||
|
that.upload(null, 'choose'); |
||||||
|
if(that.isFile() || options.choose) return; |
||||||
|
elemFile.after('<span class="layui-inline '+ ELEM_CHOOSE +'">'+ value +'</span>'); |
||||||
|
}; |
||||||
|
|
||||||
|
//点击上传容器
|
||||||
|
options.elem.off('upload.start').on('upload.start', function(){ |
||||||
|
var othis = $(this), data = othis.attr('lay-data'); |
||||||
|
|
||||||
|
if(data){ |
||||||
|
try{ |
||||||
|
data = new Function('return '+ data)(); |
||||||
|
that.config = $.extend({}, options, data); |
||||||
|
} catch(e){ |
||||||
|
hint.error('Upload element property lay-data configuration item has a syntax error: ' + data) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
that.config.item = othis; |
||||||
|
that.elemFile[0].click(); |
||||||
|
}); |
||||||
|
|
||||||
|
//拖拽上传
|
||||||
|
if(!(device.ie && device.ie < 10)){ |
||||||
|
options.elem.off('upload.over').on('upload.over', function(){ |
||||||
|
var othis = $(this) |
||||||
|
othis.attr('lay-over', ''); |
||||||
|
}) |
||||||
|
.off('upload.leave').on('upload.leave', function(){ |
||||||
|
var othis = $(this) |
||||||
|
othis.removeAttr('lay-over'); |
||||||
|
}) |
||||||
|
.off('upload.drop').on('upload.drop', function(e, param){ |
||||||
|
var othis = $(this), files = param.originalEvent.dataTransfer.files || []; |
||||||
|
|
||||||
|
othis.removeAttr('lay-over'); |
||||||
|
setChooseFile(files); |
||||||
|
|
||||||
|
if(options.auto){ |
||||||
|
that.upload(files); |
||||||
|
} else { |
||||||
|
setChooseText(files); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//文件选择
|
||||||
|
that.elemFile.off('upload.change').on('upload.change', function(){ |
||||||
|
var files = this.files || []; |
||||||
|
setChooseFile(files); |
||||||
|
options.auto ? that.upload() : setChooseText(files); //是否自动触发上传
|
||||||
|
}); |
||||||
|
|
||||||
|
//手动触发上传
|
||||||
|
options.bindAction.off('upload.action').on('upload.action', function(){ |
||||||
|
that.upload(); |
||||||
|
}); |
||||||
|
|
||||||
|
//防止事件重复绑定
|
||||||
|
if(options.elem.data('haveEvents')) return; |
||||||
|
|
||||||
|
that.elemFile.on('change', function(){ |
||||||
|
$(this).trigger('upload.change'); |
||||||
|
}); |
||||||
|
|
||||||
|
options.elem.on('click', function(){ |
||||||
|
if(that.isFile()) return; |
||||||
|
$(this).trigger('upload.start'); |
||||||
|
}); |
||||||
|
|
||||||
|
if(options.drag){ |
||||||
|
options.elem.on('dragover', function(e){ |
||||||
|
e.preventDefault(); |
||||||
|
$(this).trigger('upload.over'); |
||||||
|
}).on('dragleave', function(e){ |
||||||
|
$(this).trigger('upload.leave'); |
||||||
|
}).on('drop', function(e){ |
||||||
|
e.preventDefault(); |
||||||
|
$(this).trigger('upload.drop', e); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
options.bindAction.on('click', function(){ |
||||||
|
$(this).trigger('upload.action'); |
||||||
|
}); |
||||||
|
|
||||||
|
options.elem.data('haveEvents', true); |
||||||
|
}; |
||||||
|
|
||||||
|
//核心入口
|
||||||
|
upload.render = function(options){ |
||||||
|
var inst = new Class(options); |
||||||
|
return thisUpload.call(inst); |
||||||
|
}; |
||||||
|
|
||||||
|
exports(MOD_NAME, upload); |
||||||
|
}); |
||||||
|
|
||||||
@ -0,0 +1,248 @@ |
|||||||
|
|
||||||
|
/*! |
||||||
|
* util 工具组件 |
||||||
|
*/ |
||||||
|
|
||||||
|
layui.define('jquery', function(exports){ |
||||||
|
"use strict"; |
||||||
|
|
||||||
|
var $ = layui.$ |
||||||
|
,hint = layui.hint() |
||||||
|
|
||||||
|
//外部接口
|
||||||
|
,util = { |
||||||
|
//固定块
|
||||||
|
fixbar: function(options){ |
||||||
|
var ELEM = 'layui-fixbar', TOP_BAR = 'layui-fixbar-top' |
||||||
|
,dom = $(document), body = $('body') |
||||||
|
,is, timer; |
||||||
|
|
||||||
|
options = $.extend({ |
||||||
|
showHeight: 200 //出现TOP的滚动条高度临界值
|
||||||
|
}, options); |
||||||
|
|
||||||
|
options.bar1 = options.bar1 === true ? '' : options.bar1; |
||||||
|
options.bar2 = options.bar2 === true ? '' : options.bar2; |
||||||
|
options.bgcolor = options.bgcolor ? ('background-color:' + options.bgcolor) : ''; |
||||||
|
|
||||||
|
var icon = [options.bar1, options.bar2, ''] //图标：信息、问号、TOP
|
||||||
|
,elem = $(['<ul class="'+ ELEM +'">' |
||||||
|
,options.bar1 ? '<li class="layui-icon" lay-type="bar1" style="'+ options.bgcolor +'">'+ icon[0] +'</li>' : '' |
||||||
|
,options.bar2 ? '<li class="layui-icon" lay-type="bar2" style="'+ options.bgcolor +'">'+ icon[1] +'</li>' : '' |
||||||
|
,'<li class="layui-icon '+ TOP_BAR +'" lay-type="top" style="'+ options.bgcolor +'">'+ icon[2] +'</li>' |
||||||
|
,'</ul>'].join('')) |
||||||
|
,topBar = elem.find('.'+TOP_BAR) |
||||||
|
,scroll = function(){ |
||||||
|
var stop = dom.scrollTop(); |
||||||
|
if(stop >= (options.showHeight)){ |
||||||
|
is || (topBar.show(), is = 1); |
||||||
|
} else { |
||||||
|
is && (topBar.hide(), is = 0); |
||||||
|
} |
||||||
|
}; |
||||||
|
if($('.'+ ELEM)[0]) return; |
||||||
|
|
||||||
|
typeof options.css === 'object' && elem.css(options.css); |
||||||
|
body.append(elem), scroll(); |
||||||
|
|
||||||
|
//bar点击事件
|
||||||
|
elem.find('li').on('click', function(){ |
||||||
|
var othis = $(this), type = othis.attr('lay-type'); |
||||||
|
if(type === 'top'){ |
||||||
|
$('html,body').animate({ |
||||||
|
scrollTop : 0 |
||||||
|
}, 200); |
||||||
|
} |
||||||
|
options.click && options.click.call(this, type); |
||||||
|
}); |
||||||
|
|
||||||
|
//Top显示控制
|
||||||
|
dom.on('scroll', function(){ |
||||||
|
clearTimeout(timer); |
||||||
|
timer = setTimeout(function(){ |
||||||
|
scroll(); |
||||||
|
}, 100); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//倒计时
|
||||||
|
,countdown: function(endTime, serverTime, callback){ |
||||||
|
var that = this |
||||||
|
,type = typeof serverTime === 'function' |
||||||
|
,end = new Date(endTime).getTime() |
||||||
|
,now = new Date((!serverTime || type) ? new Date().getTime() : serverTime).getTime() |
||||||
|
,count = end - now |
||||||
|
,time = [ |
||||||
|
Math.floor(count/(1000*60*60*24)) //天
|
||||||
|
,Math.floor(count/(1000*60*60)) % 24 //时
|
||||||
|
,Math.floor(count/(1000*60)) % 60 //分
|
||||||
|
,Math.floor(count/1000) % 60 //秒
|
||||||
|
]; |
||||||
|
|
||||||
|
if(type) callback = serverTime; |
||||||
|
|
||||||
|
var timer = setTimeout(function(){ |
||||||
|
that.countdown(endTime, now + 1000, callback); |
||||||
|
}, 1000); |
||||||
|
|
||||||
|
callback && callback(count > 0 ? time : [0,0,0,0], serverTime, timer); |
||||||
|
|
||||||
|
if(count <= 0) clearTimeout(timer); |
||||||
|
return timer; |
||||||
|
} |
||||||
|
|
||||||
|
//某个时间在当前时间的多久前
|
||||||
|
,timeAgo: function(time, onlyDate){ |
||||||
|
var that = this |
||||||
|
,arr = [[], []] |
||||||
|
,stamp = new Date().getTime() - new Date(time).getTime(); |
||||||
|
|
||||||
|
//返回具体日期
|
||||||
|
if(stamp > 1000*60*60*24*31){ |
||||||
|
stamp = new Date(time); |
||||||
|
arr[0][0] = that.digit(stamp.getFullYear(), 4); |
||||||
|
arr[0][1] = that.digit(stamp.getMonth() + 1); |
||||||
|
arr[0][2] = that.digit(stamp.getDate()); |
||||||
|
|
||||||
|
//是否输出时间
|
||||||
|
if(!onlyDate){ |
||||||
|
arr[1][0] = that.digit(stamp.getHours()); |
||||||
|
arr[1][1] = that.digit(stamp.getMinutes()); |
||||||
|
arr[1][2] = that.digit(stamp.getSeconds()); |
||||||
|
} |
||||||
|
return arr[0].join('-') + ' ' + arr[1].join(':'); |
||||||
|
} |
||||||
|
|
||||||
|
//30天以内，返回“多久前”
|
||||||
|
if(stamp >= 1000*60*60*24){ |
||||||
|
return ((stamp/1000/60/60/24)|0) + '天前'; |
||||||
|
} else if(stamp >= 1000*60*60){ |
||||||
|
return ((stamp/1000/60/60)|0) + '小时前'; |
||||||
|
} else if(stamp >= 1000*60*3){ //3分钟以内为：刚刚
|
||||||
|
return ((stamp/1000/60)|0) + '分钟前'; |
||||||
|
} else if(stamp < 0){ |
||||||
|
return '未来'; |
||||||
|
} else { |
||||||
|
return '刚刚'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//数字前置补零
|
||||||
|
,digit: function(num, length){ |
||||||
|
var str = ''; |
||||||
|
num = String(num); |
||||||
|
length = length || 2; |
||||||
|
for(var i = num.length; i < length; i++){ |
||||||
|
str += '0'; |
||||||
|
} |
||||||
|
return num < Math.pow(10, length) ? str + (num|0) : num; |
||||||
|
} |
||||||
|
|
||||||
|
//转化为日期格式字符
|
||||||
|
,toDateString: function(time, format){ |
||||||
|
//若 null 或空字符，则返回空字符
|
||||||
|
if(time === null || time === '') return ''; |
||||||
|
|
||||||
|
var that = this |
||||||
|
,date = new Date(function(){ |
||||||
|
if(!time) return; |
||||||
|
return isNaN(time) ? time : (typeof time === 'string' ? parseInt(time) : time) |
||||||
|
}() || new Date()) |
||||||
|
,ymd = [ |
||||||
|
that.digit(date.getFullYear(), 4) |
||||||
|
,that.digit(date.getMonth() + 1) |
||||||
|
,that.digit(date.getDate()) |
||||||
|
] |
||||||
|
,hms = [ |
||||||
|
that.digit(date.getHours()) |
||||||
|
,that.digit(date.getMinutes()) |
||||||
|
,that.digit(date.getSeconds()) |
||||||
|
]; |
||||||
|
|
||||||
|
if(!date.getDate()) return hint.error('Invalid Msec for "util.toDateString(Msec)"'), ''; |
||||||
|
|
||||||
|
format = format || 'yyyy-MM-dd HH:mm:ss'; |
||||||
|
return format.replace(/yyyy/g, ymd[0]) |
||||||
|
.replace(/MM/g, ymd[1]) |
||||||
|
.replace(/dd/g, ymd[2]) |
||||||
|
.replace(/HH/g, hms[0]) |
||||||
|
.replace(/mm/g, hms[1]) |
||||||
|
.replace(/ss/g, hms[2]); |
||||||
|
} |
||||||
|
|
||||||
|
//转义 html，防 xss 攻击
|
||||||
|
,escape: function(html){ |
||||||
|
return String(html || '').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&') |
||||||
|
.replace(/</g, '<').replace(/>/g, '>') |
||||||
|
.replace(/'/g, ''').replace(/"/g, '"'); |
||||||
|
} |
||||||
|
|
||||||
|
//还原转义的 html
|
||||||
|
,unescape: function(str){ |
||||||
|
return String(str || '').replace(/\&/g, '&') |
||||||
|
.replace(/\</g, '<').replace(/\>/g, '>') |
||||||
|
.replace(/\'/, '\'').replace(/\"/, '"'); |
||||||
|
} |
||||||
|
|
||||||
|
//让指定的元素保持在可视区域
|
||||||
|
,toVisibleArea: function(options){ |
||||||
|
options = $.extend({ |
||||||
|
margin: 160 //触发动作的边界值
|
||||||
|
,duration: 200 //动画持续毫秒数
|
||||||
|
,type: 'y' //触发方向，x 水平、y 垂直
|
||||||
|
}, options); |
||||||
|
|
||||||
|
if(!options.scrollElem[0] || !options.thisElem[0]) return; |
||||||
|
|
||||||
|
var scrollElem = options.scrollElem //滚动元素
|
||||||
|
,thisElem = options.thisElem //目标元素
|
||||||
|
,vertical = options.type === 'y' //是否垂直方向
|
||||||
|
,SCROLL_NAME = vertical ? 'scrollTop' : 'scrollLeft' //滚动方法
|
||||||
|
,OFFSET_NAME = vertical ? 'top' : 'left' //坐标方式
|
||||||
|
,scrollValue = scrollElem[SCROLL_NAME]() //当前滚动距离
|
||||||
|
,size = scrollElem[vertical ? 'height' : 'width']() //滚动元素的尺寸
|
||||||
|
,scrollOffet = scrollElem.offset()[OFFSET_NAME] //滚动元素所处位置
|
||||||
|
,thisOffset = thisElem.offset()[OFFSET_NAME] - scrollOffet //目标元素当前的所在位置
|
||||||
|
,obj = {}; |
||||||
|
|
||||||
|
//边界满足条件
|
||||||
|
if(thisOffset > size - options.margin || thisOffset < options.margin){ |
||||||
|
obj[SCROLL_NAME] = thisOffset - size/2 + scrollValue |
||||||
|
scrollElem.animate(obj, options.duration); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//批量事件
|
||||||
|
,event: function(attr, obj, eventType){ |
||||||
|
var _body = $('body'); |
||||||
|
eventType = eventType || 'click'; |
||||||
|
|
||||||
|
//记录事件回调集合
|
||||||
|
obj = util.event[attr] = $.extend(true, util.event[attr], obj) || {}; |
||||||
|
|
||||||
|
//清除委托事件
|
||||||
|
util.event.UTIL_EVENT_CALLBACK = util.event.UTIL_EVENT_CALLBACK || {}; |
||||||
|
_body.off(eventType, '*['+ attr +']', util.event.UTIL_EVENT_CALLBACK[attr]) |
||||||
|
|
||||||
|
//绑定委托事件
|
||||||
|
util.event.UTIL_EVENT_CALLBACK[attr] = function(){ |
||||||
|
var othis = $(this) |
||||||
|
,key = othis.attr(attr); |
||||||
|
(typeof obj[key] === 'function') && obj[key].call(this, othis); |
||||||
|
}; |
||||||
|
|
||||||
|
//清除旧事件，绑定新事件
|
||||||
|
_body.on(eventType, '*['+ attr +']', util.event.UTIL_EVENT_CALLBACK[attr]); |
||||||
|
|
||||||
|
return obj; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
// DOM 尺寸变化，该创意来自：http://benalman.com/projects/jquery-resize-plugin/
|
||||||
|
/* |
||||||
|
!function(a,b,c){"$:nomunge";function l(){f=b[g](function(){d.each(function(){var b=a(this),c=b.width(),d=b.height(),e=a.data(this,i);(c!==e.w||d!==e.h)&&b.trigger(h,[e.w=c,e.h=d])}),l()},e[j])}var f,d=a([]),e=a.resize=a.extend(a.resize,{}),g="setTimeout",h="resize",i=h+"-special-event",j="delay",k="throttleWindow";e[j]=250,e[k]=!0,a.event.special[h]={setup:function(){if(!e[k]&&this[g])return!1;var b=a(this);d=d.add(b),a.data(this,i,{w:b.width(),h:b.height()}),1===d.length&&l()},teardown:function(){if(!e[k]&&this[g])return!1;var b=a(this);d=d.not(b),b.removeData(i),d.length||clearTimeout(f)},add:function(b){function f(b,e,f){var g=a(this),h=a.data(this,i)||{};h.w=e!==c?e:g.width(),h.h=f!==c?f:g.height(),d.apply(this,arguments)}if(!e[k]&&this[g])return!1;var d;return a.isFunction(b)?(d=b,f):(d=b.handler,b.handler=f,void 0)}}}($,window); |
||||||
|
*/ |
||||||
|
|
||||||
|
//暴露接口
|
||||||
|
exports('util', util); |
||||||
|
}); |
||||||
Loading…
Reference in new issue