Bootstrap Plugin Usage Summary

Bootstrap Plugin Usage Summary

Note the bootstrap some common use of plug-ins, be sure to pay attention to the plugin version!

1. Bootstrap Switch

The switch control. Compared to the checkbox,switch will be more beautiful. Download in Bootstrap-switch, add CSS files, follow the AMD specification to introduce. js files, no longer too much to repeat.

require. config ({waitseconds:0, paths: {//Some library files jquery:'. /lib/jquery/jquery-2.1.4.min ', Bootstrap:'. /lib/bootstrap/js/bootstrap.min ', Bootstrapswitcher:'. /lib/bootstrap/plugins/switcher/js/bootstrap-switch.min ',' Bootstrapslider ':'. /lib/bootstrap/plugins/slider/bootstrap-slider.min '}, Shim: {' Bootstrap ': {deps: [' jquery '],exports:' Bootstrap '},' Bootstrapswitcher ': {deps: [' jquery '],exports:' Bootstrapswitcher '},' Bootstrapslider ': {deps: [' jquery '],exports:' Bootstrapslider '}    }});

How to use:

//html<input type="checkbox"Name="XXX"Id=""Checked>//jsrequire([' jquery ',' Bootstrap ',' Bootstrapswitcher ',' Bootstrapslider '], function($, bootstrap, Bootstrapswitcher, Bootstrapslider){$ (document). Ready ( function(){        //Initialize switch$("[type= ' checkbox ']"). Bootstrapswitch ();//Register Switchchange event, note suffix$(' input[type= ' checkbox "] '). On (' Switchchange.bootstrapswitch ', function(event, state){            varDomid = This. ID;//dom ID            varDomclass = This. className;//classnameConsole.log ( This);//DOM elementsConsole.log (event);//jquery EventsConsole.log (state);//true | false}); });})

Other configuration items and event descriptions see: http://www.bootstrap-switch.org/

2. Bootstrap Slider

Slide Bar. : Https://github.com/seiyria/bootstrap-slider, here is a very detailed description. As with the switch plugin, add CSS styles and corresponding. js files.

2.1 Options

name	type	Default Value	Description
Id	String	“”	Slider Element ID
Min	Float	0	Minimum value
Max	Float	10	Maximum Value
Step	Float	1	Growth step

2.2 methods2.3 Events

Examples of Use:

//html <Input ID="Temp" type="Text" Data-slider-min="0" Data-slider-max=" the" Data-slider-step="1" Data-slider-value="+"> //js$(' #temp ').Slider ({formatter:function (value) {return ' temp: ' +Value        }        }); $("#temp"). on("Slide", function (SLIDEEVT) {varTemp=Slideevt.Value });

Bootstrap Plugin Usage Summary