基于bootstrap的選擇框插件icheck
本文實(shí)例為大家分享了bootstrap icheck選擇框插件,供大家參考,具體內(nèi)容如下
icheck官網(wǎng):http://www.bootcss.com/p/icheck/#skin-square
1.到官網(wǎng)下載Icheck壓縮包。
2.解壓后找到 icheck.min.js, jquery.js, zepto.js 以及skins文件夾,復(fù)制到自己的項(xiàng)目中
3.在項(xiàng)目中引用
<link rel="stylesheet"href="icheck/skins/minimal/red.css" /> <script type="text/javascript" src="icheck/js/jquery.js" ></script> <script type="text/javascript"src="icheck/js/icheck.min.js" ></script>
4.寫輸入框代碼
<input type="checkbox"> <input type="checkbox" checked> <input type="radio" name="iCheck"> <input type="radio" name="iCheck" checked>
5.初始化
$('input').iCheck({ checkboxClass: 'icheckbox_minimal-red', radioClass: 'iradio_minimal-red', increaseArea: '20%', // optional labelHover: true, });
以上是icheck的一個(gè)簡(jiǎn)單實(shí)戰(zhàn)教程。接下來再具體介紹一下
1、選擇你要使用的皮膚樣式主題,共6個(gè)(在skins文件下)
flat, futurico, line, minimal, polaris, square
每個(gè)皮膚底下有好幾個(gè)可以選擇的顏色,例如:
Black — square.css
Red — red.css
Green — green.css
Blue — blue.css
Aero — aero.css
Grey — grey.css
Orange — orange.css
Yellow — yellow.css
Pink — pink.css
Purple — purple.css
2 .例如選擇square皮膚下的blue.css,復(fù)制 skin/square文件夾下的到css文件夾下
<link href="css/square/blue.css" rel="stylesheet">
3.引入icheck.js
移動(dòng)端引入:
<script src="js/zepto.js"></script>
<script src="js/icheck.min.js"></script>
PC端引入
<script src="js/jquery.js"></script>
<script src="js/icheck.min.js"></script>
4 在頁面添加以下代碼
<body> <input type="checkbox"> <input type="checkbox" checked> <input type="radio" name="iCheck"> <input type="radio" name="iCheck" checked> </body> <script> $(document).ready(function(){ $('input').iCheck({ checkboxClass: 'icheckbox_square-blue', **// 注意square和blue的對(duì)應(yīng)關(guān)系** radioClass: 'iradio_square-blue', increaseArea: '20%' // optional }); }); </script>
導(dǎo)入的顏色樣式與 checkboxClass, radioClass 要一一對(duì)應(yīng),否則不起作用
如:
<link rel="stylesheet" href="icheck/skins/minimal/red.css" />
對(duì)應(yīng)的是
$('input').iCheck({ checkboxClass: 'icheckbox_minimal-red', radioClass: 'iradio_minimal-red', ......... });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解Bootstrap的iCheck插件checkbox和radio
- BootStrap iCheck插件全選與獲取value值的解決方法
- 很不錯(cuò)的兩款Bootstrap Icon圖標(biāo)選擇組件
- Bootstrap時(shí)間選擇器datetimepicker和daterangepicker使用實(shí)例解析
- JS組件系列之Bootstrap Icon圖標(biāo)選擇組件
- BootStrap日期控件在模態(tài)框中選擇時(shí)間下拉菜單無效的原因及解決辦法(火狐下不能點(diǎn)擊)
- 基于javascript bootstrap實(shí)現(xiàn)生日日期聯(lián)動(dòng)選擇
- bootstrap datepicker 與bootstrapValidator同時(shí)使用時(shí)選擇日期后無法正常觸發(fā)校驗(yàn)的解決思路
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴(kuò)展
- 基于Bootstrap實(shí)現(xiàn)的下拉菜單手機(jī)端不能選擇菜單項(xiàng)的原因附解決辦法
相關(guān)文章
JS實(shí)現(xiàn)生成會(huì)變大變小的圓環(huán)實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)生成會(huì)變大變小的圓環(huán),涉及javascript數(shù)學(xué)運(yùn)算及頁面樣式動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08Java遍歷集合方法分析(實(shí)現(xiàn)原理、算法性能、適用場(chǎng)合)
這篇文章主要介紹了Java遍歷集合方法分析(實(shí)現(xiàn)原理、算法性能、適用場(chǎng)合)的相關(guān)資料,需要的朋友可以參考下2016-04-04javascript實(shí)現(xiàn)簡(jiǎn)單的頁面右下角提示信息框
本文給大家分享的是使用javascript實(shí)現(xiàn)簡(jiǎn)單的頁面右下角提示信息框的方法和示例代碼,有需要的小伙伴可以參考下。2015-07-07利用原生js實(shí)現(xiàn)html5小游戲之打磚塊(附源碼)
這篇文章主要給大家介紹了關(guān)于利用原生js實(shí)現(xiàn)html5小游戲之打磚塊的相關(guān)資料,這是最近工作遇到的一個(gè)小需求,文中通過示例代碼介紹的非常詳細(xì),并分享了完整的源碼供大家參考學(xué)習(xí),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01js實(shí)現(xiàn)類似菜單風(fēng)格的TAB選項(xiàng)卡效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)類似菜單風(fēng)格的TAB選項(xiàng)卡效果代碼,通過javascript鼠標(biāo)事件及頁面元素遍歷實(shí)現(xiàn)tab切換的功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08uniapp實(shí)現(xiàn)下拉刷新與上拉觸底加載功能的示例代碼
這篇文章主要記錄一下uniapp實(shí)現(xiàn)下拉刷新與上拉觸底加載功能的示例代碼,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-04-04JS簡(jiǎn)單獲得節(jié)點(diǎn)元素的方法示例
這篇文章主要介紹了JS簡(jiǎn)單獲得節(jié)點(diǎn)元素的方法,結(jié)合實(shí)例形式分析了javascript獲取頁面節(jié)點(diǎn)元素及修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-02-02