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>
 

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

  1. jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验

    一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...

  2. jQuery Validate 表单验证插件----自定义一个验证方法

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  3. jQuery Validate 表单验证插件----自定义校验结果样式

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

  4. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  5. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  6. jQuery学习之:Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  7. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  8. 【jquery】Validform,一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  9. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

随机推荐

  1. Android编译环境配置

    Android编译环境配置 网上关于Android编译环境配置的整理资料有不少,经整理亲测后,希望能给需要的亲们提供帮助. 主要分为四步: 1.安装JDK(Java Standard Edition ...

  2. View 和 ViewGroup 的 hasFocusable

    在 android 中.焦点的获取和事件几乎相同,有一个分发机制.一般来说View 树上上层节点的 ViewGroup 比底层节点的 View 有更高的优先级获取焦点.这体如今 ViewGroup 有 ...

  3. java-proxool 异常

    使用 proxool,JDBC连接池,进行批量运行的时候遇到异常: The Thread responsible was named 'Thread-32′, but the last SQL it ...

  4. RPC和Socket

    RPC和Socket的区别 rpc是通过什么实现啊?socket! RPC(Remote Procedure Call,远程过程调用)是建立在Socket之上的,出于一种类比的愿望,在一台机器上运行的 ...

  5. Google Summer of Code 2017 经验谈

    Google Summer of Code (GSoC) 2018 又要开始了. 如果想实现你心中的开源梦想, 用代码让世界变得更美好. 参加GSoC可能是你进入开源的世界最好途径. GSoC是什么 ...

  6. netflix turbine概述

    1.turbine是什么?它的作用是什么? Turbine is a tool for aggregating streams of Server-Sent Event (SSE) JSON data ...

  7. ES6学习笔记(四)数值的扩展

    1.二进制和八进制表示法 ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示. 0b111110111 === 503 // true 0o767 === 503 ...

  8. 开启mysql远程服务

    1.在开始里输入远程,选择允许从这台机器访问 2.选择第二个开启 3. 打开cmd, 进入mysql中更改mysql数据库下的user表,中的root用户的Host 为 ‘%’use mysql:up ...

  9. 洛谷 P2355 团体操队形

    P2355 团体操队形 题目背景 X中学要团体操比赛了哦.队形该怎样排呢? 题目描述 有n(n<=100000)个团体操队员编号分别为1~n,参加运动会开幕式的团体操表演.其基本队形(分连续队形 ...

  10. ZOJ Problem Set - 3822Domination(DP)

    ZOJ Problem Set - 3822Domination(DP) problemCode=3822">题目链接 题目大意: 给你一个n * m的棋盘,每天都在棋盘上面放一颗棋子 ...