关闭

jQuery纵横向菜单和浮层效果

976人阅读 评论(0) 收藏 举报

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

  1. <html>  
  2.     <head>  
  3.         <title>JQuery纵横向菜单效果</title>  
  4.         <script type="text/javascript" src=../../"jquery-1.7.1.js"></script>  
  5.         <style type="text/css">  
  6.             UL,LI{  
  7.                 list-style:none; //去掉小圆点   
  8.             }  
  9.             UL{  
  10.                 padding:0; margin:0; //清除子菜单缩进,但IE浏览器不能缩进   
  11.             }  
  12.             .mainMenu,.crossMenu{ /**主菜单样式*/  
  13.                 width:70px; font-size:12px; //主菜单宽度//字体大小12px   
  14.                 background-image:url(../../resources/images/title.gif); background-repeat:repeat-x; //添加背景图片//背景图横向重复   
  15.             }  
  16.             LI{  
  17.                 background-color:#EEEEEE; //子菜单样式:背景色   
  18.             }  
  19.             A{  
  20.                 text-decoration:none; //取消链接的下划线   
  21.                 padding-left:15px; //子菜单缩进   
  22.                 /** 
  23.                  * 让连接充满区域,及菜单边缘也可以点击 
  24.                  * 问题:若值为block,则IE会出现问题,不能填充,且子菜单会变样 
  25.                  * 问题:因此我们用inline解决,但是不能解决填充,因此加上宽度(70 - 15) 
  26.                  */  
  27.                 display:block; display:inline; width:70px;  
  28.                 padding-top:3px; padding-bottom:3px; //给所有的链接加3个像素的上边距和下边距   
  29.             }  
  30.             .mainMenu A,.crossMenu A{  
  31.                 color:blue; background-position:2px center; //主菜单链接为蓝色//背景箭头的位置   
  32.                 background-image:url(../../resources/images/collapsed.gif); background-repeat:no-repeat; //链接背景图片//背景图不重复   
  33.             }  
  34.             .mainMenu LI A,.crossMenu LI A{  
  35.                 color:green; background-image:none; //子菜单链接文字为绿色//去掉子菜单背景箭头   
  36.             }  
  37.             .mainMenu UL,.crossMenu UL{  
  38.                 display:none; //主菜单下的UL全部隐藏   
  39.             }  
  40.             .crossMenu{  
  41.                 font-size:12px; float:left; //字体大小12px//横向排列   
  42.             }  
  43.         </style>  
  44.         <script type="text/javascript">  
  45.             $(function(){  
  46.                 $('.mainMenu > a').click(  
  47.                     function(){ //这样取到的就是:<a href="#">机构管理</a>。而非:<a href="#">添加机构</a>   
  48.                         var childMenu = $(this).next('ul'); //找到主菜单项的子菜单项   
  49.                         childMenu.slideToggle(); //改方法可以省去判断元素是否显示的过程,直接令隐藏的元素显示,令显示的元素隐藏   
  50.                         changeIcon($(this));  
  51.                     }  
  52.                 );  
  53.                 $('.crossMenu').hover(  
  54.                     function(){  
  55.                         $(this).children('ul').slideToggle();  
  56.                         changeIcon($(this).children('a'));  
  57.                     }  
  58.                 );  
  59.             });  
  60.             function changeIcon(mainNode){ //修改主菜单的指示图标   
  61.                 if(mainNode){  
  62.                     if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0){  
  63.                         mainNode.css('background-image''url(resources/images/expanded.gif)');  
  64.                     }else{  
  65.                         mainNode.css('background-image''url(resources/images/collapsed.gif)');  
  66.                     }  
  67.                 }  
  68.             }  
  69.         </script>  
  70.     </head>  
  71.     <body>  
  72.         <ul>  
  73.             <li class="mainMenu">  
  74.                 <a href=../../"#">机构管理</a>  
  75.                 <ul>  
  76.                     <li><a href=../../"#">添加机构</a></li>  
  77.                     <li><a href=../../"#">修改机构</a></li>  
  78.                     <li><a href=../../"#">查询机构</a></li>  
  79.                 </ul>  
  80.             </li>  
  81.             <li class="mainMenu">  
  82.                 <a href=../../"#">部门管理</a>  
  83.                 <ul>  
  84.                     <li><a href=../../"#">添加部门</a></li>  
  85.                     <li><a href=../../"#">修改部门</a></li>  
  86.                     <li><a href=../../"#">查询部门</a></li>  
  87.                 </ul>  
  88.             </li>  
  89.             <li class="mainMenu">  
  90.                 <a href=../../"#">员工管理</a>  
  91.                 <ul>  
  92.                     <li><a href=../../"#">添加员工</a></li>  
  93.                     <li><a href=../../"#">修改员工</a></li>  
  94.                     <li><a href=../../"#">查询员工</a></li>  
  95.                 </ul>  
  96.             </li>  
  97.         </ul>  
  98.         <br/>  
  99.         <hr/>  
  100.         <br/>  
  101.         <ul>  
  102.             <li class="crossMenu">  
  103.                 <a href=../../"#">机构管理</a>  
  104.                 <ul>  
  105.                     <li><a href=../../"#">添加机构</a></li>  
  106.                     <li><a href=../../"#">修改机构</a></li>  
  107.                     <li><a href=../../"#">查询机构</a></li>  
  108.                 </ul>  
  109.             </li>  
  110.             <li class="crossMenu">  
  111.                 <a href=../../"#">部门管理</a>  
  112.                 <ul>  
  113.                     <li><a href=../../"#">添加部门</a></li>  
  114.                     <li><a href=../../"#">修改部门</a></li>  
  115.                     <li><a href=../../"#">查询部门</a></li>  
  116.                 </ul>  
  117.             </li>  
  118.             <li class="crossMenu">  
  119.                 <a href=../../"#">员工管理</a>  
  120.                 <ul>  
  121.                     <li><a href=../../"#">添加员工</a></li>  
  122.                     <li><a href=../../"#">修改员工</a></li>  
  123.                     <li><a href=../../"#">查询员工</a></li>  
  124.                 </ul>  
  125.             </li>  
  126.         </ul>  
  127.     </body>  
  128. </html>  
