基于bootstrap的選擇框插件icheck
本文實例為大家分享了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ù)制到自己的項目中
3.在項目中引用
<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的一個簡單實戰(zhàn)教程。接下來再具體介紹一下
1、選擇你要使用的皮膚樣式主題，共6個(在skins文件下)
flat, futurico, line, minimal, polaris, square
每個皮膚底下有好幾個可以選擇的顏色，例如：
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
移動端引入：
<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的對應(yīng)關(guān)系**
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
導(dǎo)入的顏色樣式與 checkboxClass， radioClass 要一一對應(yīng)，否則不起作用
如：
<link rel="stylesheet" href="icheck/skins/minimal/red.css" />
對應(yīng)的是
$('input').iCheck({
checkboxClass: 'icheckbox_minimal-red',
radioClass: 'iradio_minimal-red',
.........
});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解Bootstrap的iCheck插件checkbox和radio
- BootStrap iCheck插件全選與獲取value值的解決方法
- 很不錯的兩款Bootstrap Icon圖標選擇組件
- Bootstrap時間選擇器datetimepicker和daterangepicker使用實例解析
- JS組件系列之Bootstrap Icon圖標選擇組件
- BootStrap日期控件在模態(tài)框中選擇時間下拉菜單無效的原因及解決辦法(火狐下不能點擊)
- 基于javascript bootstrap實現(xiàn)生日日期聯(lián)動選擇
- bootstrap datepicker 與bootstrapValidator同時使用時選擇日期后無法正常觸發(fā)校驗的解決思路
- BootStrap中關(guān)于Select下拉框選擇觸發(fā)事件及擴展
- 基于Bootstrap實現(xiàn)的下拉菜單手機端不能選擇菜單項的原因附解決辦法
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)生成會變大變小的圓環(huán),涉及javascript數(shù)學(xué)運算及頁面樣式動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
瀏覽器允許JavaScript腳本讀寫剪貼板，自動復(fù)制或粘貼內(nèi)容。一般來說，腳本不應(yīng)該改動用戶的剪貼板，以免不符合用戶的預(yù)期。但是，有些時候這樣做確實能夠帶來方便，比如"一鍵復(fù)制"功能，用戶點擊一下按鈕，指定的內(nèi)容就自動進入剪貼板。本文將介紹3種方法來實現(xiàn)。2021-05-05
Java遍歷集合方法分析（實現(xiàn)原理、算法性能、適用場合）
這篇文章主要介紹了Java遍歷集合方法分析（實現(xiàn)原理、算法性能、適用場合）的相關(guān)資料,需要的朋友可以參考下2016-04-04
javascript實現(xiàn)簡單的頁面右下角提示信息框
本文給大家分享的是使用javascript實現(xiàn)簡單的頁面右下角提示信息框的方法和示例代碼，有需要的小伙伴可以參考下。2015-07-07
利用原生js實現(xiàn)html5小游戲之打磚塊（附源碼）
這篇文章主要給大家介紹了關(guān)于利用原生js實現(xiàn)html5小游戲之打磚塊的相關(guān)資料，這是最近工作遇到的一個小需求，文中通過示例代碼介紹的非常詳細，并分享了完整的源碼供大家參考學(xué)習(xí)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
這篇文章主要通過舉例介紹了解決js函數(shù)閉包內(nèi)存泄露問題的辦法，感興趣的小伙伴們可以參考一下2016-01-01
js實現(xiàn)類似菜單風(fēng)格的TAB選項卡效果代碼
這篇文章主要介紹了js實現(xiàn)類似菜單風(fēng)格的TAB選項卡效果代碼,通過javascript鼠標事件及頁面元素遍歷實現(xiàn)tab切換的功能,非常簡單實用,需要的朋友可以參考下2015-08-08
uniapp實現(xiàn)下拉刷新與上拉觸底加載功能的示例代碼
這篇文章主要記錄一下uniapp實現(xiàn)下拉刷新與上拉觸底加載功能的示例代碼，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-04-04
本文主要介紹了移動端頁面適配相關(guān)知識，用于解決在所有手機上看到字體的大小都一樣問題。下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了JS簡單獲得節(jié)點元素的方法,結(jié)合實例形式分析了javascript獲取頁面節(jié)點元素及修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下2018-02-02