Print Page - 如何缩短Menu宽度

Title: 如何缩短Menu宽度
Post by: ejzhang on February 18, 2014, 05:39:24 AM

如下图所示，菜单项只有两个字，菜单却宽了好多，占用太多空间也不美观，不知道如何调整才能让它变窄。
http://t.163.com/ejzhang/status/2765511554071546080

Title: Re: 如何缩短Menu宽度
Post by: stworthy on February 19, 2014, 01:44:41 AM

Please try to set the default 'minWidth' value.

Code:

<script>
$.fn.menu.defaults.minWidth = 100;
</script>

Title: Re: 如何缩短Menu宽度
Post by: ejzhang on February 19, 2014, 09:59:55 AM

没有效果，我也在menu里设置过minWidth，同样不起作用。

Code:

<!--
$(function(){
	var tabsIndex = -1;
	$('#menuTabs').tabs({
		border:false,
		onSelect:function(title,index){
			if (index != tabsIndex){
				var $tab = $(this).tabs('getSelected'), menuId = $tab.panel('options').id;
				if (menuId){
					menuId = menuId.split('.')[1] || 0;
					$tab.panel('refresh', 'loadTabs.php?Menu=' + menuId);
				}
				tabsIndex = index;
			}
		}
	});
	$.fn.menu.defaults.minWidth = 10;
});
//-->
</script>
<div id="menuTabs" class="easyui-tabs" tools="#tabTools" fit="true">
<div id="menuID.1" title="Menu#1" style="padding:10px"></div>
<div id="menuID.2" title="Menu#2" style="padding:10px"></div>
<div id="menuID.3" title="Menu#3" style="padding:10px"></div>
</div>
<div id="tabTools">
<a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#tabMenus',iconCls:'icon-tip',plain:true">系统</a>
<div id="tabMenus" style="width:20px;">
<div data-options="iconCls:'icon-help'">密码</div>
<div data-options="iconCls:'icon-no'">退出</div>
<div class="menu-sep"></div>
<div data-options="iconCls:'icon-save'">管理</div>
</div>
</div>

Title: Re: 如何缩短Menu宽度
Post by: stworthy on February 19, 2014, 07:51:28 PM

Make sure that the code below executes before creating menu.

Code:

<script>
$.fn.menu.defaults.minWidth = 100;
</script>

If the issue continues, please try to download the updated menu plugin from http://www.jeasyui.com/easyui/plugins/jquery.menu.js and include it to the page. Please refer to http://jsfiddle.net/yKcRg/.

Title: Re: 如何缩短Menu宽度
Post by: ejzhang on February 20, 2014, 04:26:15 AM

(http://img.itc.cn/photo/o6CcI3LW5zD_w283)
“im1~im3”右面还是空了很多啊

Title: Re: 如何缩短Menu宽度
Post by: stworthy on February 20, 2014, 07:23:07 AM

Add the 'width' style to set your own menu width. Please refer to http://jsfiddle.net/yKcRg/3/. Or use jQuery's width() method to set the menu width.

Code:

$('#mm2').width(60);

Title: Re: 如何缩短Menu宽度
Post by: ejzhang on February 21, 2014, 09:21:15 AM

问题解决了，是jQuery-EasyUI版本的问题，我用的是1.3.2版，改用新版就正常了，多谢stworthy！

EasyUI Forum

General Category => General Discussion => Topic started by: ejzhang on February 18, 2014, 05:39:24 AM