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>
amazeui的表单开关插件的自定义事件必须添加.bootstrapSwitch 命名空间,给了我们什么启示的更多相关文章
- jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...
- jQuery Validate 表单验证插件----自定义一个验证方法
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- jQuery学习之:Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- 【jquery】Validform,一款不错的 jquery 表单验证插件
关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
随机推荐
- Android编译环境配置
Android编译环境配置 网上关于Android编译环境配置的整理资料有不少,经整理亲测后,希望能给需要的亲们提供帮助. 主要分为四步: 1.安装JDK(Java Standard Edition ...
- View 和 ViewGroup 的 hasFocusable
在 android 中.焦点的获取和事件几乎相同,有一个分发机制.一般来说View 树上上层节点的 ViewGroup 比底层节点的 View 有更高的优先级获取焦点.这体如今 ViewGroup 有 ...
- java-proxool 异常
使用 proxool,JDBC连接池,进行批量运行的时候遇到异常: The Thread responsible was named 'Thread-32′, but the last SQL it ...
- RPC和Socket
RPC和Socket的区别 rpc是通过什么实现啊?socket! RPC(Remote Procedure Call,远程过程调用)是建立在Socket之上的,出于一种类比的愿望,在一台机器上运行的 ...
- Google Summer of Code 2017 经验谈
Google Summer of Code (GSoC) 2018 又要开始了. 如果想实现你心中的开源梦想, 用代码让世界变得更美好. 参加GSoC可能是你进入开源的世界最好途径. GSoC是什么 ...
- netflix turbine概述
1.turbine是什么?它的作用是什么? Turbine is a tool for aggregating streams of Server-Sent Event (SSE) JSON data ...
- ES6学习笔记(四)数值的扩展
1.二进制和八进制表示法 ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示. 0b111110111 === 503 // true 0o767 === 503 ...
- 开启mysql远程服务
1.在开始里输入远程,选择允许从这台机器访问 2.选择第二个开启 3. 打开cmd, 进入mysql中更改mysql数据库下的user表,中的root用户的Host 为 ‘%’use mysql:up ...
- 洛谷 P2355 团体操队形
P2355 团体操队形 题目背景 X中学要团体操比赛了哦.队形该怎样排呢? 题目描述 有n(n<=100000)个团体操队员编号分别为1~n,参加运动会开幕式的团体操表演.其基本队形(分连续队形 ...
- ZOJ Problem Set - 3822Domination(DP)
ZOJ Problem Set - 3822Domination(DP) problemCode=3822">题目链接 题目大意: 给你一个n * m的棋盘,每天都在棋盘上面放一颗棋子 ...