0

我正在尝试从插件http://quasipartikel.at/multiselect_next/修复一个东西， 它使用固定的宽度和高度，而我希望它相对于容器或父级以百分比表示。

我已经为这个问题创建了基本的小提琴。到目前为止，我已经能够通过一个小错误来修复宽度（右边有空间）。但我似乎无法使其高度动态或百分比。

目标： 如果以给定的百分比调整大小，ui-multiselect 必须根据父级调整其高度和宽度，在我的示例中为 100%。

JSFIDDLE：http: //jsfiddle.net/bababalcksheep/Np4tA/201/

请参阅 Fiddle 以获取详细的 html/css

这是html的简化版本：

<div class="ui-multiselect ui-helper-clearfix ui-widget">
    <div class="ui-widget-content list-container selected">
        <ul class="list selected ui-sortable ui-droppable">
            <li class="ui-helper-hidden-accessible"></li>
        </ul>
    </div>
    <div class="ui-widget-content list-container available">
        <ul class="list available ui-droppable">
            <li class="ui-helper-hidden-accessible"></li>
        </ul>
    </div>
</div>

基本 CSS：

.ui-multiselect {
    border: 1px solid;
    font-size: 0.8em;
    width:100%;
    height:100%;
}
.ui-multiselect ul {
    -moz-user-select: none;
}
.ui-multiselect div.list-container {
    padding: 0;
    margin: 0;
    border: 0;
    float:left;
    width:49.8%;
    height:100%;        
}
4

1 回答 1

1

我不确定我是否理解您的问题，但请尝试将此 javascript 粘贴到您的 jsfiddle 中：

function auto_resize(){
    $('.ui-multiselect, .list-container').height($(window).height());
}
$(window).resize(auto_resize);
auto_resize();

您只需将传递给 height 的参数乘以 0 到 1 之间的因子。例如：

function auto_resize(){
    $('.ui-multiselect, .list-container').height($(window).height() * 0.7); //70%
}

宽度和高度的完整示例：

function auto_resize(){
    $('.ui-multiselect, .list-container').height(0.7*$(window).height());  //70%     

    $('.ui-multiselect').width(0.8*$(window).width()); //80%
}
$(window).resize(auto_resize);
auto_resize();

注意：一个更通用的解决方案，其中父窗口不是窗口，只需将其ui-multiselect放入固定大小的 DIV 中，然后window在上面的代码中用 jquery 选择语句替换。例如：

function multi_select_container() {
    var container = $('.ui-multiselect').parent();
    if (container.prop('tagName').toLowerCase() == 'body') container = $(window);   
    return container;
}

function auto_resize(){
    var container = multi_select_container();

    $('.ui-multiselect, .list-container').height(0.7*container.height());  //70%     

    $('.ui-multiselect').width(0.8*container.width()); //80%
}

multi_select_container().resize(auto_resize);
auto_resize();
于 2013-10-26T09:00:07.670 回答