基本格式：

1.引用jquery、smartMenu插件、css样式：

<script src="gongju/jquery-1.11.2.min.js" type="text/javascript"></script>

    <script src="gongju/jqueryMENU/js/jquery-smartMenu.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="gongju/jqueryMENU/css/smartMenu.css"/>

2.在客户端页面定义一个点击元素：

<div style="border: 1px solid red;width: 100px;height: 100px;" id="youji">

    </div>

3.jquery基本格式：var data[[{},{},{}]];data里面还可以设置二层内容，var data[[{ data[[{},{},{}]] },{},{}]];

var data=[[

          {

            text:...,

            func:function(){};

           },

           {

              text:...,

            func:function(){};

           },

           {

             text:...,

            func:function(){};

           }

           ]];

$("#youji").smartMenu(data);

4.例子：右击出现三个文本，分别是图片描边、图片内间距、图片背景色。func：里边是点击每个文本后出现的效果，可以定义其他内容。

<script src="gongju/jquery-1.11.2.min.js" type="text/javascript"></script>

    <script src="gongju/jqueryMENU/js/jquery-smartMenu.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="gongju/jqueryMENU/css/smartMenu.css"/>

</head>

<body>

    <div style="border: 1px solid red;width: 100px;height: 100px;" id="youji">

    </div>

</body>

</html>

<script type="text/javascript">

var data = [

    [{

        text: "图片描边",      //定义文本

        func:function()       //定义点击文本出现的效果

        {

            $(this).css("margin","20px");

        }

    }, {

        text: "图片内间距",

        func: function() {

            $(this).css("padding", "10px");

        }

    }, {

        text: "图片背景色",

        func: function() {

            $(this).css("background-color", "#beceeb");

        }

    }]

    ];

    $("#youji").smartMenu(data);

</script>

效果图：

Jquery右击显示菜单事件，运用smartMenu插件。的更多相关文章

  1. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  2. jQuery Wheel 环形菜单插件5种效果演示

    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...

  3. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  4. jquery+css3打造一款ajax分页插件

    原文:[原创]jquery+css3打造一款ajax分页插件 最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认 ...

  5. 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单拖放控制

    jQuery EasyUI 树形菜单 - 树形菜单拖放控制 当在一个应用中使用树(Tree)插件,拖拽(drag)和放置(drop)功能要求允许用户改变节点位置.启用拖拽(drag)和放置(drop) ...

  6. jQuery html5Validate基于HTML5表单验证插件

    更新于2016-02-25 前面提到的新版目前线上已经可以访问: http://mp.gtimg.cn/old_mp/assets/js/common/ui/Validate.js demo体验狠狠地 ...

  7. Jquery的点击事件，三句代码完成全选事件

    先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  8. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  9. iOS 学习 - 18.TextField 自定义菜单事件，复制和微信分享

    菜单事件包括,剪切.拷贝.全选.分享...,此 demo 只有 copy.share 1.定义 field 继承与 UITextField - (BOOL)canPerformAction:(SEL) ...

随机推荐

  1. git diff 差异对比

    转载原文: http://fsjoy.blog.51cto.com/318484/245465/ 1. 查看当前所有的更改情况.git status 结果有3部分,changes to be comm ...

  2. smali插入log，打印变量

    一:Log打印变量: Log打印字符串: #liyanzhong debug const-string v1, "TAG" const-string v2, "xunbu ...

  3. iframe载入等待

    <style> #pageloading{position:absolute; left:0px; top:0px;background:white url('../images/load ...

  4. Deep learning：三十八(Stacked CNN简单介绍)

    http://www.cnblogs.com/tornadomeet/archive/2013/05/05/3061457.html 前言: 本节主要是来简单介绍下stacked CNN(深度卷积网络 ...

  5. Quick Cocos2dx Http通讯 JSON

    参考: 1 http://stackoverflow.com/questions/5975952/how-to-extract-http-message-body-in-basehttprequest ...

  6. Blog开始

    好久没更新Blog了,去看了下之前的csdn的blog感觉特别的乱,为此决心重开blog,记录工作及学习中的一些事 2013-10-28 ymc ...

  7. ELK 日志分析体系

    ELK   日志分析体系 ELK 是指 Elasticsearch.Logstash.Kibana三个开源软件的组合. logstash                       负责日志的收集,处 ...

  8. iOS开发——应用图标上显示消息数量

    iOS8以前: UIApplication *app = [UIApplication sharedApplication]; app.applicationIconBadgeNumber = num ...

  9. WINDOWS下搭建SVN服务器端的步骤分享(Subversion)

    1.获取svn程序 2.安装 Subversion(以下简称SVN)的服务器端和客户端.下载下来的服务器端是个 zip压缩包,直接解压缩即可,比如我解压到 E:\subversion .客户端安装文件 ...

  10. UVa 10911 - Forming Quiz Teams

    题目大意:给出2*n个点,将这些点配成n对,使得所有点对中两点的距离之和尽量小. 用一个整数的二进制形式表示一个集合的子集,以每个集合为状态进行状态转移.具体参见<算法竞赛入门经典>9.5 ...