Rumah >hujung hadapan web >Tutorial Bootstrap >bootstrap-switch如何设置初始值
bootstrap-switch如何设置初始值
- angryTomasal
- 2019-08-01 13:48:494605semak imbas
bootstrapSwitch是一个很美观的切换控件，官网上对它的介绍也很详细。下面通过几个demo快速上手bootstrapSwitch。
如果你想了解更多关于bootstrap的知识，可以点击：bootstrap教程
首先，引用相应的js和css文件，把checkbox放进class为“switch”的div中，再在js中初始化
$('#mySwitch input').bootstrapSwitch();
就可以使用bootstrapSwitch了。
其中input有两个属性 data-on-text 和data-off-text，分别为切换时显示的文字，这里设置为YES和NO。代码如下：
this is a bootstrap-switch test
也可以用js设置这两个属性，选中input元素后，通过方法bootstrapSwitch({attribute:value}) 修改属性。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this is a bootstrap-switch test</title>
<script src="jquery-2.2.4.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-switch.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-switch.css"/>
<script type="text/javascript">
$(function(){
$('#mySwitch input').bootstrapSwitch({
onText:'On',
offText:'Off'
});
})
</script>
</head>
<body>
<br>
<div id="mySwitch">
<input type="checkbox" checked data-on-text="YES" data-off-text="NO"/>
</div>
</body>
Atas ialah kandungan terperinci bootstrap-switch如何设置初始值. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：bootstrap有哪些内容Artikel seterusnya：elementui和bootstrap区别