前端知识汇总

jquery知识汇总

鼠标箭头变手势

1
style="cursor:pointer;"

layui知识汇总

tips

1
2
3
4
layer.tips('个人证书,请点击我', '#personCert', {
tips: [1, 'rgb(19, 97, 254)'],
tipsMore : true
});

参数说明:``

  1. options:tips的配置型[tips位置:1上;2右;3下;4左,背景颜色]
  2. tipsMore设置是否允许弹出多个tips

input

1
2
<input type="email" name="email" lay-reqText="请输入qq邮箱" lay-verify="required|email"
autocomplete="off" class="layui-input">

参数说明:

  1. lay-reqText:自定义非空提示语
  2. autocomplete=”off” : 关闭显示历史记录

data-属性

1
2
3
4
5
6
7
8
9
10
<input type="checkbox" name="signType" value="0" data-price="${certPrice.projectManagerSign}" lay-skin="primary" title="项目经理章" lay-filter="signType">

// .....(省略部分代码)

form.on('checkbox(signType)', function(data){
console.log(data.elem); //得到checkbox原始DOM对象

// 将DOM对象转换为jquery对象,再调用attr()方法
var price = $(data.elem).attr("data-price");
});

radio

说明:用于多组单选框,联动选中的效果

1
2
3
4
5
6
 // 企业类型:招、投标单位
form.on('radio(companyType)', function(data){
// 联动 ==> 证书类型
var certType = document.getElementsByName("certType");
$(certType[data.value]).next().click();
});

checkbox

1
2
3
4
// checkbox是否被选中
var companyCertIsChecked = $("input[name='userType']").is(':checked');
// 第一个checkbox是否被选中
var companyCertIsChecked = $("input[name='userType']").get(0).checked;

switch(开关按钮)

1
2
3
4
5
6
7
8
9
10
11
12
13
form.on('switch(filter)', function(data){
//开关是否开启,true或者false
var checked = data.elem.checked;
var _index = layer.confirm('确定要进行此操作吗?', {icon: 3,
btn: ['确定','取消'] //按钮
}, function(){
layer.close(_index)
}, function(){
data.elem.checked=!checked; // 取消
form.render();
});

});

layer.msg

1
2
3
4
5
var loadindex = layer.msg('数据保存中,请稍等...', {
icon: 16,
shade: [0.3, '#393D49'],
time: 0
});
坚持原创技术分享,您的支持将鼓励我继续创作!
0%