【前端UI框架】EasyUI

准备

下载：http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.5.zip
在页面引入必要的资源

布局

<div class="easyui-layout">
    <div region="north" title="北部" style="height:100px">北部内容</div>
    <div region="west" title="西部" style="100px">西部内容</div>
    <div region="center" title="中部">中部</div>
    <div region="south" title="南部" style="height:100px">南部内容</div>
    <div region="east" title="东部" style="100px">东部内容</div>
</div>

折叠面板

<!-- fit为真则占满父容器 -->
<div class="easyui-accordion" fit="true">
    <!-- iconCls的值在icon.css里面选 -->
    <div title="面板一" iconCls="icon-ok">面板一</div>
    <div title="面板二">面板二</div>
    <div title="面板三">面板三</div>
<div>

标签页

<div class="easyui-tabs" fit="true">
    <!-- closable为真则可关闭 -->
    <div title="标题一" closable="true">内容一</div>
    <div title="标题二">内容二</div>
    <div title="标题三">内容三</div>
</div>

树形菜单

<ul class="easyui-tree">
    <li>
        <span>一级菜单1</span>
        <ul>
            <li>
                <span>二级菜单1</span>
                <ul>
                    <li><span>三级菜单1</span></li>
                    <li><span>三级菜单2</span></li>
                    <li><span>三级菜单3</span></li>
                </ul>
            </li>
            <li><span>二级菜单2</span></li>
            <li><span>二级菜单3</span></li>
        </ul>
    </li>
    <li><span>一级菜单2</span></li>
</ul>

消息显示框

$.messager.show({
    title: '标题',
    msg: '内容',
    timeout: 5000
    showType: 'slide'
});

消息弹出框

$.messager.alert('标题', '内容', 'error'); // error, info, question, warning

消息确认框

$.messager.confirm('标题', 'xxx?', function(r) {
    if(r) { alert('xxx: ' + r); }
});

登录窗口

<div id="w" class="easyui-window" data-options="modal:true,closed:true,iconCls:'icon-save'" title="Login" style="300px;height:180px;">
<form style="padding:10px 20px 10px 40px;">
    <p>Name: <input type="text"></p>
    <p>Pass: <input type="password"></p>
    <div style="padding:5px;text-align:center;">
        <a href="#" class="easyui-linkbutton" icon="icon-ok">Ok</a>
        <a href="#" class="easyui-linkbutton" icon="icon-cancel">Cancel</a>
    </div>
</form>
</div>

<div>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a>
</div>

表单校验

<form id="ff" method="post">
<div>
    <label for="name">Name:</label>
    <input class="easyui-validatebox" type="text" name="name" required="true"></input>
</div>
<div>
    <label for="email">Email:</label>
    <input class="easyui-validatebox" type="text" name="email" required="true" validType="email"></input>
</div>
<div>
    <label for="subject">Subject:</label>
    <input class="easyui-validatebox" type="text" name="subject" required="true"></input>
</div>
<div>
    <label for="message">Message:</label>
        <textarea name="message" style="height:60px;"&gt;&lt;/textarea&gt;
</div>
<div>
    <input type="submit" value="Submit">
</div>
</form>