1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    whouseit is on a distinguished road

      0  

    Default one js menu class base on yui-ext and yui

    one js menu class base on yui-ext and yui


    hi, I've just completed a js menu class base on yui-ext and yui. Because the YAHOO's menu class
    is too large and complex, my menu don't rely on it and just a js class especialy bases on yui-ext.
    shown below:

    menu.js
    Code:
    /**
     * @author zsx
     * @version 0.1.6
     */
    
    if (!YAHOO.ext.MenuDB) {
        YAHOO.ext.MenuDB = {};
        YAHOO.ext.MenuDB.menu = [];
        YAHOO.ext.MenuDB.menuItem = [];
    }    
    
    YAHOO.ext.MenuItem = function(config) {
        YAHOO.ext.util.Config.apply(this, config);
        this.innerElement = document.createElement('span');
    };
    YAHOO.ext.MenuItem.prototype = {
    
        /**
         * @private
         * @param {Object} appendTo
         * @param {Object} tr
         */
        init: function(appendTo, tr) {
            if (this.id) {
                this.innerElement.id = this.id;
                YAHOO.ext.MenuDB.menuItem[this.id] = this;
            }
            this.disable = (this.disabled === true);
            appendTo.appendChild(this.innerElement);
            this.el = getEl(tr, true);
            this.innerElement.innerHTML = (this.text ? this.text : '');
            this.el.mon('click', this.onClick, this, true);
            this.el.mon('mouseout', this.onMouseOut, this, true);
            this.el.mon('mouseover', this.onMouseOver, this, true);
        },
        disable : function() {
            this.disabled = true;
            if(this.el){
                this.el.addClass('ymb-item-disabled');
            }
        },
        enable : function() {
            this.disabled = false;
            if(this.el){
                this.el.removeClass('ymb-item-disabled');
            }
        },
        isDisabled : function() {
            return this.disabled === true;
        },
        setDisabled : function(disabled) {
            if(disabled){
                this.disable();
            } else {
                this.enable();
            }
        },
        onClick : function(e, scope) {
            if(!this.disabled && this.click)
                this.click.call(this.scope || window, e, this);
            },
        onMouseOver : function(e, scope) {
            if(!this.disabled){
                this.el.addClass('ymb-item-over');
                if(this.mouseover){
                    this.mouseover.call(this.scope || window, e, this);
                }
            }
        },
        onMouseOut : function(e, scope) {
            if (this.isLabel)
                return;
            this.el.removeClass('ymb-item-over');
            if(!this.disabled){
                if(this.mouseout){
                    this.mouseout.call(this.scope || window, e, this);
                }
            }
        },
        addMouseOverClass: function() {
            this.el.addClass('ymb-item-over');
        },
        removeMouseOverClass: function() {
            this.el.removeClass('ymb-item-over');
        }
    };
    
    YAHOO.ext.Menu = function(config) {
        YAHOO.ext.util.Config.apply(this, config);
        var appendTo = document.body;
        var div = document.createElement('div');
        div.className = 'ymenubar';
        appendTo.appendChild(div);
        var tb = document.createElement('table');
        tb.boder = 0;
        tb.cellPadding = 0;
        tb.cellSpacing = 0;
        div.appendChild(tb);
    
        var tbody = document.createElement('tbody');
        tb.appendChild(tbody);
        
        this.el = getEl(div, true);
        this.container = getEl(div, true);
        this.container.setVisible(false);
        this.tbody = tbody;
        this.children = [];
        this.menuItems = [];
        this.padding_left = 0;
        this.padding_bottom = 0;
        this.init(config);
    };
    YAHOO.ext.Menu.prototype = {
        init: function(config) {
            if (!config)
                return;
            if (this.id)
                YAHOO.ext.MenuDB.menu[this.id] = this;
            for (var i = 0; i < config.length; i++) {
                var item = config[i];
                var isSep = item['separator'];
                var isTextItem = item['textItem'];
                var subMenu = item['subMenu'];
      
                if (isSep)
                    this.addSeparator();
                else if (isTextItem)
                    this.addText(item.text);
                else if (subMenu)
                    this.addSubMenu(item);
                else   
                    this.addItem(item);
            }
        },
        add: function() {
            for (var i = 0; i < arguments.length; i++) {
                var el = arguments[i];
                var tr = document.createElement('tr');
                var td = document.createElement('td');
                tr.appendChild(td);
                this.tbody.appendChild(tr);
             
                if (el instanceof YAHOO.ext.MenuItem) {
                    el.init(td, tr);
                } else if (el instanceof Array) {
                    this.addItem(el);
                } else if (typeof el == 'string') {
                    var span = document.createElement('span');
                    if (el == 'separator') {
                        span.className = 'ymb-sep';
                    } else {
                        span.innerHTML = el;
                        span.className = 'ymb-span';
                    }
                    td.appendChild(span);
                } else if (typeof el == 'object') {
                    td.appendChild(el);
                }
            }
        },
        /**
         * @public
         * @param {Object} config
         */
        addItem: function(config) {
            if(config instanceof Array){
                var items = [];
                for (var i = 0, len = config.length; i < len; i++)
                    items.push(this.addItem(config[i]));
                return items;
            }
      
            var m = config;
            if(!(config instanceof YAHOO.ext.MenuItem)) {
                YAHOO.ext.util.Config.apply(config,
    	                                    {
                                                mouseover: this.onMouseOver,
                                                parent: this
                                            });
                m = new YAHOO.ext.MenuItem(config);
            }
    
            this.add(m);
            this.menuItems.push(m);
            return m;
        },
        addSubMenu:function(config) {
            var sub = config['subMenu'];
            var subMenu = YAHOO.ext.MenuHelper.createMenu(sub);
            YAHOO.ext.util.Config.apply(config,
                                        {
                                            menu: subMenu,
                                            hasChild: true,
                                            isLabel: true
                                        });
            var MenuItem = this.addItem(config);
            this.children.push(subMenu);
            subMenu.label = MenuItem;
        },
        addSeparator: function() {
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            this.tbody.appendChild(tr);
            tr.appendChild(td);
            td.className = 'ymb-sep';
        },
        addText : function(text) {
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var span = document.createElement('span');
            this.tbody.appendChild(tr);
            tr.appendChild(td);
            td.appendChild(span);
            span.className = 'ymb-span';
            span.innerHTML = text;
        },
        removeItem: function(menuItem) {
            for (var i = 0; i < this.menuItems.length; i++) {
                var tmp = this.menuItems[i];
                if (!tmp)
                    continue;
                if (menuItem == tmp) {
                    this.tbody.removeChild(menuItem.el.dom);
                    this.menuItems.splice(i, 1);
                    break;
                }
            }
        },
        onMouseOver: function(e, o) {
            var menu = o.parent;
            var oTarget = e.getTarget();
            for (var i = 0; i < menu.menuItems.length; i++) {
                var item = menu.menuItems[i];
                if (item instanceof YAHOO.ext.MenuItem) {
                    if (item.menu)
                        YAHOO.ext.MenuHelper.hideMenu({menu: item.menu});
                }
                var el = getEl(item);
                if (el && oTarget != el.dom && !YAHOO.util.Dom.isAncestor(el.dom, oTarget)) {
                    if (item.isLabel)
                        item.removeMouseOverClass();
                }
            }
            if (o.menu) {
                if (o.menu.label)
                    o.menu.label.addMouseOverClass();
                YAHOO.ext.MenuHelper.openMenu(o);
            }
        },
        onClick : function(e, o) {
            var oTarget = e.getTarget();
            var el = getEl(o['id']);
            if (el.dom != oTarget
                && !YAHOO.util.Dom.isAncestor(el.dom, oTarget)
                && !YAHOO.util.Dom.isAncestor(this['menu'].dom, oTarget)) {
                this['menu'].hideAll();
            }
        },
        showAt: function(el, hasChild) {
            var menu = getEl(this.container);
            var el = getEl(el);
            var bottom = el.getBottom(false);
            var left = el.getLeft(false);
    
            left += this.padding_left;
            bottom += this.padding_bottom;
    
            if (hasChild) {
                left = el.getRight(false);
                bottom -= el.getHeight(false);
            }
            var viewWidth = YAHOO.util.Dom.getViewportWidth();
            var myWidth = this.container.getWidth(false);
            if (left + myWidth > viewWidth)
                left = el.getLeft(false) - myWidth;
    
            var viewHeight = YAHOO.util.Dom.getViewportHeight();
            var myHeight = this.container.getHeight(false);
            if (bottom + myHeight > viewHeight)
                bottom = el.getBottom(false) - myHeight;
    
            menu.setXY([left, bottom]);
            menu.setVisible(true);
        },
        showAtPos: function(pos) {
            var menu = getEl(this.container);
            var left = pos[0];
            var bottom = pos[1];
    
            left += this.padding_left;
            bottom += this.padding_bottom;
    
            var viewWidth = YAHOO.util.Dom.getViewportWidth();
            var myWidth = this.container.getWidth(false);
            if (left > viewWidth)
                left = viewWidth - myWidth;
            else if (left + myWidth > viewWidth)
                left = left - myWidth;
    
            var viewHeight = YAHOO.util.Dom.getViewportHeight();
            var myHeight = this.container.getHeight(false);
            if (bottom > viewHeight)
                bottom = viewHeight - myHeight;
            else if (bottom + myHeight > viewHeight)
                bottom = bottom - myHeight;
    
            menu.setXY([left, bottom]);
            menu.setVisible(true);
        },
        hide: function() {
            var menu = getEl(this.container);
            menu.setVisible(false);
        },
        hideAll: function() {
            for (var i = 0; i < this.children.length; i++) {
                var subMenu = this.children[i];
                if (subMenu.label)
                    subMenu.label.removeMouseOverClass();
                if (subMenu.children.length > 0 && subMenu.children[i].isVisible())
                    subMenu.children[i].hideAll();
                subMenu.hide();
            }
            this.hide();
        },
        isVisible: function() {
            var menu = getEl(this.container);
            return menu.isVisible();
        },
        setPaddingLeft: function(num) {
            this.padding_left = num;
        },
        setPaddingBottom: function(num) {
            this.padding_bottom = num;
        }
    };
    
    YAHOO.ext.MenuMon = function(config) {
        this.doc = getEl(document.body);
        this.wrappedFn = null;
        YAHOO.ext.util.Config.apply(this, config);
    };
    
    YAHOO.ext.MenuMon.prototype = {
        onDocumentClick : function(e) {
            if (!this.id) {
                if (this.menu.isVisible())
                    this.menu.hideAll();
                return;
            }
            var el = getEl(this.id, true);
            if (!el || !el.dom) {
                if (this.menu.isVisible())
                this.menu.hideAll();
                return;
            }
            var oTarget = e.getTarget();
            if (el.dom != oTarget && !YAHOO.util.Dom.isAncestor(el.dom, oTarget)) {
                if (this['menu'].isVisible())
    	            this['menu'].hideAll();
            }
    //        alert('click doc, fn=' + this.wrappedFn);  //just for debug
            if (this.wrappedFn) {
    //         this.doc.removeListener('click', this.onDocumentClick, this);
    //         this.doc.removeListener('click', this.wrappedFn, this);
    //         YAHOO.ext.EventManager.removeListener(this.doc.dom, 'click', this.wrappedFn);
                this.wrappedFn = null;
            }
        },
        setClick: function(){
            if (this.clickSet)
                return;
            this.clickSet = true;
            this.wrappedFn = this.doc.mon('click', this.onDocumentClick, this, true);
        }
    };
    
    YAHOO.ext.MenuHelper = new function() {
        this.openMenu = function(o) {
            var m = o['menu'];
            if (!m || !(m instanceof YAHOO.ext.Menu))
                return;
            m.showAt(o['id'], o['hasChild']);
            if (!o.oMon) {
                o.oMon = new YAHOO.ext.MenuMon(o);
                o.oMon.setClick();
            }
        };
        this.openMenuAt = function(o) {
            var m = o.menu;
            if (!m || !(m instanceof YAHOO.ext.Menu))
                return;
            var el = getEl(m, true);
            m.showAtPos(o['pos']);
            if (!o.oMon) {
                o.oMon = new YAHOO.ext.MenuMon(o);
                o.oMon.setClick();
            }
        };
        this.setupContentMenu = function(o) {
            if (!o || !o.menu) {
                alert('please check you menu config!')
                return;
            }
            var container = o.container;
            if (!container)
                container = document.body;
            var element = document.createElement('div');
        
            container = getEl(container);
        
            function onDocRightClick(e) {
                var pos = e.getXY();
                YAHOO.ext.util.Config.apply(o, {pos: pos});
                this.openMenuAt(o);
                e.preventDefault();
            };
            container.mon('contextmenu', onDocRightClick, this, true);
        };
        this.hideMenu = function(o) {
            o.menu.hideAll();
        };
        this.createMenu = function(config) {
            if (!(config instanceof Array))
                return;
            var m = new YAHOO.ext.Menu(config);
            return m;
        };
        this.registerMenu = function(id, m) {
            if (m instanceof YAHOO.ext.Menu)
                YAHOO.ext.MenuDB.menu[id] = m;
        };
        this.removeMenu = function(id) {
            var menu = YAHOO.ext.MenuDB.menu[id];
            if (menu && menu.el && menu.el.dom) {
                menu.el.dom.parentNode.removeChild(menu.el.dom);
                YAHOO.ext.MenuDB.menu[id] = null;
            }
        };
        this.removeMenuItem = function(id) {
            var item = YAHOO.ext.MenuDB.menuItem[id];
            if (item && item.el && item.el.dom) {
                item.parent.removeItem(item);
                YAHOO.ext.MenuDB.menuItem[id] = null;
            }
        };
    }();
    menu.css
    Code:
    .ymenubar{
    	z-index:1000;
    	visibility:hidden;
    	background-color: #D5E7FF;
    	border: 1px solid #cbc7b8;
    	padding:2px;
    	padding: 1px 2px 1px 2px;
    	position: absolute;
    	display: block;
    	border-width:1px;
    	border-color:rgb(192,192,192) black black rgb(192,192,192);
    }
    
    .ymenubar table,.ymenubar tbody.ymenubar tr,.ymenubar td,.ymenubar div{
    	font:normal 8pt tahoma, helvetica, arial, sans-serif;
    	padding:4px 0px;
    }
    
    .ymenubar span {
    	font:normal 8pt tahoma, helvetica, arial, sans-serif;
    	padding:4px 20px;
    }
    
    .ymenubar .ymb-text{
    	font:normal 8pt tahoma, helvetica, arial, sans-serif;
    	padding:4px 0px;
    }
    
    .ymenubar .ymb-sep2{
    	height: 1px;
    	background: blue;
    	background-repeat: no-repeat;
    }
    .ymenubar .ymb-sep{
    	background-image: url(../images/menu_sep.gif);
    	background-position: center;
    	background-repeat: repeat-x;
    	display: block;
    	cursor:default;
    	height: 16px;
    	padding-left: 0px;
    }
    
    .ymenubar .ymb-item-over{
    	background-color:#0D2A72;
    	color: #ffffff;
    	cursor: default;
    }

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    whouseit is on a distinguished road

      0  

    Default one demo on my js menu

    one demo on my js menu


    demo.html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<title>"menu example"</title>
    		<script language="JavaScript" type="text/javascript" src="../base/js/yui/yahoo.js"></script>
    		<script language="JavaScript" type="text/javascript" src="../base/js/yui/event.js"></script>
    		<script language="JavaScript" type="text/javascript" src="../base/js/yui/dom.js"></script>
    		<script language="JavaScript" type="text/javascript" src="../base/js/yui/container_core.js"></script>
    		<script language="JavaScript" type="text/javascript" src="../base/js/yui/dragdrop.js"></script>
    		<script language="JavaScript" type="text/javascript" src="../base/js/yui/connection.js"></script>
    		<script language="JavaScript" type="text/javascript" src="../base/js/yui/animation.js"></script>
    		<script language="JavaScript" type="text/javascript" src="../base/js/yui-ext/yui-ext.js"></script>
    		<script language="JavaScript" type="text/javascript" src="../base/js/ie-bg.js"></script>
    		
    		<script language="JavaScript" type="text/javascript" src="../base/js/yutil-min.js"></script>
    		<script language="JavaScript" type="text/javascript" src="menu.js"></script>
    		<script language="JavaScript" type="text/javascript" src="demo_en.js"></script>
    		<link rel="stylesheet" type="text/css" href="../base/resources/css/grid.css"/>
        	<link rel="stylesheet" type="text/css" href="../base/resources/css/toolbar.css"/>
    		<link rel="stylesheet" type="text/css" href="css/menu.css">
        	<link rel="stylesheet" type="text/css" href="../base/resources/css/layout.css"/>
        	<link rel="stylesheet" type="text/css" href="../base/resources/css/tabs.css"/>
    		<link rel="stylesheet" type="text/css" href="../base/resources/css/resizable.css">
    		<link rel="stylesheet" type="text/css" href="../base/resources/css/basic-dialog.css">
    		<link rel="stylesheet" type="text/css" href="../base/resources/css/reset-min.css">
    		<link rel="stylesheet" type="text/css" href="../base/resources/fonts/fonts.css">
    		<link rel="stylesheet" type="text/css" href="../base/resources/css/container/container.css">
    	</head>
    	<body>
    		<div id="menu"></div>
    		<div id="header-panel"></div>
    		<div id="menu-panel">
    			<div id="tool-bar" class="mso"></div>
    			<div id="menu-bar"></div>
    		</div>
    		<div id="tmp_id" value="hi, me"></div>
    	</body>
    </html>

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    whouseit is on a distinguished road

      0  

    Default the demo's js

    the demo's js


    demo_en.js:
    Code:
    function openFn(e, oItem) {
       alert('text=' + oItem['text'] + '; id=' + oItem['id']);
    };
    function newFn(e, oItem) {
       alert('text=' + oItem['text'] + '; id=' + oItem['id']);
    };
    function saveFn(e, oItem) {
       alert('text=' + oItem['text'] + '; id=' + oItem['id']);
    };
    function closeFn(e, oItem) {
       alert('text=' + oItem['text'] + '; id=' + oItem['id']);
    };
    fileMenuConfig = [
       { id: 'open', text: 'open', click: openFn},
       { id: 'new', text: 'new', click: newFn},
       { separator: true },
       { id: 'save', text: 'save', click: saveFn},
       { id: 'close', text: 'close', click: closeFn},
       { separator: true },
       { textItem: true, text: 'quit'},
       {
          id: 'selectsub20',
          text: 'open&nbsp>>',
          subMenu:
          [
             {id: 'select21', text: 'open'},
             {id: 'select21', text: 'new'},
             {id: 'select21', text: 'close'},
             { separator: true},
             {id: 'select', text: 'copy'},
             {id: 'select', text: 'cut'},
             {id: 'select', text: 'paste'},
             {textItem: true, text: 'help'}
          ]
       },
       {
          id: 'selectsub21',
          text: 'open&nbsp>>',
          subMenu:
          [
             {id: 'select21', text: 'open'},
             {id: 'select21', text: 'new'},
             {id: 'select21', text: 'close'},
             { separator: true},
             {id: 'select', text: 'copy'},
             {id: 'select', text: 'cut'},
             {id: 'select', text: 'paste'},
             {textItem: true, text: 'help'}
          ]
       }
    ];
    
    function delMenuItemFn(e, oItem) {
       alert('text=' + oItem['text'] + '; id=' + oItem['id'] + '; delItem=' + oItem['delItem']);
       YAHOO.ext.MenuHelper.removeMenuItem(oItem.delItem);
    };
    function delMenuFn(e, oItem) {
       alert('text=' + oItem['text'] + '; id=' + oItem['id'] + '; delItem=' + oItem['delItem']);
       YAHOO.ext.MenuHelper.removeMenu(oItem.delItem);
    };
    editMenuConfig = [
       { id: 'copy', text: 'copy'},
       { id: 'cut', text: 'cut'},
       { separator: true },
       { id: 'paste', text: 'paste'},
       { separator: true },
       { id: 'delete', text: 'delete copy', click: delMenuItemFn, delItem: 'copy'},
       { id: 'delete_menu1', text: 'delete lastmenu', click: delMenuFn, delItem: 'menubar'},
       { id: 'delete_menu2', text: 'delete other3', click: delMenuItemFn, delItem: 'other3'},
       { separator: true },
       { id: 'delete_menu3', text: 'delete file', click: delMenuFn, delItem: 'file_menu'}
    ];
    helpMenuConfig = [
       { id: 'about', text: 'about'},
       { id: 'help', text: 'help'}
    ];
    
    function clickMeFn(e, o) {
       alert('hello, click me, text=' + o['text']);
    };
    
    posMenuConfig = [
       { id: 'about&', text: 'about'},
       { id: 'help&', text: 'help'},
       { separator: true },
       {
          id: 'about1',
          text: 'other &nbsp&nbsp >>',
          subMenu:
          [
             { id: 'about11', text: 'other1'},
             { id: 'about11', text: 'other1'},
             { id: 'about11', text: 'other1'},
             { separator: true },
             { id: 'about11', text: 'other1'},
             { id: 'about11', text: 'other1'},
             {
                id: 'other2',
                text: 'other2 &nbsp&nbsp >>',
                subMenu:
                [
                   {id: 'other22', text: 'other24, click me', click: clickMeFn},
                   {id: 'other22', text: 'other22'},
                   {id: 'other22', text: 'other22'},
                   {id: 'other22', text: 'other22'},
                   {
                      id: 'other3',
                      text: 'other3 >>>',
                      subMenu:
                      [
                         {id: 'other31', text: 'other31'},
                         {id: 'other31', text: 'other31'},
                         {id: 'other31', text: 'other31'},
                         {id: 'other31', text: 'other31'},
                         {id: 'other31', text: 'other31'}
                      ]
                   }
                ]
             }
          ]
       }
    ];
    
    pos2MenuConfig = [
       { id: 'pos20', text: 'about'},
       { id: 'pos21', text: 'help'},
       { separator: true },
       {
          id: 'pos22',
          text: 'other &nbsp&nbsp >>',
          subMenu:
          [
             { id: 'pos220', text: 'other1'},
             { id: 'pos221', text: 'other1'},
             { id: 'pos222', text: 'other1'},
             { separator: true },
             { id: 'pos223', text: 'other1'},
             { id: 'pos224', text: 'other1'},
             {
                id: 'pos225',
                text: 'other2 &nbsp&nbsp >>',
                subMenu:
                [
                   {id: 'pos2250', text: 'other22 click me', click: clickMeFn},
                   {id: 'pos2251', text: 'other22'},
                   {id: 'pos2252', text: 'other22'},
                   {id: 'pos2253', text: 'other22'},
                   {
                      id: 'pos2254',
                      text: 'other3 >>>',
                      subMenu:
                      [
                         {id: 'pos22540', text: 'other31'},
                         {id: 'pos22541', text: 'other31'},
                         {id: 'pos22542', text: 'other31'},
                         {id: 'pos22543', text: 'other31'},
                         {id: 'pos22544', text: 'other31'}
                      ]
                   }
                ]
             }
          ]
       }
    ];
    
    contentMenuConfig = [
       { id: 'right', text: 'about'},
       { id: 'right0', text: 'help'},
       { separator: true },
       {
          id: 'right1',
          text: 'other &nbsp&nbsp >>',
          subMenu:
          [
             { id: 'right11', text: 'other1'},
             { id: 'right11', text: 'other1'},
             { id: 'right11', text: 'other1'},
             { separator: true },
             { id: 'right11', text: 'other1'},
             { id: 'right11', text: 'other1'},
             {
                id: 'right12',
                text: 'right12 &nbsp&nbsp >>',
                subMenu:
                [
                   {id: 'right22', text: 'other24, click me', click: clickMeFn},
                   {id: 'right22', text: 'other22'},
                   {id: 'right22', text: 'other22'},
                   {id: 'right22', text: 'other22'},
                   {
                      id: 'right3',
                      text: 'right3 >>>',
                      subMenu:
                      [
                         {id: 'right31', text: 'other31'},
                         {id: 'right31', text: 'other31'},
                         {id: 'right31', text: 'other31'},
                         {id: 'right31', text: 'other31'},
                         {id: 'right31', text: 'other31'}
                      ]
                   }
                ]
             }
          ]
       }
    ];
    function item4Fn(e, oItem) {
       alert('text=' + oItem['text'] + '; id=' + oItem['id']);
    };
    
    function createMenu1(){
       var m = new YAHOO.ext.Menu({id: 'menubar'});
       m.addItem({id: 'item1', text: 'item1', group: 'menu4test1'});
       m.addItem({id: 'item2', text: 'item2', group: 'menu4test1'});
       m.addItem({id: 'item3', text: 'item3', group: 'menu4test1'});
       m.addItem({id: 'item4', text: 'item4 click me', click: item4Fn, group: 'menu4test1'});
       m.addItem([{id: 'item5', text: 'item5', group: 'menu4test1'},
                   {id: 'item6', text: 'item6', group: 'menu4test1'}]);
       m.addText('test text');
       m.add(
          'separator',
          [{id: 'item7', text: 'item7'}],
          [{id: 'item8', text: 'item8'}],
          [{id: 'item9', text: 'item9 click me', click: function(e, o){alert('id=' + o.id + '; text=' + o.text)}}],
          'separator',
          'text test',
          'text test'
          );
       m.hide();
       return m;
    };
    
    var MenuViewer = function(){
    	var layout, north, center, statusPanel;
    	var toolbar;
       
    	return {
    	    init: function(){
    	        this.menu = null;
    	        layout = new YAHOO.ext.BorderLayout(document.body,{
        	        hideOnLayout: true,
        	        north: {
        	                split:false,
        	                initialSize: 25,
        	                titlebar: false
        	                },
        	        center: {
    	                    titlebar: true,
    	                    autoScroll:false,
    	                    tabPosition: 'top',
    	                    closeOnTab: true,
    	                    alwaysShowTabs: false,
    	                    resizeTabs: true
    	                    }});
    	        layout.beginUpdate();
    	        layout.add('north',
    	                    new YAHOO.ext.ContentPanel('header-panel',
    	                                                {
    	                                                    title: 'Navigation',
    	                                                    fitToFrame:true,
    	                                                    closable:false
    	                                                }));
    
    	        var m1 = YAHOO.ext.MenuHelper.createMenu(fileMenuConfig);
                YAHOO.ext.MenuHelper.registerMenu('file_menu', m1);
    	        var m2 = YAHOO.ext.MenuHelper.createMenu(editMenuConfig);
    	        var m3 = YAHOO.ext.MenuHelper.createMenu(helpMenuConfig);
    	        var m4 = YAHOO.ext.MenuHelper.createMenu(posMenuConfig);
    	        var tb = new YAHOO.ext.Toolbar('tool-bar');
    	        tb.add([{id: 'file_menu_bt', text: 'File', click: YAHOO.ext.MenuHelper.openMenu, menu: m1}],
    	                'separator',
    	                [{id: 'edit_menu_bt', text: 'Edit', click: YAHOO.ext.MenuHelper.openMenu, menu: m2}],
    	                'separator',
    	                [{id: 'help_menu_bt', text: 'Help', click: YAHOO.ext.MenuHelper.openMenu, menu: m3}],
    	                'separator',
    	                [{id: 'test4_bt', pos: [800, 200], text: 'Click&amp;SetPos', click: YAHOO.ext.MenuHelper.openMenuAt, menu: m4}]
    	        );
    	        tb.addSeparator();
             
    	        var m5 = createMenu1();
    	        var b = tb.addButton({id: 'last_bt', text: 'lastmenu', click: YAHOO.ext.MenuHelper.openMenu, menu: m5});
             
    	        var conf = [ 'value1', 'value2', 'value3'];
    	        center = new YAHOO.ext.ContentPanel('menu-panel',
    	                                            {
    	                                                title: "menuPanel",
    	                                                toolbar: tb,
    	                                                fitToFrame:true
    	                                            });
    	        layout.add('center', center);
    	        layout.restoreState();
    	        layout.endUpdate();
    
    	        var m6 = YAHOO.ext.MenuHelper.createMenu(pos2MenuConfig);
    	        YAHOO.ext.MenuHelper.openMenuAt({id: 'text7', pos: [200, 200], text: 'view test', menu: m6});
             
    	        var m7 = YAHOO.ext.MenuHelper.createMenu(contentMenuConfig);
    	        var doc = getEl(document.body);
    	        YAHOO.ext.MenuHelper.setupContentMenu({id: 'testrightclick', menu: m7});
    	    }
    	};
    }();
    
    //YAHOO.ext.EventManager.onDocumentReady(MenuViewer.init, MenuViewer, true);
    YAHOO.util.Event.on(window, 'load', MenuViewer.init, MenuViewer, true);

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    whouseit is on a distinguished road

      0  

    Default how to remove the 'YAHOO.ext.Element.prototype.mon()' event

    how to remove the 'YAHOO.ext.Element.prototype.mon()' event


    Jack, in my 'YAHOO.ext.util.menuMon' class, I use YAHOO.ext.Element.prototype.mon()
    to monitor the document's click event. But I don't want to invoke the class evey time
    when document's click occur. I don't find the function to remove event handle register
    by use 'YAHOO.ext.Element.prototype.mon()'. Can you give one function for it?
    Thanks
    zsx

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    2
    tryanDLS is on a distinguished road

      0  

    Default


    Can't you just call removeListener , passing the wrappedFn returned by mon?

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    whouseit is on a distinguished road

      0  

    Default


    Quote Originally Posted by tryanDLS
    Can't you just call removeListener , passing the wrappedFn returned by mon?
    I changed my code shown below, but still don't remove the listener:
    Code:
    YAHOO.ext.util.menuMon.prototype = {
    	onDocumentClick : function(e) {
    		if (!this.id) {
    			if (this.menu.isVisible())
    				this.menu.hideAll();
    			return;
    		}
    		var el = getEl(this.id, true);
    		if (!el || !el.dom) {
    			if (this.menu.isVisible())
    				this.menu.hideAll();
    			return;
    		}
    		var oTarget = e.getTarget();
    		if (el.dom != oTarget && !YAHOO.util.Dom.isAncestor(el.dom, oTarget)) {
    			if (this['menu'].isVisible())
    				this['menu'].hideAll();
    		}
                    alert('click doc now'); //just for debug
    		if (this.wrappedFn) {
    			this.doc.removeListener('click', this.wrappedFn, this);
                            this.wrappedFn = null;
    		}
    	},
    	setClick: function(){
    		if (this.clickSet)
    			return;
    		this.clickSet = true;
    		this.wrappedFn = this.doc.mon('click', this.onDocumentClick, this, true);
    	}
    };

  7. #7
    Ext User
    Join Date
    Mar 2007
    Posts
    30
    Vote Rating
    0
    mscifo is on a distinguished road

      0  

    Default


    whouseit

    I tried using your code and I got a couple javascript errors in menu.js...

    missing ; after for-loop condition
    menu.js (line 204)
    for (var i = 0; i <menu> viewWidth)

    missing ; after for-loop condition
    menu.js (line 241)
    for (var i = 0; i <this> 0 && subMenu.children[i].isVisible())

    I tried to fix it but I'm having trouble determining what you are trying to do with those for loops.

    Can you please take a look?

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    12
    Vote Rating
    0
    whouseit is on a distinguished road

      0  

    Default OK, now

    OK, now


    Hi, I'm sorry about it. It's my fault. When I posted the codes I don't set
    'Disable HTML in this post', so my codes were changed. Now it should be
    OK

  9. #9
    Ext User
    Join Date
    Mar 2007
    Posts
    30
    Vote Rating
    0
    mscifo is on a distinguished road

      0  

    Default


    Thanks, works now.

Similar Threads

  1. Change Ids by class
    By cebola in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 30 Mar 2007, 12:34 PM
  2. Button with Menu (menu auto show/hide)
    By fafhrd in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 23 Mar 2007, 12:19 AM
  3. InlineEditor class
    By masudkuet in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 8 Feb 2007, 7:04 PM
  4. YAHOO.ext.ToolbarMenu class
    By mscifo in forum Community Discussion
    Replies: 17
    Last Post: 25 Jan 2007, 1:34 AM
  5. New in SVN: MessageBox class
    By jack.slocum in forum Community Discussion
    Replies: 13
    Last Post: 2 Jan 2007, 6:16 AM

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar