练习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. 万网知您所需，“域”众不同--.link/.love/.help等一大波新顶级域来袭！

    万网在新顶级域市场再次发力,一大波域名界的小鲜肉新鲜上线,价格优惠,限时低至9元起,更有丰富的可注册资源. 一下,即刻世界,用记录生活,用观看世界, 用和做最好的! 新上线的个性化新顶级域价格如下: ...

  2. Picasso通过URL获取--用户头像的圆形显示

    1.设置布局属性: <ImageView android:scaleType="fitXY"/> 2.BitmapUtils类-- 得到指定圆形的Bitmap对象 pu ...

  3. SQL点点滴滴_聚集索引设计指南-转载

    聚集索引基于数据行的键值在表内排序和存储这些数据行, 每个表只能有一个聚集索引, 因为数据行本身只能按一个顺序存储. 有关聚集索引体系结构的详细信息, 请参阅 聚集索引结构. 每个表几乎都对列定义聚集 ...

  4. Going Deeper with Convolutions(Inception v1)笔记

    目录 Abstract Introduction First of All Inception Depth Related Work Motivation and High Level Conside ...

  5. 打通 Spark 系统运行内幕机制循环流程

    本课主题 打通 Spark 系统运行内幕机制循环流程 引言 通过 DAGScheduelr 面向整个 Job,然后划分成不同的 Stage,Stage 是从后往前划分的,执行的时候是從前往后执行的,每 ...

  6. spring初始化完成后执行初始化数据方法

    Spring提供的解决方案三种: 1.InitializingBean package com.foriseland.fsoa.fabricca; import com.foriseland.fsoa ...

  7. Java实现的有道云笔记图片批量下载工具

    有朋友问我每天哪里找时间写这么多文章. 作为一个程序员,当然要善于利用各种工具提高自己做事情的效率了.如果没有现成的工具,就得自己造. 我写文章一般是在云笔记里编辑,完成之后直接复制粘贴到自媒体平台. ...

  8. 用poi-3.6-20091214.jar 实现java给excel资料加密

    用poi-3.6-20091214.jar 实现java给excel文件加密我用了网上的很多方法,但是都没有成功! HSSFWorkbook wb = new HSSFWorkbook(new Fil ...

  9. PhoneGap 的文件 api

    一. 文件系统的请求 请求文件系统通过 window.requestFileSystem 来完函数声明如下: window.requestFileSystem(type, size, successC ...

  10. BZOJ3238:[AHOI2013]差异(SAM)

    Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output 54 HINT 2<=N< ...