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

一、总结

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

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

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

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

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

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

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

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

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

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

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

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

 1 <script>
 2     function showGoodsPrice(){
 3         $('.sg_can_sold_item').hide();
 4         $('#sg_can_sold').click(function () {
 5             if ($(this).prop("checked")){
 6                 $(this).val('1');
 7                 //alert($(this).val());
 8                 $('.sg_can_sold_item').show();
 9             }else{
10                 $(this).val('0');
11                 //alert($(this).val());
12                 $('.sg_can_sold_item').hide();
13             }
14         });
15         /*********上面部分自定义事件使用错误，下面是对的***/
16         $('#sg_can_sold').on('switchChange.bootstrapSwitch', function(event, state) {
17             $('.sg_can_sold_item').hide();
18             if(state){
19                 $(this).val('1');
20                 $('.sg_can_sold_item').show();
21             }else{
22                 $(this).val('0');
23                 $('.sg_can_sold_item').hide();
24             }
25             console.log(this); // DOM element
26             console.log(event); // jQuery event
27             console.log(state); // true | false
28         });
29     }
30     showGoodsPrice();
31 </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的

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

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

1、相关知识

2、代码

 1 <script>
 2     function showGoodsPrice(){
 3         $('.sg_can_sold_item').hide();
 4         $('#sg_can_sold').click(function () {
 5             if ($(this).prop("checked")){
 6                 $(this).val('1');
 7                 //alert($(this).val());
 8                 $('.sg_can_sold_item').show();
 9             }else{
10                 $(this).val('0');
11                 //alert($(this).val());
12                 $('.sg_can_sold_item').hide();
13             }
14         });
15         /*********上面部分自定义事件使用错误，下面是对的***/
16         $('#sg_can_sold').on('switchChange.bootstrapSwitch', function(event, state) {
17             $('.sg_can_sold_item').hide();
18             if(state){
19                 $(this).val('1');
20                 $('.sg_can_sold_item').show();
21             }else{
22                 $(this).val('0');
23                 $('.sg_can_sold_item').hide();
24             }
25             console.log(this); // DOM element
26             console.log(event); // jQuery event
27             console.log(state); // true | false
28         });
29     }
30     showGoodsPrice();
31 </script>

转载于:https://www.cnblogs.com/Renyi-Fan/p/9507136.html

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 表单验证插件

    一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,网 ...

  4. 轻量级的jQuery表单验证插件 - HAPPY.js

    为什么80%的码农都做不了架构师?>>>    日期:2012-9-14  来源:GBin1.com 在线演示  本地下载 功能强大的表单验证插件很多,以前我们介绍过validati ...

  5. Validation-jQuery表单验证插件使用方法

    作用 jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法,并且对国际化也有很好的支持. 使用前的布置 ...

  6. jQuery 表单验证插件，jQuery Validation Engine用法详解

    jQuery 表单验证插件,jQuery Validation Engine用法详解 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...

  7. 【前端3】jquary：页面加载，选择器，隔行换色，Dom，全选，动画，遍历，广告/抽奖，表单校验插件

    文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...

  8. jQuery学习之：Validation表单验证插件

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

  9. jquery validate表单验证插件

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

  10. html中表单的校验的插件,功能强大的jquery.validate表单验证插件

    本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...

最新文章

  1. 限定filesize的数据泵导入导出操作案例
  2. 设计模式之简单工厂模式学习笔记
  3. nvm 装 nodejs 重启终端失效的解决方法
  4. 从特斯拉到计算机视觉之「图像语义分割」
  5. [ warning] [vmusr:vmtoolsd] Failed registration of app type 2 (Signals)
  6. EntityFramework进阶——数据编辑与维护
  7. NVIDIA TESLA M40
  8. java安全框架下载文件_java安全框架之Permission学习笔记
  9. 如何卸载删除sql2005
  10. 模板文件不存在，无法解析文档！的终极解决方案
  11. VC2012 学习记录
  12. Three.js地图轮廓分割效果
  13. 原罪(Original sin)：gluttony,greed,sloth,lust,pride,envy and wrath
  14. 实例分割新作——Instances as Queries
  15. GRUB4DOS资源索引帖，欢迎跟帖补充
  16. 利用INFOPATH2007VS2005开发MOSS工作流详解 --收藏
  17. Java实现验证码制作
  18. AOJ 15951 零件加工问题二
  19. 视频号怎么运营，如何快速玩转微信视频号：国仁楠哥
  20. 微信二次修改微信号_微信号怎么改第二次？微信7.0.15版本改微信号方法解析

热门文章

  1. fms安装教程 linux_linux通过fms搭建流媒体服务器Flash Media Server
  2. python中kwlist是什么意思_Python keyword.kwlist方法代碼示例
  3. 浅析硬件构造Tone mapping曲线
  4. RCTF-2015-x_xor_md5
  5. c语言 取结构体地址,结构体赋值，对用不用取地址符有些困惑？
  6. html引用less文件报错,vue-cli import less文件报错
  7. html页面截取,HTML 网页截图
  8. 【软件技巧】【截图】浏览器自带的全网页截图工具
  9. 数据库mysql从入门到放弃
  10. 商业化游戏服务器引擎自定义框架设计思路