【问题标题】:make multi select list resizable使多选列表可调整大小
【发布时间】:2014-03-26 05:26:53
【问题描述】:

如何使这个多选列表可调整大小?我想设置列表的默认高度和宽度以及最小高度和宽度,但可以自己调整大小。

我试过这个没有成功:

<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

【问题讨论】:

    标签: jquery css knockout.js


    【解决方案1】:

    在您的 jsFiddle 中,我没有看到 $('#resizable').resizable(); 并且您没有任何 ID 为 resizable 的内容。但是由于您已使用 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; }
    

    【讨论】:

      【解决方案2】:

      如果有人遇到这个问题并且(合法地)不想使用 JQuery 来解决这个问题,您可以使用“resize”CSS 属性:https://www.w3schools.com/cssref/css3_pr_resize.asp

      以作者为例:

      • 添加一些 id 或类,以便我们可以在 css 中定位该元素

      &lt;select id="resizable" multiple="multiple" height="5" databind="options:storedProceduresInDB1, selectedOptions:selectedStoredProceduresInDb1"&gt; &lt;/select&gt;

      • 在 CSS 中,将属性 resize 添加到该元素(作者的值为“both”,以便他可以调整宽度和高度)
      #resizable{
        resize: both;
      }
      

      其实并不需要给“select”元素添加id,我们只需要在JSFiddle中CSS文件的第6行添加“resize”属性即可:

      .list select[multiple] { width: 100%; height: 8em; resize: both; }


      最后,您可以使用经典的 css 属性 min-height 和 min-width 来设置选择的最小尺寸:

      .list select[multiple] { width: 100%; height: 8em; min-width: 100px; min-height: 100px; resize: both; }

      【讨论】:

      • 我更新了我的答案,包括在作者的情况下该怎么做。
      【解决方案3】:

      只需添加 CSS 规则:

      select { resize: auto; }
      

      【讨论】:

        猜你喜欢
        • 2017-06-15
        • 1970-01-01
        • 2016-06-18
        • 2017-05-31
        • 2014-10-31
        • 1970-01-01
        • 1970-01-01
        • 2021-06-24
        • 1970-01-01
        相关资源
        最近更新 更多