基于bootstrap的選擇框插件icheck

更新時(shí)間：2016年12月23日 08:49:25 作者：程序猿hu

這篇文章主要為大家詳細(xì)介紹了基于bootstrap的選擇框插件icheck，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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è)簡單實(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文件夾下

3.引入icheck.js

移動(dòng)端引入：

PC端引入

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)，否則不起作用
如：

 $('input').iCheck({
  checkboxClass: 'icheckbox_minimal-red',
  radioClass: 'iradio_minimal-red',
  .........

 });

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(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-08
JS如何使用剪貼板操作Clipboard API
瀏覽器允許JavaScript腳本讀寫剪貼板，自動(dòng)復(fù)制或粘貼內(nèi)容。一般來說，腳本不應(yīng)該改動(dòng)用戶的剪貼板，以免不符合用戶的預(yù)期。但是，有些時(shí)候這樣做確實(shí)能夠帶來方便，比如"一鍵復(fù)制"功能，用戶點(diǎn)擊一下按鈕，指定的內(nèi)容就自動(dòng)進(jìn)入剪貼板。本文將介紹3種方法來實(shí)現(xiàn)。
2021-05-05
Java遍歷集合方法分析（實(shí)現(xiàn)原理、算法性能、適用場合）
這篇文章主要介紹了Java遍歷集合方法分析（實(shí)現(xiàn)原理、算法性能、適用場合）的相關(guān)資料,需要的朋友可以參考下
2016-04-04
javascript實(shí)現(xiàn)簡單的頁面右下角提示信息框
本文給大家分享的是使用javascript實(shí)現(xià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-01
解決js函數(shù)閉包內(nèi)存泄露問題的辦法
這篇文章主要通過舉例介紹了解決js函數(shù)閉包內(nèi)存泄露問題的辦法，感興趣的小伙伴們可以參考一下
2016-01-01
js實(shí)現(xiàn)類似菜單風(fēng)格的TAB選項(xiàng)卡效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)類似菜單風(fēng)格的TAB選項(xiàng)卡效果代碼,通過javascript鼠標(biāo)事件及頁面元素遍歷實(shí)現(xiàn)tab切換的功能,非常簡單實(shí)用,需要的朋友可以參考下
2015-08-08
uniapp實(shí)現(xiàn)下拉刷新與上拉觸底加載功能的示例代碼
這篇文章主要記錄一下uniapp實(shí)現(xiàn)下拉刷新與上拉觸底加載功能的示例代碼，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-04-04
移動(dòng)端界面的適配
本文主要介紹了移動(dòng)端頁面適配相關(guān)知識(shí)，用于解決在所有手機(jī)上看到字體的大小都一樣問題。下面跟著小編一起來看下吧
2017-01-01
JS簡單獲得節(jié)點(diǎn)元素的方法示例
這篇文章主要介紹了JS簡單獲得節(jié)點(diǎn)元素的方法,結(jié)合實(shí)例形式分析了javascript獲取頁面節(jié)點(diǎn)元素及修改元素屬性相關(guān)操作技巧,需要的朋友可以參考下
2018-02-02