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 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
Javascript 面向对象特性
Dec 28 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
js charAt的使用示例
Feb 18 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
Mar 31 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
JS自动生成动态HTML验证码页面
Jun 14 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
Vue实战教程之仿肯德基宅急送App
Jul 19 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 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数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
优雅地使用loading(推荐)
2019/04/20 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
2020/08/12 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
Python入门篇之数字
2014/10/20 Python
用Python实现随机森林算法的示例
2017/08/24 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
python中round函数如何使用
2020/06/19 Python
基于Python正确读取资源文件
2020/09/14 Python
Python 使用office365邮箱的示例
2020/10/29 Python
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
护士感人事迹
2014/05/01 职场文书
设计大赛策划方案
2014/06/13 职场文书
2014年国庆节演讲稿
2014/09/02 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL