zoukankan      html  css  js  c++  java
  • easyui-menu 宽度自适应

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

  • 相关阅读:
    brew基本使用
    手写函数
    http状态码——401和403差异
    HTTP状态码
    本地库和远程库交互
    IDEA集成Git
    Git命令
    数据库递归查询组织树父节点
    ZooKeeper程序员指南
    zookeeper简介
  • 原文地址:https://www.cnblogs.com/xienb/p/3469532.html
Copyright © 2011-2022 走看看