jQuery纵横向菜单和浮层效果

bcyy

浏览: 1885674 次

最近访客更多访客>>

BeyondPC

u012363178

goober520

aoyouzi

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (3088)

社区版块

存档分类

2014-04 ( 144)
2014-03 ( 94)
2014-02 ( 41)
更多存档...

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

<html>
<head>
<title>JQuery纵横向菜单效果</title>
<scripttype="text/javascript"src=../../"jquery-1.7.1.js"></script>
<styletype="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个像素的上边距和下边距
}
.mainMenuA,.crossMenuA{
color:blue;background-position:2pxcenter;//主菜单链接为蓝色//背景箭头的位置
background-image:url(../../resources/images/collapsed.gif);background-repeat:no-repeat;//链接背景图片//背景图不重复
}
.mainMenuLIA,.crossMenuLIA{
color:green;background-image:none;//子菜单链接文字为绿色//去掉子菜单背景箭头
}
.mainMenuUL,.crossMenuUL{
display:none;//主菜单下的UL全部隐藏
}
.crossMenu{
font-size:12px;float:left;//字体大小12px//横向排列
}
</style>
<scripttype="text/javascript">
$(function(){
$('.mainMenu>a').click(
function(){//这样取到的就是：<ahref="#">机构管理</a>。而非：<ahref="#">添加机构</a>
varchildMenu=$(this).next('ul');//找到主菜单项的子菜单项
childMenu.slideToggle();//改方法可以省去判断元素是否显示的过程，直接令隐藏的元素显示，令显示的元素隐藏
changeIcon($(this));
}
);
$('.crossMenu').hover(
function(){
$(this).children('ul').slideToggle();
changeIcon($(this).children('a'));
}
);
});
functionchangeIcon(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>
<liclass="mainMenu">
<ahref=../../"#">机构管理</a>
<ul>
<li><ahref=../../"#">添加机构</a></li>
<li><ahref=../../"#">修改机构</a></li>
<li><ahref=../../"#">查询机构</a></li>
</ul>
</li>
<liclass="mainMenu">
<ahref=../../"#">部门管理</a>
<ul>
<li><ahref=../../"#">添加部门</a></li>
<li><ahref=../../"#">修改部门</a></li>
<li><ahref=../../"#">查询部门</a></li>
</ul>
</li>
<liclass="mainMenu">
<ahref=../../"#">员工管理</a>
<ul>
<li><ahref=../../"#">添加员工</a></li>
<li><ahref=../../"#">修改员工</a></li>
<li><ahref=../../"#">查询员工</a></li>
</ul>
</li>
</ul>
<br/>
<hr/>
<br/>
<ul>
<liclass="crossMenu">
<ahref=../../"#">机构管理</a>
<ul>
<li><ahref=../../"#">添加机构</a></li>
<li><ahref=../../"#">修改机构</a></li>
<li><ahref=../../"#">查询机构</a></li>
</ul>
</li>
<liclass="crossMenu">
<ahref=../../"#">部门管理</a>
<ul>
<li><ahref=../../"#">添加部门</a></li>
<li><ahref=../../"#">修改部门</a></li>
<li><ahref=../../"#">查询部门</a></li>
</ul>
</li>
<liclass="crossMenu">
<ahref=../../"#">员工管理</a>
<ul>
<li><ahref=../../"#">添加员工</a></li>
<li><ahref=../../"#">修改员工</a></li>
<li><ahref=../../"#">查询员工</a></li>
</ul>
</li>
</ul>
</body>
</html>

下面是jQuery浮层效果的演示

<html>
<head>
<title>jQuery浮层效果</title>
<scriptsrc=../../"jquery-1.7.1.js"type="text/javascript"></script>
<styletype="text/css">
.wrapper{width:450px;border:1pxsolid#ccc;padding:50px;margin:0auto;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:3pxsolidblue;background-color:#fff;left:0;top:0;}
#dialogBoxh2{height25px;line-height:25px;color:#fff;font-size:12px;background-color:blue;margin:0px;padding:0px;}
#dialogBoxh2span{float:right;font-weight:normal;cursor:pointer;}
.content{padding:10px;text-align:center;}
</style>
<scripttype="text/javascript">
$(function(){
vardialogLayer=$('#dialogLayer');
vardialogBox=$('#dialogBox');
dialogLayer.hide();
dialogBox.hide();
varpageH=$(document.body).height();
varpageW=$(document.body).width();
varwinH=$(window).height();
varmaxH=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'});
}elseif("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'});
vardialogBox_x=(pageW-dialogBox.width())/2;
vardialogBox_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>
<divid="dialogLayer"></div>
<divid="dialogBox">
<h2><spanid="close"title="关闭">关闭  </span>请您    登录</h2>
<divclass="content">content</div>
</div>
<divclass="wrapper">
<p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>
<p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>
<p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>
<p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>
<p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>
<p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>
<p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>
<p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容</p>
<divstyle="text-align:center;"><inputtype="button"value="点击弹出登陆框"/></div>
</div>
</body>
</html>