jQuery纵横向菜单和浮层效果

来源：互联网发布：淘宝产品推广编辑：程序博客网时间：2024/05/21 13:58

首先列出的是jQuery纵横向菜单的效果的演示

<html><head><title>JQuery纵横向菜单效果</title><script type="text/javascript" src="jquery-1.7.1.js"></script><style type="text/css">UL,LI{list-style:none; //去掉小圆点}UL{padding:0; margin:0; //清除子菜单缩进,但IE浏览器不能缩进}.mainMenu,.crossMenu{ /**主菜单样式*/width:70px; font-size:12px; //主菜单宽度//字体大小12pxbackground-image:url(../../resources/images/title.gif); background-repeat:repeat-x; //添加背景图片//背景图横向重复}LI{background-color:#EEEEEE; //子菜单样式：背景色}A{text-decoration:none; //取消链接的下划线padding-left:15px; //子菜单缩进/** * 让连接充满区域,及菜单边缘也可以点击 * 问题：若值为block,则IE会出现问题,不能填充,且子菜单会变样 * 问题：因此我们用inline解决,但是不能解决填充,因此加上宽度(70 - 15) */display:block; display:inline; width:70px;padding-top:3px; padding-bottom:3px; //给所有的链接加3个像素的上边距和下边距}.mainMenu A,.crossMenu A{color:blue; background-position:2px center; //主菜单链接为蓝色//背景箭头的位置background-image:url(../../resources/images/collapsed.gif); background-repeat:no-repeat; //链接背景图片//背景图不重复}.mainMenu LI A,.crossMenu LI A{color:green; background-image:none; //子菜单链接文字为绿色//去掉子菜单背景箭头}.mainMenu UL,.crossMenu UL{display:none; //主菜单下的UL全部隐藏}.crossMenu{font-size:12px; float:left; //字体大小12px//横向排列}</style><script type="text/javascript">$(function(){$('.mainMenu > a').click(function(){ //这样取到的就是：<a href="#">机构管理</a>。而非：<a href="#">添加机构</a>var childMenu = $(this).next('ul'); //找到主菜单项的子菜单项childMenu.slideToggle(); //改方法可以省去判断元素是否显示的过程，直接令隐藏的元素显示，令显示的元素隐藏changeIcon($(this));});$('.crossMenu').hover(function(){$(this).children('ul').slideToggle();changeIcon($(this).children('a'));});});function changeIcon(mainNode){ //修改主菜单的指示图标if(mainNode){if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0){mainNode.css('background-image', 'url(resources/images/expanded.gif)');}else{mainNode.css('background-image', 'url(resources/images/collapsed.gif)');}}}</script></head><body><ul><li class="mainMenu"><a href="#">机构管理</a><ul><li><a href="#">添加机构</a></li><li><a href="#">修改机构</a></li><li><a href="#">查询机构</a></li></ul></li><li class="mainMenu"><a href="#">部门管理</a><ul><li><a href="#">添加部门</a></li><li><a href="#">修改部门</a></li><li><a href="#">查询部门</a></li></ul></li><li class="mainMenu"><a href="#">员工管理</a><ul><li><a href="#">添加员工</a></li><li><a href="#">修改员工</a></li><li><a href="#">查询员工</a></li></ul></li></ul><br/><hr/><br/><ul><li class="crossMenu"><a href="#">机构管理</a><ul><li><a href="#">添加机构</a></li><li><a href="#">修改机构</a></li><li><a href="#">查询机构</a></li></ul></li><li class="crossMenu"><a href="#">部门管理</a><ul><li><a href="#">添加部门</a></li><li><a href="#">修改部门</a></li><li><a href="#">查询部门</a></li></ul></li><li class="crossMenu"><a href="#">员工管理</a><ul><li><a href="#">添加员工</a></li><li><a href="#">修改员工</a></li><li><a href="#">查询员工</a></li></ul></li></ul></body></html>

下面是jQuery浮层效果的演示

<html><head><title>jQuery浮层效果</title><script src="jquery-1.7.1.js" type="text/javascript"></script><style type="text/css">.wrapper{width:450px; border:1px solid #ccc; padding:50px; margin:0 auto; clear:both;}#dialogLayer{position:absolute; background-color:#000; filter:alpha(opacity=60); opacity:0.6; left:0; top:0;}#dialogBox{position:absolute; width:400px; height:300px; border:3px solid blue; background-color:#fff; left:0; top:0;}#dialogBox h2{height25px; line-height:25px; color:#fff; font-size:12px; background-color:blue; margin:0px; padding:0px;}#dialogBox h2 span{float:right; font-weight:normal; cursor:pointer;}.content{padding:10px; text-align:center;}</style><script type="text/javascript">$(function(){var dialogLayer = $('#dialogLayer');var dialogBox = $('#dialogBox');dialogLayer.hide();dialogBox.hide();var pageH = $(document.body).height();var pageW = $(document.body).width();var winH = $(window).height();var maxH = Math.max(winH,pageH);$(':button').click(function(){/*$.ajax({type: 'GET',url: 'web/getQuickPayOpenDetail.action',data: 'phoneNo=<%=request.getParameter("phoneNo")%>',dataType: 'text',success: function(returnedData){if("notCustomQuickPay" == returnedData){dialogLayer.show().width(pageW).height(maxH);dialogBox.show().css({'top':'80px','left':'80px'});}else if("JFB_System_Busy" == returnedData){window.location='${pageContext.request.contextPath}/JFB_System_Busy.jsp';}else{window.location='<%=JFBUtils.getPropertiesFileValue("global.properties", "ElecChnl.WEB.BoundResponse")%>' + returnedData;}}});*/dialogLayer.show().width(pageW).height(maxH);//dialogBox.show().css({'top':'100px','left':'100px'});var dialogBox_x = (pageW - dialogBox.width())/2;var dialogBox_y = (winH - dialogBox.height())/2;dialogBox.show().css({'top':dialogBox_y+'px','left':dialogBox_x+'px'});});$('#close').click(function(){dialogBox.hide();dialogLayer.hide();});});</script></head><body><div id="dialogLayer"></div><div id="dialogBox"><h2><span id="close" title="关闭">关闭&nbsp;&nbsp;</span>请您&nbsp;&nbsp;&nbsp;&nbsp;登录</h2><div class="content">content</div></div><div class="wrapper"><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p><div style="text-align:center;"><input type="button" value="点击弹出登陆框"/></div></div></body></html>