練習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時，要從大局入手，局部在細緻描述
