基本格式：

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. 定时且周期性的任务研究II--ScheduledThreadPoolExecutor

    http://victorzhzh.iteye.com/blog/1011635 上一篇中我们看到了Timer的不足之处,本篇我们将围绕这些不足之处看看ScheduledThreadPoolExecu ...

  2. 计算机学院大学生程序设计竞赛（2015’12） 1001 The Country List

    #include<cstdio> #include<cstring> #include<cmath> #include<string> #include ...

  3. bootstrap建立响应式网站——tab选项卡

    1.bootstrap给我们提供了标签页 细细看了一下bootstrap的标签页源码,对tab选项卡有了更深的理解.其实说来也简单,以前自己写js和css时没有意识到整体的划分.就是分为两部分:一部分 ...

  4. 史上最强php生成pdf文件,html转pdf文件方法

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  5. [Unity Physics] Physics - Raycast

    Class Variables类变量 gravity The gravity applied to all rigid bodies in the scene.场景中应用到所有刚性物体的重力. min ...

  6. iOS 8自定义动画转场上手指南

    原文:http://www.cocoachina.com/ios/20150126/11011.html iOS 5发布的时候,苹果针对应用程序界面的设计,提出了一种全新的,革命性的方法—Storyb ...

  7. SSH报错分析

    排错设计思路 1.配置文件的端口号修改 2.禁用root 3./etc/hosts.allow /etc/hosts.deny 4.iptables 5.密钥文件及目录的权限修改 1. 报错的原因:是 ...

  8. 开启分布式事物DTC

    1.web服务器开启分布式事物配置后,数据库服务器的host文件要设置  “IP  web服务器主机名” 的映射,否则会 出现 “与基础事务管理器的通信失败” #跨网段使用TransactionSco ...

  9. box2d中的物理世界

    box2d中的物理世界,即b2World类就是一个包含了各种物体(body,物理体,或者叫刚体),固定附着物(fixture,形状与物理体的绑定物)以及各种约束体(比如关节),并使其在当中完成各种交互 ...

  10. python内置函数all使用的坑

    在代码的改造过程中,因为忽略了一个问题导致数据异常,在改造的过程中以及后续的review中都没注意到这个问题,单元测试也没有覆盖到,记录如下.这个坑在于all的使用上,如果参数为空元组或空列表时,返回 ...