我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

Yii2——实现自己的iCheck资源包

1.1.1 基本封装

iCheck是配合bootstrap包使用的前端控件,用来美化radio和checkbox的显示样式的,根据前面的“资源管理”的说明,以及官网的文档,可以很方便的把iCheck组件用资源包封装起来,顺便熟悉一下Yii 2中资源包的使用方法:

站在用户的角度思考问题,与客户深入沟通,找到吉林网站设计与吉林网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名申请、虚拟空间、企业邮箱。业务覆盖吉林地区。

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

 
 
namespacebackend\assets;
 
 useyii\web\AssetBundle;
 
 classICheckAssetextendsAssetBundle
{
}

 

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

 
 
namespacebackend\assets;
 
 useyii\web\AssetBundle;
 
 classICheckAssetextendsAssetBundle
{
   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,所以要将这两个配置上:

 
 
namespacebackend\assets;
 
 useyii\web\AssetBundle;
 
 classICheckAssetextendsAssetBundle
{
   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初始化代码:

 
 
namespacebackend\assets;
 
 useyii\web\AssetBundle;
 
 classICheckAssetextendsAssetBundle
{
   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 functionregisterAssetFiles($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、显示效果如下:

                           Yii2 —— 实现自己的iCheck资源包  

 

至此,就初步完成了将iCheck封装到资源包的过程,但是现在还有几个遗留问题:

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

2、iCheck支持很多个样式,可是上面代码却固定成minimal/blue,影响适用性;

3、引入的是all.css,没有按需引入,这样会导致CSS文件比较大;

 

下面把上述问题逐一解决。

1.1.2 控件位置

1.1.2.1原因

在使用iCheck之前,checkbox和文字是这样的:

Yii2 —— 实现自己的iCheck资源包

 

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

 

在使用了iCheck之后,checkbox和文字是这样的:

Yii2 —— 实现自己的iCheck资源包

iCheck初始化后,将原来的input控件外面又包了一层div,导致input控件和文字被label视作一个整体,使得“padding-left:20px”属性也作用到div上,使得checkbox和文字都被右移20px。

1.1.2.2解决办法

检查label控件的属性,发现这个“padding-left:20px”属性是forms.less中定义的,这个less文件是bootstrap的,所以直接修改这个文件不是个好主意。

 

最终确定在资源包内修改如下:

public functionregisterAssetFiles($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、首先定义样式名称:

 
 
namespacebackend\assets;
 
 useyii\web\AssetBundle;
 
 classICheckAssetextendsAssetBundle
 {
    constSKIN_ALL='all';
     constSKIN_FLAT='flat/_all';
     constSKIN_FLAT_AERO='flat/aero';
     constSKIN_FLAT_BLUE='flat/blue';
     constSKIN_FLAT_FLAT='flat/flat';
     constSKIN_FLAT_GREEN='flat/green';
     constSKIN_FLAT_GREY='flat/grey';
     constSKIN_FLAT_ORANGE='flat/orange';
     constSKIN_FLAT_PINK='flat/pink';
     constSKIN_FLAT_PURPLE='flat/purple';
     constSKIN_FLAT_RED='flat/red';
     constSKIN_FLAT_YELLOW='flat/yellow';
     constSKIN_FUTURICO='futurico/futurico';
     constSKIN_LINE='line/_all';
     constSKIN_LINE_AERO='line/aero';
     constSKIN_LINE_BLUE='line/blue';
     constSKIN_LINE_GREEN='line/green';
     constSKIN_LINE_GREY='line/grey';
     constSKIN_LINE_LINE='line/line';
     constSKIN_LINE_ORANGE='line/orange';
     constSKIN_LINE_PINK='line/pink';
     constSKIN_LINE_PURPLE='line/purple';
     constSKIN_LINE_RED='line/red';
     constSKIN_LINE_YELLOW='line/yellow';
     constSKIN_MINIMAL='minimal/_all';
     constSKIN_MINIMAL_AERO='minimal/aero';
     constSKIN_MINIMAL_BLUE='minimal/blue';
     constSKIN_MINIMAL_GREEN='minimal/green';
     constSKIN_MINIMAL_GREY='minimal/grey';
     constSKIN_MINIMAL_LINE='minimal/minimal';
     constSKIN_MINIMAL_ORANGE  ='minimal/orange';
     constSKIN_MINIMAL_PINK='minimal/pink';
     constSKIN_MINIMAL_PURPLE  ='minimal/purple';
     constSKIN_MINIMAL_RED='minimal/red';
     constSKIN_MINIMAL_YELLOW  ='minimal/yellow';
     constSKIN_POLARIS='polaris/polaris';
     constSKIN_SQUARE='square/_all';
     constSKIN_SQUARE_AERO='square/aero';
     constSKIN_SQUARE_BLUE='square/blue';
     constSKIN_SQUARE_GREEN='square/green';
     constSKIN_SQUARE_GREY='square/grey';
     constSKIN_SQUARE_LINE='square/square';
     constSKIN_SQUARE_ORANGE='square/orange';
     constSKIN_SQUARE_PINK='square/pink';
     constSKIN_SQUARE_PURPLE='square/purple';
     constSKIN_SQUARE_RED='square/red';
     constSKIN_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 functionregisterAssetFiles($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文件:

 

 
 
namespacebackend\assets;
 
 useyii\web\AssetBundle;
 
 classICheckAssetextendsAssetBundle
{
     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 functioninit()
     {
         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 functionregisterAssetFiles($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 按需载入

实现上一节的支持多样式,其实同时也实现了按需载入的功能,参见下图:

Yii2 —— 实现自己的iCheck资源包

1.1.5 可复用

iCheck是个很常用的前端库,前面是只将其放到了backend端,其实frontend端也很有可能会用到,因此再进一步,可以把iCheck放到框架层,使其可以更好的被复用:

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

Yii2 —— 实现自己的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资源的地方,修改代码如下:

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

 

 


分享题目:Yii2——实现自己的iCheck资源包
链接URL:http://shouzuofang.com/article/ghpees.html

其他资讯