首先列出的是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; //主菜单宽度//字体大小12px
- background-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>