自动弹出div菜单
2012-08-13 14:14
495 查看
(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的显示效果:
大家可以根据自己的实际情况进行改变。
例子:
<!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菜单
- MFC让托盘弹出菜单失去焦点自动关闭
- 利用CSS、Jquery和div实现的横弹出菜单
- Jquery css div弹出二级菜单代码
- 水平和垂直方向的三级PopMenu-弹出菜单(DIV+CSS+JS)
- 纯div与css的弹出菜单 js技巧
- [Phonegap+Sencha Touch] 移动开发66 sencha touch可编辑的div(ContentEditable=true)下,长按不弹出“复制粘贴”菜单的解决办法
- 右键弹出div,模拟右键菜单
- 水平方向的PopMenu弹出菜单(DIV+CSS+JS)
- 5款纯div+css制作的弹出菜单(标准且无js)
- 十天学会web标准(DIV+CSS)系列(八)下拉及多级弹出菜单
- Android中PopupWindow自动判断位置的弹出菜单
- 当弹出的div失去焦点的时候自动隐藏
- CSS弹出二级多列菜单和DIV布局实例 - 仿IBM官网首页
- CSS+JS实现点击文字弹出定时自动关闭的DIV层菜单
- div+css水平三级横向弹出菜单
- firefox按钮菜单自动弹出uc脚本AutoPopup.uc.js,修正Omnibar上的图标按钮有些不能弹出的问题
- 对div实现右键弹出自定义菜单
- 无js5款纯div+css制作的弹出菜单标准
- DIV+CSS制作二级横向弹出菜单,略简单