1.1 实现自己之iCheck资源包

1.1.1 基本封装

iCheck是相当bootstrap包使用的前端控件,用来标榜radio和checkbox的来得样式的,根据前的“资源管理”的征,以及官网的文档,可以老有利之将iCheck组件用资源包封装起来,顺便熟悉一下Yii
2着资源包的采取方式:

1、 创建iCheck资源包ICheckAssets.php;

<?php

  namespace backend\assets;

  use yii\web\AssetBundle;

  class ICheckAsset extends AssetBundle

{

}

2、
设置资源路,这里省事,直接以icheck包放到%yii-app%\backend\web\front-lib目录下:

<?php
  namespace backend\assets;
  use yii\web\AssetBundle;
  class ICheckAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
        'front-lib/icheck/skins/all.css',
    ];
     public $js = [
        'front-lib/icheck/icheck.min.js',
    ];
}

注:iCheck支持skin,这里小先拿富有skin全部引入。

3、
设置依赖包,iCheck依赖让bootstrap,同时初始化代码依赖让jQuery,所以要以立刻点儿单布局上:

<?php



  namespace backend\assets;



  use yii\web\AssetBundle;



  class ICheckAsset extends AssetBundle

{
     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',
     ];

  }

4、
iCheck组件不是一直引入CSS就得了,而是以页面需要实施同样截JS代码才会将显示样式修改回复,因此用注册iCheck初始化代码:

<?php



  namespace backend\assets;



  use yii\web\AssetBundle;



  class ICheckAsset extends AssetBundle

{
     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
             });'
         );
     }

}

横流:这里一定配置为以minimal/blue这个样式。

5、 使用资源包,在AppAssets中加进部署(注意路径):

public $depends = [
‘backend\assets\ICheckAsset’,
‘yii\web\YiiAsset’,
‘yii\bootstrap\BootstrapAsset’,
];

6、 显示效果如下:

jQuery 1

迄今,就起形成了用iCheck封装到资源包的历程,但是今还有几个遗留问题:

1、 从上图可以视,明显checkbox控件位置偏右侧了;

2、 iCheck支持广大个样式,可是端代码却一定成minimal/blue,影响适用性;

3、 引入的凡all.css,没有随需要引入,这样会招CSS文件于异常;

下面将上述问题逐项解决。

1.1.2 控件位置
1.1.2.1 原因

在行使iCheck之前,checkbox和仿是这般的:

jQuery 2

input控件在label控件内,label控件为了吃checkbox控件空出位置,设置了一个padding-left:
20px属性,使得文字向右侧偏移20单字节。

当采取了iCheck之后,checkbox和文字是如此的:

jQuery 3

iCheck初始化后,将本的input控件外面又保了同等重合div,导致input控件和仿被label视作一个圆,使得“padding-left:20px”属性为打算及div上,使得checkbox和仿还叫右变20px。

1.1.2.2 解决办法

检查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");’
);
}

1.1.3 支持多样式

支撑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文件:

<?php



  namespace backend\assets;



  use yii\web\AssetBundle;



  class ICheckAsset extends AssetBundle

{
     public static $skin = self::SKIN_MINIMAL_BLUE;

public $basePath = ‘@webroot’;
public $baseUrl = ‘@web/front-lib/icheck’;
public $depends = [
‘yii\web\JqueryAsset’,
‘yii\bootstrap\BootstrapAsset’,
];
/**
* @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控件:

public function registerAssetFiles($view)
{
parent::registerAssetFiles($view);
$cssClassSuffix = str_replace(‘/’, ‘-‘, self::$skin);
$view->registerJs(
‘$("input").iCheck({
checkboxClass: "icheckbox_’ . $cssClassSuffix . ‘",
radioClass: "iradio_’ . $cssClassSuffix . ‘",
increaseArea: "20%" // optional
});
$(".icheckbox_’ . $cssClassSuffix . ‘").css("margin-left", "-20px");
$(".iradio_’ . $cssClassSuffix . ‘").css("margin-left", "-20px");’
);
}

诸如此类,就封装好了,想只要啊样式,就配备是包里的$skin参数即可。

1.1.4 按需载入

贯彻达标亦然省之支撑多样式,其实以为实现了准需要载入的功用,参见下图:

jQuery 4

1.1.5 可复用

iCheck是单非常常用的前端库,前面是就拿那厝了backend端,其实frontend端也特别有或会见就此到,因此再进一步,可以拿iCheck放到框架层,使其可以还好之叫复用:

1、 在vendor下起frontlib子目录,然后将icheck包拷贝进去,目录结构如下:

jQuery 5

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
{
public $basePath = ‘@webroot’;
public $baseUrl = ‘@web’;
public $css = [
‘css/site.css’,
‘css/common.css’,
‘css/login.css’,
];
public $js = [
];
public $depends = [
‘vendor\frontlib\icheck\ICheckAsset’,
‘yii\web\YiiAsset’,
‘yii\bootstrap\BootstrapAsset’,
];
}

相关文章

网站地图xml地图