练习jquery上的一个插件编写

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

2.测试的主html页面代码

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

 <meta charset="utf-8" />

     <title>Jqia Context menu - jQuery in Acition</title>

     <link rel="stylesheet" href="Css/main.css"/>

     <link rel="stylesheet" href="Css/menu.css"/>

     <style>

         #area{

             height:100px;

             padding:10px;

             margin-bottom:20px;

             background-color:#ADD8E6;

         }

     </style>

 </head>

 <body>

     <h1 class="header">Jqia Context Menu plugin demo</h1>

     <div id="area">

         Click here to show the custom menu.

     </div>

     <button id="init-destroy-button">Init</button>

     <ul id="context-menu" class="context-menu">

         <li>

             <a href="http://manning.com/derosa">jQuery in action</a>

         </li>

         <li>

             <a href="http://manning.com/derosa">jQuery.com</a>

         </li>

         <li>

             <a href="http://manning.com/derosa">Manning.com</a>

         </li>

     </ul>

     <script src="Js/jquery-1.11.3.min.js"></script>

     <script src="Js/jquery.jqia.contextmenu.js"></script>

     <script>

         $('#init-destroy-button').click(function () {

             var $this = $(this);

             if ($this.text() === 'Init'){

                 $this.text('Destroy');

                 $("#area").jqiaContextMenu({idMenu:"context-menu"});

             }else{

                $this.text('Init');

                $("#area").jqiaContextMenu("destroy");

             }

         }).click();

     </script>

 </body>

 </html>

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

3.1第一个main.css

body {

    max-width:1024px;

    margin: 1em auto;

    padding:0 0.5em;

}

.clearfix{

    zoom:;

}

.clearfix:after{

    content:" ";

    visibility:hidden;

    display:block;

    height:;

    clear:both;

}

3.2 menu.css

