123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648 |
- /**
- * EasyUI for jQuery 1.5.5.6
- *
- * Copyright (c) 2009-2018 www.jeasyui.com. All rights reserved.
- *
- * Licensed under the freeware license: http://www.jeasyui.com/license_freeware.php
- * To use it on other terms please contact us: info@jeasyui.com
- *
- */
- /**
- * menu - EasyUI for jQuery
- *
- */
- (function($){
- $(function(){
- $(document).unbind('.menu').bind('mousedown.menu', function(e){
- var m = $(e.target).closest('div.menu,div.combo-p');
- if (m.length){return}
- $('body>div.menu-top:visible').not('.menu-inline').menu('hide');
- hideMenu($('body>div.menu:visible').not('.menu-inline'));
- });
- });
-
- /**
- * initialize the target menu, the function can be invoked only once
- */
- function init(target){
- var opts = $.data(target, 'menu').options;
- $(target).addClass('menu-top'); // the top menu
- opts.inline ? $(target).addClass('menu-inline') : $(target).appendTo('body');
- $(target).bind('_resize', function(e, force){
- if ($(this).hasClass('easyui-fluid') || force){
- $(target).menu('resize', target);
- }
- return false;
- });
-
- var menus = splitMenu($(target));
- for(var i=0; i<menus.length; i++){
- createMenu(target, menus[i]);
- }
-
- function splitMenu(menu){
- var menus = [];
- menu.addClass('menu');
- menus.push(menu);
- if (!menu.hasClass('menu-content')){
- menu.children('div').each(function(){
- var submenu = $(this).children('div');
- if (submenu.length){
- submenu.appendTo('body');
- this.submenu = submenu; // point to the sub menu
- var mm = splitMenu(submenu);
- menus = menus.concat(mm);
- }
- });
- }
- return menus;
- }
- }
- function createMenu(target, div){
- var menu = $(div).addClass('menu');
- if (!menu.data('menu')){
- menu.data('menu', {
- options: $.parser.parseOptions(menu[0], ['width','height'])
- });
- }
- if (!menu.hasClass('menu-content')){
- menu.children('div').each(function(){
- createItem(target, this);
- });
- $('<div class="menu-line"></div>').prependTo(menu);
- }
- setMenuSize(target, menu);
- if (!menu.hasClass('menu-inline')){
- menu.hide();
- }
- bindMenuEvent(target, menu);
- }
- /**
- * create the menu item
- */
- function createItem(target, div, options){
- var item = $(div);
- var itemOpts = $.extend({}, $.parser.parseOptions(item[0], ['id','name','iconCls','href',{separator:'boolean'}]), {
- disabled: (item.attr('disabled') ? true : undefined),
- text: $.trim(item.html()),
- onclick: item[0].onclick
- }, options||{});
- itemOpts.onclick = itemOpts.onclick || itemOpts.handler || null;
- item.data('menuitem', {
- options: itemOpts
- });
- if (itemOpts.separator){
- item.addClass('menu-sep');
- }
- if (!item.hasClass('menu-sep')){
- item.addClass('menu-item');
- item.empty().append($('<div class="menu-text"></div>').html(itemOpts.text));
- if (itemOpts.iconCls){
- $('<div class="menu-icon"></div>').addClass(itemOpts.iconCls).appendTo(item);
- }
- if (itemOpts.id){
- item.attr('id', itemOpts.id);
- }
- if (itemOpts.onclick){
- if (typeof itemOpts.onclick == 'string'){
- item.attr('onclick', itemOpts.onclick);
- } else {
- item[0].onclick = eval(itemOpts.onclick);
- }
- }
- if (itemOpts.disabled){
- setDisabled(target, item[0], true);
- }
- if (item[0].submenu){
- $('<div class="menu-rightarrow"></div>').appendTo(item); // has sub menu
- }
- }
- }
-
- function setMenuSize(target, menu){
- var opts = $.data(target, 'menu').options;
- var style = menu.attr('style') || '';
- var isVisible = menu.is(':visible');
- menu.css({
- display: 'block',
- left: -10000,
- height: 'auto',
- overflow: 'hidden'
- });
- menu.find('.menu-item').each(function(){
- $(this)._outerHeight(opts.itemHeight);
- $(this).find('.menu-text').css({
- height: (opts.itemHeight-2)+'px',
- lineHeight: (opts.itemHeight-2)+'px'
- });
- });
- menu.removeClass('menu-noline').addClass(opts.noline?'menu-noline':'');
-
- var mopts = menu.data('menu').options;
- var width = mopts.width;
- var height = mopts.height;
- if (isNaN(parseInt(width))){
- width = 0;
- menu.find('div.menu-text').each(function(){
- if (width < $(this).outerWidth()){
- width = $(this).outerWidth();
- }
- });
- // width += 40;
- width = width ? width+40 : '';
- }
- var autoHeight = menu.outerHeight();
- if (isNaN(parseInt(height))){
- height = autoHeight;
- if (menu.hasClass('menu-top') && opts.alignTo){
- var at = $(opts.alignTo);
- var h1 = at.offset().top - $(document).scrollTop();
- var h2 = $(window)._outerHeight() + $(document).scrollTop() - at.offset().top - at._outerHeight();
- height = Math.min(height, Math.max(h1, h2));
- } else if (height > $(window)._outerHeight()){
- height = $(window).height();
- }
- }
- menu.attr('style', style); // restore the original style
- menu.show();
- menu._size($.extend({}, mopts, {
- width: width,
- height: height,
- minWidth: mopts.minWidth || opts.minWidth,
- maxWidth: mopts.maxWidth || opts.maxWidth
- }));
- menu.find('.easyui-fluid').triggerHandler('_resize', [true]);
- menu.css('overflow', menu.outerHeight() < autoHeight ? 'auto' : 'hidden');
- menu.children('div.menu-line')._outerHeight(autoHeight-2);
- if (!isVisible){
- menu.hide();
- }
- }
-
- /**
- * bind menu event
- */
- function bindMenuEvent(target, menu){
- var state = $.data(target, 'menu');
- var opts = state.options;
- menu.unbind('.menu');
- for(var event in opts.events){
- menu.bind(event+'.menu', {target:target}, opts.events[event]);
- }
- }
- function mouseenterHandler(e){
- var target = e.data.target;
- var state = $.data(target, 'menu');
- if (state.timer){
- clearTimeout(state.timer);
- state.timer = null;
- }
- }
- function mouseleaveHandler(e){
- var target = e.data.target;
- var state = $.data(target, 'menu');
- if (state.options.hideOnUnhover){
- state.timer = setTimeout(function(){
- hideAll(target, $(target).hasClass('menu-inline'));
- }, state.options.duration);
- }
- }
- function mouseoverHandler(e){
- var target = e.data.target;
- var item = $(e.target).closest('.menu-item');
- if (item.length){
- item.siblings().each(function(){
- if (this.submenu){
- hideMenu(this.submenu);
- }
- $(this).removeClass('menu-active');
- });
- // show this menu
- item.addClass('menu-active');
-
- if (item.hasClass('menu-item-disabled')){
- item.addClass('menu-active-disabled');
- return;
- }
-
- var submenu = item[0].submenu;
- if (submenu){
- $(target).menu('show', {
- menu: submenu,
- parent: item
- });
- }
- }
- }
- function mouseoutHandler(e){
- var item = $(e.target).closest('.menu-item');
- if (item.length){
- item.removeClass('menu-active menu-active-disabled');
- var submenu = item[0].submenu;
- if (submenu){
- if (e.pageX>=parseInt(submenu.css('left'))){
- item.addClass('menu-active');
- } else {
- hideMenu(submenu);
- }
- } else {
- item.removeClass('menu-active');
- }
- }
- }
- function clickHandler(e){
- var target = e.data.target;
- var item = $(e.target).closest('.menu-item');
- if (item.length){
- var opts = $(target).data('menu').options;
- var itemOpts = item.data('menuitem').options;
- if (itemOpts.disabled){return;}
- if (!item[0].submenu){
- hideAll(target, opts.inline);
- if (itemOpts.href){
- location.href = itemOpts.href;
- }
- }
- item.trigger('mouseenter');
- opts.onClick.call(target, $(target).menu('getItem', item[0]));
- }
- }
-
- /**
- * hide top menu and it's all sub menus
- */
- function hideAll(target, inline){
- var state = $.data(target, 'menu');
- if (state){
- if ($(target).is(':visible')){
- hideMenu($(target));
- if (inline){
- $(target).show();
- } else {
- state.options.onHide.call(target);
- }
- }
- }
- return false;
- }
-
- /**
- * show the menu, the 'param' object has one or more properties:
- * left: the left position to display
- * top: the top position to display
- * menu: the menu to display, if not defined, the 'target menu' is used
- * parent: the parent menu item to align to
- * alignTo: the element object to align to
- */
- function showMenu(target, param){
- param = param || {};
- var left,top;
- var opts = $.data(target, 'menu').options;
- var menu = $(param.menu || target);
- $(target).menu('resize', menu[0]);
- if (menu.hasClass('menu-top')){
- $.extend(opts, param);
- left = opts.left;
- top = opts.top;
- if (opts.alignTo){
- var at = $(opts.alignTo);
- left = at.offset().left;
- top = at.offset().top + at._outerHeight();
- if (opts.align == 'right'){
- left += at.outerWidth() - menu.outerWidth();
- }
- }
- if (left + menu.outerWidth() > $(window)._outerWidth() + $(document)._scrollLeft()){
- left = $(window)._outerWidth() + $(document).scrollLeft() - menu.outerWidth() - 5;
- }
- if (left < 0){left = 0;}
- top = _fixTop(top, opts.alignTo);
- } else {
- var parent = param.parent; // the parent menu item
- left = parent.offset().left + parent.outerWidth() - 2;
- if (left + menu.outerWidth() + 5 > $(window)._outerWidth() + $(document).scrollLeft()){
- left = parent.offset().left - menu.outerWidth() + 2;
- }
- top = _fixTop(parent.offset().top - 3);
- }
-
- function _fixTop(top, alignTo){
- if (top + menu.outerHeight() > $(window)._outerHeight() + $(document).scrollTop()){
- if (alignTo){
- top = $(alignTo).offset().top - menu._outerHeight();
- } else {
- top = $(window)._outerHeight() + $(document).scrollTop() - menu.outerHeight();
- }
- }
- if (top < 0){top = 0;}
- return top;
- }
-
- menu.css(opts.position.call(target, menu[0], left, top));
- menu.show(0, function(){
- if (!menu[0].shadow){
- menu[0].shadow = $('<div class="menu-shadow"></div>').insertAfter(menu);
- }
- menu[0].shadow.css({
- display:(menu.hasClass('menu-inline')?'none':'block'),
- zIndex:$.fn.menu.defaults.zIndex++,
- left:menu.css('left'),
- top:menu.css('top'),
- width:menu.outerWidth(),
- height:menu.outerHeight()
- });
- menu.css('z-index', $.fn.menu.defaults.zIndex++);
- if (menu.hasClass('menu-top')){
- opts.onShow.call(target);
- }
- });
- }
-
- function hideMenu(menu){
- if (menu && menu.length){
- hideit(menu);
- menu.find('div.menu-item').each(function(){
- if (this.submenu){
- hideMenu(this.submenu);
- }
- $(this).removeClass('menu-active');
- });
- }
-
- function hideit(m){
- m.stop(true,true);
- if (m[0].shadow){
- m[0].shadow.hide();
- }
- m.hide();
- }
- }
-
- function findItem(target, param){
- var result = null;
- var fn = $.isFunction(param) ? param : function(item){
- for(var p in param){
- if (item[p] != param[p]){
- return false;;
- }
- }
- return true;
- }
- function find(menu){
- menu.children('div.menu-item').each(function(){
- var opts = $(this).data('menuitem').options;
- if (fn.call(target, opts) == true){
- result = $(target).menu('getItem', this);
- } else if (this.submenu && !result){
- find(this.submenu);
- }
- });
- }
- find($(target));
- return result;
- }
-
- function setDisabled(target, itemEl, disabled){
- var t = $(itemEl);
- if (t.hasClass('menu-item')){
- var opts = t.data('menuitem').options;
- opts.disabled = disabled;
- if (disabled){
- t.addClass('menu-item-disabled');
- t[0].onclick = null;
- } else {
- t.removeClass('menu-item-disabled');
- t[0].onclick = opts.onclick;
- }
- }
- }
-
- function appendItem(target, param){
- var opts = $.data(target, 'menu').options;
- var menu = $(target);
- if (param.parent){
- if (!param.parent.submenu){
- var submenu = $('<div></div>').appendTo('body');
- param.parent.submenu = submenu;
- $('<div class="menu-rightarrow"></div>').appendTo(param.parent);
- createMenu(target, submenu);
- }
- menu = param.parent.submenu;
- }
- var div = $('<div></div>').appendTo(menu);
- createItem(target, div, param);
- }
-
- function removeItem(target, itemEl){
- function removeit(el){
- if (el.submenu){
- el.submenu.children('div.menu-item').each(function(){
- removeit(this);
- });
- var shadow = el.submenu[0].shadow;
- if (shadow) shadow.remove();
- el.submenu.remove();
- }
- $(el).remove();
- }
- removeit(itemEl);
- }
-
- function setVisible(target, itemEl, visible){
- var menu = $(itemEl).parent();
- if (visible){
- $(itemEl).show();
- } else {
- $(itemEl).hide();
- }
- setMenuSize(target, menu);
- }
-
- function destroyMenu(target){
- $(target).children('div.menu-item').each(function(){
- removeItem(target, this);
- });
- if (target.shadow) target.shadow.remove();
- $(target).remove();
- }
-
- $.fn.menu = function(options, param){
- if (typeof options == 'string'){
- return $.fn.menu.methods[options](this, param);
- }
-
- options = options || {};
- return this.each(function(){
- var state = $.data(this, 'menu');
- if (state){
- $.extend(state.options, options);
- } else {
- state = $.data(this, 'menu', {
- options: $.extend({}, $.fn.menu.defaults, $.fn.menu.parseOptions(this), options)
- });
- init(this);
- }
- $(this).css({
- left: state.options.left,
- top: state.options.top
- });
- });
- };
-
- $.fn.menu.methods = {
- options: function(jq){
- return $.data(jq[0], 'menu').options;
- },
- show: function(jq, pos){
- return jq.each(function(){
- showMenu(this, pos);
- });
- },
- hide: function(jq){
- return jq.each(function(){
- hideAll(this);
- });
- },
- destroy: function(jq){
- return jq.each(function(){
- destroyMenu(this);
- });
- },
- /**
- * set the menu item text
- * param: {
- * target: DOM object, indicate the menu item
- * text: string, the new text
- * }
- */
- setText: function(jq, param){
- return jq.each(function(){
- var item = $(param.target).data('menuitem').options;
- item.text = param.text;
- $(param.target).children('div.menu-text').html(param.text);
- });
- },
- /**
- * set the menu icon class
- * param: {
- * target: DOM object, indicate the menu item
- * iconCls: the menu item icon class
- * }
- */
- setIcon: function(jq, param){
- return jq.each(function(){
- var item = $(param.target).data('menuitem').options;
- item.iconCls = param.iconCls;
- $(param.target).children('div.menu-icon').remove();
- if (param.iconCls){
- $('<div class="menu-icon"></div>').addClass(param.iconCls).appendTo(param.target);
- }
- });
- },
- /**
- * get the menu item data that contains the following property:
- * {
- * target: DOM object, the menu item
- * id: the menu id
- * text: the menu item text
- * iconCls: the icon class
- * href: a remote address to redirect to
- * onclick: a function to be called when the item is clicked
- * }
- */
- getItem: function(jq, itemEl){
- var item = $(itemEl).data('menuitem').options;
- return $.extend({}, item, {
- target: $(itemEl)[0]
- });
- },
- findItem: function(jq, text){
- if (typeof text == 'string'){
- return findItem(jq[0], function(item){
- return $('<div>'+item.text+'</div>').text() == text;
- });
- } else {
- return findItem(jq[0], text);
- }
- },
- /**
- * append menu item, the param contains following properties:
- * parent,id,text,iconCls,href,onclick
- * when parent property is assigned, append menu item to it
- */
- appendItem: function(jq, param){
- return jq.each(function(){
- appendItem(this, param);
- });
- },
- removeItem: function(jq, itemEl){
- return jq.each(function(){
- removeItem(this, itemEl);
- });
- },
- enableItem: function(jq, itemEl){
- return jq.each(function(){
- setDisabled(this, itemEl, false);
- });
- },
- disableItem: function(jq, itemEl){
- return jq.each(function(){
- setDisabled(this, itemEl, true);
- });
- },
- showItem: function(jq, itemEl){
- return jq.each(function(){
- setVisible(this, itemEl, true);
- });
- },
- hideItem: function(jq, itemEl){
- return jq.each(function(){
- setVisible(this, itemEl, false);
- });
- },
- resize: function(jq, menuEl){
- return jq.each(function(){
- setMenuSize(this, menuEl ? $(menuEl) : $(this));
- });
- }
- };
-
- $.fn.menu.parseOptions = function(target){
- return $.extend({}, $.parser.parseOptions(target, [
- {minWidth:'number',itemHeight:'number',duration:'number',hideOnUnhover:'boolean'},
- {fit:'boolean',inline:'boolean',noline:'boolean'}
- ]));
- };
-
- $.fn.menu.defaults = {
- zIndex:110000,
- left: 0,
- top: 0,
- alignTo: null,
- align: 'left',
- minWidth: 150,
- // itemHeight: 22,
- itemHeight: 32,
- duration: 100, // Defines duration time in milliseconds to hide when the mouse leaves the menu.
- hideOnUnhover: true, // Automatically hides the menu when mouse exits it
- inline: false, // true to stay inside its parent, false to go on top of all elements
- fit: false,
- noline: false,
- events: {
- mouseenter: mouseenterHandler,
- mouseleave: mouseleaveHandler,
- mouseover: mouseoverHandler,
- mouseout: mouseoutHandler,
- click: clickHandler
- },
- position: function(target, left, top){
- return {left:left,top:top}
- },
- onShow: function(){},
- onHide: function(){},
- onClick: function(item){}
- };
- })(jQuery);
|