使多個選擇列表可調整大小

Question

如何使這個多選擇列表可調整大小？我想設置列表的默認高度和寬度以及最小高度和寬度，但是可以自行調整它的大小。

I'vr嘗試這樣做沒有成功：

<div id="resizable" class="ui-widget-content"> 
    <h3 class="ui-widget-header">Stored Procedures</h3> 
<div class='list'> 

<select multiple="multiple" height="5" data-bind="options:storedProceduresInDB1, selectedOptions:selectedStoredProceduresInDb1"> </select> 

<div> 
    <button data-bind="click: copyToDb2, enable: selectedStoredProceduresInDb1().length > 0">Copy to DB2</button> 
</div> 
</div> 
</div> 


$(function() { 
    $("#resizable").resizable(); 
}); 

JSFiddle

Answer 1

在你的jsfiddle，我沒有看到$('#resizable').resizable();，你不必與resizable的ID東西。但是，既然你已經用jQuery標記了它，你可以通過包含jQuery .js和.css文件來完成。另外，將ID爲resizable的控件添加到可調整大小並引用該插件。要設置最小高度和寬度，請參閱下面的代碼。我對你的jsfiddle變化包括：

1. 新增id="resizable"您select
2. 新增$("#resizable").resizable();
3. 新增jQuery的.css文件到外部資源
4. 新增jQuery的.js文件的HTML
5. （可選）要調整拖動器的位置，請添加此css .ui-resizable-se { bottom: 'some amount'; right: 'some amount'; }

這裏是更新的jsFiddle，它不包括我提到的CSS或設置最小高度和寬度。

，代碼：

<select id="resizable" multiple="multiple" height="5" 
    data-bind="options:storedProceduresInDB1, 
    selectedOptions:selectedStoredProceduresInDb1"></select> 

$(function() { 
    $('#resizable').resizable({ 
     // to set the min height and width 
     minHeight: 100, 
     minWidth: 200 
     // you could also set a maxHeight and maxWidth as well 
    }); 
}); 

要定位select內牽引機圖標，添加以下的CSS：

.ui-resizable-se { bottom: 18px; right: 25px; }