AI智能
改变未来

JQuery插件Style定制化方法的分析与比较

 

JQuery插件Style定制化方法的分析与比较

1         前言

最近因为项目的需要,使用了一个JQuery插件。把插件下下来后,很快我就发现,很多默认的插件Style不符合项目要求,必须要被修改。

在这个过程中,我发现自己先后使用了多种不同的方法实现插件Style的定制化。很高兴最后找到了我认为最好的方法,对CSS的认识也加深了不少,感触颇多。这篇文章就是对这些新的CSS的认识的一个梳理。

2         JQuery 插件Style 定制化方法

2.1       初始化插件时输入定制化对象

做的比较好的插件会在初始化时允许输入定制化对象。

如果输入定制化对象,插件会使用定制化对象中的值,例如,

var adgallerySetting = {                 

  width: 600, // Width of the image, set to false and it will read the CSS width

  height: 400, // Height of the image, set to false and it will read the CSS height

}

var galleries = $(\’.ad-gallery\’).adGallery(adgallerySetting);

 

如果不输入定制化对象,插件会使用它自己的默认值,例如,

var galleries = $(\’.ad-gallery\’).adGallery();

 

2.2       修改插件的CSS

如果插件没有提供定制化对象或你想要修改的Style不在定制化对象定义里,一个比较直观的方法是修改插件的CSS文件。这不是一种值得提倡的方法,因为这会Corrupt插件的本身的源代码,且不利于以后插件版本的更新。

2.3       注册Callback函数

大部分插件还在定制化对象里定义Callback函数。如果Callback函数在插件完成style enhance后调用,你可以写这个Callback并注册,在Callback里修改DOM模型,从而完成插件style的定制化。这种方法比较繁琐,需要你花比较多的时间去理解插件内部的实现。例如,

var adgallerySetting = {                 

                                  // All callbacks has the AdGallery objects as \’this\’ reference

                                  callbacks: {

                                    // This gets fired right before old_image is about to go away, and new_image

                                    // is about to come in

                                    beforeImageVisible: function(new_image, old_image) {

                                      // Do something wild!

                                                var thing = \”this is it\”;

                                        //Change the plugin enhanced page

                                                  $(\”.ad-gallery .ad-image-wrapper .ad-image\”).removeAttr(\”style\”);

                                                  $(\”.ad-gallery .ad-image-wrapper .ad-image\”).css(\”width\”, \”100%\”);

                                                  var width = $(\”.ad-gallery .ad-image-wrapper .ad-image img\”).attr(\”width\”);

                                                  $(\”.ad-gallery .ad-image-wrapper .ad-image img\”).attr(\”width\”, \”100%\”);

                                                  $(\”.ad-gallery .ad-image-wrapper .ad-image .img\”).attr(\”width\”, 100%);

                                                  $(\”.ad-gallery .ad-image-wrapper .ad-image\”).attr(\”height\”, 100%);

                                    }

                                  }

};

2.4       增加一个新的CSS文件,重载插件的部分style

CSS是cascading style sheet 的缩写,固名思义,它有一个Cascading 标准。当多个CSS 文件对同一个HTML element的style定义有冲突时,它会根据以下规则决定apply哪个CSS style.

1)      ! Important 标识。

2)      来源。 Author (HTMl链入的CSS文件), Reader(Web surfer), User agent(Browser)

3)      相关性。

具体可以查看参考部分的链接网页。

这种方法,在我看来是除1.1 外最好的方法,下面是些代码示例。

    #descriptions .ad-image-description {

      position: absolute;

    }

      #descriptions .ad-image-description .ad-description-title {

        display: block;

      }

.ad-gallery .ad-image-wrapper .ad-image {

      width: 100% ! important;

      left: 0px ! important;

}

3         总结

根据这次的经验,我觉得定制插件Style的最好方法输入定制化对象(如果插件支持的话)或CSS重载。有些插件会以在HTML element中加入style=\”….\”的方式定义style。在这种情况下,你就会发现,“! important”标识的出现是相当的令人舒心。J

4         参考

JQuery/p

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » JQuery插件Style定制化方法的分析与比较