0

プラグインhttp://quasipartikel.at/multiselect_next/から修正しようとしていますが、 固定幅と高さを使用していますが、コンテナーまたは親に対してパーセンテージで指定します。

問題の基本的なフィドルを作成しました。これまでのところ、小さなバグで幅を修正することができました (右側にスペースが残っています)。しかし、その高さを動的またはパーセンテージにすることはできないようです。

目的: ui-multiselect は、指定されたパーセンテージ (私の例では 100%) でサイズ変更された場合、親に従って高さと幅を調整する必要があります。

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

日付付きの html/css については Fiddle を参照してください

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 に答える