easyui-menu里的菜单项是从后端获取的,而这个组件提供的API配置只能设置一个固定宽度,当获取的菜单项字数较多时有可能显示不全。解决方法如下:
<style> .myClass{font-size:20px} #ComputeDIV{position:absolute;visibility:hidden;} </style> <div class="myClass" id="ComputeDIV"></div> <script> function ComputeWidth(v) { var d = document.getElementById('ComputeDIV'); d.innerHTML = v; return d.offsetWidth; } function AdaptiveMenu(){ var mrwidth=120;
//result为后端取到的菜单项 for(j=0;j<result.length;j++){ var curwidth=ComputeWidth(result[j].name); if(curwidth>mrwidth){ mrwidth=curwidth; } } $('#myeasyuimenu').width(mrwidth);//重新设置宽度 } </script>
用一个visibility:hidden的浮动的层,并且保证浮动层的样式和菜单项容器的样式一样,就能计算html宽度,从而实现宽度自适应