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宽度,从而实现宽度自适应

posted on 2013-12-11 15:53  二豆  阅读(2700)  评论(0编辑  收藏  举报