jQuery EasyUI ウィンドウ -ウィンドウとレイアウト

Layout コンポーネントはウィンドウ（window）内に埋め込むことができます。JSコードを一切書かなくても、複雑なレイアウトウィンドウを作成できます。jquery-easyui フレームワークがバックグラウンドでレンダリングとサイズ調整を行ってくれます。

例として、左側に1つ、右側に1つ配置された2つの部分を含むウィンドウ（window）を作成します。ウィンドウ（window）の左側にはツリーメニュー（tree）を作成し、右側には tabs コンテナを作成します。

    <div class="easyui-window" title="Layout Window" icon="icon-help" style="width:500px;height:250px;padding:5px;background: #FAFAFA;">
        <div class="easyui-layout" fit="true">
            <div region="west" split="true" style="width:120px;">
                <ul class="easyui-tree">
                    <li>
                        <span>Library</span>
                        <ul>
                            <li><span>easyui</span></li>
                            <li><span>Music</span></li>
                            <li><span>Picture</span></li>
                            <li><span>Database</span></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div region="center" border="false" border="false">
                <div class="easyui-tabs" fit="true">
                    <div title="Home" style="padding:10px;">
                        jQuery easyui framework help you build your web page easily.
                    </div>
                    <div title="Contacts">
                        No contact data.
                    </div>
                </div>
            </div>
            <div region="south" border="false" style="text-align:right;height:30px;line-height:30px;">
                <a class="easyui-linkbutton" icon="icon-ok" href="#">Ok</a>
                <a class="easyui-linkbutton" icon="icon-cancel" href="#">Cancel</a>
            </div>
        </div>
    </div>

上記のコードをご覧ください。HTML マークアップのみを使用しており、複雑なレイアウトウィンドウ（window）が表示されます。これが jquery-easyui フレームワークです。シンプルでありながら強力です。

jQuery EasyUI サンプルをダウンロード

jeasyui-win-win3.zip