Skip to content

Commit

Permalink
step添加禁用功能
Browse files Browse the repository at this point in the history
  • Loading branch information
@hsiangleev
hsiangleev committed Jul 28, 2018
0 parents commit cf84d2f
Show file tree
Hide file tree
Showing 132 changed files with 3,367 additions and 0 deletions.
5 changes: 5 additions & 0 deletions README.md
@@ -0,0 +1,5 @@
# layuiExtend
layui框架扩展

1. [基于layui的步骤条面板](https://hsiangleev.github.io/layuiExtend/step/index.html)
1. [基于layui的无限级联选择器](https://hsiangleev.github.io/layuiExtend/cascader/index.html)
1 change: 1 addition & 0 deletions _config.yml
@@ -0,0 +1 @@
theme: jekyll-theme-cayman
70 changes: 70 additions & 0 deletions cascader/README.md
@@ -0,0 +1,70 @@
## 基于layui的无限级联选择器

#### **html元素**
-----------------
```javascript
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<input type="text" id="a" class="layui-input" readonly="readonly">
</div>
</div>
```

#### **js引用**
-----------------
```javascript
layui.use(['form',"jquery","cascader"], function(){
var $ = layui.jquery;
var cascader = layui.cascader;

var data = [
{
value: 'A',
label: 'a',
children: [
{
value: 'AA1',
label: 'aa1',
},
{
value: 'BB1',
label: 'bb1'
}
]
},
{
value: 'B',
label: 'b',
}
]
cascader({
elem: "#a",
data: data,
// url: "/aa",
// type: "post",
// triggerType: "change",
// showLastLevels: true,
// where: {
// a: "aaa"
// },
value: ["A", "AA1"],
success: function (data) {
console.log(data);
}
});
});
```

#### **cascader参数说明**
> + elem：input容器
> + data：需要的静态数据，类型为数组，
> + url：异步获取的数据，类型为数组，（data与url两个参数二选一）
> + type：异步获取的方式，默认get，可省略
> + where：异步传入的参数，可省略
> + triggerType：触发方式，不填或其他都为click，可选参数"change"，即鼠标移入触发
> + showLastLevels：输入框是否只显示最后一级,默认false，即全显示
> + value：传入的初始值，类型为数组，值为data的value值
> + success：回调函数，选择完成之后的回调函数，返回值为value数组

73 changes: 73 additions & 0 deletions cascader/cascader.css
@@ -0,0 +1,73 @@
/* #region 级联选择器 */
.layui-input-block>i{
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.urp-cascader-content{
white-space: nowrap;
background: #fff;
border: 1px solid #e4e7ed;
border-right: 0px;
border-radius: 2px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
position: absolute;
left: 0px;
top: 100%;
margin-top: 12px;
}
ul.urp-cascader-child{
display: inline-block;
vertical-align: top;
height: 204px;
overflow: auto;
border-right: 1px solid #e4e7ed;
background-color: #fff;
box-sizing: border-box;
margin: 0;
padding: 6px 0;
min-width: 135px;
}
ul.urp-cascader-child>li>i{
float: right;
}
ul.urp-cascader-child>li{
font-size: 14px;
padding: 8px 20px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #606266;
height: 34px;
line-height: 1.5;
box-sizing: border-box;
cursor: pointer;
outline: none;
}
ul.urp-cascader-child li.active{
color: #409eff;
}
ul.urp-cascader-child>li:hover{
background-color: #f5f5f5;
}
.layui-form-item{
width: 350px;
display: inline-block;
}

ul.urp-cascader-child:first-of-type:after{
content: "";
position: absolute;
top: -5px;
left: 35px;
z-index: -1;
display: inline-block;
width: 10px;
height: 10px;
background-color: #fff;
transform: rotate(45deg);
border: 1px solid #e4e7ed;
}
/* #endregion */
119 changes: 119 additions & 0 deletions cascader/index.html
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<link rel="stylesheet" href="../layui/css/admin.css" media="all">
<link rel="stylesheet" href="cascader.css" media="all">
</head>
<body>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<input type="text" id="a" class="layui-input" readonly="readonly">
</div>
</div>


<script src="../layui/layui.js"></script>
<script>
layui.config({
base: "../layui/lay/mymodules/"
}).use(['form',"jquery","cascader"], function(){
var $ = layui.jquery;
var cascader = layui.cascader;

var data = [
{
value: 'A',
label: 'a',
children: [
{
value: 'AA1',
label: 'aa1',
},
{
value: 'BB1',
label: 'bb1'
}
]
},
{
value: 'B',
label: 'b',
children: [
{
value: 'AA2',
label: 'aa2',
children: [
{
value: 'AAA3',
label: 'aaa3',
children: [
{
value: 'AAA3',
label: 'aaa3',
children: [
{
value: 'AAA3',
label: 'aaa3',
},
{
value: 'BBB3',
label: 'bbb3'
}
]
}
]
},
{
value: 'BBB3',
label: 'bbb3'
}
]
},
{
value: 'BB2',
label: 'bb2',
children: [
{
value: 'AAA4',
label: 'aaa4',
},
{
value: 'BBB4',
label: 'bbb4'
}
]
}
]
},
{
value: 'C',
label: 'c',
}
]
cascader({
elem: "#a",
data: data,
// url: "/aa",
// type: "post",
// triggerType: "change",
// showLastLevels: true,
// where: {
// a: "aaa"
// },
value: ["B", "BB2", "BBB4"],
success: function (data) {
console.log(data);
}
});

});
</script>

</body>
</html>

0 comments on commit cf84d2f

Please sign in to comment.