自动弹出div菜单

[javascript]  view plain copy

1. (function($){  
2. /** 
3. menus:菜单数据，json数据格式，每个menu json必须包含有两个个key，1、url，表示点击菜单是需要跳转的位置；2、name，显示的菜单名称；3、cssClass，当前菜单的样式 
4. settings：对框的显示设置，width：宽；height：高；top：顶部距离；left：左边距离；cssClass：整个框的样式;cols:显示几列 
5. */  
6. $.fn.showMenu = function(menus,settings){  
7.     var tableId = '_show_Menu_id_';  
8.     var cols = settings && settings.cols ? settings.cols : 2;  
9.     var _left = settings && settings.left ? settings.left : 0;  
10.     var _top = settings && settings.top ? settings.top : 0;  
11.     var _width = settings && settings.width ? settings.width : 0;  
12.     var _height = settings && settings.height ? settings.height : 0;  
13.       
14.     var lt = function(){  
15.         var p = this;  
16.         var left  = $(this).offset().left;  
17.         var top = $(this).offset().top;       
18.         while(p.get(0).tagName != 'HTML' && p.get(0).tagName != 'html' ){  
19.             p = p.parent();  
20.             left  += $(p).offset().left;  
21.             top += $(p).offset().top;     
22.         }  
23.         return {left:left,top:top};  
24.     }  
25.     var offset = lt.apply(this);  
26.     offset.left = offset.left + this.width()-8 + _left;  
27.     offset.top   = offset.top-this.height()+5+_top;  
28.     var tdCss = {'border-top':'1px solid #ffffff','border-right':'1px solid #ffffff','background-color':'#E8E8E8',cursor:'hand'};  
29.     var d = function(){  
30.         var $mdiv = $('<div></div>');  
31.         $mdiv.attr('id',tableId);  
32.         $mdiv.css({border:'1px solid #B0C4DE',position:'absolute',display:'none','z-index':9999,left:offset.left,top:offset.top});  
33.         if(_width > 0){  
34.             $mdiv.width(_width);  
35.         }  
36.         if(_height > 0){  
37.             $mdiv.heigth(_height);  
38.         }  
39.           
40.         var $table = $('<table cellspacing=0 cellpading=0 ></table>');  
41.         $table.css({'background-color':'#E8E8E8',border:'0px'});  
42.         var index = 0;  
43.         var $tr ;  
44.         $(menus).each(function(){             
45.             if(index % cols == 0){  
46.                 $tr = $('<tr></tr>');  
47.                 $table.append($tr);  
48.             }  
49.             var $td = $('<td nowrap url='+this.url+'>'+this.name+'</td>');  
50.             $td.css(tdCss);  
51.             if(this.cssClass){  
52.                 $td.addClass(this.cssClass);  
53.             }  
54.             $tr.append($td);  
55.             index++;  
56.         });  
57.            
58.         if(menus.length % cols != 0){  
59.             for(var i = cols -( menus.length % cols); i > 0 ; i--){  
60.                 var $td = $('<td nowrap> </td>');  
61.                 $td.css(tdCss);  
62.                 $tr.append($td);  
63.             }  
64.         }  
65.         var tdbg;  
66.         $table.find('td').each(function(){  
67.             var url = $(this).attr('url');  
68.             if(url && url != ''){  
69.                 $(this).click(function(){  
70.                     $table.find('td').css('background-color','#E8E8E8');  
71.                     $(this).css('background-color','#DB9D9B');  
72.                     hidebox();  
73.                     top.document.location = url;  
74.                 });  
75.             }  
76.             $(this).mouseover(function(){  
77.                 tdbg = $(this).css('background-color');  
78.                 $(this).css('background-color','#A2ECAD');  
79.             }).mouseout(function(){  
80.                 $(this).css('background-color',tdbg);  
81.             });  
82.         });  
83.   
84.         $mdiv.append($table);  
85.         $(this).append($mdiv);  
86.     }  
87.     d.apply(this);  
88.     $(this).mouseover(function(){  
89.         //alert($('#'+tableId).is(':hidden'))  
90.         //alert($('#'+tableId).is(':visible'))  
91.         if(!$('#'+tableId).is(':visible')){  
92.             $('#'+tableId).show(500);  
93.         }  
94.     });  
95.     $(this).mouseout(function(ev){  
96.         if(ev.clientX < offset.left){  
97.             hidebox();  
98.         }  
99.           
100.     });  
101.       
102.     var hidebox = function(){  
103.         $('#'+tableId).hide(500);  
104.     }  
105.     $(document).bind('click',function(){hidebox();});  
106.   
107. }  
108. })(jQuery)  

 主要功能是弹出和隐藏当前对话框，类似于丁丁地图或者点评网的切换城市一样的功能

cols为1的显示效果：

cols为2的显示效果：

cols为3的显示效果：

大家可以根据自己的实际情况进行改变。

 

例子：

