一、switch简介
switch组件是layui的一个表单组件,常用于开关状态的展示和切换,也可以用于用户权限的开关等场景。
其中switch状态只有两种:开和关,开状态表示为“on”,关状态表示为“off”。
layui.use('form', function(){
var form = layui.form;
//监听指定开关
form.on('switch(component-switch-test)', function(data){
layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示:请勿随意切换', data.othis)
});
});
上述代码即为使用layui switch组件的示例代码,其中包含监听指定开关功能,监听switch开关状态变化的操作,以及提示信息的展示。
二、switch赋值方法
1.设置开关状态默认值
switch组件默认值为“off”,可以通过checked属性设置默认值为“on”。
<div class="layui-form-item">
<label class="layui-form-label">默认开关</label>
<div class="layui-input-block">
<input type="checkbox" name="switch" lay-skin="switch" checked="">
</div>
</div>
上述代码中,通过checked属性设置默认开关状态为打开(on)。
2.对switch进行赋值
可以使用jQuery的prop()方法来设置switch组件的状态,其中true表示开,false表示关。
<label class="layui-form-label">是否加粗</label>
<div class="layui-input-block">
<input id="isBold" type="checkbox" name="bold" lay-skin="switch">
</div>
<script>
$().ready(function() {
var bold = $('#bold');
bold.prop('checked', true); // 这里可以设置checked为true,开启switch
});
</script>
上述代码中,使用jQuery的prop()方法设置switch组件的状态,以此达到对switch进行赋值的目的。
三、switch组件常用API
1.渲染switch组件
可以使用form.render()方法来对switch组件进行渲染。该方法通常与form.on()方法与下面的代码一起使用。
layui.use('form', function(){
var form = layui.form;
//监听指定开关
form.on('switch(component-switch-test)', function(data){
layer.msg('开关checked:'+ (this.checked ? 'true' : 'false'), {
offset: '6px'
});
document.getElementById("demo").innerHTML = this.checked ? 'true' : 'false';
});
//渲染开关
form.render('switch');
});
上述代码中,可以看到除了监听switch开关的操作外,还有一个渲染开关的操作,这个操作是为了使switch组件得到正常显示使用的。
2.禁用和启用switch组件
禁用和启用switch组件的方法其实就是通过prop('disabled',bool)方法中的bool值进行控制的。当bool为true时,switch组件变为禁用状态,否则为启用状态。
layui.use(['form'], function () {
var form = layui.form;
form.on("switch(component-switch-test)", function (data) {
console.log(data.elem.checked)
});
//禁用switch组件
$('input[name="switch"]').prop('disabled', true);
});
上述代码展示了禁用switch组件的方法,其中通过$('input[name="switch"]').prop('disabled', true)实现开关的禁用。
3.监听switch组件的变化
switch组件变化的代码可以通过监听switch的change事件来获取switch的值,比如当switch关闭时,可以通过监听获取switch的值时设置一个变量为false。
layui.use(['form'], function () {
var form = layui.form;
form.on("switch(component-switch-test)", function (data) {
var isChecked = data.elem.checked;
console.log(isChecked);
var text = isChecked ? '开启' : '关闭';
layer.msg('服务已' + text);
});
//模拟到达一定条件,再关闭switch的操作
setTimeout(function(){
$('input[name="switch"]').click(); // 模拟点击,关闭switch
// 当开关关闭时
$('input[name="switch"]').change(function(){
var isChecked = $(this).prop('checked');
if(isChecked){
return false; // 如果开关被选中就不再执行关闭操作
}else{
$('input[name="switch"]').prop('checked', false);
console.log('已关闭switch!');
}
})
},5000)
});
上述代码中,通过setTimeout()方法让代码执行到一定条件时再进行switch关闭操作,同时在switch关闭时通过监听switch的change事件获取switch的值。
四、结束语
本文对于layui switch组件的赋值已经做出详细的阐述,包括switch简介、switch赋值方法、switch组件常用API等多个方面的描述。读者朋友在使用layui switch时,可根据本文所述的知识点来进行对应操作,从而更好的使用switch组件。