當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Ext.menu.Menu菜单栏

發(fā)布時(shí)間：2025/3/20 编程问答 46 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ext.menu.Menu菜单栏小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1、Ext.menu.Menu主要配置項(xiàng)

Ext.menu.Menu組件主要配置項(xiàng)

配置項(xiàng)參數(shù)類型說(shuō)明

items	Mixed	有效菜單項(xiàng)數(shù)組
ignoreParentClicks	Boolean	忽略任何作為父菜單項(xiàng)的單擊事件，默認(rèn)為false
plain	Boolean	是否移除菜單左側(cè)的豎線，默認(rèn)為false

菜單項(xiàng)主要類型

菜單元素名稱說(shuō)明

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)

配置項(xiàng)參數(shù)類型說(shuō)明

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	打開超鏈接的目標(biāo)框架名稱，默認(rèn)為undefined
menuExpandDelay	Number	子菜單展開之前，鼠標(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: "打開",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í)菜單

代碼:

效果圖：

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)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Linux socket关闭连接shut
下一篇： perl函数原型