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


Posted in Javascript onMay 03, 2012

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/
Javascript 相关文章推荐
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
拉动滚动条加载数据的jquery代码
May 03 #Javascript
基于jquery的固定表头和列头的代码
May 03 #Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 #Javascript
ASP.NET中AJAX 调用实例代码
May 03 #Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 #Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 #Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 #Javascript
You might like
非常好的php目录导航文件代码
2006/10/09 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
JavaScript的Cookies
2008/01/16 Javascript
Exjs 入门篇
2010/04/07 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
Underscore源码分析
2015/12/30 Javascript
5分钟学会Vue动画效果(小结)
2018/07/21 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
python同时给两个收件人发送邮件的方法
2015/04/30 Python
python实现弹跳小球
2019/05/13 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
浅谈tensorflow模型保存为pb的各种姿势
2020/05/25 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
详解如何修改python中字典的键和值
2020/09/29 Python
小学教师的个人自我鉴定
2013/10/26 职场文书
入党转预备思想汇报
2014/01/07 职场文书
美容院营销方案
2014/03/05 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
Python实现视频中添加音频工具详解
2021/12/06 Python
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS