bootstrap-switch开关按钮表单插件
2019独角兽企业重金招聘Python工程师标准>>>
bootstrap-switch插件这是一个针对Bootstrap实现的开关(switch)按钮控件,可以支持尺寸、颜色等属性的自定义。开关式按钮在国内网站上使用的并不是很多,Bootstrap 的应用在国外非常流行,不知道是我们不喜欢还是使用它很麻烦很难适合网站来使用。但这种开头式按钮在手机等移动设备上的应用是最广泛的,屏幕的特性促使它更好的发展。
功能说明:
我这就介绍chekbox与radio的两个表单的简单使用,其他更多的效果与功能可以浏览demo,点击按钮以滑动的方式进行on/off切换。
使用说明:
1.引入CSS与JS文件
<link rel="stylesheet" href="static/stylesheets/bootstrap-switch.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="static/js/bootstrap-switch.js"></script>
2.html内容添加
<div class="make-switch" data-on="info" data-off="success"><input type="checkbox" checked></div><div class="make-switch" data-on="success" data-off="warning"><input type="checkbox" checked></div><div class="make-switch" data-on="warning" data-off="danger"><input type="checkbox" checked></div><div class="make-switch" data-on="danger" data-off="default"><input type="checkbox" checked></div><div class="make-switch" data-on="default" data-off="primary"><input type="checkbox" checked></div>
make-switch:对使用插件的checkbox添加CSS样式。
data-on:为on状态时的CSS样式。
data-off:为off状态时的CSS样式。
radio单选框的使用:
<label for="option11">Option 1</label><div class="make-switch radio2"><input id="option11" type="radio" name="radio2" value="option11"></div><label for="option12">Option 2</label><div class="make-switch radio2"><input id="option12" type="radio" name="radio2" value="option12" checked="checked"></div><label for="option13">Option 3</label><div class="make-switch radio2"><input id="option13" type="radio" name="radio2" value="option13"></div>
radio单选框的使用方法是相同的,因为单选框先中其中一个是其他状态都要改变,所以要添加相应的JS代码;
<script>$('.radio2').on('switch-change', function () {$('.radio2').bootstrapSwitch('toggleRadioStateAllowUncheck', true);});
</script>
这样我们就以简单的实现我们想要的开关按钮效果了。
特效包下载地址:http://www.jsctrlc.com/texiao/36.html
转载于:https://my.oschina.net/u/1415286/blog/200361
bootstrap-switch开关按钮表单插件相关推荐
- jQuery 表单插件 -- Form
1.Form 插件简介 jQuery Form 插件是一个优秀的 Ajax 表单插件,可以非常容易地.无侵入地升级 HTML 表单以支持 Ajax. jQuery Form 有两个核心方法 --- a ...
- jQuery Form Plugin (jquery表单插件)
jQuery表单插件 jQuery.form 这是一个全面支持表单的jQuery插件,支持文件上传,包含以下一些方法: -ajaxForm -ajaxSubmit - formToArray - fo ...
- Form表单插件jquery.form.js
jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax. jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubm ...
- jQuery验证表单插件——jquery-validation
jQuery验证表单插件--jquery-validation The jQuery Validation Plugin provides drop-in validation for your ex ...
- wordpress安装jquery插件失败_Contact Form 7插件_WordPress表单插件安装使用教程
Contact Form 7插件用在 wordpress联系表单中,获取访客留言及询盘内容,在表单插件中是很流行的,很多外贸网站和企业网站都会使用 Contact Form 7插件来与访客沟通信息. ...
- 表单插件——form
表单插件--form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的options对象获取服务器返回数据,调用格式如下: $(form). a ...
- JQuery表单插件Form
Form 插件简介 JQuery Form 插件是一个优秀的Ajax表单插件.它有两个核心方法 ajaxForm()和ajaxSubmit(),还包括一些方法: formToArray().formS ...
- 简单记录一下金蝶动态表单插件
动态表单模型是通过插件代理实现业务逻辑,对外部的接口主要是插件,这些接口可以提供给二次开发使用. 命名空间Kingdee.BOS.Core.DynamicForm.PlugIn 主要类及说明: [tr ...
- Jquery表单插件ajaxForm用法详解
原文地址: http://www.open-open.com/lib/view/open1325032463827.html 插件主要的方法: ajaxForm ajaxSubmit formToAr ...
最新文章
- 一个严重损坏Excel深度修复案例
- 这个牛逼技术你可千万别学!
- centos下yum安装nginx
- php array product,PHP array_product()用法及代码示例
- Arcgis Server发布服务
- 修改选择文件按钮,变成自己设置的样式
- 如何理解和分析linux系统的CPU平均负载情况(load average)
- C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码
- python计算小数点后有几位_python的数字类型
- Java 基础(条件结构)
- 数值范围_涉及数值范围的答复及撰写建议
- Android View之布局加载流程
- Si4438, Si4432, Sx1278, Sx1276, Sx1212无线数传模块简单介绍
- 2020 智能零售领域最具商业合作价值企业盘点
- JavaScript基础复习下(51st)
- quartus基本操作
- php 504网关,php出现504错误的原因是什么
- 一个Android开发6年程序员的年终面试总结,2021无畏艰难险阻,迎风潇洒前行
- NVIDIA Tegra Xavier 刷机以及pytorch安装
- 【WZOI】AC大礼包(1~130)