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