menu.js

javascript 很酷的类库

    enforceMaxHeight:true,

    //> @attr   menu.maxHeight  (number : null : [IRW])
    // Maximum height for this menu before it starts scrolling if +link{Menu.enforceMaxHeight} 
    // is true.
    // If unset defaults to the height of the page
    // @group sizing
    // @see menu.enforceMaxHeight
    //<
    // This is an override - canvas.maxHeight is 10000
    maxHeight:null,
    
	//>	@attr	menu.cellHeight		(number : 20 : [IRW])
	// The height of each item in the menu, in pixels.
	//		@group	sizing
    //      @visibility external
    //      @group  sizing
	//<

	//>	@attr	menu.backgroundColor		(CSScolor : null : IRWA)
	// No background color -- if we had one, it'd be visible below the part of the menu that
    // draws.
	//		@group	appearance
	//<
	backgroundColor:null,

	//>	@attr	menu.overflow		(Overflow : isc.Canvas.VISIBLE : IRWA)
	// Show everything
	//<
	overflow:isc.Canvas.VISIBLE,

    //>	@attr	menu.bodyOverflow		(Overflow : isc.Canvas.VISIBLE : IRWA)
	// Have the body show everything as well
	//<
	bodyOverflow:isc.Canvas.VISIBLE,	
    
    //> @attr menu.arrowKeyAction (string : "focus" : IRWA)
    // Override arrowKeyAction so we focus on menu items when the user hits the up and down
    // arrows, but don't fire the click action unless the user hits space or enter
    //<
    arrowKeyAction:"focus",

    //>	@attr	menu.selectionType		(SelectionStyle : isc.Selection.NONE : IRWA)
    //			menus aren't really selectable as ListGrids are
    //<	
	selectionType:isc.Selection.NONE,
    
    //> @attr   menu.autoDraw       (boolean : false : IRWA)
    //      Menus will not draw on initialization, until they're explicitly show()n
    //  @visibility external
    //<
    autoDraw:false,

    //>	@attr	menu.tableStyle		(string : "menuTable" : IRW)
	// CSS style for the menu table
	//<
	tableStyle:"menuTable",					
	
    //>	@attr	menu.showRollOver		(boolean : true : IRW)
	//			Should we show mouseOver effects for the menu itself?
	//<
	showRollOver:true,	
    
    //>@attr    menu.showFocusOutline (boolean : false : IRW)
    // Don't show the native focus outline around menus.
    // @visibility internal
    //<
    showFocusOutline:false,

    //>	@attr	menu.showAllRecords		(boolean : true : IRW)
	//			Show all records in the menu by default
	//<
	showAllRecords:true,						
                                            
    // allow columns and rows to expand to show full menu item title text
    fixedFieldWidths:false,
    fixedRecordHeights:false,    
    // don't leave a gap for a scrollbar
    leaveScrollbarGap:false,
	
	// CSS styles
    //>	@attr	menu.baseStyle		(CSSStyleName : "menu" : IRW)
	//			CSS style for a normal cell
	//<
	baseStyle:"menu",

    //>	@attr	menu.showHeader		(boolean : false : IRWA)
	//	Don't display a normal header in the menu.
	//<
	showHeader:false,

    //>	@attr	menu.showSortArrow		(SortArrow : isc.ListGrid.NONE : IRWA)
	//		@group	appearance	
	//			Don't show any sorting appearance at all.
	//<
	showSortArrow:isc.ListGrid.NONE,

    //>	@attr	menu.canDrag		(boolean : false : IRWA)
	//			can't drag into menus
	//<
	canDrag:false,

    //>	@attr	menu.canAcceptDrop		(boolean : false : IRWA)
	//			can't drop into menus (hmmmmm)
	//<
	canAcceptDrop:false,

	//>	@attr	menu.canReorderRecords		(boolean : false : IRWA)
	//			can't reorder menu items by dragging
	//<
	canReorderRecords:false,
			
    //>	@attr	menu.useKeys		(boolean : true : [IRW])
    // A boolean indicating whether this menu should use shortcut keys. Set useKeys to
    // false in a menu's initialization block to explicitly disable shortcut keys.
    //      @visibility external
    //<
	useKeys:true,

    //>	@attr	menu.showKeys		(boolean : true : [IRW])
    // A boolean, indicating whether the shortcut key column should be displayed. If
    // showKeys is not set, the menu will show the key column only if one of its items
    // specifies a keys property. If showKeys is false, the keys will not be displayed,
    // but will still function.
    //      @visibility external
    //<
	showKeys:true,
    
    //>	@attr	menu.showIcons		(boolean : true : [IRW])
    // A boolean, indicating whether the checkmark/custom icon column should be displayed.
    // If showIcons is not set, the menu will show the icon column only if one of its items
    // specifies an icon, checked, checkIf, or dynamicIcon property.
    //      @visibility external
    //<
	showIcons:true,
    
    //>	@attr	menu.showSubmenus		(boolean : true : [IRW])
    // A boolean, indicating whether the submenu indicator column should be displayed. If
    // showSubmenus is not set, the menu will show the indicator column only if one of its
    // items specifies a submenu property. If showSubmenus is false, the submenu arrows
    // will not be displayed, but submenus will still appear on rollover.
    //      @visibility external
    //<
	showSubmenus:true,
    
    //>	@attr	menu.submenuDirection (string : "right" : [IRW])
    // Should submenus show up on our left or right. Can validly be set to <code>"left"</code>
    //  or <code>"right"</code>
    //      @visibility external
    //<    
    submenuDirection:"right",

    //>	@attr	menu.showFieldsSeparately		(boolean : false : IRWA)
	// We never clip menu contents, so we have no reason to show fields separately, and it's
    // faster to show them together!
    //<
	showFieldsSeparately:false,

    //>	@attr	menu.emptyMessage		(string : "[Empty menu]" : IRWA)
	//  Message to show when a menu is shown with no items.
    // @visibility external
	//<
	emptyMessage : "[Empty menu]",
    
    //>	@attr	menu.cellSpacing		(number : 0 : IRWA)
	//			No cell spacing.
	//<
	cellSpacing:0,

    //>	@attr	menu.cellPadding		(number : 0 : IRWA)
	//			Put some space between the text and cell boundaries
	//<
	cellPadding:2,							

    //>	@attr	menu.iconWidth		(number : 16 : [IRW])
    //          The default width applied to custom icons in this menu. This is used whenever
    //          item.iconWidth is not specified.
    //      @visibility external
    //<
	iconWidth:16,

    //>	@attr	menu.iconHeight		(number : 16 : [IRW])
    //          The default height applied to custom icons in this menu. This is used whenever
    //          item.iconHeight is not specified.
    //      @visibility external
    //<
	iconHeight:16,

    //>Animation
    //> @attr menu.showAnimationEffect (string : null : [IRWA])
    // When this menu is shown how should it animate into view? By default the menu will just
    // show at the specified size/position. Options for animated show effects are <code>"fade"</code>
    // to fade from transparent to visible, <code>"slide"</code> to slide the menu into view,
    // or <code>"wipe"</code> to have the menu grow into view, revealing its content as it
    // grows. Can be overridden by passing the 'animationEffect' parameter to 'menu.show()'
    // @visibility animation
    //<
    //<Animation
    
    //>	@attr	menu.autoSetDynamicItems		(boolean : true : IRWA)
	//			true == check menu items for an 'enableif', etc. properties and update dynamically
	//		@group	appearance
	//<
	autoSetDynamicItems:true,

    //>	@attr	menu.skinImgDir		(URL : "images/Menu/" : IRWA)
	//		@group	appearance, images
	//		Where do 'skin' images (those provided with the class) live?
	//		This is local to the Page.skinDir
	//<
	skinImgDir:"images/Menu/",				

	//>	@attr	menu.submenuImage		(ImgProperties : {...} : IRWA)
	// Default image to use for the submenu indicator. Valid src, width and height must be
    // specified. See +link{class:ImgProperties} for format.<br>
    // If +link{menu.submenuDirection} is set to <code>"left"</code>, the image src will have
    // the suffix <code>"_left"</code> appended to it.
    //
    // @visibility external
	//<
	submenuImage:{src:"[SKIN]submenu.gif", width:7, height:7},

	//>	@attr	menu.submenuDisabledImage		(ImgProperties : {...} : IRWA)
	// Default image to use for the submenu indicator when item is disabled. Valid src, width and
    // height must be specified. See +link{class:ImgProperties} for format.<br>
    // If +link{menu.submenuDirection} is set to <code>"left"</code>, the image src will have
    // the suffix <code>"_left"</code> appended to it.    
    //
    // @visibility external
	//<
	submenuDisabledImage:{src:"[SKIN]submenu_disabled.gif", width:7, height:7},

    	
	//>	@attr	menu.checkmarkImage		(ImgProperties : {...} : IRWA)
	// Default image to display for checkmarked items. See +link{class:ImgProperties} for format.
    // Valid src, width and height must be specified.
    //
    // @visibility external
	//<
	checkmarkImage:{src:"[SKIN]check.gif", width:9, height:9},

	//>	@attr	menu.checkmarkDisabledImage		(ImgProperties : {...} : IRWA)
	// Default image to display for disabled checkmarked items. See +link{class:ImgProperties}
    // for format. Valid src, width and height must be specified.
    //
    // @visibility external
	//<
	checkmarkDisabledImage:{src:"[SKIN]check_disabled.gif", width:9, height:9},

    
    useBackMask:true,
    
    //>	@attr	menu.submenuInheritanceMask (array  : (various)[] : RWA)
    //  Array of the property names that submenus should inherit from their parents (on creation)
	//<    
    // This is basically all the properties a developer is likely to apply to a menu
    submenuInheritanceMask : [
        // Allow the developer to specify some custom class for submenus (advanced!)
        "submenuConstructor",
        
        "_treeData", // Tree data model for tree menus

        "className",
        "submenuDelay",
        "submenuOffset",
        "defaultWidth",
            
        "backgroundColor",
            
        "tableStyle",
        "showRollOver",
        
        "baseStyle",
        
        "emptyMessage",
        
        "canDrag",
        "canAcceptDrop",
        "canReorderRecords",
        
        "useKeys",
        "showKeys",
        "showIcons",    
        "showSubmenus",
        "submenuDirection",
        "cellPadding",
        "iconWidth","iconHeight",
        "autoSetDynamicItems",
        "skinImgDir",
        "submenuImage","submenuDisabledImage","checkmarkImage","checkmarkDisabledImage",
        "bodyDefaults",
        "canSelectParents",
        
        // actual behaviours
		"itemClick",
		"canSelectParentItems",
        
        // updated on the fly
        "childrenProperty",
        
        // A freeform object - can be used for custom overrides that need to percolate down
        // the submenu chain.
        "inheritedProperties"
        
    ],

	//>	@attr	menu.mergeSingleParent		(boolean : true : I)
	//		If the menu items are a tree and the top level has just one item, should
	//		we merge that item with its children in the menu for usability? If mergeSingleParent
	//		is true, this single parent item will be appended to its list of child items, after a
	//		separator, so the top level menu will not be just a single item.
	//<
	mergeSingleParent:true,

	//>	@attr	menu.canSelectParentItems		(boolean : null : IRW)
	//		If true, clicking or pressing Enter on a menu item that has a submenu will
	//		select that item (with standard behavior of hiding the menus, calling click
	//		handlers, etc) instead of showing the submenu.
    // @group selection
    // @visibility external
    // @example treeBinding
	//<
	
	//> @attr menu.autoDismiss (boolean : true : IRW)
	//		When true, when a menu item is chosen (via mouse click or keyboard), the menu is not 
    //		automatically hidden, staying in place for further interactivity
	// @visibility external
	//<
	autoDismiss:true
});

isc.Menu.addMethods({

//>	@method	menu.initWidget()	(A)
// Initialize this object.
//		@param	[all arguments]	(object)	objects with properties to override from default
//<
initWidget : function () {
    // Show an empty menu as a single disabled item
    this._setUpEmptyMessage();
    
    // Always define menus to be absolutely positioned.  Placing a MenuBar or MenuButton into
    // the document flow via relative positioning makes sense - but placing a Menu as such
    // would be bizarre and probably indicates a mistake.
    this.position = isc.Canvas.ABSOLUTE;

    // Handle menus being bound to hierachichal structured datasources
    
    if (this.dataSource != null && isc.ResultTree) {
        // Don't show the prompt as we load child menu data.
        var tree = this.createResultTree(null,null, {
            showPrompt:false,
            dataProperties: {autoOpenRoot: false}
        });
        // If we're loading all the data upfront, do this now rather than on the first 
        // menu-show
        if (this.loadDataOnDemand == false) {
            tree.loadChildren(tree.getRoot(), {caller:this, methodName:"treeDataLoaded"});
        }
        this.data = tree;
    }
    
    // make items a synonym for data
    if (this.data == null && this.items != null) this.data = this.items;