iCheck .js各种各样的插件 fuck Javascript
http://www.bootcss.com/p/icheck/
1.先看下网上下载的demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="JS代码,其他代码,JS广告代码,JS特效代码" />
<meta name="description" content="JQUERY自定义复选框checkbox和单选框radio样式插件iCheck.js下载" />
<title>JQUERY自定义复选框checkbox和单选框radio样式插件iCheck.js下载 </title>
<link href="css/square/blue.css" rel="stylesheet"> <!---样式--->
<script src="js/jquery.js"></script> <!---Jquery--->
<script src="js/icheck.min.js"></script> <!----插件---->
</head>
<body style="text-align:center;">
<!-- 代码 开始 -->
<div style="margin:30px;">type=checkbox, 多选</div>
<input type="checkbox">
<input type="checkbox" checked>
<div style="margin:30px;">type=radio, 单选</div>
<input type="radio" name="iCheck">
<input type="radio" name="iCheck" checked>
<div style="margin:30px;">禁止选取</div>
<input type="radio" name="iCheck" id="example">
<script>
//初始化
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue', // 注意square和blue的对应关系,用于type=checkbox
radioClass: 'iradio_square-blue', // 用于type=radio
increaseArea: '20%' // 增大可以点击的区域
});
}); // 选中事件绑定
$('input').on('ifChecked', function(event){
alert('被选中了');
}); // 取消选中事件绑定
$('input').on('ifUnchecked', function(event){
alert('被取消了');
}); // 禁止选取
$('#example').iCheck('disable');
</script>
<!-- 代码 结束 --> </body>
</html>
//初始化
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue', // 注意square和blue的对应关系,用于type=checkbox
radioClass: 'iradio_square-blue', // 用于type=radio
increaseArea: '20%' // 增大可以点击的区域
});
});
使用on()方法绑定事件:
$('input').on('ifChecked', function(event){
alert(event.type + ' callback');
});
事件名称 | 使用时机 |
---|---|
ifClicked | 用户点击了自定义的输入框或与其相关联的label |
ifChanged | 输入框的 checked 或 disabled 状态改变了 |
ifChecked | 输入框的状态变为 checked |
ifUnchecked | checked 状态被移除 |
ifDisabled | 输入框状态变为 disabled |
ifEnabled | disabled 状态被移除 |
ifCreated | 输入框被应用了iCheck样式 |
ifDestroyed | iCheck样式被移除 |
iCheck .js各种各样的插件 fuck Javascript的更多相关文章
- 最新的jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
- iCheck.js
一.iCheck:http://www.bootcss.com/p/icheck/ 1.选择一个颜色主题,网上有,有了一个肤色主题,然后就是把这个肤色主题的css文件复制到iCheck文件夹里面 2. ...
- Hello.js – Web 服务授权的 JavaScript SDK
Hello.js 是一个客户端的 Javascript SDK,用于实现 OAuth2 认证(或者基于 OAuth 代理实现的 OAuth1)的 Web 服务和查询 REST API. HelloJS ...
- Vis.js – 基于浏览器的动态 JavaScript 可视化库
Vis.js 是一个动态的,基于浏览器的可视化库.该库被设计为易于使用,能处理大量的动态数据.该库由以下几部分组成:一是数据集和数据视图,基于灵活的键/值数据集,可以添加,更新和删除项目,订阅数据集变 ...
- BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选
特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...
- iCheck表单美化插件使用方法详解(含参数、事件等)
iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...
- node.js 使用 UglifyJS2 高效率压缩 javascript 文件
UglifyJS2 这个工具使用很长时间了,但之前都是在 gulp 自动构建 时用到了 UglifyJS 算法进行压缩. 最近玩了一下 UglifyJS2 ,做了一个 在线压缩javascript工具 ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- 手写js面向对象选项卡插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
随机推荐
- 登陆网页模板 - 1 (HTML+CSS)
一个用HTML和CSS写的简单登录页面,主要是用CSS来进行修饰美化的 这个登陆界面有输入账号和密码的表单,还有登陆和注册两个按键,点击按键分别会输出“您已成功登陆,稍后会跳转到您需要的页面~”,“您 ...
- Spring Boot 揭秘与实战(七) 实用技术篇 - FreeMarker 模板引擎
文章目录 1. FreeMaker 代替 JSP 作为页面渲染 2. 生成静态文件 3. 扩展阅读 4. 源代码 Spring Boot 提供了很多模板引擎的支持,例如 FreeMarker.Thym ...
- 【转载】 深度学习总结:用pytorch做dropout和Batch Normalization时需要注意的地方,用tensorflow做dropout和BN时需要注意的地方,
原文地址: https://blog.csdn.net/weixin_40759186/article/details/87547795 ------------------------------- ...
- Samsung_tiny4412(驱动笔记06)----list_head,proc file system,GPIO,ioremap
/**************************************************************************** * * list_head,proc fil ...
- [LeetCode&Python] Problem 788. Rotated Digits
X is a good number if after rotating each digit individually by 180 degrees, we get a valid number t ...
- CentOS下安装VirtualBox
VirtualBox在Ubtubu下的使用和Window下一样简单,下载安装包,安装运行即可.但在CentOS下需要折腾一下 ======1 下载相应的repo包:官网找到Centos7相应的repo ...
- 02 JDBC相关
====================================================================================JDBC JAVA Databa ...
- Install Java on Ubuntu server
准备工作 a) 获得超级用户权限 关于超级用户访问权限的说明: 要将 Java 安装在系统级位置(例如 /usr/java),则必须以超级用户身份登录,从而获得必要的权限.如果您不具有超级用户访问权限 ...
- [Educational Codeforces Round 55 (Rated for Div. 2)][C. Multi-Subject Competition]
https://codeforc.es/contest/1082/problem/C 题目大意:有m个类型,n个人,每个人有一个所属类型k和一个能力v,要求所选的类型的人个数相等并且使v总和最大(n, ...
- Java 8 实战
Java8 函数式接口,方法传递与Lambda Java8新特性 方法作为参数传递给方法,方法成为一等公民 Lambda,匿名函数 Stream API : 将一系列相关操作用流水线的思想分配到CPU ...