对象级别的插件开发

插件的框架代码：

;(function($){
    $.fn.extend({         // $.fn.extend表示要创建一个对象级别的插件
        "border":function(value){
            //这里写插件代码
        }
    });
})(jquery)

HTML：

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8" />
      <script src="js/jquery-2.2.2.min.js"></script>
      <script src="jquery.border.js"></script>
      <script type="text/javascript">
         $(function() {
            $("#test").border({
               width: "5px",
               "line": "dotted",
               color: "blue"
            }).css("background", "green");
         });
      </script>
      <style type="text/css">
         body {
            margin: 20px;
         }
         
         #test {
            font-size: 9pt;
            width: 300px;
            height: 50px;
            line-height: 50px;
            font-weight: bold;
            color: snow;
            padding-left: 20px;
         }
      </style>
   </head>

   <body>
      <div id="test">这个示例演示了自定义对象级别的插件的使用方法</div>
   </body>

</html>

jquery.border.js：

;(function ($) {
    $.fn.extend({
        //为jquery添加一个实例级别的border插件
        "border": function (options) {
            //设置属性
            options = $.extend({
                width: "1px",
                line: "solid",
                color: "#090"
            }, options);
            this.css("border", options.width + ' ' + options.line + ' ' + options.color);
            //设置样式
            return this;
        }
    })
   

})(jQuery)

result：

posted on 2016-05-25 19:05 Newbie_小白阅读(276) 评论(0) 收藏举报