Fatal编程技术网
  • javascript/
  • Javascript 使用jQueryUI Resizeable时删除DOM中的高度

Javascript 使用jQueryUI Resizeable时删除DOM中的高度

javascript jquery html css jquery-ui

Javascript 使用jQueryUI Resizeable时删除DOM中的高度,javascript,jquery,html,css,jquery-ui,Javascript,Jquery,Html,Css,Jquery Ui,我正在使用flex为我的web应用程序创建一个响应性布局 我在导航器面板上使用jqueryui来调整它的大小。不幸的是，当resize事件被触发时，jqueryui会在DOM中为我的元素插入一个硬编码的高度，即使我在resizeable设置中指定了句柄 以下是触发调整大小事件时在DOM中得到的结果： <div class="navigator ui-resizable" style="top: 0px; left: 0px; width: 245px; height: 929px;">

我正在使用
flex
为我的web应用程序创建一个响应性布局

我在导航器面板上使用jqueryui来调整它的大小。不幸的是，当resize事件被触发时，jqueryui会在DOM中为我的元素插入一个硬编码的高度，即使我在resizeable设置中指定了句柄

以下是触发调整大小事件时在DOM中得到的结果：

<div class="navigator ui-resizable" style="top: 0px; left: 0px; width: 245px; height: 929px;">
尝试仅删除
高度
属性，其他属性：
顶部
和
左侧
负责定位
.navigator
，这可能是调整大小功能正常工作所必需的。要删除属性，可以尝试
removeAttr（）
jQuery方法或
.removeAttribute（）
JavaScript方法。下面的示例使用了
.removeAttr（）
，并注释掉了
.removeAttribute（）
。如果您更喜欢后者，只需将注释标记交换到另一行即可

顺便说一句，你的代码有一些奇怪的地方，比如

  • …将
    标记放置在关闭
    标记之后。
    • 标签应位于
      和
      标签之后的
      位置。 或
      标记可以放在关闭
      标记之前

  • 还有一个
    标签在
    的外面

    • 虽然我认为在头部外侧放置
      标签是可以的，但它应该尽可能位于最高位置（即头部位于任何
      标签下方）。这是因为浏览器将呈现沿途发现的样式，并且您希望尽早完成DOM

现场演示：

一小条 

html，正文{边距：0；高度：100%；}
.extLayer{display:flex；backgound:gold；height:100%；}
.extLayer.navMgr{背景：番茄；flex:0 30px；}
.extLayer.endoLayer{背景：灰色；flex:1；显示：flex；flex方向：列；}
.topSideBar{高度：50px；背景：黄色；}
.intLayer{flex:1；背景：青色；显示：flex；}
.navigator{flex:0 0 auto/*100px*/；背景色：绿色；}
.auxLayer{flex:1；显示：flex；flex方向：列；背景：红色；}
.tabs{高度：50px；背景：粉红色；}
.coreLayer{flex:1；背景：洋红色；}
一边
顶部侧杆
领航员
标签
主要
$（文档）.ready（函数（）{
$（“.navigator”）。可调整大小（{handles:“e”}）。removeAttr（'height'）；
//document.querySelector（'.navigator'）。removeAttribute（'height'）；
});
我只是通过在导航器上添加css规则来解决这个问题。我添加了高度：继承！重要的在上面。你认为什么更好？如果你使用
.css
和
！重要信息
如果另一个插件需要访问
.navigator
上的特定样式，则可能会限制您的样式设置选项<代码>！重要信息应尽量少用。如果你删除了一个内联样式，比如这个演示，那么你的其他样式和将来访问该样式的任何需要都是不受阻碍的。这很有效，很好的破解！我发现它比CSS风格的黑客更好。太棒了！顺便说一句，如果你遇到需要使用的情况！重要信息，请尝试改用双类选择器。例如，不要使用
.exampleClass{height:500px！important}
，而是使用此
.exampleClass.exampleClass{height:500px；}
注意选择器重复该类。通过这样做，特定的选择器具有非常高的特异性，将覆盖几乎任何其他内容，但它并不像最终的选择器那样！重要的是。 
<!DOCTYPE html>
<html>
    <head>
        <style>

        html, body {
            margin: 0;
            height: 100%;
        }
        .mainWrapper_1
        {
          display: flex;
          backgound: gold;
          height:100%;
        }

        .mainWrapper_1 .navigatorManager
        {
            background: tomato;
            flex: 0 0 30px;
        }

        .mainWrapper_1 .mainWrapper_2
        {
          background: gray;  
          flex: 1;
          display: flex;
          flex-direction: column;
        }

        .topSideBar
        {
            height:50px;
            background: yellow;
        }
        .mainWrapper_3
        {
            flex: 1;
            background: cyan;
            display:flex;
        }
        .navigator
        {
            flex: 0 0 auto/*100px*/;
            background-color: green;
        }
        .mainWrapper_4
        {
            flex: 1;
            display:flex;
            flex-direction: column;
            background: red;
        }
        .tabs
        {
            height:50px;
            background: pink;
        }
        .mainWrapper_5
        {
            flex: 1;
            background: magenta;
        }

        </style>
    </head>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">
    <body>
        <div class="mainWrapper_1">
          <div class="navigatorManager">side</div>
          <div class="mainWrapper_2">
            <div class="topSideBar">
              top side bar
            </div>
            <div class="mainWrapper_3">
                <div class="navigator">
                    navigator
                </div>
                <div class="mainWrapper_4">
                    <div class="tabs">
                        TABS
                    </div>
                    <div class="mainWrapper_5">
                        MAIN
                    </div>
                </div>
            </div>
          </div>
        </div>
    </body>

    <script>
        $(document).ready(function(){
            $(".navigator").resizable({handles: "e"});
        });
    </script>
</html>

 $(document).ready(function() {
     $(".navigator").resizable({
           handles: "e"
      }).removeAttr('height');
    //document.querySelector('.navigator').removeAttribute('height');
 });