下面是jQuery浮层效果的演示
  1. <html>  
  2.     <head>  
  3.         <title>jQuery浮层效果</title>  
  4.         <script src=../../"jquery-1.7.1.js" type="text/javascript"></script>  
  5.         <style type="text/css">  
  6.             .wrapper{width:450px; border:1px solid #ccc; padding:50px; margin:0 auto; clear:both;}  
  7.             #dialogLayer{position:absolute; background-color:#000; filter:alpha(opacity=60); opacity:0.6; left:0; top:0;}  
  8.             #dialogBox{position:absolute; width:400px; height:300px; border:3px solid blue; background-color:#fff; left:0; top:0;}  
  9.             #dialogBox h2{height25px; line-height:25px; color:#fff; font-size:12px; background-color:blue; margin:0px; padding:0px;}  
  10.             #dialogBox h2 span{float:right; font-weight:normal; cursor:pointer;}   
  11.             .content{padding:10px; text-align:center;}  
  12.         </style>  
  13.         <script type="text/javascript">  
  14.             $(function(){  
  15.                 var dialogLayer = $('#dialogLayer');  
  16.                 var dialogBox = $('#dialogBox');  
  17.                 dialogLayer.hide();  
  18.                 dialogBox.hide();  
  19.                 var pageH = $(document.body).height();  
  20.                 var pageW = $(document.body).width();  
  21.                 var winH = $(window).height();  
  22.                 var maxH = Math.max(winH,pageH);  
  23.                 $(':button').click(function(){  
  24.                     /* 
  25.                     $.ajax({type: 'GET', 
  26.                         url: 'web/getQuickPayOpenDetail.action', 
  27.                         data: 'phoneNo=<%=request.getParameter("phoneNo")%>', 
  28.                         dataType: 'text', 
  29.                         success: function(returnedData){ 
  30.                                 if("notCustomQuickPay" == returnedData){ 
  31.                                     dialogLayer.show().width(pageW).height(maxH); 
  32.                                     dialogBox.show().css({'top':'80px','left':'80px'}); 
  33.                                 }else if("JFB_System_Busy" == returnedData){ 
  34.                                     window.location='${pageContext.request.contextPath}/JFB_System_Busy.jsp'; 
  35.                                 }else{ 
  36.                                     window.location='<%=JFBUtils.getPropertiesFileValue("global.properties", "ElecChnl.WEB.BoundResponse")%>' + returnedData; 
  37.                                 } 
  38.                             } 
  39.                     }); 
  40.                     */  
  41.                     dialogLayer.show().width(pageW).height(maxH);  
  42.                     //dialogBox.show().css({'top':'100px','left':'100px'});   
  43.                     var dialogBox_x = (pageW - dialogBox.width())/2;  
  44.                     var dialogBox_y = (winH - dialogBox.height())/2;  
  45.                     dialogBox.show().css({'top':dialogBox_y+'px','left':dialogBox_x+'px'});  
  46.                 });  
  47.                 $('#close').click(function(){  
  48.                     dialogBox.hide();  
  49.                     dialogLayer.hide();  
  50.                 });  
  51.             });  
  52.         </script>  
  53.     </head>  
  54.     <body>  
  55.         <div id="dialogLayer"></div>  
  56.         <div id="dialogBox">  
  57.             <h2><span id="close" title="关闭">关闭&nbsp;&nbsp;</span>请您&nbsp;&nbsp;&nbsp;&nbsp;登录</h2>  
  58.             <div class="content">content</div>  
  59.         </div>  
  60.         <div class="wrapper">  
  61.             <p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>  
  62.             <p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>  
  63.             <p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>  
  64.             <p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>  
  65.             <p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>  
  66.             <p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>  
  67.             <p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>  
  68.             <p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>  
  69.             <div style="text-align:center;"><input type="button" value="点击弹出登陆框"/></div>  
  70.         </div>  
  71.     </body>  
  72. </html>  

0
0

猜你在找
【直播】机器学习&数据挖掘7周实训--韦玮
【套餐】系统集成项目管理工程师顺利通关--徐朋
【直播】3小时掌握Docker最佳实战-徐西宁
【套餐】机器学习系列套餐(算法+实战)--唐宇迪
【直播】计算机视觉原理及实战--屈教授
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之矩阵--黄博士
【套餐】微信订阅号+服务号Java版 v2.0--翟东平
【直播】机器学习之凸优化--马博士
【套餐】Javascript 设计模式实战--曾亮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:268629次
    • 积分:4810
    • 等级:
    • 排名:第5931名
    • 原创:201篇
    • 转载:19篇
    • 译文:2篇
    • 评论:33条
    文章分类
    最新评论