bootstrap-switch开关按钮表单插件

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

bootstrap-switch开关按钮表单插件

 

 

bootstrap-switch插件这是一个针对Bootstrap实现的开关（switch）按钮控件，可以支持尺寸、颜色等属性的自定义。开关式按钮在国内网站上使用的并不是很多，Bootstrap 的应用在国外非常流行，不知道是我们不喜欢还是使用它很麻烦很难适合网站来使用。但这种开头式按钮在手机等移动设备上的应用是最广泛的，屏幕的特性促使它更好的发展。

功能说明：

我这就介绍chekbox与radio的两个表单的简单使用，其他更多的效果与功能可以浏览demo，点击按钮以滑动的方式进行on/off切换。

使用说明：

1.引入CSS与JS文件

 

2.html内容添加

 

 

make-switch:对使用插件的checkbox添加CSS样式。

data-on：为on状态时的CSS样式。

data-off:为off状态时的CSS样式。

 

radio单选框的使用：

 

Option 1
                        

                            
                        
                        Option 2
                        

                            
                        
                        Option 3
                        

                            
                        

radio单选框的使用方法是相同的，因为单选框先中其中一个是其他状态都要改变，所以要添加相应的JS代码；

 

以下为设置参数：

 

 

尺寸（Size）

ON  OFF

 

ON  OFF

 

ON  OFF

 

ON  OFF

颜色（Colors）

ON  OFF

 

ON  OFF

 

ON  OFF

 

ON  OFF

 

ON  OFF

动画（Animation）

ON  OFF

禁用（Disabled）

ON  OFF

文本（Text）

SI  NO

HTML文本（HTML text）

 

事件处理（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('
').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

 

    

        Email
        

            
        
    
    

        Notification 1
        

            

                
            
        
    
    

        Notification 2
        

            

                
            
        
    

模态对话（Modal）

Modal

Modal
-----

    

        
    

 

Bootstrap 开关（switch）控件

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

 

尺寸（Size）

ON  OFF

ON  OFF

ON  OFF

ON  OFF

颜色（Colors）

ON  OFF

ON  OFF

ON  OFF

ON  OFF

ON  OFF

动画（Animation）

ON  OFF

禁用（Disabled）

ON  OFF

文本（Text）

SI  NO

HTML文本（HTML text）

 

事件处理（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('
').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

 

    

        Email
        

            
        
    
    

        Notification 1
        

            

                
            
        
    
    

        Notification 2
        

            

                
            
        
    

模态对话（Modal）

Modal

Modal
-----

    

        
    

下载

follow me - my site

Bootstrap Switch由Bootstrap中文网翻译整理

×

Modal

ON  OFF

Close