jquery 插件学习

作者: 我是金莲二老舅
来源: 51数据库
2021-08-06

练习jquery上的一个插件编写

1.标准的3个基本内容，根目录里面创建2个文件夹（存放css和js）和1个html页面文件；

2.测试的主html页面代码

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 5     <title></title>
 6 <meta charset="utf-8" />
 7     <title>jqia context menu - jquery in acition</title>
 8     <link rel="stylesheet" />
 9     <link rel="stylesheet" />
10     <style>
11         #area{
12             height:100px;
13             padding:10px;
14             margin-bottom:20px;
15             background-color:#add8e6;
16         }
17     </style>
18 </head>
19 <body>
20     <h1 class="header">jqia context menu plugin demo</h1>
21 
22     <div id="area">
23         click here to show the custom menu.
24     </div>
25 
26     <button id="init-destroy-button">init</button>
27 
28     <ul id="context-menu" class="context-menu">
29         <li>
30             <a >jquery in action</a>
31         </li>
32         <li>
33             <a >jquery.com</a>
34         </li>
35         <li>
36             <a >manning.com</a>
37         </li>
38     </ul>
39     <script src="js/jquery-1.11.3.min.js"></script>
40     <script src="js/jquery.jqia.contextmenu.js"></script>
41     <script>
42         $('#init-destroy-button').click(function () {
43             var $this = $(this);
44             if ($this.text() === 'init'){
45                 $this.text('destroy');
46                 $("#area").jqiacontextmenu({idmenu:"context-menu"});
47             }else{
48                $this.text('init');
49                $("#area").jqiacontextmenu("destroy"); 
50             }
51 
52         }).click();
53     </script>
54 
55 </body>
56 </html>

3.css文件中设置2个css格式文件

3.1第一个main.css

body {
    max-width:1024px;
    margin: 1em auto;
    padding:0 0.5em;
}

.clearfix{
    zoom:1;
}

.clearfix:after{
    content:" ";
    visibility:hidden;
    display:block;
    height:0;
    clear:both;
}

3.2 menu.css

ul.context-menu{
    position:absolute;
    z-index:1000;
    display:none;
    background-color:menu;
    list-style-type:none !important;
    margin:0 !important;
    padding:0 !important;
}

ul.context-menu *
{
    color:menutext;
}

ul.context-menu > li 
{
    border:1px solid black;
    margin:0 !important;
    padding:2px 5px !important;
}

ul.context-menu > li:hover
{
    background-color:activecaption;
}

ul.context-menu > li a
{
    display:block;
    text-decoration:none;
}

4.存放js的文件中有2个文件，1个是jquery，另一个是插架的js

4.1 jquery引入

4.2 menu.js

 1 (function($){
 2     var namespace='jqiacontextmenu';
 3 
 4     var methods = {
 5         init: function(options){
 6             if(!options.idmenu){
 7                 $.error('no menu specified');
 8             }else if ($('#' + options.idmenu).length === 0){
 9                 $.error('the menu specified does not exist');
10             }
11             options = $.extend(true,{},$.fn.jqiacontextmenu.defaults,options);
12 
13             if(
14                 this.filter(function(){
15                     return $(this).data(namespace);
16                 }).length !==0
17                 ){
18                 $.error('the plugin has already been initialized');
19             }
20 
21             this.data(namespace,options);
22 
23             /*
24             以下是给整个页面添加“点击”和“右击”事件，确保在区域外的点击均能使menu隐藏
25             */
26 
27             $('html').on(
28                 'contextmenu.'+namespace+' click.'+namespace,
29                 function(){
30                     $('#' + options.idmenu).hide();
31                 } 
32             );
33 
34             this.on(
35                 'contextmenu.'+namespace + (options.bindeleftclick? ' click.'+namespace : ''),
36                 function(event){
37                     event.preventdefault();
38                     event.stoppropagation();
39 
40                     $('#' + options.idmenu).css(
41                         {
42                             top:event.pagey,
43                             left:event.pagex
44                         }).show();
45                 }
46             );
47 
48             return this;
49         },
50 
51         destroy:function(){
52             this.each(function(){
53                 var options = $(this).data(namespace);
54                 if(options !== undefined){
55                     $('#' + options.idmenu).hide();
56                 }
57             })
58             .removedata(name)
59             .off('.'+namespace);
60 
61             return this;
62         }
63     };
64 
65     $.fn.jqiacontextmenu = function(method){
66         if(methods[method]){
67             return methods[method].apply(this,array.prototype.slice.call(arguments,1));
68         }else if ($.type(method) === 'object'){
69             return methods.init.apply(this,arguments);
70         }else {
71             $.error('method ' + method+' dose not on jqquery.jqiacontextmenu');
72         }
73     };
74 
75     $.fn.jqiacontextmenu.defaults = {
76         idmenu:null;
77         bindeleftclick:false
78     };
79 
80 
81 })(jquery);

5.编写javascript时，要从大局入手，局部在细致描述