jquery右键菜单

最新推荐文章于 2023-01-12 01:26:16 发布

beiwei009

最新推荐文章于 2023-01-12 01:26:16 发布

阅读量344

点赞数

文章标签： jquery function xhtml div javascript class

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312' />
<title>无标题文档</title>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'></script>
<script type='text/javascript'>
// JavaScript Document
jQuery.fn.extend({
    jsRightMenu: function(options) {
        options = $.extend({
            menuList: []
        }, options);
        return this.each(function() {
            if ($('#div_RightMenu', $(this)).size() == 0) {
                var menuCount = options.menuList.length;
                if (menuCount > 0) {
                    var divMenuList = '<div id=\'div_RightMenu\' class=\'div_RightMenu\'>';
                    for (var i = 0; i < menuCount; i++) {
                        divMenuList += '<div class=\'divMenuItem\' οnclick=\'' + options.menuList[i].clickEvent + '\' οnmοuseοver=\'' + options.menuList[i].mouseoverEvent + '\' οnmοuseοut=\'' + options.menuList[i].mouseoutEvent + '\'>' + options.menuList[i].menuName + '</div>';
                    }
                    divMenuList += '</div>';
                    $(this).append(divMenuList);
                    var objM = $('.divMenuItem');
                    $('#div_RightMenu').hide();
                    objM.bind('mouseover', function() {
                        this.style.backgroundColor = '#316ac5';
                        this.style.paddingLeft = '30px';
                    });
                    objM.bind('mouseout', function() {
                        this.style.backgroundColor = '#EAEAEA';
                    });
                }
            }
            this.oncontextmenu = function() {
                var objMenu = $('#div_RightMenu');
                if (objMenu.size() > 0) {
                    objMenu.hide();
                    var event = arguments[0] || window.event;
                    var clientX = event.clientX;
                    var clientY = event.clientY;
                    var redge = document.body.clientWidth - clientX;
                    var bedge = document.body.clientHeight - clientY;
                    var menu = objMenu.get(0);
                    var menuLeft = 0;
                    var menuTop = 0;
                    if (redge < menu.offsetWidth)
                        menuLeft = document.body.scrollLeft + clientX - menu.offsetWidth;
                    else
                        menuLeft = document.body.scrollLeft + clientX;
                    if (bedge < menu.offsetHeight)
                        menuTop = document.body.scrollTop + clientY - menu.offsetHeight;
                    else
                        menuTop = document.body.scrollTop + clientY;
                    objMenu.css({ top: menuTop + 'px', left: menuLeft + 'px' });
                    objMenu.show();
                    return false;
                }
            }
            document.onclick = function() {
                var objMenu = $('#div_RightMenu');
                if (objMenu.size() > 0) objMenu.hide();
            }
        });
    }
});

</script>
<script type='text/javascript'>

$(function() {
$('#divTest' ).jsRightMenu({
    menuList: [{ menuName: '右键菜单1', clickEvent: 'divClick('1')'},
               { menuName: '右键菜单2', clickEvent: 'divClick('2')'},
               { menuName: '右键菜单3', clickEvent: 'divClick('3')'},
               { menuName: '右键菜单4', clickEvent: 'divClick('4')'},
               { menuName: '右键菜单5', clickEvent: 'divClick('5')'}
              ]
    });

});

function divClick(id){
alert('你点了--右键菜单'+id);
}

</script>

</head>

<body>
<div id='divTest'>右键菜单显示区域</div>
</body>
</html>

beiwei009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery右键菜单

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>http://www.w3.org/1999/xhtml'>无标题文档http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'>// JavaScript
复制链接

扫一扫