<html>
<head>
<title>jquery plugins</title>
<style type="text/css">
#main{
width:300px;
height:120px;
}
.main_box{
width:120px;
height:100px;
background:#CCC;
margin:5px;
float:left;
color:#fff;
text-align:center;
}
.test{
background:#000;
}
.test2{
background:#888;
}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
<!--
//定义作用域:定义一个JQuery插件,首先要把这个插件的代码放在一个不受外界干扰的地方。
(function($){
//内部方法
var setFontColor = function(obj,color){
$(obj).css({"color":color});
}
//定义插件
$.fn.setBackGround = function (options) {
//默认参数
var defaults = {
className:'test'
};
//覆盖defaults中的对应属性,并替换options。可以理解成合并覆盖
options = $.extend(defaults, options);
$(this).addClass(options.className);
//支持链接调用
return this.each(function(){
setFontColor(this,"red");
});
}
})(jQuery);
$(document).ready(function(){
//调用方式
//#main
$(".main_box").setBackGround({className:'test2'})//插件调用
.css({ "border-width": "1", "border-color": "red", "border-bottom-style": "dotted" });//链接调用
});
//-->
</script>
</head>
<body>
<div id="main">
<div class="main_box">a</div>
<div class="main_box">b</div>
<div>
</body>
</html>
分享到:
相关推荐
jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件
微信公众号自定义菜单jQuery插件,可以多账号使用, 消息包含:图文消息、图片、语音、视频、网页链接,编辑后可以实时在线预览功能,保存、同步、清空菜单等功能则需要自己实现后台代码。
自定义jquery-wizard插件; 点击wizard.html查看效果;
源代码 博文链接:https://ioryioryzhan.iteye.com/blog/231257
jquery 封装select实现select自定义样式的完美插件jquery.easydropdown.min.js
这是一款带图标的jQuery自定义下拉框插件。该jquery插件可以动js代码中动态渲染下拉框的选项,生成带图标的下拉框选项,非常实用。
自定义下拉菜单jquery插件 自定义下拉菜单jquery插件
基于jquery的html select完全自定义化插件基于jquery的html select完全自定义化插件基于jquery的html select完全自定义化插件
Jquery自定义插件经典参考,为个人在项目开发中依据需要定制开发基于html代码形式,完全可见表格插件,不影响原来的编程习惯。与原有的MVC框架无缝结合就可以达现Grid表格的所有效果功能.一行 dataGrid = $("#dg")....
本文实例讲述了自定义jQuery插件方式实现强制对象重绘的方法。分享给大家供大家参考。具体实现方法如下: jQuery.fn.redraw = function(){ jQuery(this).each(function(){ this.style.display='none'; this....
UI JQuery自定义滚动条插件是 jquery自定义滚动条的UI JQuery插件。 UI JQuery自定义滚动条插件演示图: 点击查看演示:
使用jquery自定义星级评分插件
jQuery动态进度条自定义百分比插件
可自定义jQuery响应式幻灯片插件.zip
微信公众号自定菜单jQuery插件,完善图文消息、图片、语音、视频,在线预览,很好用,插件下载即可使用,js中存在预览数据,如需使用后台则打开AJAX代码,后台代码需自己完善。。
jQuery自定义月份选择插件
jquery自定义滚动条插件 1.兼容ie8+ 的自定义滚动条 2.滚动条样式完全自定义 3.单页面多次调用
一个很不错的jquery 右键自定义上下文菜单插件
jquery 自定义插件,模仿jquery easy ui,修改版