<!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- 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>
/** * 功能用途：右键菜单效果的实现 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);
图片arrow.png