Question

我的视图位于我的Salesforce平台上，该平台由JavaScript和HTML控制。我要求由于用户有不同的职责和需求，他们希望能够调整他们的div大小和视图，以便为用户定制。以下是我的div结构，任何想法如何让他们重新调整大小？未来的要求是我保存div的布局/大小，这就是为什么我认为Javascript是必需的..

编辑问题：应该通过拖动（仅适用于高度）重新调整用户想要的大小。

<div id="resizeMe" class="hp-onecolumn hp-sectionpad">
    <div class="hp-borders hp-boxcontainer" id="dvTripTask">
        <span class="hp-bluebox1"><h3 class="hp-header_label hp-headerpad">Trip Planning To Do List</h3><a HREF="#" onClick="openNewTab('/00Oa0000008W7DB?isdtp=vw');return false" id="btnReports">View Report</a>
            <span class="hp-range-container">
                <span class="ui-widget" targetId="TripTasks"><select id="drpTripTasksRanges" style="visibility:hidden;" class="drpRanges" targetId="TripTasks"></select></span>
                <span  class="hp-datepicker"><span id="lblTripTasksFrom">From: </span><input id="dpTripTasksFromDate" class="hp-datepicker_control hp-datefrom" targetId="TripTasks"/> To: <input id="dpTripTasksToDate" class="hp-datepicker_control hp-dateto" targetId="TripTasks"/></span>
            </span>
        </span>
        <div id="dvTripTaskInner" class="hp-innerbox">
            <div class="hp-innerboxpad">
                <table id="tblTripTasksList"></table>
                <div id="pgTripTask"> </div>
            </div>
        </div>
    </div>
    <div id="resizer"></div>
</div>

Answer 1

非常快的模型，但这是一般的想法。将这个想法应用到您的特定HTML中应该不难。如果您有任何问题，请告诉我们！

小提琴：http://jsfiddle.net/mok38fur/5/

HTML：

int

CSS：

<div id="resizeMe"></div>
<div id="resizer"></div>

JS：

#resizeMe {
    height: 100px;
    width: 100%;
    background: blue;
}
#resizer {
    height: 10px;
    width: 100%;
    background: red;
    cursor: row-resize;
}

Answer 2

如果您被允许使用第三方javascript库，如jQuery和jQuery UI，我建议您使用jQuery UI's Resizable plugin。

使用带有Parent和Child元素的Javascript调整Div的大小

2 个答案: