jQuery EasyUI レイアウト -パネル内で複雑なレイアウトを作成する

パネル（Panel）を使用すると、さまざまな用途に合わせたカスタムレイアウトを作成できます。この例では、パネル（panel）とレイアウト（layout）プラグインを使用して MSN メッセージボックスを作成します。

リージョンパネル内で複数のレイアウトを使用します。メッセージボックスの上部には検索入力ボックスを配置し、右側には人物画像を配置します。中央の領域では、split プロパティを true に設定することで、その部分を2つに分割し、ユーザーがリージョンパネルのサイズを変更できるようにします。

以下がすべてのコードです：

    <div class="easyui-panel" title="Complex Panel Layout" iconCls="icon-search" collapsible="true" style="padding:5px;width:500px;height:250px;">
        <div class="easyui-layout" fit="true">
            <div region="north" border="false" class="p-search">
                <label>Search:</label><input></input>
            </div>
            <div region="center" border="false">
                <div class="easyui-layout" fit="true">
                    <div region="east" border="false" class="p-right">
                        <img src="images/msn.gif.html"/>
                    </div>
                    <div region="center" border="false" style="border:1px solid #ccc;">
                        <div class="easyui-layout" fit="true">
                            <div region="south" split="true" border="false" style="height:60px;">
                                <textarea style="border:0;width:100%;height:100%;resize:none">Hi,I am easyui.</textarea>
                            </div>
                            <div region="center" border="false">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

JavaScript コードを一切書く必要はありません。それ自体に、ユーザーインターフェースを設計するための非常に強力な機能が備わっています。

jQuery EasyUI インスタンスをダウンロード

jeasyui-layout-panel.zip