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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
JS对日期操作封装代码实例
Nov 08 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中的函数嵌套层数限制分析
2011/06/13 PHP
PHP生成唯一订单号
2015/07/05 PHP
在Mac OS上编译安装Nginx+PHP+MariaDB开发环境的教程
2016/02/23 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
this和执行上下文实现代码
2010/07/01 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
javascript中获取元素标签中间的内容的实现方法
2016/10/08 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
如何使用angularJs
2017/05/08 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
[02:45]DOTA2英雄敌法师基础教程
2013/11/25 DOTA
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
浅谈五大Python Web框架
2017/03/20 Python
python实现外卖信息管理系统
2018/01/11 Python
python使用PyQt5的简单方法
2019/02/27 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
Python流程控制 if else实现解析
2019/09/02 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
丝芙兰波兰:Sephora.pl
2018/03/25 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
薪酬专员岗位职责
2014/02/18 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
保护环境标语
2014/06/09 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
七一建党节演讲稿
2014/09/11 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android