隐藏

EasyUI Window和Layout

发布:2013/5/5 17:49:42作者:管理员 来源:本站 浏览次数:2552

版式组件可以嵌套在窗口。我们可以创建复合版面窗口和事件而不用写任何JS代码.jquery-easyui框架在后台帮助我们进行渲染和改变工作。这个例子我们创建窗口,这个窗口有左右两部分。在左窗口,我们建立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="javascript:void(0)">Ok</a>

            <a class="easyui-linkbutton" icon="icon-cancel" href="javascript:void(0)">Cancel</a>

        </div>

    </div>

</div>

看上面的代码,我们只需使用HTML标记,然后复合版面和window就会显示。这个jquery-easyui框架,是容易和强大的。