當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

ExtJS：鼠标移出菜单后菜单自动隐藏

發布時間：2024/8/22 javascript 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 ExtJS：鼠标移出菜单后菜单自动隐藏小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

ExtJS：鼠標移出菜單后菜單自動隱藏

1、使用的是Extjs2.0.2。

2、遇到的問題，簡述如下：

?? 當下拉菜單顯示后，如果不做任何操作，而直接移開鼠標，此時菜單不會自動消失（隱藏），一直會顯示在屏幕上。

?? 必須需要鼠標單擊一下菜單項，或單擊頁面的其他地方后，該菜單才會消失（隱藏）。

3、為了增強用戶體驗，測試鼠標在移出下拉菜單后，使菜單可以自動隱藏。

下面是測試Demo的代碼：

?
<%@ page language="java"? pageEncoding="UTF-8"%>

Ext.onReady(function(){
??? Ext.QuickTips.init();
?????? ?
??? //子級菜單項
??? var menu1_1_1 = new Ext.menu.Menu({
??? ???id:'menu1_1_1',
???????????????? ?items: [
??????????????????????? ?{id: "1551",text:'測試1',handler: onItemClick},
??????????????????????? ?{id: "1552",text:'測試2',handler: onItemClick},
??????????????????????? ?{id: "1553",text:'測試3',handler: onItemClick}
??????????????????? ??]
???????????????? ?});
??? //子級菜單項???????????? ?????
??? var menu1_1 = new Ext.menu.Menu({
??? ?????? id:'menu1_1',
???????????????????? items:[
??????????? ??????????? {id: "151",text:'子項1',handler: onItemClick},
?????????????????????????? {id: "152",text:'子項2',handler: onItemClick},
?????????????????????????? {id: "153",text:'子項3',handler: onItemClick},
?????????????????????????? {id: "154",text:'子項4',handler: onItemClick},
?????????????????????????? {id: "155",text: '子項5',menu: menu1_1_1}]
??????????? });
??? //菜單1
??? var menu1 = new Ext.menu.Menu({
???? id: 'menu1',
???? items: [
????? {id: "11",text:'菜單項1',handler: onItemClick},
????? {id: "12",text:'菜單項2',handler: onItemClick},
????? {id: "13",text:"菜單項3",handler: onItemClick},
????? {id: "14",text: "菜單項4",handler: onItemClick},
????? {id: "15",text: "菜單項5",menu: menu1_1},
????? {id: "16",text: "菜單項6",handler: onItemClick}
??????????? ]?
???? });

??? //菜單2
??? var menu2 = new Ext.menu.Menu({
???? id: 'menu2',????
???? items: [
???? {id: "21",text: '菜單1',handler: onItemClick},
???? {id: "22",text: "菜單2",handler: onItemClick},
???? {id: "23",text: "菜單3",handler: onItemClick}
??????????? ]
???? });
????
??? //菜單3
??? var menu3 = new Ext.menu.Menu({
???? id: 'menu3',
???? items: [
????? {id: "31",text: '菜單4',handler: onItemClick},
????? {id: "32",text: "菜單6",handler: onItemClick}
??????????? ]
???? });
???
??? var d_menu1 = Ext.get("d_menu1");
??? var d_menu2 = Ext.get("d_menu2");
??? var d_menu3 = Ext.get("d_menu3");

??? d_menu1.on("mouseover",
?????????????? function(e){
??? menu1.show(d_menu1);}
???????????? );
???
??? d_menu2.on("mouseover",
?????????????? function(e){
??? menu2.show(d_menu2);}
????????????? );
????? ???
??? d_menu3.on("mouseover",
??????????????? function(e){
???? menu3.show(d_menu3);}
????????????? );
???
??? //鼠標移出菜單后，菜單自動隱藏。
??? var mouseOutHideMenu = function(MyMenu){
?????????? MyMenu.on("mouseout",
??? ????????????? function(menu,e,itme){
???????????? ??????? if(!e.getRelatedTarget().contains(e.getTarget())&& !menu.getEl().contains(e.getRelatedTarget())){
??? //下面這句if語句，是判斷鼠標是否移動到子菜單上。
??? if (!Ext.get(e.getTarget()).hasClass('x-menu-item')){
??????? hideAllMenu();
??? }
???????????? ??????? }else
??????????????????????? if(e.getRelatedTarget().contains(menu.getEl().dom)){
??????????????? ? //下面這句if語句，是判斷鼠標是否移動到子菜單上。
??????????????? ? if (!Ext.get(e.getTarget()).hasClass('x-menu-item-icon')&&!Ext.get(e.getTarget()).hasClass('x-menu-item')){
??????? hideAllMenu();
?????????? }
???????????????????? }
????????????? });
???? }
?
??? //每個菜單項添加監聽
??? mouseOutHideMenu(menu1);
??? mouseOutHideMenu(menu2);
??? mouseOutHideMenu(menu3);
??? mouseOutHideMenu(menu1_1);
??? mouseOutHideMenu(menu1_1_1);
???
??? var hideAllMenu = function(){
??//隱藏菜單
??menu1.hide();
??menu2.hide();
??menu3.hide();
??menu1_1.hide();
??menu1_1_1.hide();
?}
?
??? var page_header=Ext.get('menu_header');

??? page_header.on("mouseover",function(e){
??? ?hideAllMenu(); //隱藏菜單
??? });
});

?? function onItemClick(item){
?????? //alert('Click!');
?? }
</script>
</head>

<body>

<div id="menu_header">
<table height="20" cellSpacing="0" cellPadding="0" width="1004" border="0">
?? <tr>
???? <td>Welcome</td>
?? </tr>
</table>
</div>

</body>
</html>

[－完－]

?????????????????????????????????????????????????????????????????? by JRQ

??????????????????????????????????????????????????????????????? 2010/12/30

轉載于:https://www.cnblogs.com/java0819/archive/2010/12/31/2146207.html

總結

以上是生活随笔為你收集整理的ExtJS：鼠标移出菜单后菜单自动隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Spartan-II 应用指南转载
下一篇： Goodbye, 2010. Hello