标签：status mini name bootstrap switch small bootstrapSwitch

bootstrap-switch使用，small、mini设置

 

1.首先需要引用https://www.bootcss.com/p/bootstrap-switch/。

bootstrap-switch插件库 2.先引用jquery文件，在引用bootstrap.css样式 、bootstrap-switch.css样式  、bootstrap-switch.js样式 3.代码编码单选控件    <input name="status" data-size="mini" type="checkbox"  checked>   

 window.onload=function(){
   $('[name="status"]').bootstrapSwitch("size","small");//基本初始化
 }

//手动设置按钮状态

$('[name="status"]').bootstrapSwitch('state',false);

//点击按钮切换 switch
$('[name="Btn"]').click(function(){
$('[name="status"]').bootstrapSwitch('toggleState');
});

//点击触发事件，监听按钮状态
$('[name="status"]').on('switchChange.bootstrapSwitch',function(event,state){

//内置对象、内置属性
console.log(event);

//获取状态
console.log(state); 
}); 

 

 

 

属性名称

 

 

问题 发现直接在html使用  data-size="mini"或js中使用

 

 设置单选框大小，都是无效的。

后来使用js  

 $('[name="status"]').bootstrapSwitch("size","small");
这种方式设置达成效果。
具体原因还未知，先记录遗留一下吧

 

标签：status,mini,name,bootstrap,switch,small,bootstrapSwitch
来源： https://www.cnblogs.com/webSnow/p/16377526.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。