Yii2 —— 實作自己的iCheck資源包

iCheck是配合bootstrap包使用的前端控件，用來美化radio和checkbox的顯示樣式的，根據前面的“資源管理”的說明，以及官網的文檔，可以很友善的把iCheck元件用資源包封裝起來，順便熟悉一下Yii 2中資源包的使用方法：

1、建立iCheck資源包ICheckAssets.php；

2、設定資源路徑，這裡省事，直接将icheck包放到%yii-app%\backend\web\front-lib目錄下：

注：iCheck支援skin，這裡暫時先把所有skin全部引入。

3、設定依賴包，iCheck依賴于bootstrap，同時初始化代碼依賴于jQuery，是以要将這兩個配置上：

4、iCheck元件不是直接引入CSS就可以了，而是在頁面需要執行一段JS代碼才能把顯示樣式修改過來，是以需要注冊iCheck初始化代碼：

注：這裡固定配置為使用minimal/blue這個樣式。

5、使用資源包，在AppAssets中增加配置（注意路徑）：

public $depends = [

'backend\assets\ICheckAsset',

'yii\web\YiiAsset',

'yii\bootstrap\BootstrapAsset',

];

6、顯示效果如下：

至此，就初步完成了将iCheck封裝到資源包的過程，但是現在還有幾個遺留問題：

1、從上圖可以看出，明顯checkbox控件位置偏右了；

2、iCheck支援很多個樣式，可是上面代碼卻固定成minimal/blue，影響适用性；

3、引入的是all.css，沒有按需引入，這樣會導緻CSS檔案比較大；

下面把上述問題逐一解決。

在使用iCheck之前，checkbox和文字是這樣的：

input控件在label控件内，label控件為了給checkbox控件空出位置，設定了一個padding-left:20px屬性，使得文字向右偏移20個位元組。

在使用了iCheck之後，checkbox和文字是這樣的：

iCheck初始化後，将原來的input控件外面又包了一層div，導緻input控件和文字被label視作一個整體，使得“padding-left:20px”屬性也作用到div上，使得checkbox和文字都被右移20px。

檢查label控件的屬性，發現這個“padding-left:20px”屬性是forms.less中定義的，這個less檔案是bootstrap的，是以直接修改這個檔案不是個好主意。

最終确定在資源包内修改如下：

public function registerAssetFiles($view)

{

parent::registerAssetFiles($view);

$view->registerJs(

'$("input").iCheck({

checkboxClass: "icheckbox_minimal-blue",

radioClass: "iradio_minimal-blue",

increaseArea: "20%" // optional

});

$(".icheckbox_minimal-blue").css("margin-left", "-20px");

$(".iradio_minimal-blue").css("margin-left", "-20px");'

);

}

支援iCheck的多個樣式，也是在資源包裡實作：

1、首先定義樣式名稱：

<?php

namespace backend\assets;

use yii\web\AssetBundle;

class ICheckAsset extends AssetBundle

const SKIN_ALL = 'all';

const SKIN_FLAT = 'flat/_all';

const SKIN_FLAT_AERO = 'flat/aero';

const SKIN_FLAT_BLUE = 'flat/blue';

const SKIN_FLAT_FLAT = 'flat/flat';

const SKIN_FLAT_GREEN = 'flat/green';

const SKIN_FLAT_GREY = 'flat/grey';

const SKIN_FLAT_ORANGE = 'flat/orange';

const SKIN_FLAT_PINK = 'flat/pink';

const SKIN_FLAT_PURPLE = 'flat/purple';

const SKIN_FLAT_RED = 'flat/red';

const SKIN_FLAT_YELLOW = 'flat/yellow';

const SKIN_FUTURICO = 'futurico/futurico';

const SKIN_LINE = 'line/_all';

const SKIN_LINE_AERO = 'line/aero';

const SKIN_LINE_BLUE = 'line/blue';

const SKIN_LINE_GREEN = 'line/green';

const SKIN_LINE_GREY = 'line/grey';

const SKIN_LINE_LINE = 'line/line';

const SKIN_LINE_ORANGE = 'line/orange';

const SKIN_LINE_PINK = 'line/pink';

const SKIN_LINE_PURPLE = 'line/purple';

const SKIN_LINE_RED = 'line/red';

const SKIN_LINE_YELLOW = 'line/yellow';

const SKIN_MINIMAL = 'minimal/_all';

const SKIN_MINIMAL_AERO = 'minimal/aero';

const SKIN_MINIMAL_BLUE = 'minimal/blue';

const SKIN_MINIMAL_GREEN = 'minimal/green';

const SKIN_MINIMAL_GREY = 'minimal/grey';

