您的位置：首页 > Web前端 > JQuery

JQuery实现DIV展开折叠类似Outlook效果

2014-07-01 18:20 666 查看

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

#container{

width:100%;

background-color:#999;

}

#navigate{

width:25%;

float:left;

background-color:#999;

}

/*

左侧导航顶部按钮

*/

#navTop {

background-color: grey;

height: 22px;

width: 100%;

}

#navTopRight {

background: url(Images/indicate.gif) no-repeat 50% 50%;

float: right;

width: 20px;

height: 100%;

margin-right: 5px;

}

#outercontent{

width:75%;

float:right;

background-color:#CCC;

z-index:10;

position:relative;

}

#content{

width:99%;

float:right;

background-color:#666;

z-index:11;

}

#ce{

position:absolute;

width:30px;

height:100px;

vertical-align:middle;

}

#seperator{

background-color:#900;

width:10px;

height:30px;

position:absolute;

top:50%;

border:solid 0px orange;

}

#seperatorHidden{

background-color: #e9edf1;

width:1%;

height:220px;

position:absolute;

border:solid 0px orange;

z-index:11;

}

.mini-tools {

width: 100%;

height: 20px;

background: url(Images/expand.gif) no-repeat 50% 50%;

}

#seperator:hover{

border:solid 1px orange;

}

.mini-layout-proxy {

background: #e9edf1;

border: solid 1px #A8A8A8;

cursor: default;

overflow: hidden;

height: 22px;

padding-left: 6px;

position: absolute;

z-index: 100;

left: -500px;

top: -500px;

}

</style>

<script src="Scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

$(function () {

//隐藏展开DIV

$("#seperatorHidden").hide();

///为折叠按钮添加点击事件

$("#navTopRight").live("click", function () {

$("#navigate").animate({ width: "1%" }, 100);

$("#outercontent").animate({ width: "99%" }, 100);

$("#navigate").empty();

$("#navigate").html('<div id="seperatorHidden"><div class="mini-tools"></div></div>');

});

///为展开按钮添加点击事件

$(".mini-tools").live("click", function () {

$("#navigate").animate({ width: "25%" }, 100);

$("#outercontent").animate({ width: "75%" }, 100);

$("#navigate").empty();

$("#navigate").html('<div id="navTop"> <div id="navTopRight"></div></div>');

});

$("#seperator").toggle(function (event) {

$("#navigate").animate({ width: "1%" }, 100);

$("#outercontent").animate({ width: "99%" }, 100);

$("#seperatorHidden").show();

},

function (event) {

$("#navigate").animate({ width: "25%" }, 100);

$("#outercontent").animate({ width: "75%" }, 100);

});//toggle

});

function expend() {

alert("expand");

}

</script>

</head>

<body>

<div id="container">

<div id="navigate">

<div id="navTop">

<div id="navTopRight"></div>

<p><a href="http://www.baidu.com" target="test">百度</a></p>

<p><a href="http://www.sina.com" target="test">新浪</a></p>

<p><a href="http://www.sohu.com" target="test">搜狐</a></p>

</div>

</div>

<div id="outercontent">

<div id="seperator"></div>

<div id="content" >

<iframe width="500" height="300" name="test" ></iframe>

</div>

</div>

<br style="clear:both;" />

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航