欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jquery 插件学习

程序员文章站 2022-08-09 10:04:39
练习jquery上的一个插件编写 1.标准的3个基本内容，根目录里面创建2个文件夹（存放css和js）和1个html页面文件； 2.测试的主html页面代码 3.css文件中设置2个css格式文件 3.1第一个main.css 3.2 menu.css 4.存放js的文件中有2个文件，1个是jque ......

练习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" href="css/main.css"/>
 9     <link rel="stylesheet" href="css/menu.css"/>
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 href="http://manning.com/derosa">jquery in action</a>
31         </li>
32         <li>
33             <a href="http://manning.com/derosa">jquery.com</a>
34         </li>
35         <li>
36             <a href="http://manning.com/derosa">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时，要从大局入手，局部在细致描述

 

上一篇： PS入门学习须要注意的十个要点

下一篇： 详解HTML5中的进度条progress元素简介及兼容性处理

推荐阅读