[html]  view plain copy

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
2. <HTML>  
3.  <HEAD>  
4.   <TITLE> 菜单显示 </TITLE>  
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
6.   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>  
7.  </HEAD>  
8.   
9.  <BODY>  
10.   <center>  
11. <div id="dia" style="width:120px;height:22px;border:1px solid #3d3d3d;cursor:handle">  
12. 菜单显示  
13. </div>  
14.   </center>  
15.  </BODY>  
16. <script>  
17. (function($){  
18. /**  
19. menus:菜单数据，json数据格式，每个menu json必须包含有两个个key，1、url，表示点击菜单是需要跳转的位置；2、name，显示的菜单名称；3、cssClass，当前菜单的样式  
20. settings：对框的显示设置，width：宽；height：高；top：顶部距离；left：左边距离；cssClass：整个框的样式;cols:显示几列  
21. */  
22. $.fn.showMenu = function(menus,settings){  
23.     var tableId = '_show_Menu_id_';  
24.     var cols = settings && settings.cols ? settings.cols : 2;  
25.     var _left = settings && settings.left ? settings.left : 0;  
26.     var _top = settings && settings.top ? settings.top : 0;  
27.     var _width = settings && settings.width ? settings.width : 0;  
28.     var _height = settings && settings.height ? settings.height : 0;  
29.       
30.     var lt = function(){  
31.         var p = this;  
32.         var left  = $(this).offset().left;  
33.         var top = $(this).offset().top;       
34.         while(p.get(0).tagName != 'HTML' && p.get(0).tagName != 'html' ){  
35.             p = p.parent();  
36.             left  += $(p).offset().left;  
37.             top += $(p).offset().top;     
38.         }  
39.         return {left:left,top:top};  
40.     }  
41.     var offset = lt.apply(this);  
42.     offset.left = offset.left + this.width()-8 + _left;  
43.     offset.top   = offset.top-this.height()+5+_top;  
44.     var tdCss = {'border-top':'1px solid #ffffff','border-right':'1px solid #ffffff','background-color':'#E8E8E8',cursor:'hand'};  
45.     var d = function(){  
46.         var $mdiv = $('<div></div>');  
47.         $mdiv.attr('id',tableId);  
48.         $mdiv.css({border:'1px solid #B0C4DE',position:'absolute',display:'none','z-index':9999,left:offset.left,top:offset.top});  
49.         if(_width > 0){  
50.             $mdiv.width(_width);  
51.         }  
52.         if(_height > 0){  
53.             $mdiv.heigth(_height);  
54.         }  
55.           
56.         var $table = $('<table cellspacing=0 cellpading=0 ></table>');  
57.         $table.css({'background-color':'#E8E8E8',border:'0px'});  
58.         var index = 0;  
59.         var $tr ;  
60.         $(menus).each(function(){             
61.             if(index % cols == 0){  
62.                 $tr = $('<tr></tr>');  
63.                 $table.append($tr);  
64.             }  
65.             var $td = $('<td nowrap url='+this.url+'>'+this.name+'</td>');  
66.             $td.css(tdCss);  
67.             if(this.cssClass){  
68.                 $td.addClass(this.cssClass);  
69.             }  
70.             $tr.append($td);  
71.             index++;  
72.         });  
73.            
74.         if(menus.length % cols != 0){  
75.             for(var i = cols -( menus.length % cols); i > 0 ; i--){  
76.                 var $td = $('<td nowrap> </td>');  
77.                 $td.css(tdCss);  
78.                 $tr.append($td);  
79.             }  
80.         }  
81.         var tdbg;  
82.         $table.find('td').each(function(){  
83.             var url = $(this).attr('url');  
84.             if(url && url != ''){  
85.                 $(this).click(function(){  
86.                     $table.find('td').css('background-color','#E8E8E8');  
87.                     $(this).css('background-color','#DB9D9B');  
88.                     hidebox();  
89.                     top.document.location = url;  
90.                 });  
91.             }  
92.             $(this).mouseover(function(){  
93.                 tdbg = $(this).css('background-color');  
94.                 $(this).css('background-color','#A2ECAD');  
95.             }).mouseout(function(){  
96.                 $(this).css('background-color',tdbg);  
97.             });  
98.         });  
99.   
100.         $mdiv.append($table);  
101.         $(this).append($mdiv);  
102.     }  
103.     d.apply(this);  
104.     $(this).mouseover(function(){  
105.         //alert($('#'+tableId).is(':hidden'))  
106.         //alert($('#'+tableId).is(':visible'))  
107.         if(!$('#'+tableId).is(':visible')){  
108.             $('#'+tableId).show(500);  
109.         }  
110.     });  
111.     $(this).mouseout(function(ev){  
112.         if(ev.clientX < offset.left){  
113.             hidebox();  
114.         }  
115.           
116.     });  
117.       
118.     var hidebox = function(){  
119.         $('#'+tableId).hide(500);  
120.     }  
121.     $(document).bind('click',function(){hidebox();});  
122.   
123. }  
124. })(jQuery)  
125. 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":"网易邮箱"}]');  
126. $("#dia").showMenu(menus,{cols:3});  
127. </script>  
128.   
129. </HTML>