基本格式：

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. android usb挂载分析----vold启动

    http://blog.csdn.net/new_abc/article/details/7396733 前段时间做了下usb挂载的,现在出了几个bug,又要把流程给梳理下,顺便也把相关的知识总结下, ...

  2. IGeoFeatureLayer

    Members   All Properties Methods Inherited Non-inherited Description AnnotationProperties Annotation ...

  3. Android学习笔记之ContentProvider

    读取其他应用程序共享的数据 以下示例为读取联系人信息 package com.jiahemeikang.helloandroid; import com.jiahemikang.service.Ech ...

  4. Memcached缓存系统介绍及安装

    1.什么是Memcached 1.1.Memcached概述 Memcached是一个免费的开源的.高性能的.具有又分布式内存对象的缓存系统,它通过减轻数据库负载加速动态WEB应用, 1.2.Memc ...

  5. Oracle使用rowid删除重复记录

    /**如何删除重复记录?*//*1. 先按重复字段分组   2. 在每组里找出最小的rowid   3. 把整个表中与上面查询出来的rowid不相等的记录删除掉*/delete from test_t ...

  6. astah* professional 6.9.0

    下载地址:http://members.change-vision.com/files/astah_professional/6_9_0 破解方法:按照Astah Professional 6.9后打 ...

  7. Ubuntu上CUDA和CUDNN的安装

    Ubuntu上CUDA的安装 下载路径: CUDA下载 `sudo dpkg -i cuda-repo-ubuntu1504-7-5-local_7.5-18_amd64.deb` `sudo apt ...

  8. 第五弹：VGG

    接下来讲一个目前经常被用到的模型,来自牛津大学的VGG,该网络目前还有很多改进版本,这里只讲一下最初的模型,分别从论文解析和模型理解两部分组成. 一.论文解析 一:摘要 -- 从Alex-net发展而 ...

  9. RestTemplate 发送Post 多个参数请求

    MultiValueMap<String, String> requestEntity = new LinkedMultiValueMap<>(); requestEntity ...

  10. 超全！整理常用的iOS第三方资源

    一:第三方插件 1:基于响应式编程思想的oc 地址:https://github.com/ReactiveCocoa/ReactiveCocoa 2:hud提示框 地址:https://github. ...