jQuery实现菜单点击隐藏（上下左右）
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>
jQuery实现菜单点击隐藏（上下左右）的更多相关文章
- [转]JQuery控制div外点击隐藏，div内点击不会隐藏
一直弄清楚这个效果如何实现,看了这篇博客的几行代码原来如此简单,就是利用了事件冒泡而已. 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: $(& ...
- HTML实用案例（1）—— 左侧菜单，右侧内容的布局（带左侧菜单点击隐藏显示效果）
效果图 代码部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类
jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...
- js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- 几款jQuery右键菜单插件介绍
在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...
- Ajax json jquery实现菜单案例
需求: 运用AJAX请求文件menu.json,配置菜单栏,并实现以下功能点: 1. 点击向左箭头,菜单向左移动,隐藏 2. 点击向右箭头,菜单向右移动,显示3. 点击一级菜单,被点击菜单的子菜单显示 ...
- jquery右键菜单
点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...
- Smint – 用于单页网站制作的 jQuery 导航菜单插件
Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...
随机推荐
- 基于Criminisi算法的栅格影像数据敏感地物隐藏
栅格影像数据敏感地物伪装是指通过计算机智能识别与计算,将影像数据中的敏感地物进行识别与提取,将敏感地物智能替换成公共地物,如草地.森林.湖泊.公园等.但目前该技术并不成熟,同时栅格影像数据敏感地物伪装 ...
- [chrome插件分享] gitlab-tree 更方便的浏览Gitlab上的代码
说明 经常玩Github的人肯定都知道大名鼎鼎的octotree吧,这款chrome插件可以说是浏览代码的神器,利用左侧的树形菜单可以很方便的打开目录.浏览文件等,加上Github全站本身使用了pja ...
- Html5 学习系列（六）Html5本地存储和本地数据库
一个网站如何能在客户的浏览器存储更多的数据呢? 在Html4的时代在浏览器端存储点网站个性化的数据,尤其是用户浏览器的痕迹,用户的相关数据等一般只能存储在Cookie中,但是大多是浏览器对于Cooki ...
- 根据配置文件加载js依赖模块(JavaScript面试题)
面试题目 根据下面的配置文件 module=[ {'name':'jquery','src':'/js/lib/jquery-1.8.3.js'}, {'name':'swfobject','src' ...
- JfreeChart使用（转载）
http://www.cnblogs.com/xingyun/ http://www.huosen.net/archives/156.html(此篇除了struts2外,还介绍了servlet下Jfr ...
- CentOS挂载NTFS移动硬盘
CentOS操作系统默认无法挂在NTFS格式的移动硬盘,解决方案之一为使用ntfs-3g挂在: 1. 在其官网上下载安装包: http://www.tuxera.com/community/open- ...
- atitit。 hb Hibernate sql 查询使用
atitit. hb Hibernate sql 查询使用 #----------返回list<map>法..这个推荐使用. q.setResultTransformer(Tr ...
- ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——菜单模块的实现（二）
ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计(一) 菜单和模块是在同一个表中,采用的是树形结构,模块菜单表结构如下代码: USE [Permis ...
- Leetcode 7 Reverse Integer 数论
题意:将整数倒置,该题简单但是需要注意数据的范围,难得的好题. 如果出现1000000003或者-2000000003,倒置后的数超过int的范围,因此返回0,出现这种情况可以使用long long, ...
- JavaScript 语句 for
循环for语句: for(var i =1;i<=5;i++)(初始条件:循环条件:状态改变) { 循环体 } 循环的作用:反复执行某段代码 四要素:初始条件.循环条件.循环体.状态改变 例题1 ...