快捷導(dǎo)航

JQuery插件Style定制化方法的分析與比較

更新時(shí)間：2012年05月03日 20:17:13 作者：

最近因?yàn)轫?xiàng)目的需要，使用了一個(gè)JQuery插件。把插件下下來(lái)后，很快我就發(fā)現(xiàn)，很多默認(rèn)的插件Style不符合項(xiàng)目要求，必須要被修改

1前言
最近因?yàn)轫?xiàng)目的需要，使用了一個(gè)JQuery插件。把插件下下來(lái)后，很快我就發(fā)現(xiàn)，很多默認(rèn)的插件Style不符合項(xiàng)目要求，必須要被修改。
在這個(gè)過(guò)程中，我發(fā)現(xiàn)自己先后使用了多種不同的方法實(shí)現(xiàn)插件Style的定制化。很高興最后找到了我認(rèn)為最好的方法，對(duì)CSS的認(rèn)識(shí)也加深了不少，感觸頗多。這篇文章就是對(duì)這些新的CSS的認(rèn)識(shí)的一個(gè)梳理。
2JQuery 插件Style 定制化方法
2.1 初始化插件時(shí)輸入定制化對(duì)象
做的比較好的插件會(huì)在初始化時(shí)允許輸入定制化對(duì)象。
如果輸入定制化對(duì)象，插件會(huì)使用定制化對(duì)象中的值，例如，

復(fù)制代碼代碼如下:

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

如果不輸入定制化對(duì)象，插件會(huì)使用它自己的默認(rèn)值，例如，
var galleries = $('.ad-gallery').adGallery();
2.2 修改插件的CSS
如果插件沒(méi)有提供定制化對(duì)象或你想要修改的Style不在定制化對(duì)象定義里，一個(gè)比較直觀的方法是修改插件的CSS文件。這不是一種值得提倡的方法，因?yàn)檫@會(huì)Corrupt插件的本身的源代碼，且不利于以后插件版本的更新。
2.3 注冊(cè)Callback函數(shù)
大部分插件還在定制化對(duì)象里定義Callback函數(shù)。如果Callback函數(shù)在插件完成style enhance后調(diào)用，你可以寫這個(gè)Callback并注冊(cè)，在Callback里修改DOM模型，從而完成插件style的定制化。這種方法比較繁瑣，需要你花比較多的時(shí)間去理解插件內(nèi)部的實(shí)現(xiàn)。例如，

復(fù)制代碼代碼如下:

 
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 增加一個(gè)新的CSS文件,重載插件的部分style
CSS是cascading style sheet 的縮寫，固名思義，它有一個(gè)Cascading 標(biāo)準(zhǔn)。當(dāng)多個(gè)CSS 文件對(duì)同一個(gè)HTML element的style定義有沖突時(shí)，它會(huì)根據(jù)以下規(guī)則決定apply哪個(gè)CSS style.
1) ! Important 標(biāo)識(shí)。
2) 來(lái)源。 Author (HTMl鏈入的CSS文件)， Reader(Web surfer), User agent(Browser)
3) 相關(guān)性。
具體可以查看參考部分的鏈接網(wǎng)頁(yè)。
這種方法，在我看來(lái)是除1.1 外最好的方法，下面是些代碼示例。

復(fù)制代碼代碼如下:

 
#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總結(jié)
根據(jù)這次的經(jīng)驗(yàn)，我覺(jué)得定制插件Style的最好方法輸入定制化對(duì)象（如果插件支持的話）或CSS重載。有些插件會(huì)以在HTML element中加入style="...."的方式定義style。在這種情況下，你就會(huì)發(fā)現(xiàn)，“! important”標(biāo)識(shí)的出現(xiàn)是相當(dāng)?shù)牧钊耸嫘?。J
4參考
http://www.w3.org/TR/CSS21/cascade.html
http://stackoverflow.com/questions/7022344/css-newbie-questions-on-authors-style-readers-style-agents-style
http://htmlhelp.com/reference/css/structure.html
http://css-tricks.com/override-inline-styles-with-css/

您可能感興趣的文章: