首先列出的是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="關閉">關閉 </span>請您 登入</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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
