1前言
最近因為項目的需要，使用了一個JQuery插件。把插件下下來後，很快我就發現，很多默認的插件Style不符合項目要求，必須要被修改。
在這個過程中，我發現自己先後使用了多種不同的方法實現插件Style的定制化。很高興最後找到了我認為最好的方法，對CSS的認識也加深了不少，感觸頗多。這篇文章就是對這些新的CSS的認識的一個梳理。
2JQuery 插件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參考
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/