Jquery右击显示菜单事件，运用smartMenu插件。

最新推荐文章于 2021-10-25 09:45:06 发布

weixin_30545285

最新推荐文章于 2021-10-25 09:45:06 发布

阅读量280

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xingyue1988/p/6337575.html

版权

基本格式：

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>

效果图：

转载于:https://www.cnblogs.com/xingyue1988/p/6337575.html

weixin_30545285

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery右击显示菜单事件，运用smartMenu插件。

基本格式：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...
复制链接

扫一扫