const SKIN_MINIMAL_LINE = 'minimal/minimal';

const SKIN_MINIMAL_ORANGE = 'minimal/orange';

const SKIN_MINIMAL_PINK = 'minimal/pink';

const SKIN_MINIMAL_PURPLE = 'minimal/purple';

const SKIN_MINIMAL_RED = 'minimal/red';

const SKIN_MINIMAL_YELLOW = 'minimal/yellow';

const SKIN_POLARIS = 'polaris/polaris';

const SKIN_SQUARE = 'square/_all';

const SKIN_SQUARE_AERO = 'square/aero';

const SKIN_SQUARE_BLUE = 'square/blue';

const SKIN_SQUARE_GREEN = 'square/green';

const SKIN_SQUARE_GREY = 'square/grey';

const SKIN_SQUARE_LINE = 'square/square';

const SKIN_SQUARE_ORANGE = 'square/orange';

const SKIN_SQUARE_PINK = 'square/pink';

const SKIN_SQUARE_PURPLE = 'square/purple';

const SKIN_SQUARE_RED = 'square/red';

const SKIN_SQUARE_YELLOW = 'square/yellow';

public static $skin = 'all';

public $basePath = '@webroot';

public $baseUrl = '@web';

public $css = [

'front-lib/icheck/skins/all.css',

];

public $js = [

'front-lib/icheck/icheck.min.js',

public $depends = [

'yii\web\JqueryAsset',

'yii\bootstrap\BootstrapAsset',

public function registerAssetFiles($view)

{

parent::registerAssetFiles($view);

$view->registerJs(

'$("input").iCheck({

checkboxClass: "icheckbox_minimal-blue",

radioClass: "iradio_minimal-blue",

increaseArea: "20%" // optional

});

$(".icheckbox_minimal-blue").css("margin-left", "-20px");

$(".iradio_minimal-blue").css("margin-left", "-20px");'

);

}

2、初始化時載入指定的CSS檔案：

public $baseUrl = '@web/front-lib/icheck';

/**

* @inheritdoc

public function init()

parent::init();

$this->css = [

'skins/' . self::$skin . '.css',

];

// detect is debug mode and select uncompressed js file

$jsFile = YII_DEBUG ? 'icheck.js' : 'icheck.min.js';

$this->js = [

$jsFile,

}

3、根據設定的樣式名稱初始化checkbox控件：

$cssClassSuffix = str_replace('/', '-', self::$skin);

checkboxClass: "icheckbox_' . $cssClassSuffix . '",

radioClass: "iradio_' . $cssClassSuffix . '",

$(".icheckbox_' . $cssClassSuffix . '").css("margin-left", "-20px");

$(".iradio_' . $cssClassSuffix . '").css("margin-left", "-20px");'

這樣，就封裝好了，想要什麼樣式，就配置這個包裡的$skin參數即可。

實作上一節的支援多樣式，其實同時也實作了按需載入的功能，參見下圖：

iCheck是個很常用的前端庫，前面是隻将其放到了backend端，其實frontend端也很有可能會用到，是以再進一步，可以把iCheck放到架構層，使其可以更好的被複用：

1、在vendor下建立frontlib子目錄，然後将icheck包拷貝進去，目錄結構如下：

2、将前面實作的ICheckAsset.php也轉到這個目錄下（如上圖）；

3、打開ICheckAsset.php，修改代碼：

/*public $basePath = '@webroot';

public $baseUrl = '@web/frontlib/icheck';*/

public $sourcePath = '@vendor/frontlib/icheck';

即注釋掉$basePath和$baseUrl的指派，改為對$sourcePath初始化，根據Yii文檔，$basePath和$baseUrl參數是不能跟$sourcePath共存。Yii在運作時，會根據$sourcePath所指定的路徑，将資源檔案拷貝到assets目錄下。

4、在使用iCheck資源的地方，修改代碼如下：

class AppAsset extends AssetBundle

'css/site.css',

'css/common.css',

'css/login.css',

];

'vendor\frontlib\icheck\ICheckAsset',

'yii\web\YiiAsset',

本文轉自 tywali 51CTO部落格，原文連結：http://blog.51cto.com/lancelot/1880958，如需轉載請自行聯系原作者

Yii2 —— 實作自己的iCheck資源包

繼續閱讀

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

版本号隐藏

Apache配置SSLApache配置SSL

配置apache支援PHP（win7）

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

Cloud Studio初體驗

NOSQL安全攻擊

JS生成uuid的四種方法

php 去掉字元串的最後一個字元及截取原字元串1,2,3,4,5,6,

php——水印

layui多任務上傳添加進度條