我的 Salesforce 平台上有一个由 JavaScript 和 HTML 控制的 View 。我有一个要求,因为用户有不同的职责和需求,他们希望能够调整他们的 div 大小和 View ,以便为用户定制。以下是我的 div 结构,有什么想法可以让他们调整它的大小吗? future 的要求是我保存 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>
最佳答案
模型非常快,但这是总体思路。将这个想法应用到您的特定 HTML 中应该不难。如果您有任何疑问,请告诉我!
fiddle :http://jsfiddle.net/mok38fur/5/
HTML:
<div id="resizeMe"></div>
<div id="resizer"></div>
CSS:
#resizeMe {
height: 100px;
width: 100%;
background: blue;
}
#resizer {
height: 10px;
width: 100%;
background: red;
cursor: row-resize;
}
JS:
var yAxisDrag;
var resizer;
var resizeMe;
var resizeMeHeight;
function makeResizable() {
resizer = document.getElementById('resizer');
resizeMe = document.getElementById('resizeMe');
resizer.addEventListener('mousedown', initializeDrag);
};
function initializeDrag(event) {
yAxisDrag = event.clientY;
resizeMeHeight = resizeMe.offsetHeight;
document.addEventListener('mousemove', onResizerDrag);
document.addEventListener('mouseup', onStopResizerDrag);
};
function onResizerDrag(event) {
var newResizeMeHeight = resizeMeHeight + event.clientY - yAxisDrag;
if (newResizeMeHeight <= 30) {
return;
}
resizeMe.style.height = newResizeMeHeight + 'px';
};
function onStopResizerDrag(event) {
document.removeEventListener('mousemove', onResizerDrag);
document.removeEventListener('mouseup', onStopResizerDrag);
};
makeResizable();
关于javascript - 使用带有父元素和子元素的 Javascript 调整 Div 的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33903203/