ul.context-menu{

    position:absolute;

    z-index:;

    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

 (function($){

     var namespace='jqiaContextMenu';

     var methods = {

         init: function(options){

             if(!options.idMenu){

                 $.error('No menu specified');

             }else if ($('#' + options.idMenu).length === 0){

                 $.error('The menu specified does not exist');

             }

             options = $.extend(true,{},$.fn.jqiaContextMenu.defaults,options);

             if(

                 this.filter(function(){

                     return $(this).data(namespace);

                 }).length !==0

                 ){

                 $.error('The plugin has already been initialized');

             }

             this.data(namespace,options);

             /*

             以下是给整个页面添加“点击”和“右击”事件，确保在区域外的点击均能使menu隐藏

             */

             $('html').on(

                 'contextmenu.'+namespace+' click.'+namespace,

                 function(){

                     $('#' + options.idMenu).hide();

                 }

             );

             this.on(

                 'contextmenu.'+namespace + (options.bindeLeftClick? ' click.'+namespace : ''),

                 function(event){

                     event.preventDefault();

                     event.stopPropagation();

                     $('#' + options.idMenu).css(

                         {

                             top:event.pageY,

                             left:event.pageX

                         }).show();

                 }

             );

             return this;

         },

         destroy:function(){

             this.each(function(){

                 var options = $(this).data(namespace);

                 if(options !== undefined){

                     $('#' + options.idMenu).hide();

                 }

             })

             .removeData(name)

             .off('.'+namespace);

             return this;

         }

     };

     $.fn.jqiaContextMenu = function(method){

         if(methods[method]){

             return methods[method].apply(this,Array.prototype.slice.call(arguments,1));

         }else if ($.type(method) === 'object'){

             return methods.init.apply(this,arguments);

         }else {

             $.error('Method ' + method+' dose not on jqQuery.jqiaContextMenu');

         }

     };

     $.fn.jqiaContextMenu.defaults = {

         idMenu:null;

         bindeLeftClick:false

     };

 })(jQuery);

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

jquery 插件学习的更多相关文章

  1. Jquery插件学习

    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...

  2. jquery插件学习之元素顶部悬浮

    jquery插件的学习: HTML部分及应用 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  3. jQuery插件学习(一)

    由于项目开发需要,经常会用到一些jquery插件,但网上已有的插件常常又不能100%满足业务需求,所以就想自己能看懂插件的代码,进行一些功能上的改动和补充,或者能自己自定义插件就更好了.所以这段时间会 ...

  4. jquery插件 - 学习笔记 （插件参数及函数的调用）

    今天研究的是jquery插件的基本写法: 比如我打算写一个名为 ImageZoom 的插件 前台调用: <script src="ImageZoom.js"></ ...

  5. JQUERY插件学习之jQuery UI

    jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

  6. jQuery插件学习笔记

    近期在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其它地方反复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外 ...

  7. [置顶] JQuery插件学习教程

    这是JQuery其它常用插件的视频教程,包括validate插件,.comet插件等.同时有大量实例项目,如果你是喜欢JQuery的童鞋千万不要错过. 教程的内容有: 1_validate插件(1) ...

  8. jQuery插件学习基础

    1.给jQuery添加全局的函数: $.zgz={  fn1:function(){ alert('我是刚设置的第一个全局函数') },fn2:function(){ alert('我是刚设置的第二个 ...

  9. jQuery插件学习之选项卡Tab

    在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 来看一下效果: tab-1 tab-2 tab-3 tabs-1-panel tabs-2-panel ta ...

随机推荐

  1. ERP与电子商务的集成

    目前现状: 一般来说,企业中存在三种流:物资流.资金流和信息流,其中,信息流不是孤立存在的,它与物资流和资金流密切相关,反映了物资和资金流动前.流动中和流动后的状况. 电子商务与ERP被分裂开来,没有 ...

  2. Javascript之全局变量和局部变量部分讲解

    以此文作为自己学习的一个总结. 关于全局变量和局部变量的一句简单的定义:在函数外声明的变量都为全局变量,在函数内声明的为局部变量. 一.局部变量和全局变量重名会覆盖全局变量 var a = 1; fu ...

  3. idea maven 依赖问题

    今天发现,原来idea引用maven依赖的时候,优先依赖的是本地.但是有个问题,如果我删除了一个packet,如果刚刚好本地另外一个项目里面也有这个对于的packet,idea的智能提示 是 将其导入 ...

  4. python完全学习笔记

    dir(__builtins__) help(input) 'let\'s go'   #转义字符 \ r'c:\now'       #字符串前加r 自动转义 str= ''' shdiufhi s ...

  5. Android学习——自定义控件（一）

    由于之前在实习生面试的时候,被面试官问到有关自定义控件的问题,但没有回答上来,于是回来后便学习了关于自定义控件的相关知识. 自定义控件介绍 自定义控件,按我的理解,大体上分为两种.一种是自己绘图或者加 ...

  6. Python学习---Python下[set集合]的学习

    Set集合[可变]是一个无序的,不重复的数据组合,它的主要作用如下: 1. 去重,把一个列表变成集合,就自动去重了 2. 关系测试,测试两组数据之前的交集.差集.并集等关系 集合(set):把不同的元 ...

  7. Mysql学习---SQL语言的四大分类

    SQL语言共分为四大类:数据查询语言DQL,数据操纵语言DML,数据定义语言DDL,数据控制语言DCL. 1. 数据查询语言DQL 数据查询语言DQL基本结构是由SELECT子句,FROM子句,WHE ...

  8. 关于LDA的文章

    转:http://www.zhizhihu.com/html/y2011/3228.html l  Theory n  Introduction u  Unsupervised learning by ...

  9. commons.pool2 对象池的使用

    commons.pool2 对象池的使用 ? 1 2 3 4 5 <dependency>     <groupId>org.apache.commons</groupI ...

  10. Java使用iText生成word文件的完美解决方案（亲测可行）

    JAVA生成WORD文件的方法目前有以下种: 一种是jacob 但是局限于windows平台 往往许多JAVA程序运行于其他操作系统 在此不讨论该方案 一种是pio但是他的excel处理很程序 wor ...