自动弹出div菜单
2012-08-14 10:44
267 查看
[javascript] view
plaincopy
(function($){
/**
menus:菜单数据，json数据格式，每个menu json必须包含有两个个key，1、url，表示点击菜单是需要跳转的位置；2、name，显示的菜单名称；3、cssClass，当前菜单的样式
settings：对框的显示设置，width：宽；height：高；top：顶部距离；left：左边距离；cssClass：整个框的样式;cols:显示几列
*/
$.fn.showMenu = function(menus,settings){
var tableId = '_show_Menu_id_';
var cols = settings && settings.cols ? settings.cols : 2;
var _left = settings && settings.left ? settings.left : 0;
var _top = settings && settings.top ? settings.top : 0;
var _width = settings && settings.width ? settings.width : 0;
var _height = settings && settings.height ? settings.height : 0;
var lt = function(){
var p = this;
var left = $(this).offset().left;
var top = $(this).offset().top;
while(p.get(0).tagName != 'HTML' && p.get(0).tagName != 'html' ){
p = p.parent();
left += $(p).offset().left;
top += $(p).offset().top;
}
return {left:left,top:top};
}
var offset = lt.apply(this);
offset.left = offset.left + this.width()-8 + _left;
offset.top = offset.top-this.height()+5+_top;
var tdCss = {'border-top':'1px solid #ffffff','border-right':'1px solid #ffffff','background-color':'#E8E8E8',cursor:'hand'};
var d = function(){
var $mdiv = $('<div></div>');
$mdiv.attr('id',tableId);
$mdiv.css({border:'1px solid #B0C4DE',position:'absolute',display:'none','z-index':9999,left:offset.left,top:offset.top});
if(_width > 0){
$mdiv.width(_width);
}
if(_height > 0){
$mdiv.heigth(_height);
}
var $table = $('<table cellspacing=0 cellpading=0 ></table>');
$table.css({'background-color':'#E8E8E8',border:'0px'});
var index = 0;
var $tr ;
$(menus).each(function(){
if(index % cols == 0){
$tr = $('<tr></tr>');
$table.append($tr);
}
var $td = $('<td nowrap url='+this.url+'>'+this.name+'</td>');
$td.css(tdCss);
if(this.cssClass){
$td.addClass(this.cssClass);
}
$tr.append($td);
index++;
});
if(menus.length % cols != 0){
for(var i = cols -( menus.length % cols); i > 0 ; i--){
var $td = $('<td nowrap> </td>');
$td.css(tdCss);
$tr.append($td);
}
}
var tdbg;
$table.find('td').each(function(){
var url = $(this).attr('url');
if(url && url != ''){
$(this).click(function(){
$table.find('td').css('background-color','#E8E8E8');
$(this).css('background-color','#DB9D9B');
hidebox();
top.document.location = url;
});
}
$(this).mouseover(function(){
tdbg = $(this).css('background-color');
$(this).css('background-color','#A2ECAD');
}).mouseout(function(){
$(this).css('background-color',tdbg);
});
});
$mdiv.append($table);
$(this).append($mdiv);
}
d.apply(this);
$(this).mouseover(function(){
//alert($('#'+tableId).is(':hidden'))
//alert($('#'+tableId).is(':visible'))
if(!$('#'+tableId).is(':visible')){
$('#'+tableId).show(500);
}
});
$(this).mouseout(function(ev){
if(ev.clientX < offset.left){
hidebox();
}
});
var hidebox = function(){
$('#'+tableId).hide(500);
}
$(document).bind('click',function(){hidebox();});
}
})(jQuery)
主要功能是弹出和隐藏当前对话框，类似于丁丁地图或者点评网的切换城市一样的功能
cols为1的显示效果：
cols为2的显示效果：
cols为3的显示效果：
大家可以根据自己的实际情况进行改变。
例子：
[html] view
plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 菜单显示 </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
</HEAD>
<BODY>
<center>
<div id="dia" style="width:120px;height:22px;border:1px solid #3d3d3d;cursor:handle">
菜单显示
</div>
</center>
</BODY>
<script>
(function($){
/**
menus:菜单数据，json数据格式，每个menu json必须包含有两个个key，1、url，表示点击菜单是需要跳转的位置；2、name，显示的菜单名称；3、cssClass，当前菜单的样式
settings：对框的显示设置，width：宽；height：高；top：顶部距离；left：左边距离；cssClass：整个框的样式;cols:显示几列
*/
$.fn.showMenu = function(menus,settings){
var tableId = '_show_Menu_id_';
var cols = settings && settings.cols ? settings.cols : 2;
var _left = settings && settings.left ? settings.left : 0;
var _top = settings && settings.top ? settings.top : 0;
var _width = settings && settings.width ? settings.width : 0;
var _height = settings && settings.height ? settings.height : 0;
var lt = function(){
var p = this;
var left = $(this).offset().left;
var top = $(this).offset().top;
while(p.get(0).tagName != 'HTML' && p.get(0).tagName != 'html' ){
p = p.parent();
left += $(p).offset().left;
top += $(p).offset().top;
}
return {left:left,top:top};
}
var offset = lt.apply(this);
offset.left = offset.left + this.width()-8 + _left;
offset.top = offset.top-this.height()+5+_top;
var tdCss = {'border-top':'1px solid #ffffff','border-right':'1px solid #ffffff','background-color':'#E8E8E8',cursor:'hand'};
var d = function(){
var $mdiv = $('<div></div>');
$mdiv.attr('id',tableId);
$mdiv.css({border:'1px solid #B0C4DE',position:'absolute',display:'none','z-index':9999,left:offset.left,top:offset.top});
if(_width > 0){
$mdiv.width(_width);
}
if(_height > 0){
$mdiv.heigth(_height);
}
var $table = $('<table cellspacing=0 cellpading=0 ></table>');
$table.css({'background-color':'#E8E8E8',border:'0px'});
var index = 0;
var $tr ;
$(menus).each(function(){
if(index % cols == 0){
$tr = $('<tr></tr>');
$table.append($tr);
}
var $td = $('<td nowrap url='+this.url+'>'+this.name+'</td>');
$td.css(tdCss);
if(this.cssClass){
$td.addClass(this.cssClass);
}
$tr.append($td);
index++;
});
if(menus.length % cols != 0){
for(var i = cols -( menus.length % cols); i > 0 ; i--){
var $td = $('<td nowrap> </td>');
$td.css(tdCss);
$tr.append($td);
}
}
var tdbg;
$table.find('td').each(function(){
var url = $(this).attr('url');
if(url && url != ''){
$(this).click(function(){
$table.find('td').css('background-color','#E8E8E8');
$(this).css('background-color','#DB9D9B');
hidebox();
top.document.location = url;
});
}
$(this).mouseover(function(){
tdbg = $(this).css('background-color');
$(this).css('background-color','#A2ECAD');
}).mouseout(function(){
$(this).css('background-color',tdbg);
});
});
$mdiv.append($table);
$(this).append($mdiv);
}
d.apply(this);
$(this).mouseover(function(){
//alert($('#'+tableId).is(':hidden'))
//alert($('#'+tableId).is(':visible'))
if(!$('#'+tableId).is(':visible')){
$('#'+tableId).show(500);
}
});
$(this).mouseout(function(ev){
if(ev.clientX < offset.left){
hidebox();
}
});
var hidebox = function(){
$('#'+tableId).hide(500);
}
$(document).bind('click',function(){hidebox();});
}
})(jQuery)
var menus = eval('[{"url":"http://www.baidu.com","name":"百度"},{"url":"http://www.126.com","name":"网易邮箱"},{"url":"http://www.google.com.hk","name":"Google"},{"url":"http://www.126.com","name":"网易邮箱"}]');
$("#dia").showMenu(menus,{cols:3});
</script>
</HTML>
plaincopy
(function($){
/**
menus:菜单数据，json数据格式，每个menu json必须包含有两个个key，1、url，表示点击菜单是需要跳转的位置；2、name，显示的菜单名称；3、cssClass，当前菜单的样式
settings：对框的显示设置，width：宽；height：高；top：顶部距离；left：左边距离；cssClass：整个框的样式;cols:显示几列
*/
$.fn.showMenu = function(menus,settings){
var tableId = '_show_Menu_id_';
var cols = settings && settings.cols ? settings.cols : 2;
var _left = settings && settings.left ? settings.left : 0;
var _top = settings && settings.top ? settings.top : 0;
var _width = settings && settings.width ? settings.width : 0;
var _height = settings && settings.height ? settings.height : 0;
var lt = function(){
var p = this;
var left = $(this).offset().left;
var top = $(this).offset().top;
while(p.get(0).tagName != 'HTML' && p.get(0).tagName != 'html' ){
p = p.parent();
left += $(p).offset().left;
top += $(p).offset().top;
}
return {left:left,top:top};
}
var offset = lt.apply(this);
offset.left = offset.left + this.width()-8 + _left;
offset.top = offset.top-this.height()+5+_top;
var tdCss = {'border-top':'1px solid #ffffff','border-right':'1px solid #ffffff','background-color':'#E8E8E8',cursor:'hand'};
var d = function(){
var $mdiv = $('<div></div>');
$mdiv.attr('id',tableId);
$mdiv.css({border:'1px solid #B0C4DE',position:'absolute',display:'none','z-index':9999,left:offset.left,top:offset.top});
if(_width > 0){
$mdiv.width(_width);
}
if(_height > 0){
$mdiv.heigth(_height);
}
var $table = $('<table cellspacing=0 cellpading=0 ></table>');
$table.css({'background-color':'#E8E8E8',border:'0px'});
var index = 0;
var $tr ;
$(menus).each(function(){
if(index % cols == 0){
$tr = $('<tr></tr>');
$table.append($tr);
}
var $td = $('<td nowrap url='+this.url+'>'+this.name+'</td>');
$td.css(tdCss);
if(this.cssClass){
$td.addClass(this.cssClass);
}
$tr.append($td);
index++;
});
if(menus.length % cols != 0){
for(var i = cols -( menus.length % cols); i > 0 ; i--){
var $td = $('<td nowrap> </td>');
$td.css(tdCss);
$tr.append($td);
}
}
var tdbg;
$table.find('td').each(function(){
var url = $(this).attr('url');
if(url && url != ''){
$(this).click(function(){
$table.find('td').css('background-color','#E8E8E8');
$(this).css('background-color','#DB9D9B');
hidebox();
top.document.location = url;
});
}
$(this).mouseover(function(){
tdbg = $(this).css('background-color');
$(this).css('background-color','#A2ECAD');
}).mouseout(function(){
$(this).css('background-color',tdbg);
});
});
$mdiv.append($table);
$(this).append($mdiv);
}
d.apply(this);
$(this).mouseover(function(){
//alert($('#'+tableId).is(':hidden'))
//alert($('#'+tableId).is(':visible'))
if(!$('#'+tableId).is(':visible')){
$('#'+tableId).show(500);
}
});
$(this).mouseout(function(ev){
if(ev.clientX < offset.left){
hidebox();
}
});
var hidebox = function(){
$('#'+tableId).hide(500);
}
$(document).bind('click',function(){hidebox();});
}
})(jQuery)
主要功能是弹出和隐藏当前对话框，类似于丁丁地图或者点评网的切换城市一样的功能
cols为1的显示效果：
cols为2的显示效果：
cols为3的显示效果：
大家可以根据自己的实际情况进行改变。
例子：
[html] view
plaincopy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 菜单显示 </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
</HEAD>
<BODY>
<center>
<div id="dia" style="width:120px;height:22px;border:1px solid #3d3d3d;cursor:handle">
菜单显示
</div>
</center>
</BODY>
<script>
(function($){
/**
menus:菜单数据，json数据格式，每个menu json必须包含有两个个key，1、url，表示点击菜单是需要跳转的位置；2、name，显示的菜单名称；3、cssClass，当前菜单的样式
settings：对框的显示设置，width：宽；height：高；top：顶部距离；left：左边距离；cssClass：整个框的样式;cols:显示几列
*/
$.fn.showMenu = function(menus,settings){
var tableId = '_show_Menu_id_';
var cols = settings && settings.cols ? settings.cols : 2;
var _left = settings && settings.left ? settings.left : 0;
var _top = settings && settings.top ? settings.top : 0;
var _width = settings && settings.width ? settings.width : 0;
var _height = settings && settings.height ? settings.height : 0;
var lt = function(){
var p = this;
var left = $(this).offset().left;
var top = $(this).offset().top;
while(p.get(0).tagName != 'HTML' && p.get(0).tagName != 'html' ){
p = p.parent();
left += $(p).offset().left;
top += $(p).offset().top;
}
return {left:left,top:top};
}
var offset = lt.apply(this);
offset.left = offset.left + this.width()-8 + _left;
offset.top = offset.top-this.height()+5+_top;
var tdCss = {'border-top':'1px solid #ffffff','border-right':'1px solid #ffffff','background-color':'#E8E8E8',cursor:'hand'};
var d = function(){
var $mdiv = $('<div></div>');
$mdiv.attr('id',tableId);
$mdiv.css({border:'1px solid #B0C4DE',position:'absolute',display:'none','z-index':9999,left:offset.left,top:offset.top});
if(_width > 0){
$mdiv.width(_width);
}
if(_height > 0){
$mdiv.heigth(_height);
}
var $table = $('<table cellspacing=0 cellpading=0 ></table>');
$table.css({'background-color':'#E8E8E8',border:'0px'});
var index = 0;
var $tr ;
$(menus).each(function(){
if(index % cols == 0){
$tr = $('<tr></tr>');
$table.append($tr);
}
var $td = $('<td nowrap url='+this.url+'>'+this.name+'</td>');
$td.css(tdCss);
if(this.cssClass){
$td.addClass(this.cssClass);
}
$tr.append($td);
index++;
});
if(menus.length % cols != 0){
for(var i = cols -( menus.length % cols); i > 0 ; i--){
var $td = $('<td nowrap> </td>');
$td.css(tdCss);
$tr.append($td);
}
}
var tdbg;
$table.find('td').each(function(){
var url = $(this).attr('url');
if(url && url != ''){
$(this).click(function(){
$table.find('td').css('background-color','#E8E8E8');
$(this).css('background-color','#DB9D9B');
hidebox();
top.document.location = url;
});
}
$(this).mouseover(function(){
tdbg = $(this).css('background-color');
$(this).css('background-color','#A2ECAD');
}).mouseout(function(){
$(this).css('background-color',tdbg);
});
});
$mdiv.append($table);
$(this).append($mdiv);
}
d.apply(this);
$(this).mouseover(function(){
//alert($('#'+tableId).is(':hidden'))
//alert($('#'+tableId).is(':visible'))
if(!$('#'+tableId).is(':visible')){
$('#'+tableId).show(500);
}
});
$(this).mouseout(function(ev){
if(ev.clientX < offset.left){
hidebox();
}
});
var hidebox = function(){
$('#'+tableId).hide(500);
}
$(document).bind('click',function(){hidebox();});
}
})(jQuery)
var menus = eval('[{"url":"http://www.baidu.com","name":"百度"},{"url":"http://www.126.com","name":"网易邮箱"},{"url":"http://www.google.com.hk","name":"Google"},{"url":"http://www.126.com","name":"网易邮箱"}]');
$("#dia").showMenu(menus,{cols:3});
</script>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 自动弹出div菜单
- 让托盘弹出菜单失去焦点时自动消失
- 几款纯div+css制作的弹出菜单标准且无js
- 弹出div上点击按钮div会自动隐藏问题，已解决
- 点击对象弹出DIV层菜单可以定时自动关闭
- 对div实现右键弹出自定义菜单
- 无js5款纯div+css制作的弹出菜单标准
- DIV+CSS制作二级横向弹出菜单，略简单
- 【硬件】关于显示器自动弹出显示菜单的解决方案
- 弹出div上点击按钮div会自动隐藏问题，已解决
- jQuery弹出Div窗口居中显示、滚动跟随、关闭按钮以及几秒后自动消失
- 5款纯div+css制作的弹出菜单(标准且无js)
- div+css 下拉多级弹出菜单
- CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
- CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
- C++ Builder 利用 Hook 控制 Panel 实现自动工具栏或自动菜单，无需鼠标单击即可弹出菜单
- 纯div+css制作的弹出菜单
- 水平方向的PopMenu-弹出菜单（DIV+CSS+JS）
- 《十天学会web标准(div+css)》之第八天：下拉及多级弹出菜单
- 弹出的菜单或者PNG图片或者任何DIV被FLASH遮挡的问题