ExtJS：鼠标移出菜单后菜单自动隐藏
ExtJS：鼠標(biāo)移出菜單后菜單自動(dòng)隱藏
1、使用的是Extjs2.0.2。
2、遇到的問題，簡述如下：
?? 當(dāng)下拉菜單顯示后，如果不做任何操作，而直接移開鼠標(biāo)，此時(shí)菜單不會(huì)自動(dòng)消失（隱藏），一直會(huì)顯示在屏幕上。
?? 必須需要鼠標(biāo)單擊一下菜單項(xiàng)，或單擊頁面的其他地方后，該菜單才會(huì)消失（隱藏）。
3、為了增強(qiáng)用戶體驗(yàn)，測試鼠標(biāo)在移出下拉菜單后，使菜單可以自動(dòng)隱藏。
下面是測試Demo的代碼：
?
<%@ page language="java"? pageEncoding="UTF-8"%>
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="./extjs/ext-all.css" />
<link rel="stylesheet" type="text/css" href="./extjs/ext-patch.css" />
<script type="text/javascript" src="./extjs/ext-base.js"></script>
<script type="text/javascript" src="./extjs/ext-all.js"></script>
<script type="text/javascript" src="./extjs/ext-lang-zh_CN.js"></script>
<script type=text/javascript>
Ext.onReady(function(){
??? Ext.QuickTips.init();
?????? ?
??? //子級(jí)菜單項(xiàng)
??? 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}
??????????????????? ??]
???????????????? ?});
??? //子級(jí)菜單項(xiàng)???????????? ?????
??? var menu1_1 = new Ext.menu.Menu({
??? ?????? id:'menu1_1',
???????????????????? items:[
??????????? ??????????? {id: "151",text:'子項(xiàng)1',handler: onItemClick},
?????????????????????????? {id: "152",text:'子項(xiàng)2',handler: onItemClick},
?????????????????????????? {id: "153",text:'子項(xiàng)3',handler: onItemClick},
?????????????????????????? {id: "154",text:'子項(xiàng)4',handler: onItemClick},
?????????????????????????? {id: "155",text: '子項(xiàng)5',menu: menu1_1_1}]
??????????? });
??? //菜單1
??? var menu1 = new Ext.menu.Menu({
???? id: 'menu1',
???? items: [
????? {id: "11",text:'菜單項(xiàng)1',handler: onItemClick},
????? {id: "12",text:'菜單項(xiàng)2',handler: onItemClick},
????? {id: "13",text:"菜單項(xiàng)3",handler: onItemClick},
????? {id: "14",text: "菜單項(xiàng)4",handler: onItemClick},
????? {id: "15",text: "菜單項(xiàng)5",menu: menu1_1},
????? {id: "16",text: "菜單項(xiàng)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);}
????????????? );
???
??? //鼠標(biāo)移出菜單后，菜單自動(dòng)隱藏。
??? var mouseOutHideMenu = function(MyMenu){
?????????? MyMenu.on("mouseout",
??? ????????????? function(menu,e,itme){
???????????? ??????? if(!e.getRelatedTarget().contains(e.getTarget())&& !menu.getEl().contains(e.getRelatedTarget())){
??? //下面這句if語句，是判斷鼠標(biāo)是否移動(dòng)到子菜單上。
??? if (!Ext.get(e.getTarget()).hasClass('x-menu-item')){
??????? hideAllMenu();
??? }
???????????? ??????? }else
??????????????????????? if(e.getRelatedTarget().contains(menu.getEl().dom)){
??????????????? ? //下面這句if語句，是判斷鼠標(biāo)是否移動(dòng)到子菜單上。
??????????????? ? if (!Ext.get(e.getTarget()).hasClass('x-menu-item-icon')&&!Ext.get(e.getTarget()).hasClass('x-menu-item')){
??????? hideAllMenu();
?????????? }
???????????????????? }
????????????? });
???? }
?
??? //每個(gè)菜單項(xiàng)添加監(jiān)聽
??? 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>
<table height="50" width="1004" border="0" cellpadding="0" cellspacing="0">
??? <tr>
????? <td><div id = "d_menu1">菜單1</div></td>
????? <td><div id = "d_menu2">菜單2</div></td>
????? <td><div id = "d_menu3">菜單3</div></td>
????? <td>
??? </tr>
</table>
</body>
</html>
?
[－完－]
?????????????????????????????????????????????????????????????????? by JRQ
??????????????????????????????????????????????????????????????? 2010/12/30
轉(zhuǎn)載于:https://www.cnblogs.com/java0819/archive/2010/12/31/2146207.html
總結(jié)
以上是生活随笔為你收集整理的ExtJS：鼠标移出菜单后菜单自动隐藏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spartan-II 应用指南 转载
- 下一篇： 往上滚动的JS