• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery实现右键菜单插件

jquery实现右键菜单插件

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jquery,右键菜单等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能。也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容。这样可以拓展右键的功能。实现过程不多说了,写出来的代码和效果如下:

js部分:

//创建右键菜单
var epMenu={
    create:function(point,option){
        var menuNode=document.getElementById('epMenu');
        if(!menuNode){
            //没有菜单节点的时候创建一个
            menuNode=document.createElement("div");
            menuNode.setAttribute('class','epMenu');
            menuNode.setAttribute('id','epMenu');
        }else $(menuNode).html('');//清空里面的内容
       
        $(menuNode).css({left:point.left+'px',top:point.top+'px'});
        for(var x in option){
            var tempNode=document.createElement("a");
            $(tempNode).text(option[x]['name']).on('click',option[x].action);
            menuNode.appendChild(tempNode);
        }
       
        $("body").append(menuNode);
    },
    destory:function(){
        $(".epMenu").remove();
    }   
};

css部分代码如下:

/*右键菜单*/
.epMenu{ width:120px; background:#f0f0f0; position:fixed; left:0; top:0; box-shadow:2px 2px 2px 2px #807878;}
.epMenu a{ display:block; height:25px; line-height:25px; padding-left:15px; border-top:1px solid #e0e0e0; border-bottom:1px solid #fff; font-family:微软雅黑; font-size:14px; cursor:default;}
.epMenu a:hover{ background:#fff;}

创建调用代码如下:

epMenu.create({left:500,top:500},[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'添加图片组件','action':addImage}]);

销毁调用代码如下:

epMenu.destory();

效果如下:

调用说明:

创建:epMenu.create(point,option);

point   整数型,表示菜单的位置,相对浏览器左上角。

          示例:{left:100, top:500}

option json数组型,表示菜单项,name表示名称,action表示点击激发的动作。

          示例:[{name:'a1','action':addText},{name:'b222','action':addBtn},{name:'添加图片组件','action':addImage}]

销毁:epMenu.destory();

销毁不需要参数。

这玩意其实很简单!还可以扩展一下,比如添加图片,二级菜单等等。由于这次项目开发需求比较简单,就这么的吧。

以上所述就是本文的全部内容了,希望大家能够喜欢。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16jQuery实现弹出窗口弹出div层的实例代码
  • 2017-08-16jQuery修改CSS伪元素属性的方法
  • 2017-08-16JQuery里选择超链接的实现代码
  • 2017-08-16jQuery的控件及事件(输入控件及回车事件)使用示例
  • 2017-08-16JQuery中getJSON的使用方法
  • 2017-08-16jQuery中使用each处理json数据
  • 2017-08-16jQuery解决input超多的表单提交
  • 2017-08-16jQuery焦点图轮播特效代码分享(3款)
  • 2017-08-16谈谈jQuery之Deferred源码剖析
  • 2017-08-16jquery+json实现数据二级联动的方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery模板技术和数据绑定实现代码
    • jQuery实现自定义checkbox和radio样式
    • jQuery动画显示和隐藏效果实例演示(附demo源码下载)
    • jQuery仿Flash上下翻动的中英文导航菜单实例
    • JSON JQUERY模板实现说明
    • jquery ajax跨域解决方法(json方式)
    • jquery中使用ajax获取远程页面信息
    • jQuery数组处理函数整理
    • jquery多浏览器捕捉回车事件代码
    • 分享jQuery封装好的一些常用操作

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有