自定义jquery插件

最新推荐文章于 2022-03-18 20:10:16 发布

AsaZyf

最新推荐文章于 2022-03-18 20:10:16 发布

阅读量151

点赞数

分类专栏：实用

本文链接：https://blog.csdn.net/AsaZyf/article/details/82424656

版权

实用同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

jQuery插件

14 篇文章 0 订阅

订阅专栏

html：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
       <script type="text/javascript" src="js/test.js" ></script>
       <style>
           *{margin: 0;padding: 0;}
           .big{
               margin: 10px auto;
               width: 200px;
               height: 300px;
               background: red;
           }
           .small{
               margin:20px auto;
               width: 100px;
               height: 200px;
               background:green;
           }
       </style>
   </head>
   <body>
       <div class="big">
           我要比原来大
       </div>
       <div class="small">
           我要比原来小
       </div>
       <script>
//           调用组件
           $(".big").size()
           $(".small").size({
//               根据组件有的更改数值
               "width":"50px"
           })
       </script>
   </body>
</html>

test.js：

;(function($){
   function Size(el,opt){
       this.$el=el
       this.defaults={
           "width":300, //,切记
           "height":200,
           "border":"1px solid blue",
           "color":"yellow"
       }
       this.options=$.extend(this.defaults,opt);
   }
   Size.prototype={
       big:function(){
           this.$el.css({
               "width":this.options.width, //,切记
               "height":this.options.height,
               "border":this.options.border
           })
           this.color() //调用下面color方法
           return this.$el
       },
       color:function(){
           this.$el.css({
               "color":this.options.color
           })
       }
   }
   $.fn.size=function(options){
       var size=new Size(this,options)
       return size.big()
   }
})(jQuery)