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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
javascript判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 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 str_replace的替换漏洞
2008/03/15 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
javascript 兼容FF的onmouseenter和onmouseleave的代码
2008/07/19 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
js验证密码强度解析
2020/03/18 Javascript
Python简单获取自身外网IP的方法
2016/09/18 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
让python 3支持mysqldb的解决方法
2017/02/14 Python
Python 数据结构之旋转链表
2017/02/25 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python交易记录整合交易类详解
2019/07/03 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python import 上级目录的导入
2020/11/03 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
香港通票:Hong Kong Pass
2019/02/26 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
大学生就业自荐信
2013/10/26 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
优秀员工自荐书
2015/03/06 职场文书
运动会观后感
2015/06/09 职场文书
食堂管理制度范本
2015/08/04 职场文书
MySQL派生表联表查询实战过程
2022/03/20 MySQL
Python中re模块的元字符使用小结
2022/04/07 Python