您的位置：首页 > Web前端 > JQuery
jQuery实现菜单点击隐藏（上下左右）

2013-07-12 12:36 501 查看
canrun
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现菜单点击隐藏</title>
<script type="text/javascript" src="http://zjmainstay.cn/jquerylib/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function () {
//eg.1
$('#menu-1').menuToggle({
'ctrlBtn':'ctrl-btn-1',
'speed':400,
'width':400,
});
//eg.2
$('#menu-2').menuToggle({
'ctrlBtn':'ctrl-btn-2',
'speed':300,
'width':400,
'openText':'<<展开',
'closeText':'关闭>>',
});
//eg.3
$('#menu-3').menuToggle({
'ctrlBtn':'ctrl-btn-3',
'speed':300,
'height':400,
'openText':'向下展开',
'closeText':'关闭',
'type':'height',
});

//eg.4
$('#menu-4').menuToggle({
'ctrlBtn':'ctrl-btn-4',
'speed':300,
'height':400,
'openText':'向上展开',
'closeText':'关闭',
'type':'height',
});
});
(function($){
$.fn.extend({'menuToggle':
function(options){
//self变量，用于函数内部调用插件参数
var self = this;
//默认参数
this._default = {
'ctrlBtn':null,            //关闭&展开按钮id
'speed':400,            //展开速度
'width':400,            //展开菜单宽度
'height':400,            //展开菜单高度
'openText':'展开>>',    //展开前文本
'closeText':'<<关闭',    //展开后文本
'type':'width'            //width表示按宽度伸展，height表示按高度伸展
};
//插件初始化函数
this.init = function(options){
//配置参数格式有误则提示并返回
if(typeof options != 'object') {
self.error('Options is not object Error!');
return false;
}
if(typeof options.ctrlBtn == 'undefined') {
self.error('Options ctrlBtn should not be empty!');
return false;
}
//存储自定义参数
self._default.ctrlBtn = options.ctrlBtn;
if(typeof options.type != 'undefined')         self._default.type = options.type;
if(typeof options.width != 'undefined')     self._default.width = options.width;
if(typeof options.height != 'undefined')     self._default.height = options.height;
if(typeof options.speed != 'undefined')     self._default.speed = options.speed;
if(typeof options.openText != 'undefined')     self._default.openText = options.openText;
if(typeof options.closeText != 'undefined') self._default.closeText = options.closeText;
if(self._default.type == 'width') {
self._default.expandOpen     = {width: self._default.width};
self._default.expandClose     = {width: 0};
}else {
self._default.expandOpen     = {height: self._default.height};
self._default.expandClose     = {height: 0};
}
};
this.run = function(){
$("#"+self._default.ctrlBtn).click(function () {
if($(this).hasClass('closed')){        //有closed类，表示已关闭，现在展开
$(this).removeClass('closed').html(self._default.closeText);
$(self).show().animate(self._default.expandOpen, self._default.speed);
}else {
$(this).addClass('closed').html(self._default.openText);
$(self).animate(self._default.expandClose, self._default.speed,function(){
$(this).hide();
});
}
});
};
this.error = function(msg){
//没有错误提示DIV则自动添加
if(!$("#menuToggleErrorTips").size()){
$("<div id='menuToggleErrorTips'><h2>Error</h2><div class='tips'></div></div>").appendTo($("body")).hide();
$("#menuToggleErrorTips").css({
position:'absolute',
left: $("body").width()/3,
top: 100,
width:400,
height:200,
'z-index': 9999999,
'border': '1px solid #000',
'background-color': '#ABC',
'color': '#CC0000',
'text-align': 'center'
});
}
//显示错误提示信息
$("#menuToggleErrorTips").show().children('.tips').html(msg);
}
//Init
this.init(options);
this.run();
}
});
})(jQuery);
</script>
<style type="text/css">
/* 公用 */
.hide-menu
{
width:0;
height:300px;
border:1px solid #333333;
background-color:#777788;
text-align:center;
line-height:400%;
font-size:13px;
left:0;
top:100px;
float:left;
display:none;
}
.ctrl-btn{
border: 1px solid;
float: left;
padding: 10px;
position: relative;
top: 100px;
cursor:pointer;
}
/* 菜单2 */
#menu-2{
width:400px;
top:100px;
right:0;
float:right;
display:block;
}
#ctrl-btn-2{
float:right;
}
.clr{
clear:both;
}
/* 菜单3 */
#menu-3{
width:400px;
height:0;
}
#menu-3-wrapper{
top:0;
left:300px;
position:absolute;
}
#ctrl-btn-3{
clear: both;
left: 150px;
position: relative;
top: 0;
}
/* 菜单4 */
#menu-4{
clear: both;
width:400px;
height:400px;
display:block;
}
#menu-4-wrapper{
bottom:0;
left:300px;
position:absolute;
}
#ctrl-btn-4{
clear: both;
left: 150px;
position: relative;
top: 0;
}
</style>
</head>

<body>
<div id="menu-1" class="hide-menu"></div>
<div id="ctrl-btn-1" class="ctrl-btn closed">展开>></div>

<div id="menu-2" class="hide-menu"></div>
<div id="ctrl-btn-2" class="ctrl-btn">关闭>></div>

<div id="menu-3-wrapper">
<div id="menu-3" class="hide-menu"></div>
<div id="ctrl-btn-3" class="ctrl-btn closed">向下展开</div>
</div>
<div id="menu-4-wrapper">
<div id="ctrl-btn-4" class="ctrl-btn">关闭</div>
<div id="menu-4" class="hide-menu"></div>
</div>
<div class="clr"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航