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 使用非常简单,只有一个参数用于设置 ...
随机推荐
- Bad version number in .class file
TY项目是用JDK1.6做的,早先在电脑上装了一个1.5的,这回就不能用了.为了能用,我就又装了一个1.6的,修改了环境变量之后,以为一切OK.开始测试,首先在Myeclipse中打开我用1.5编的一 ...
- Windows Phone下的Socket编程
讨论下有关于Windows Phone下的Socket编程方面的知识. Socket就是通常所称的套接字,用于描述IP地址和端口,是一个通信链的句柄.应用程序通常通过Socket向网络发出请求或者应答 ...
- [游戏模版19] Win32 物理引擎 匀速运动
>_<:Learning the physical engine >_<:resource >_<:code #include <windows.h> ...
- 记录js的一些小技巧
1.取数组最大值,最小值 Math.max.apply(null,[1,2,3,32,3]); Math.min.apply(null,[1,2,3,32,3]); 2.旧版IE setTimeout ...
- Atitit..文件上传组件选型and最佳实践总结(2)----断点续传
Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 如何判断一个插件/控件是否支持断点续传?? 1 3. 常用的组件选型结果::马 1 4. 自定 ...
- paip.一千 常用汉字 高频汉字 覆盖率90%
paip.一千 常用汉字 高频汉字 覆盖率90% 一千个使用频率最高的汉字,其覆盖率达一般书刊用字的90%. 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:a ...
- paip.http 404错误 的解决
paip.http 404错误 的解决 错误原因 1.查看web服务器log...看是否错误... 2.使用了spring 或者struts 等等mvc框架,但是设置错误.. 3.web服务器使用了配 ...
- 从MySQL 5.5到5.7看复制的演进
概要:MySQL 5.5 支持单线程模式复制,MySQL 5.6 支持库级别的并行复制,MySQL 5.7 支持事务级别并行复制.结合这个主线我们可以来分析一下MySQL以及社区发展的一个前因后果. ...
- JavaScript 中数组实用浅析
本文适用于HTML.ASP 中的 JavaScript 脚本代码.代码以 HTML 中的 JS 为例,如果在 ASP 中,请将 document.write 改为 Response.Write 即可. ...
- Java 字符的验证
package net.hlj.common.util; import java.util.regex.Matcher; import java.util.regex.Pattern; /** * @ ...