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 使用非常简单,只有一个参数用于设置 ...
随机推荐
- Sqoop2 环境搭建
原文地址:http://www.cnblogs.com/luogankun/p/4209017.html 正在准备做Spark SQL external data source与关系型数据库交互的部分 ...
- C#——Dictionary<TKey, TValue> 计算向量的余弦值
说明:三角函数的余弦值Cos我想,每个学计算机的理工人都知道,但是真的明白它的用途,我也是刚明白.每个人在初中或者高中的时候,都有这么个疑惑,学三角函数干什么用的?很直白的答案就是考试用的.而且当时的 ...
- HTML5 ——本地存储
目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...
- Atitit.guice3 ioc 最佳实践 o9o
Atitit.guice3 ioc 最佳实践 o9o 1. Guice的优点and跟个spring的比较 1 2. 两个部分:::绑定and注入@Inject 1 3. 绑定所有的方法总结 2 3. ...
- 浅谈NSBundle
图片.xib等资源文件无法直接封入静态库,要想在静态库中使用他们,就必须借助于bundle 那么什么是bundle呢? 简单来说,bundle就是一个内部结构按照标准规则组织的特殊目录,即direct ...
- Socket通信实例（C#）
SOCKET原理 一.套接字(socket)概念 套接字(socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息: ...
- “LAMP“或“LNMP”组合
Linux作为操作系统,Apache和 Nginx作为 Web 服务器,MySQL 作为数据库,PHP/Perl/Python作为服务器端脚本解释器. 由于这四个软件都是免费或开放源码软件(FLOSS ...
- 转：XBMC源代码分析
1:整体结构以及编译方法 XBMC(全称是XBOX Media Center)是一个开源的媒体中心软件.XBMC最初为Xbox而开发,可以运行在Linux.OSX.Windows.Android4.0 ...
- LPC18xx LPC43xx LPC4370 Bootrom USB DFU FPB - Flash Patch and Breakpoint Unit
What is the difference between a Bootrom vs bootloader on ARM systems Bootrom Bootrom (or Boot ROM) ...
- JS 清除字符串数组中,重复元素
<script language="JavaScript"> <!-- var arrData=new Array(); for(var i=0; i<10 ...