Question

我正在使用flex为我的网络应用制作响应式布局。

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

以下是我在触发resize事件时在DOM中获得的内容：

<div class="navigator ui-resizable" style="top: 0px; left: 0px; width: 245px; height: 929px;">

除了width之外，我想摆脱所有其他风格。

以下是代码：

<!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>

Answer 1

尝试仅删除height属性，其他属性：top和left负责定位.navigator，这可能是调整大小功能正常运行所必需的。要删除属性，您可以尝试使用removeAttr() jQuery方法或.removeAttribute() JavaScript方法。以下示例使用.removeAttr()并注释了.removeAttribute()。如果您更喜欢后者，只需将注释标记交换到另一行。

顺便说一句，你的代码有一些奇怪的位置，比如......

... <script>标记在关闭</body>标记后放置。

<script>标记应位于<head>和<link>标记后的<style>。要么 <script>标记可以放在结束</body>标记之前。

此外<link>还有<{1}}代码。

虽然我相信可以将<head>标记放在头部之外，但它应该位于最可能的最高位置（即任何<link>标记下的头部。）。这是因为浏览器将在他们发现的过程中呈现样式，并且您希望尽早完成DOM。

<meta>

现场演示： PLUNKER

段

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

使用jQueryUI可调整大小时删除DOM中的高度

1 个答案:

段