第二百零六節，jQuery EasyUI，Menu(菜單)組件

jQuery EasyUI，Menu(菜單)組件

 

學習要點：

　　1.加載方式

　　2.菜單項屬性

　　3.菜單屬性

　　4.菜單事件

　　5.菜單方法

 

本節課重點了解 EasyUI 中 Menu(菜單)組件的使用方法，這個組件不依賴於任何其他 組件。

 

 

一．加載方式

菜單組件通常用於快捷菜單，在加載方式上，通過 class 或 JS 進行設置為菜單組件。 然后，再通過 JS 事件部分再響應。

class 加載方式，

<div id="box" class="easyui-menu" style="width:120px;">
    <div>新建</div>
    <div>
        <span>打開</span>
        <div style="width:150px;">
            <div>Word</div>
            <div>Excel</div>
            <div>PowerPoint</div>
        </div>
    </div>
    <div data-options="iconCls:'icon-save'">保存</div>
    <div class="menu-sep"></div>
    <div>退出</div>
</div>

注意必須結合js使用，因為默認class 加載方式，是隱藏的，而且默認是瀏覽器系統菜單

js

$(function () {
    $(document).on('contextmenu',function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show',{   //執行自定義鼠標左鍵菜單
            left:e.pageX,  //菜單位置
            top:e.pageY    //菜單位置
        })
    })
});

 

menu()方法，將元素執行鼠標左鍵自定義菜單方法

JS 加載方式

$(function () {
    $('#box').menu({

    });
    $(document).on('contextmenu',function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show',{   //執行自定義鼠標左鍵菜單
            left:e.pageX,  //菜單位置
            top:e.pageY    //菜單位置
        })
    })
});

 

二．菜單項屬性，菜單主體屬性

在 data-options 設置，只有兩個有效，這些屬性一般用於class 加載方式的每一項，或者使用方法增加時設置

<div data-options="
　　iconCls :'icon-save',
　　disabled : true,
">保存</div>

PS：其他的參數會菜單方法中設置菜單項時有效

 

 

三．菜單屬性

菜單屬性，有些設置在 data-options 有效

zIndex   number 菜單 z-index 樣式，增加它的值。默認值110000。 設置菜單的層級關系

$(function () {
    $('#box').menu({
        zIndex:100   //設置菜單的層級關系
    });
    $(document).on('contextmenu', function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show', {   //執行自定義鼠標左鍵菜單
            left: e.pageX,  //菜單位置
            top: e.pageY    //菜單位置
        });
    });
});

 

left   number 菜單的左邊距位置。默認值0。

$(function () {
    $('#box').menu({
        zIndex:100,   //設置菜單的層級關系
        left:100,
        top:100
    });
    $(document).on('contextmenu', function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show', {   //執行自定義鼠標左鍵菜單
            // left: e.pageX,  //菜單位置
            // top: e.pageY    //菜單位置
        });
    });
});

 

top   number 菜單的上邊距位置。默認值0。

$(function () {
    $('#box').menu({
        zIndex:100,   //設置菜單的層級關系
        left:100,
        top:100
    });
    $(document).on('contextmenu', function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show', {   //執行自定義鼠標左鍵菜單
            // left: e.pageX,  //菜單位置
            // top: e.pageY    //菜單位置
        });
    });
});

 

minWidth   number 菜單的最小寬度。默認值120。

$(function () {
    $('#box').menu({
        zIndex:100,   //設置菜單的層級關系
        left:100,
        top:100,
        minWidth:400    //菜單的最小寬度。默認值120。
    });
    $(document).on('contextmenu', function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show', {   //執行自定義鼠標左鍵菜單
            // left: e.pageX,  //菜單位置
            // top: e.pageY    //菜單位置
        });
    });
});

 

hideOnUnhover   boolean 當設置為 true 時，在鼠標離開菜單的時候將自動隱藏菜單。默認值 true。

$(function () {
    $('#box').menu({
        zIndex:100,   //設置菜單的層級關系
        minWidth:400,    //菜單的最小寬度。默認值120。
        hideOnUnhover:false  //當設置為 true 時，在鼠標離開菜單的時候將自動隱藏菜單。默認值 true。
    });
    $(document).on('contextmenu', function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show', {   //執行自定義鼠標左鍵菜單
            left: e.pageX,  //菜單位置
            top: e.pageY    //菜單位置
        });
    });
});

 

 

四．菜單事件

 

onShow   none 在菜單顯示之后觸發。

$(function () {
    $('#box').menu({
        zIndex:100,   //設置菜單的層級關系
        onShow:function () {
            alert('在菜單顯示之后觸發。');
        }
    });
    $(document).on('contextmenu', function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show', {   //執行自定義鼠標左鍵菜單
            left: e.pageX,  //菜單位置
            top: e.pageY    //菜單位置
        });
    });
});

 

onHide   none 在菜單隱藏之后觸發。

$(function () {
    $('#box').menu({
        zIndex:100,   //設置菜單的層級關系
        onHide:function () {
            alert('在菜單隱藏之后觸發');
        }
    });
    $(document).on('contextmenu', function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show', {   //執行自定義鼠標左鍵菜單
            left: e.pageX,  //菜單位置
            top: e.pageY    //菜單位置
        });
    });
});

 

onClick   item 在菜單項被點擊的時候觸發。

