EasyUI Forum
May 05, 2024, 01:56:58 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: 如何缩短Menu宽度  (Read 20269 times)
ejzhang
Jr. Member
**
Posts: 61



View Profile
« on: February 18, 2014, 05:39:24 AM »

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


View Profile Email
« Reply #1 on: February 19, 2014, 01:44:41 AM »

Please try to set the default 'minWidth' value.
Code:
<script>
$.fn.menu.defaults.minWidth = 100;
</script>
Logged
ejzhang
Jr. Member
**
Posts: 61



View Profile
« Reply #2 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>
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 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/.
Logged
ejzhang
Jr. Member
**
Posts: 61



View Profile
« Reply #4 on: February 20, 2014, 04:26:15 AM »


“im1~im3”右面还是空了很多啊
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #5 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);
Logged
ejzhang
Jr. Member
**
Posts: 61



View Profile
« Reply #6 on: February 21, 2014, 09:21:15 AM »

问题解决了,是jQuery-EasyUI版本的问题,我用的是1.3.2版,改用新版就正常了,多谢stworthy!
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!