`

自定义Jquery插件方法

 
阅读更多
<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加入Notification机制

    总的来说,自定义jQuery插件是一种强大且灵活的方式,可以扩展jQuery的功能,满足特定项目的需求。在本例中,我们创建了一个Notification插件,使得在jQuery应用中添加通知功能变得更加便捷。通过这种方式,你可以...

    自定义jQuery插件方式实现强制对象重绘的方法

    总结,文章提供的自定义jQuery插件方法可以作为开发者在处理需要强制重绘对象时的参考。理解上述知识点有助于开发者更好地控制网页元素的显示效果,并且可以将这些技术应用于多种复杂场景中。需要注意的是,在实际...

    jquery 封装select实现select自定义样式插件jquery.easydropdown.min.js

    `jquery.easydropdown.min.js`是一个轻量级的jQuery插件,它的主要功能是将传统的Select元素转换为具有自定义样式的下拉菜单。这个插件通过JavaScript和CSS实现了高度可定制的外观和行为,同时保持了原生Select的...

    jQuery自定义下拉框插件

    jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件

    微信公众号自定义菜单jQuery插件

    微信公众号自定义菜单jQuery插件,可以多账号使用, 消息包含:图文消息、图片、语音、视频、网页链接,编辑后可以实时在线预览功能,保存、同步、清空菜单等功能则需要自己实现后台代码。

    自定义jquery-wizard插件

    在这个项目中,我们有一个名为“自定义jquery-wizard插件”的实现,通过提供的资源文件,我们可以看到一个完整的实现案例。 1. **主要文件解析:** - **jquery-wizard.1.0.css**:这是样式表文件,包含了插件的...

    微信公众号自定义菜单插件.rar

    微信公众号自定菜单jQuery插件,完善图文消息、图片、语音、视频,在线预览,很好用,插件下载即可使用,js中存在预览数据,如需使用后台则打开AJAX代码,后台代码需自己完善。。

    自定义下拉菜单jquery插件

    自定义下拉菜单jquery插件 自定义下拉菜单jquery插件

    自定义DataGrid Jquery插件经典

    Jquery自定义插件经典参考,为个人在项目开发中依据需要定制开发基于html代码形式,完全可见表格插件,不影响原来的编程习惯。与原有的MVC框架无缝结合就可以达现Grid表格的所有效果功能.一行 dataGrid = $("#dg")....

    JQUERY插件之自定义滚动条DEMO

    本主题聚焦于“JQUERY插件之自定义滚动条DEMO”,这涉及到如何使用jQuery来实现一个自定义的滚动条,以替代浏览器默认样式,并确保在不同浏览器如IE、Firefox、Chrome和百度浏览器中的兼容性。 首先,我们了解滚动...

    带图标的jQuery自定义下拉框插件

    在本项目中,我们关注的是一个基于jQuery的自定义下拉框插件,它提供了丰富的功能和视觉效果,使得用户界面更加友好和吸引人。 该插件的主要特点是其“带图标”的特性。在传统的下拉框中,每个选项通常只包含纯文本...

    UI JQuery自定义滚动条插件.zip

    UI JQuery自定义滚动条插件是 jquery自定义滚动条的UI JQuery插件。 UI JQuery自定义滚动条插件演示图: 点击查看演示:

    jQuery插件开发学习

    这篇“jQuery插件开发学习”的主题旨在帮助开发者深入理解如何利用jQuery来开发自定义插件,提高代码复用性和项目效率。下面我们将详细探讨jQuery插件开发的相关知识点。 首先,了解jQuery的核心概念是至关重要的。...

    jquery 右键自定义上下文菜单插件

    本话题聚焦于一个jQuery插件,即"jquery 右键自定义上下文菜单插件",这个插件允许开发者为网页中的元素创建个性化的右键菜单,提供了丰富的定制选项和便捷的API接口。 首先,让我们理解一下“上下文菜单”的概念。...

    可自定义jQuery响应式幻灯片插件.zip

    【标题】中的“可自定义jQuery响应式幻灯片插件”是指一种基于jQuery库的JavaScript组件,设计用于创建响应式、动态切换的图片或内容展示区域,通常被称为轮播图或滑动展示。这样的插件允许开发者根据需要调整样式、...

    jquery插件大全

    自定义jQuery插件 如果你需要创建自己的jQuery插件,可以按照以下步骤: 1. 定义一个函数,作为插件的核心。 2. 使用`$.fn.extend`将函数添加到jQuery原型链上。 3. 在函数内部,获取当前选择的元素集,并根据...

    jquery自定义滚动条插件

    该jQuery插件确保在Internet Explorer 8及更高版本、Firefox、Chrome、Safari和Opera等主流浏览器中都能正常工作。这使得它在广泛的用户群体中具有良好的兼容性,无论用户的设备或浏览器偏好如何,都能提供一致的...

    一款用于表格数据自定义排序的jQuery插件jquery.tablesortable.js(附例子)

    一款用于表格数据自定义排序的jQuery插件,仿EasyUI,数据列启用自定义排序后,该列标题后将出现向上或者向下的三角形,点击列标题设置新的排序参数。附的例子是asp.net mvc的,但插件是基于jQuery 的,当然可以用于...

Global site tag (gtag.js) - Google Analytics