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

php中文网

发布时间：2016-05-16 17:53:51

1413人浏览过

来源于php中文网

原创

1前言
最近因为项目的需要，使用了一个JQuery插件。把插件下下来后，很快我就发现，很多默认的插件Style不符合项目要求，必须要被修改。
在这个过程中，我发现自己先后使用了多种不同的方法实现插件Style的定制化。很高兴最后找到了我认为最好的方法，对CSS的认识也加深了不少，感触颇多。这篇文章就是对这些新的CSS的认识的一个梳理。
2JQuery 插件Style 定制化方法
2.1 初始化插件时输入定制化对象
做的比较好的插件会在初始化时允许输入定制化对象。
如果输入定制化对象，插件会使用定制化对象中的值，例如，

X-CART GOLD

X-Cart号称是全球最强大的PHP购物车软件，几乎囊括所有电子商务功能，采用网页方式管理后台，多语言支持，智能库存管理，模板定制灵活，功能插件化、模块化。X-Cart分为gold版和Pro版这两个版本。Gold版为普通商店版，Pro为商城版。这款软件的优势是功能比较强大，由于是付费方式采用终生制的开源软件，软件的稳定性、安全性以及可扩展性较强。目前已知的能与x-cart跨平台整合的软件包括了国外

下载

复制代码代码如下:

 
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; 
} 