| 1 |
- {"name":"Bootstrap-switch-bdmdesign","tagline":"unofficial bootstrap switch","body":"Bootstrap-switch v1.7\r\n========================\r\n\r\nYou can now also use radio buttons and checkboxes as switches.\r\n\r\n\r\nDemo\r\n----\r\nhttp://www.larentis.eu/switch/\rhttp://bdmdesign.github.io/bootstrap-switch-BdMdesigN\r\n\r\nUsage\r\n-----\r\nJust include Twitter Bootstrap, jQuery, Bootstrap Switch CSS and Javascript\r\n``` html\r\n<meta http-equiv=\"X-UA-Compatible\" content=\"IE=9; IE=8;\" />\r\n<link rel=\"stylesheet\" href=\"http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css\">\r\n<link rel=\"stylesheet\" href=\"bootstrap-switch.css\">\r\n\r\n<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script>\r\n<script src=\"bootstrap-switch.js\"></script> // master\r\n<script src=\"http://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/1.7/bootstrap-switch.min.js\"> // from cdnjs.com\r\n```\r\n\r\nLess\r\n----\r\nIf you want to use your bootstrap vars edit bootstrapSwitch.less and then compile the less file\r\n``` bash\r\nlessc static/less/bootstrap-switch.less static/stylesheets/bootstrap-switch.css\r\n```\r\n\r\nSupported browsers\r\n------------------\r\nI'm not going to support ancient browsers! (it works on IE8+)\r\n\r\nBasic Example\r\n-------------\r\ncheckboxes:\r\n\r\n``` html\r\n<div class=\"make-switch\">\r\n <input type=\"checkbox\">\r\n</div>\r\n```\r\n\r\nradioboxes:\r\n\r\n``` html\r\n<div class=\"make-switch\">\r\n <input type=\"radio\">\r\n</div>\r\n```\r\n\r\n\r\nLarge, small or mini\r\n--------------------\r\ncheckboxes:\r\n\r\n``` html\r\n<div class=\"make-switch switch-large\"> <!-- switch-large, switch-small or switch-mini -->\r\n <input type=\"checkbox\">\r\n</div>\r\n```\r\n\r\nradioboxes:\r\n\r\n``` html\r\n<div class=\"make-switch switch-large\"> <!-- switch-large, switch-small or switch-mini -->\r\n <input type=\"radio\">\r\n</div>\r\n```\r\n\r\n\r\nColors\r\n------\r\ncheckboxes:\r\n\r\n``` html\r\n<div class=\"make-switch\" data-on=\"danger\" data-off=\"warning\"> <!-- primary, info, success, warning, danger and default -->\r\n <input type=\"checkbox\">\r\n</div>\r\n```\r\n\r\nradioboxes:\r\n\r\n``` html\r\n<div class=\"make-switch\" data-on=\"danger\" data-off=\"warning\"> <!-- primary, info, success, warning, danger and default -->\r\n <input type=\"radio\">\r\n</div>\r\n```\r\n\r\n\r\nAnimation\r\n---------\r\ncheckboxes:\r\n\r\n``` html\r\n<div class=\"make-switch\" data-animated=\"false\">\r\n <input type=\"checkbox\">\r\n</div>\r\n```\r\n\r\nradioboxes:\r\n\r\n``` html\r\n<div class=\"make-switch\" data-animated=\"false\">\r\n <input type=\"radio\">\r\n</div>\r\n```\r\n\r\n\r\nText\r\n-----\r\ncheckboxes:\r\n\r\n``` html\r\n<div class=\"make-switch\" data-on-label=\"SI\" data-off-label=\"NO\">\r\n <input type=\"checkbox\">\r\n</div>\r\n```\r\n\r\nradioboxes:\r\n\r\n``` html\r\n<div class=\"make-switch\" data-on-label=\"SI\" data-off-label=\"NO\">\r\n <input type=\"radio\">\r\n</div>\r\n```\r\n\r\n\r\nHTML Text\r\n----------\r\ncheckboxes:\r\n\r\n``` html\r\n<div class=\"make-switch\" data-on-label=\"<i class='icon-ok icon-white'></i>\" data-off-label=\"<i class='icon-remove'></i>\">\r\n <input type=\"checkbox\">\r\n</div>\r\n```\r\n\r\nradioboxes:\r\n\r\n``` html\r\n<div class=\"make-switch\" data-on-label=\"<i class='icon-ok icon-white'></i>\" data-off-label=\"<i class='icon-remove'></i>\">\r\n <input type=\"radio\">\r\n</div>\r\n```\r\n\r\n\r\nInitial values\r\n--------------\r\ncheckboxes:\r\n\r\n``` html\r\n<div class=\"make-switch\">\r\n <input type=\"checkbox\" checked=\"checked\" disabled=\"disabled\">\r\n</div>\r\n```\r\nradioboxes:\r\n\r\n\r\n``` html\r\n<div class=\"make-switch\">\r\n <input type=\"radio\" checked=\"checked\" disabled=\"disabled\">\r\n</div>\r\n```\r\n\r\n\r\nEvent handler\r\n-------------\r\n``` javascript\r\n$('#mySwitch').on('switch-change', function (e, data) {\r\n var $el = $(data.el)\r\n , value = data.value;\r\n console.log(e, $el, value);\r\n});\r\n```\r\n\r\nMethods\r\n-------\r\n``` javascript\r\n$('#mySwitch').bootstrapSwitch('toggleActivation');\r\n$('#mySwitch').bootstrapSwitch('isActive');\r\n$('#mySwitch').bootstrapSwitch('setActive', false);\r\n$('#mySwitch').bootstrapSwitch('setActive', true);\r\n$('#mySwitch').bootstrapSwitch('toggleState');\r\n$('.mySwitch').bootstrapSwitch('toggleRadioState'); // the radiobuttons need a class not a ID, don't allow uncheck radio switch\r\n$('.mySwitch').bootstrapSwitch('toggleRadioStateAllowUncheck'); // don't allow uncheck radio switch\r\n$('.mySwitch').bootstrapSwitch('toggleRadioStateAllowUncheck', false); // don't allow uncheck radio switch\r\n$('.mySwitch').bootstrapSwitch('toggleRadioStateAllowUncheck', true); // allow uncheck radio switch\r\n$('#mySwitch').bootstrapSwitch('setState', true);\r\n$('#mySwitch').bootstrapSwitch('status'); // returns true or false\r\n$('#mySwitch').bootstrapSwitch('destroy');\r\n```\r\n\r\nLicense\r\n-------\r\nLicensed under the Apache License, Version 2.0\r\nhttp://www.apache.org/licenses/LICENSE-2.0\r\n","google":"","note":"Don't delete this file! It's used internally to help with page regeneration."}
|
