Ext.menu.Menu菜单栏
生活随笔
收集整理的這篇文章主要介紹了
Ext.menu.Menu菜单栏
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1、Ext.menu.Menu主要配置項(xiàng)
Ext.menu.Menu組件主要配置項(xiàng)
| items | Mixed | 有效菜單項(xiàng)數(shù)組 |
| ignoreParentClicks | Boolean | 忽略任何作為父菜單項(xiàng)的單擊事件，默認(rèn)為false |
| plain | Boolean | 是否移除菜單左側(cè)的豎線，默認(rèn)為false |
菜單項(xiàng)主要類型
| Ext.menu.Item | 菜單項(xiàng)基類 |
| Ext.menu.Separator | 菜單分隔符 |
| Ext.menu.CheckItem | 包含選擇框的菜單項(xiàng)，也可以是一個(gè)單選組 |
| Ext.menu.ColorPicker | 顏色選擇器 |
| Ext.menu.DatePicker | 日期選擇器 |
Ext.menu.Item主要配置項(xiàng)
| canActivate | Boolean | 當(dāng)鼠標(biāo)移入菜單或菜單項(xiàng)獲得焦點(diǎn)時(shí)，是否高亮顯示菜單項(xiàng)，默認(rèn)為true |
| clickHideDelay | Number | 點(diǎn)擊菜單項(xiàng)之后，隱藏菜單項(xiàng)的延時(shí)時(shí)間，默認(rèn)為1ms |
| destoryMenu | Boolean | 是否級(jí)聯(lián)銷毀子菜單，默認(rèn)為true |
| hideOnClick | Boolean | 點(diǎn)擊菜單項(xiàng)之后是否隱藏菜單，默認(rèn)為true |
| href | String | 超鏈接，默認(rèn)為# |
| hrefTarget | String | 打開(kāi)超鏈接的目標(biāo)框架名稱，默認(rèn)為undefined |
| menuExpandDelay | Number | 子菜單展開(kāi)之前，鼠標(biāo)移入菜單項(xiàng)之后的延時(shí)時(shí)間，默認(rèn)為300ms，只有在菜單項(xiàng)具有子菜單時(shí)生效 |
| menuHideDelay | Number | 子菜單隱藏之前，鼠標(biāo)移入菜單項(xiàng)之后的延時(shí)時(shí)間，默認(rèn)為300ms，只有在菜單項(xiàng)具有子菜單時(shí)生效 |
| menuAlign | String | 設(shè)置子菜單與父菜單的對(duì)其關(guān)系 |
| menu | Mixed | 子菜單 |
2、簡(jiǎn)單示例
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Ext.menu.Menu菜單欄</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function () {var toolbar = Ext.create("Ext.Toolbar", {renderTo: Ext.getBody(),width: 500});var file = new Ext.menu.Menu({shadow: "drop",allowOtherMenus: true,items: [new Ext.menu.Item({text: "新建",handler: onMunuItem}),new Ext.menu.Item({text: "打開(kāi)",handler: onMunuItem}),new Ext.menu.Item({text: "保存",handler: onMunuItem}),new Ext.menu.Item({text: "另存為",handler: onMunuItem}),new Ext.menu.Separator(),new Ext.menu.Item({text: "退出",handler: onMunuItem})]});var edit = new Ext.menu.Menu({shadow: "frame",allowOtherMenus: true,items: [new Ext.menu.Item({text: "撤銷",handler: onMunuItem}),new Ext.menu.Separator(),new Ext.menu.Item({text: "剪切",handler: onMunuItem}),new Ext.menu.Item({text: "復(fù)制",handler: onMunuItem}),new Ext.menu.Item({text: "粘貼",handler: onMunuItem}),new Ext.menu.Item({text: "刪除",handler: onMunuItem})]});toolbar.add({text: "文件",menu: file}, {text: "編輯",menu: edit});function onMunuItem(item) {Ext.MessageBox.alert(item.text);}});</script> </head> <body> </body> </html>效果圖：
3、二級(jí)或多級(jí)菜單
代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Ext.menu.Menu菜單欄</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function () {var toolbar = Ext.create("Ext.Toolbar", {renderTo: Ext.getBody(),width: 500});var category = new Ext.menu.Menu({ignoreParentClicks: true,plain: true,items: [{text: "服裝服飾",menu: new Ext.menu.Menu({ignoreParentClicks: true,items: [{text: "特色服飾",menu: new Ext.menu.Menu({items: [{text: "婚紗禮服"}, {text: "職業(yè)套裝"}, {text: "舞臺(tái)裝"}]})}, {text: "時(shí)尚休閑"}]})}, {text: "數(shù)碼家電"}]});toolbar.add({text: "商品分類",menu: category});});</script> </head> <body> </body> </html>效果圖：
4、具有選擇框的菜單
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>動(dòng)態(tài)更新消息文字</title><link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /><script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script><script type="text/javascript">Ext.onReady(function () {var toolbar = new Ext.toolbar.Toolbar({renderTo: Ext.getBody(),width: 300});var themeMenu = new Ext.menu.Menu({items: [{text: "主題顏色",menu: new Ext.menu.Menu({items: [{text: "紅色主題",checked: true,group: "theme",checkHandler: onItemCheck}, {text: "藍(lán)色主題",checked: false,group: "theme",checkHandler: onItemCheck}, {text: "灰色主題",checked: false,group: "theme",checkHandler: onItemCheck}]})}, {text: "是否啟用",checked: false}]});toolbar.add({text: "選擇風(fēng)格",menu: themeMenu});function onItemCheck(item) {Ext.MessageBox.alert(item.text);}});</script> </head> <body> </body> </html>效果圖：
轉(zhuǎn)載于:https://www.cnblogs.com/libingql/archive/2012/04/14/2446847.html
總結(jié)
以上是生活随笔為你收集整理的Ext.menu.Menu菜单栏的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Linux socket关闭连接shut
- 下一篇： perl函数原型