<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/Common/RightMenu.js"></script>
<style type="text/css">
html, body {
height: 100%;
}
.rightMenu {
position: absolute;
top: -9999px;
left: -9999px;
font-size: 13px;
}
.rightMenu > div, ul, li {
margin: 0;
padding: 0;
}
.rightMenu ul {
float: left;
border: 1px solid #DDDDDD;
background: #FFFFFF;
border-radius: 5px;
padding: 2px;
list-style-type: none;
box-shadow: 1px 2px 2px rgba(0,0,0,.3);
}
.rightMenu ul ul {
display: none;
position: absolute;
}
.rightMenu ul li {
float: left;
clear: both;
min-width: 128px;
height: 34px;
cursor: pointer;
line-height: 34px;
white-space: nowrap;
border-bottom: 1px solid #EEEEEE;
padding: 0 30px;
}
.rightMenu ul li.sub {
background-repeat: no-repeat;
background-position: 99% center;
background-image: url(/img/arrow.png);
background-size: 8px;
}
.rightMenu ul li.active {
background-color: #f1f3f6;
border-radius: 3px;
height: 34px;
line-height: 34px;
border: 1px solid #aecff7;
padding: 0 29px;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function () {
$("#rightMenu").rightMenu({
TriggerCondition:‘body‘
});
});
</script>
</head>
<body>
<div id="rightMenu" class="rightMenu">
<ul>
<li>
<div>JavaScript 学习</div>
<ul>
<li><div>什么是JavaScript</div></li>
<li><div>JavaScript基础</div></li>
</ul>
</li>
<li>
<div>
脚本之家
</div>
<ul>
<li><div>网页特效原理分析</div></li>
<li><div>响应用户操作</div></li>
<li><div>提示框效果</div></li>
<li><div>事件驱动</div></li>
<li><div>元素属性操作</div></li>
</ul>
</li>
<li>
<div>
www.jb51.net
</div>
<ul>
<li><div>改变网页背景颜色</div></li>
<li><div>函数传参</div></li>
<li><div>高重用性函数的编写</div></li>
<li><div>126邮箱全选效果</div></li>
<li><div>循环及遍历操作</div></li>
</ul>
</li>
<li>
<div>
第三课
</div>
<ul>
<li>
<div>
JavaScript组成
</div>
<ul>
<li><div>ECMAScript</div></li>
<li><div>DOM</div></li>
<li><div>BOM</div></li>
<li><div>JavaScript兼容性来源</div></li>
</ul>
</li>
<li><div>JavaScript出现的位置、优缺点</div></li>
<li><div>变量、类型、typeof、数据类型转换、变量作用域</div></li>
<li>
<div>
闭包
</div>
<ul>
<li><div>什么是闭包</div></li>
<li><div>简单应用</div></li>
<li><div>闭包缺点</div></li>
</ul>
</li>
<li><div>运算符</div></li>
<li><div>程序流程控制</div></li>
<li>
<div>
定时器的使用
</div>
<ul>
<li>
<div>setInterval</div>
<ul>
<li><div>clearInterval</div></li>
</ul>
</li>
<li><div>setTimeout</div></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Html 代码
/**
* 功能用途：右键菜单效果的实现
TriggerCondition：触发条件（筛选；及右键在点击内容或区域产生该右键菜单。例：‘a‘,‘body‘,‘div[class=xxx]‘，‘#xxxx‘等）
*/
; (function ($) {
jQuery.fn.rightMenu = function (opts) {
opts = $.extend({
TriggerCondition: ‘body‘
}, opts || {});
var menuId = $(this).attr(‘id‘);
return this.each(function () {
var $showTimer = $hideTimer = null;
var $maxWidth = $maxHeight = 0;
// 获取到菜单
var $objMenuBox = document.getElementById(menuId);
// 获取菜单中的ul
var $objUl = $objMenuBox.getElementsByTagName(‘ul‘);
// 获取菜单中的li
var $objLi = $objMenuBox.getElementsByTagName(‘li‘);
// 页面的绝对宽高
var $docArea = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];
// 将右键菜单隐藏
$($objMenuBox).hide();
// 给有子级菜单的li加上箭头
$.each($objLi, function () {
if ($(this).find(‘ul‘).length > 0)
$(this).addClass(‘sub‘);
else
$(this).removeClass(‘sub‘);
});
// 右键显示菜单
$(opts.TriggerCondition).contextmenu(function (event) {
var event = event || window.event;
// 显示出菜单
$($objMenuBox).show();
// 菜单的显示位置
$objMenuBox.style.top = event.clientY + ‘px‘;
$objMenuBox.style.left = event.clientX + ‘px‘;
// 设置菜单中的li的width
setLiWidth($objUl[0]);
// 最大显示范围
$docArea = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];
$maxWidth = $docArea[0] - $objMenuBox.offsetWidth;
$maxHeight = $docArea[1] - $objMenuBox.offsetHeight;
//溢出处理
if ($objMenuBox.offsetTop > $maxHeight)
$objMenuBox.style.top = $maxHeight + ‘px‘;
if ($objMenuBox.offsetLeft > $maxWidth)
$objMenuBox.style.left = $maxWidth + ‘px‘;
return false;
});
// 鼠标悬浮
$($objLi).mouseover(function (event) {
event.stopPropagation();
var $objTL = this;
var $objChildUl = $objTL.getElementsByTagName(‘ul‘);
// 给当前li添加选中样式
$($objTL).addClass(‘active‘);
$($objTL).parent().parent().addClass(‘active‘);
clearTimeout($hideTimer);
// 隐藏父级下所有的子级ul
$($objTL).siblings().find(‘ul‘).hide();
// 隐藏子级的所有子级
$($objChildUl).find(‘ul‘).hide();
// 如果有子级菜单
if ($($objChildUl).length > 0)
{
$showTimer = setTimeout(function () {
// 显示子菜单
$($objChildUl[0]).show();
// 子菜单的显示位置
$objChildUl[0].style.top = $objTL.offsetTop + ‘px‘;
$objChildUl[0].style.left = $objTL.offsetWidth + ‘px‘;
// 设置子菜单中li的宽度
setLiWidth($objChildUl[0]);
// 最大显示范围
$docArea = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];
$maxWidth = $docArea[0] - $objChildUl[0].offsetWidth;
$maxHeight = $docArea[1] - $objChildUl[0].offsetHeight;
// 溢出处理
if ($maxWidth < getOffset.left($objChildUl[0]))
$objChildUl[0].style.left = -$objChildUl[0].clientWidth + ‘px‘;
if ($maxHeight < getOffset.top($objChildUl[0]))
$objChildUl[0].style.top = -$objChildUl[0].clientHeight + $objTL.offsetTop + $objTL.clientHeight + ‘px‘;
}, 300);
}
});
//鼠标离开
$($objLi).mouseout(function (event) {
event.stopPropagation();
var $objTL = this;
var $objChildUl = $objTL.getElementsByTagName(‘ul‘);
// 移除li的选中样式
$($objTL).removeClass(‘active‘);
clearTimeout($showTimer);
$hideTimer = setTimeout(function () {
// 隐藏子菜单
$($objUl).find(‘ul‘).hide();
$($objUl).find(‘li‘).removeClass(‘active‘);
}, 300);
});
// 取消菜单
$(document).click(function () {
$(‘#‘ + menuId).hide();
});
var getOffset = $.extend({
left: function ($obj) {
return $obj.offsetLeft + ($obj.offsetParent ? arguments.callee($obj.offsetParent) : 0);
},
top: function ($obj) {
return $obj.offsetTop + ($obj.offsetParent ? arguments.callee($obj.offsetParent) : 0);
}
});
function setLiWidth($obj) {
$maxWidth = 0;
var $liWidth = 0;
$.each($obj.children, function () {
$liWidth = parseInt($(this)[0].getElementsByTagName(‘div‘)[0].clientWidth);
$maxWidth = $liWidth > $maxWidth ? $liWidth : $maxWidth;
});
$.each($obj.children, function () {
$(this)[0].style.width = $maxWidth + ‘px‘;
});
};
});
}
})(jQuery);
js （插件）
图片arrow.png
时间： 2024-10-08 01:17:45