`
小杨学JAVA
  • 浏览: 901397 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

bootstrap-switch开关按钮表单插件

 
阅读更多

转：http://www.jsctrlc.com/texiao/36.html

bootstrap-switch开关按钮表单插件

 

 

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>

以下为设置参数：

 

 

尺寸（Size）

ON OFF
 
ON OFF
 
ON OFF
 
ON OFF 
<div class="switch switch-large">
    <input type="checkbox" checked />
</div>

<div class="switch">
    <input type="checkbox" checked />
</div>

<div class="switch switch-small">
    <input type="checkbox" checked />
</div>

<div class="switch switch-mini">
    <input type="checkbox" checked />
</div>

颜色（Colors）

ON OFF
 
ON OFF
 
ON OFF
 
ON OFF
 
ON OFF 
<div class="switch" data-on="primary" data-off="info">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="info" data-off="success">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="success" data-off="warning">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="warning" data-off="danger">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="danger" data-off="primary">
    <input type="checkbox" checked />
</div>

动画（Animation）

ON OFF 
<div class="switch" data-animated="false">
    <input type="checkbox" checked />
</div>

禁用（Disabled）

ON OFF 
<div class="switch">
   <input type="checkbox" checked disabled />
</div>

文本（Text）

SI NO 
<div class="switch" data-on-label="SI" data-off-label="NO">
    <input type="checkbox" checked />
</div>

HTML文本（HTML text）

 
<div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
    <input type="checkbox" checked />
</div>

事件处理（Event handler） javascript

ON OFF 
$('#mySwitch').on('switch-change', function (e, data) {
    var $el = $(data.el)
      , value = data.value;
    console.log(e, $el, value);
});

Toggle State javascript

ON OFF
 

ON!
 
Toggle me!
 
OFF!
$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false

销毁（Destroy） javascript

ON OFF
 

Destroy me! 
$('#destroy-switch').bootstrapSwitch('destroy');

创建（Create） javascript

 

Create
$('#create-switch').wrap('<div class="switch" />').parent().bootstrapSwitch();

禁用（Disabled） javascript

ON OFF
 

Is active? Toggle activation! Disable! Activate! 
$('#disable-switch').bootstrapSwitch('isActive');
$('#disable-switch').bootstrapSwitch('toggleActivation');
$('#disable-switch').bootstrapSwitch('setActive', false);  // true || false

表单（Form） - try to use tab and space

Email
Notification 1
ON OFF
Notification 2
ON OFF
 
<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
            <input type="text" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="notification1">Notification 1</label>
        <div class="controls">
            <div class="switch" tabindex="0">
                <input id="notification1" type="checkbox" />
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="notification2">Notification 2</label>
        <div class="controls">
            <div class="switch" tabindex="0">
                <input id="notification2" type="checkbox" />
            </div>
        </div>
    </div>
</form>

模态对话（Modal）

Modal
<a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
-----
<div class="modal-body">
    <div class="switch">
        <input type="checkbox" checked />
    </div>
</div>

 

<!-- saved from url=(0042)http://www.bootcss.com/p/bootstrap-switch/ -->

Bootstrap 开关（switch）控件Fork me on GitHub

Bootstrap 开关（switch）控件 - by Mattia Larentis (@SpiritualGuru)

 

尺寸（Size）

ON OFF
ON OFF
ON OFF
ON OFF 
<div class="switch switch-large">
    <input type="checkbox" checked />
</div>

<div class="switch">
    <input type="checkbox" checked />
</div>

<div class="switch switch-small">
    <input type="checkbox" checked />
</div>

<div class="switch switch-mini">
    <input type="checkbox" checked />
</div>

颜色（Colors）

ON OFF
ON OFF
ON OFF
ON OFF
ON OFF 
<div class="switch" data-on="primary" data-off="info">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="info" data-off="success">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="success" data-off="warning">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="warning" data-off="danger">
    <input type="checkbox" checked />
</div>

<div class="switch" data-on="danger" data-off="primary">
    <input type="checkbox" checked />
</div>

动画（Animation）

ON OFF 
<div class="switch" data-animated="false">
    <input type="checkbox" checked />
</div>

禁用（Disabled）

ON OFF 
<div class="switch">
   <input type="checkbox" checked disabled />
</div>

文本（Text）

SI NO 
<div class="switch" data-on-label="SI" data-off-label="NO">
    <input type="checkbox" checked />
</div>

HTML文本（HTML text）

  
<div class="switch" data-on-label="<i class='icon-ok icon-white'></i>" data-off-label="<i class='icon-remove'></i>">
    <input type="checkbox" checked />
</div>

事件处理（Event handler） javascript

ON OFF 
$('#mySwitch').on('switch-change', function (e, data) {
    var $el = $(data.el)
      , value = data.value;
    console.log(e, $el, value);
});

Toggle State javascript

ON OFF


ON!
Toggle me!
OFF!
$('#toggle-state-switch').bootstrapSwitch('toggleState');
$('#toggle-state-switch').bootstrapSwitch('setState', false); // true || false

销毁（Destroy） javascript

ON OFF


Destroy me! 
$('#destroy-switch').bootstrapSwitch('destroy');

创建（Create） javascript



Create
$('#create-switch').wrap('<div class="switch" />').parent().bootstrapSwitch();

禁用（Disabled） javascript

ON OFF


Is active? Toggle activation! Disable! Activate! 
$('#disable-switch').bootstrapSwitch('isActive');
$('#disable-switch').bootstrapSwitch('toggleActivation');
$('#disable-switch').bootstrapSwitch('setActive', false);  // true || false

表单（Form） - try to use tab and space

Email
Notification 1
ON OFF
Notification 2
ON OFF
 
<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
            <input type="text" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="notification1">Notification 1</label>
        <div class="controls">
            <div class="switch" tabindex="0">
                <input id="notification1" type="checkbox" />
            </div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="notification2">Notification 2</label>
        <div class="controls">
            <div class="switch" tabindex="0">
                <input id="notification2" type="checkbox" />
            </div>
        </div>
    </div>
</form>

模态对话（Modal）

Modal
<a href="#myModal" role="button" class="btn" data-toggle="modal">Modal</a>
-----
<div class="modal-body">
    <div class="switch">
        <input type="checkbox" checked />
    </div>
</div>
下载

follow me - my site

Bootstrap Switch由Bootstrap中文网翻译整理

×

Modal

ON OFF
Close
<script type="text/javascript" src="/admin/blogs/2031045/Bootstrap%20%E5%BC%80%E5%85%B3%EF%BC%88switch%EF%BC%89%E6%8E%A7%E4%BB%B6_files/jquery.min.js"></script><script type="text/javascript" src="/admin/blogs/2031045/Bootstrap%20%E5%BC%80%E5%85%B3%EF%BC%88switch%EF%BC%89%E6%8E%A7%E4%BB%B6_files/bootstrap.min.js"></script><script type="text/javascript" src="/admin/blogs/2031045/Bootstrap%20%E5%BC%80%E5%85%B3%EF%BC%88switch%EF%BC%89%E6%8E%A7%E4%BB%B6_files/prettify.js"></script><script type="text/javascript" src="/admin/blogs/2031045/Bootstrap%20%E5%BC%80%E5%85%B3%EF%BC%88switch%EF%BC%89%E6%8E%A7%E4%BB%B6_files/bootstrapSwitch.js"></script><script type="text/javascript">// <![CDATA[ window.prettyPrint && prettyPrint(); $('#mySwitch').on('switch-change', function (e, data) { var $el = $(data.el) , value = data.value; console.log(e, $el, value); }); $('#toggle-state-switch-button').on('click', function () { $('#toggle-state-switch').bootstrapSwitch('toggleState'); }); $('#toggle-state-switch-button-on').on('click', function () { $('#toggle-state-switch').bootstrapSwitch('setState', true); }); $('#toggle-state-switch-button-off').on('click', function () { $('#toggle-state-switch').bootstrapSwitch('setState', false); }); $('#btn-destroy-switch').on('click', function () { $('#destroy-switch').bootstrapSwitch('destroy'); $(this).remove(); }); $('#btn-create').on('click', function () { $('#create-switch').wrap('<div class="switch" />').parent().bootstrapSwitch(); $(this).remove() }); $('#btn-is-active-switch').on('click', function () { alert($('#disable-switch').bootstrapSwitch('isActive')); }); $('#btn-toggle-activation-switch').on('click', function () { $('#disable-switch').bootstrapSwitch('toggleActivation'); }); $('#btn-disable-switch').on('click', function () { $('#disable-switch').bootstrapSwitch('setActive', false); }); $('#btn-activate-switch').on('click', function () { $('#disable-switch').bootstrapSwitch('setActive', true); }); // ]]></script><script type="text/javascript" src="/admin/blogs/2031045/Bootstrap%20%E5%BC%80%E5%85%B3%EF%BC%88switch%EF%BC%89%E6%8E%A7%E4%BB%B6_files/projects.js"></script><script type="text/javascript" src="http://hm.baidu.com/h.js?3d8e7fc0de8a2a75f2ca3bfe128e6391"></script>
分享到：
| Win7下无法显示Courier New字体
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    前端项目-angular-bootstrap-switch.zip

    在本文中，我们将深入探讨基于AngularJS的前端项目——"angular-bootstrap-switch"，这是一个利用jQuery插件实现的引导开关指令。这个项目旨在为AngularJS应用提供一个易于使用的、可定制的开关组件，使得用户界面...

    BootstrapSwitch将复选框和单选按钮变成切换开关

    BootstrapSwitch是一款基于Bootstrap框架的插件，它能够将HTML中的复选框（checkbox）和单选按钮（radio button）转化为视觉效果更佳、交互性更强的切换开关（toggle switch）。这个转换过程使得用户界面更加直观，...

    Bootstrap Switch 开关控制插件

    在Bootstrap的原生组件中，虽然提供了按钮组（button groups）和单选按钮（radio buttons）等选项，但Bootstrap Switch 提供了一种更符合现代UI设计趋势的样式，将这些选择以滑动开关的形式呈现，这在移动设备上尤其...

    bootstrap-switch

    - 初始化开关：通过JavaScript选择需要转换为开关的元素，并调用`.bootstrapSwitch()`方法初始化。 ```javascript $('input[type=checkbox]').bootstrapSwitch(); ``` - 配置选项：可以使用数据属性或...

    bootstrap plugins and jquery plugins

    4. **bootstrap-switch**：这个插件将 HTML 的复选框和单选按钮转换为滑动开关，提供了一种更直观的用户交互方式，适用于移动设备或需要简单二选一操作的场景。 5. **bootstrap-select**：它改进了原生的下拉选择框...

    Bootstrap开关(switch)控件学习笔记分享

    Bootstrap开关(switch)控件是基于流行的前端框架Bootstrap的一个扩展组件，主要用于创建具有开关效果的按钮，常用于模拟开/关状态的选择。这个控件在移动设备应用中尤其常见，因为它的滑动交互方式非常适合触屏操作...

    bootstrap界面demo

    3. **事件监听**：可以添加JavaScript事件监听器来响应开关状态的改变，如`switchChange.bootstrapSwitch`事件。 4. **API控制**：提供了一系列的JavaScript方法来操作开关，比如`toggleState()`用于切换状态，`...

    jquery插件集合01（包含10个）

    Bootstrap Switch是Bootstrap框架的一个扩展，它将复选框和单选按钮转换为开关样式，增加了可切换的视觉效果，常用于开关设置。 5. **css3Dashboard** 一个基于CSS3的仪表板模板，提供了丰富的UI元素和布局，适用...

    Bootstrap案例

    这通常通过`.switch`类或者第三方插件如Bootstrap Switch来实现。开关可以方便地切换两个状态，如开/关，是/否等，且支持自定义颜色和文字。 “固定导航”是另一个重要的特性，它确保导航栏在页面滚动时始终保持在...

    bootstrap简易式操作布局页面实现

    7. **表单**：Bootstrap提供了预设样式的表单元素，如`form-control`类用于输入框，`btn`类用于按钮，以及`form-check`和`form-switch`用于复选框和切换开关。 8. **模态框**：`modal`组件允许在页面上弹出交互式...

    后台管理模板 bootstrap框架

    3. `forms_elements.html`：这可能是关于表单元素的展示，包括输入框、选择框、复选框、按钮等，Bootstrap提供了统一的样式处理，使表单更加整洁、易用。 4. `other.html`：可能包含了一些未归类或者不常见的组件，...

    bootstrap中文后台模板管理系统框架.rar

    - **forms_switch.html**：提供了开关按钮（toggle switch）的设计，常用于切换设置状态。 4. **权限控制**： - **pages_rabc.html**：可能涉及到角色基础的权限控制（Role-Based Access Control），这是一种常见...

    Bootstrap_CheatSheet：Bootstrap 5类

    `.form-control`类是所有表单控件的基础，`.form-label`用于创建标签，`.form-check`和`.form-switch`则用于复选框和切换开关。 七、导航(Navigation) 1. 导航栏(Navbar)：`.navbar`类是导航栏的基础，可以与其他...

    CoreUI设计后台界面前端模板111.zip

    而“components-forms.html”和“components-switches.html”分别展示了表单组件和开关（switch）组件的实现，这些都是后台管理界面中常见的交互元素。它们的源码可以作为参考，快速构建自己的表单和切换按钮。 ...

    kingadmin文档

    4. **表单元素**：KingAdmin提供了各种表单控件，如输入框（Input）、选择器（Select）、日期选择器（Datepicker）、开关（Switch）等，这些组件都遵循一致的设计风格，且可与其他库（如Bootstrap、jQuery UI）兼容...

Magicbox
Global site tag (gtag.js) - Google Analytics