$(function () {
    $('#box').menu({
        zIndex:100,   //設置菜單的層級關系
        onClick:function (item) {
            alert('在菜單項被點擊的時候觸發');
            alert(item); //接收點擊的對象
        }
    });
    $(document).on('contextmenu', function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show', {   //執行自定義鼠標左鍵菜單
            left: e.pageX,  //菜單位置
            top: e.pageY    //菜單位置
        });
    });
});

 

 

五．菜單方法

 

 

options   none 返回屬性對象。

$(function () {
    $('#box').menu({

    });
    alert($('#box').menu('options'));   //返回屬性對象
});

 

show   pos顯示菜單到指定的位置。'pos'參數有2個屬性：
　　left：新的左邊距位置。
　　top：新的上邊距位置。

 

$(function () {
    $('#box').menu({

    });
    $(document).on('contextmenu',function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show',{   //執行自定義鼠標左鍵菜單
            left:e.pageX,  //菜單位置
            top:e.pageY    //菜單位置
        })
    });
});

 

hide   none 隱藏菜單。

$(function () {
    $('#box').menu({

    });
    $(document).on('contextmenu',function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show',{   //執行自定義鼠標左鍵菜單
            left:e.pageX,  //菜單位置
            top:e.pageY    //菜單位置
        });
        $('#box').menu('hide');      //隱藏菜單。
    });

});

 

destroy   none 銷毀菜單。

$(function () {
    $('#box').menu({

    });
    $(document).on('contextmenu',function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show',{   //執行自定義鼠標左鍵菜單
            left:e.pageX,  //菜單位置
            top:e.pageY    //菜單位置
        });
        $('#box').menu('destroy');      //銷毀菜單
    });
});

 

getItem   itemEl 獲取指定的菜單項。得到的是一個菜單項的 DOM 元素。值為指定菜單項的id

$(function () {
    $('#box').menu({

    });
    $(document).on('contextmenu',function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show',{   //執行自定義鼠標左鍵菜單
            left:e.pageX,  //菜單位置
            top:e.pageY    //菜單位置
        });
        alert($('#box').menu('getItem','#df'));      //得到的是一個菜單項的 DOM 元素。值為指定菜單項的id
    });
});

 

setText   param設置指定菜單項的文本。'param'參數包含2個屬性：
　　target：DOM 對象，要設置值的菜單項。
　　text: 字符串，要設置的新文本值。

$(function () {
    $('#box').menu({

    });
    $(document).on('contextmenu',function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show',{   //執行自定義鼠標左鍵菜單
            left:e.pageX,  //菜單位置
            top:e.pageY    //菜單位置
        });
        $('#box').menu('setText', {
            target: '#df',
            text: '修改'
        });
    });
});

 

setIcon   param設置指定菜單項圖標。'param'參數包含2個屬性：
　　target：DOM 對象，要設置的菜單項。
　　iconCls：新的圖標 CSS 類 ID。

$(function () {
    $('#box').menu({

    });
    $(document).on('contextmenu',function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show',{   //執行自定義鼠標左鍵菜單
            left:e.pageX,  //菜單位置
            top:e.pageY    //菜單位置
        });
        $('#box').menu('setIcon', {
            target: '#df',
            iconCls : 'icon-add'
        });
    });
});

 

findItem   text 查 找 的 指 定 菜 單 項 ， 返 回 的 對 象 和getItem 方法是一樣的。

$(function () {
    $('#box').menu({

    });
    $(document).on('contextmenu',function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show',{   //執行自定義鼠標左鍵菜單
            left:e.pageX,  //菜單位置
            top:e.pageY    //菜單位置
        });
    alert($('#box').menu('findItem','新建'));
    });
});

 

appendItem   options追加新的菜單項，'options'參數代表新菜單項屬性。默認情況下添加的項在菜單項的頂部。追加一個子菜單項，'parent'屬性應該設置指定的父項元素，並且該父項元素必須是已經定義在頁面上的。

$(function () {
    $('#box').menu({});
    $(document).on('contextmenu', function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show', {   //執行自定義鼠標左鍵菜單
            left: e.pageX,  //菜單位置
            top: e.pageY    //菜單位置
        });
    });
    $('#box').menu('appendItem', {
        text: '新增',
        iconCls: 'icon-add',
        onclick: function () {
            alert('新增'); } });
});

追加一個子菜單項

$(function () {
    $('#box').menu({});
    $(document).on('contextmenu', function (e) {   //設置鼠標左鍵方法
        e.preventDefault();  //阻止默認行為，阻止掉瀏覽器系統菜單
        $('#box').menu('show', {   //執行自定義鼠標左鍵菜單
            left: e.pageX,  //菜單位置
            top: e.pageY    //菜單位置
        });
    });
    $('#box').menu('appendItem', {
        parent: $('#box').menu('findItem', '打開').target,
        text: '新增',
        iconCls: 'icon-add',
        onclick: function () {
            alert('新增');
        },
    });
});

 

 

removeItem   itemEl 移除指定的菜單項。值為目標id

$('#box').menu('removeItem', '#new');

 

enableItem   itemEl 啟用菜單項。值為目標id

$('#box').menu('disableItem', '#new');

 

disableItem   itemEl 禁用菜單項。值為目標id

 

$('#box').menu('enableItem', '#new');

 

 $.fn.menu.defaults 重寫默認值對象。見前面