amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间，给了我们什么启示

amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间，给了我们什么启示

一、总结

一句话总结：详细看使用文档（说明文档说的真的是非常详细呢，不过循序渐进，不同阶段看懂的内容不同）

a、使用插件的时候必须非常详细的看使用文档

b、一些插件的自定义事件是有命名空间的，插件无法使用的时候可以往这上面想

c、on方法绑定事件可以带命名空间

d、amazeui给的插件扩展库还挺有用的

1、amazeui除了插件还有插件扩展库给我们什么启示？

别的前端框架也很有可能有插件扩展库，找到可以非常方便工作

2、on方法如何给绑定的自定义事件添加命名空间.bootstrapSwitch？

$('#my-checkbox').on('switchChange.bootstrapSwitch', function(event, state) {
  console.log(this); // DOM element
  console.log(event); // jQuery event
  console.log(state); // true | false
});

3、插件的自定义事件的使用注意什么？

注意是否支持自定义事件，或者是否给自定义事件加了命名空间

还有注意是否用的默认属性，这里不是用的checked，而是传过来的state表示状态

<script>
    function showGoodsPrice(){
        $('.sg_can_sold_item').hide();
        $('#sg_can_sold').click(function () {
            if ($(this).prop("checked")){
                $(this).val('1');
                //alert($(this).val());
                $('.sg_can_sold_item').show();
            }else{
                $(this).val('0');
                //alert($(this).val());
                $('.sg_can_sold_item').hide();
            }
        });
        /*********上面部分自定义事件使用错误，下面是对的***/
        $('#sg_can_sold').on('switchChange.bootstrapSwitch', function(event, state) {
            $('.sg_can_sold_item').hide();
            if(state){
                $(this).val('1');
                $('.sg_can_sold_item').show();
            }else{
                $(this).val('0');
                $('.sg_can_sold_item').hide();
            }
            console.log(this); // DOM element
            console.log(event); // jQuery event
            console.log(state); // true | false
        });
    }
    showGoodsPrice();
</script>

4、使用插件的时候，插件的参数列表如何使用？

举一反三或者普通的键值对，这里是举一反三，所以插件可以多关注参数表

参数列表一条数据：

size

data-size

String

开关尺寸

null, 'xs', 'sm', 'normal', 'lg'

null

使用：

<input id="sg_can_sold" class="am-radius" name="sg_can_sold" type="checkbox" data-off-color="warning" data-size="xs" data-am-switch />

5、jquery里面的prop()方法如何使用？

好像是checkbox的专属方法，jquery里面的例子全是checkbox的

    $('.sg_can_sold_item').hide();
    if($('#sg_can_sold').prop('checked')==true){
        $('.sg_can_sold_item').show();
    }

二、amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间

1、相关知识

 

2、代码

<script>
    function showGoodsPrice(){
        $('.sg_can_sold_item').hide();
        $('#sg_can_sold').click(function () {
            if ($(this).prop("checked")){
                $(this).val('1');
                //alert($(this).val());
                $('.sg_can_sold_item').show();
            }else{
                $(this).val('0');
                //alert($(this).val());
                $('.sg_can_sold_item').hide();
            }
        });
        /*********上面部分自定义事件使用错误，下面是对的***/
        $('#sg_can_sold').on('switchChange.bootstrapSwitch', function(event, state) {
            $('.sg_can_sold_item').hide();
            if(state){
                $(this).val('1');
                $('.sg_can_sold_item').show();
            }else{
                $(this).val('0');
                $('.sg_can_sold_item').hide();
            }
            console.log(this); // DOM element
            console.log(event); // jQuery event
            console.log(state); // true | false
        });
    }
    showGoodsPrice();
</script>