10

jQuery UIを使用して、 http：//methvin.com/splitter/3csplitter.htmlにあるようなSplitterのような機能をどのように使用でき ますか？

私のページに2つのことを実装する必要があるので、これを求めています。ポートレット（ドラッグ可能）::http://jqueryui.com/sortable/#portletsおよび 垂直スプリッター:: http: //methvin.com/splitter/3csplitter.html

2つの別々のライブラリを含める場合（どちらもjQueryベースですが）、コーディングの実践がどれほど優れているかはわかりません。Portletsの場合はhttp://host.sonspring.com/portlets/、Splitterの場合はhttp://methvin.com/splitter/3csplitter.htmlなど

4

4 に答える 4

18

jQuery UI を使用してスプリッターを作成する方法の例を次に示します。

HTML:

<div class="wrap">
    <div class="resizable resizable1"></div>
    <div class="resizable resizable2"></div>
</div>

脚本：

$(function () 
{
    $(".resizable1").resizable(
    {
        autoHide: true,
        handles: 'e',
        resize: function(e, ui) 
        {
            var parent = ui.element.parent();
            var remainingSpace = parent.width() - ui.element.outerWidth(),
                divTwo = ui.element.next(),
                divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";
                divTwo.width(divTwoWidth);
        },
        stop: function(e, ui) 
        {
            var parent = ui.element.parent();
            ui.element.css(
            {
                width: ui.element.width()/parent.width()*100+"%",
            });
        }
    });
});

人気のスクリプトです。流動的なレイアウトに少し変更を加えました。

jsFiddle の例

于 2013-06-07T12:12:46.090 に答える
0

Shield UI フレームワークのスプリッター コンポーネント部分を使用すると、水平スプリッターと垂直スプリッターを組み合わせて使用​​できます。

于 2016-10-31T16:21:53.553 に答える