jquery开发插件示例

最新推荐文章于 2019-07-02 08:01:43 发布

sunshingheavy

最新推荐文章于 2019-07-02 08:01:43 发布

阅读量480

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/sunshingheavy/article/details/52786731

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用jQuery开发的自定义插件示例，展示了如何通过jQuery扩展函数实现元素样式的动态更改，并实现了资源管理的功能，如添加和编辑操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src='jquery-1.8.0.min.js'></script>
  <title>Document</title>
 </head>
 <body>
<input id='addbtn' type=button value=add />
<input id='editbtn' type=button value=edit />



<div id='div1'>111111</div>

<div id='div2'>2222222</div>

<script type="text/javascript"> 
(function($){
   $.fn.extend({
      myPlugin1:function(options,callback){
          var defaults={
             foreground:'yellow',
			 background:'red'
		  }

		  var opts = $.extend(defaults,options);
		  $(this).css({'color':opts.foreground,'background-color':opts.background});
		  if(callback){
               callback(opts);
		  }
	  }	  
   })

   $.fn.myPlugin2=function(options,callback){
         var defaults={
             foreground:'yello',
			 background:'red'
		  }

		  var opts = $.extend(defaults,options);
		  $(this).css({'color':opts.foreground,'background-color':opts.background});
		  if(callback){
               callback(opts);
		  }
   }
})(jQuery); 
</script>


<script type="text/javascript">
$.resource={
        add:function(){
             alert('add'); 
		},
		edit:function(){
             alert('edit');
		}
 
}





$(function(){ 
	$('#addbtn').bind('click',$.resource.add);
	$('#editbtn').click(function(){$.resource.edit()});

	$('#div1').myPlugin1({},function(a){
	     console.log(a);	
	})
	$('#div2').myPlugin2({foreground:'black'} )
})


</script>  
 </body>

</html>