eaysUI
简介：
easyui是一种基于jQuery的用户界面插件集合。
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
easyui是个完美支持HTML5网页的完整框架。
easyui节省您网页开发的时间和规模。
easyui很简单但功能强大的。
本次用到的插件：jquery-easyui-1.4
主要引用：<link rel="stylesheet" type="text/css" href="<%=path%>/js/themes/default/easyu
i.css">
        <link rel="stylesheet" type="text/css" href="<%=path%>/js/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="<%=path%>/js/demo.css">
        <script type="text/javascript" src="<%=path%>/js/jquery.min.js"></script>
        <script type="text/javascript" src="<%=path%>/js/jquery.easyui.min.js"></script>
        <script type="text/javascript" src="<%=path%>/js/locale/easyui-lang-zh_CN.js"></script>
1、layout (布局)
A) layout （布局）
1. <body class="easyui-layout">
2. <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div
>
3. <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
4. <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
5. <div data-options="region:'west',title:'West',split:’true’ style="width:100px;"></div>
6. <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div>
7. </body>
split:为true时用户可以通过分割栏改变面板大小。
B) Panel （面板）
    <div id="p" class="easyui-panel" title="Basic Panel"  data-options="fit:true"
            style="width: 700px; height: 200px;"></div>
fit:当设置为true的时候面板大小将自适应父容器。下面的例子显示了一个面板，可以自动在父容器的最大范围内调整大小。
C) Accordion （分类）
1. <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
2. <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
3. <h3 style="color:#0099FF;">Accordion for jQuery</h3>
4. <p>Accordion is a part of easyui framework for jQuery.
5. It lets you define your accordion component on web page more easily.</p>
6. </div>
7. <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
8. content2
9. </div>
10. <div title="Title3">
11. content3
12. </div>
13. </div>
D)Tabs （选项卡）
选项卡的存放位置
<div id="tt" class="easyui-tabs" fit="true" border="false"></div>
添加选项卡以及防止重复添加
addTab = function(options) {
    if ($("#tt").tabs('exists', options.title)) {
        alert(options.title)
        alert(options.href)
        $("#tt").tabs('select', options.title);
    } else {
        $("#tt").tabs('add', options);
    }
}
addFriend = function() {
    addTab( {
        title : '朋友管理',
        href : 'tree.jsp',
        fit : true,
        border : false,
        closable : true
    });
}
2、form（表单）
a) form （表单）验证提交
<div style="text-align: center; padding: 5px">
                    <a href="javascript:void(0)" class="easyui-linkbutton"
                        onclick="submitForm()">Submit</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton"
                        onclick="clearForm()">Clear</a>
                </div>
Js代码
function submitForm() {
    $('#ff').form('submit', {
        onSubmit : function() {
            return $(this).form('enableValidation').form('validate');
        }
    });
}
function clearForm() {
    $('#ff').form('clear');
}
b) validateBox （验证框）
<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'" />
c) combobox （下拉列表框）
    <select id="com" class="easyui-combobox" editable="false"
                                    panelHeight="auto"
                                    data-options="$('#com')bobox({
                                    onSelect: function () {
                                          var v =                             $('#com')bobox('getValue');
                                            if(v == 2)
                                            {
                                                $('.t_info').show();
                                            }
                                            else
                                            {
                                                $('.t_info').hide();
                                            }
                                    }
                                });">
                                    <option value="1">
                                        ??
                                    </option>
                                    <option value="2">
                                        ??
                                    </option>
                                    <option value="3">
                                        ??
                                    </option>
                                    <option value="4">
                                        ??
                                    </option>
                                    <option value="5">
                                        ??
                                    </option>
</select>
d) numberbox （数值输入框）
<input type="text" class="easyui-numberbox" value="100"     data-options="min:0,precision:2"></input>
e)  datebox （日期输入框）
<input id="dd" type="text" class="easyui-datebox" required="required"></input>
f) datetimebox （日期时间输入框）
∙  <input class="easyui-datetimebox" name="birthday"
∙  data-options="required:true,showSeconds:false" value="3/4/2010 2:3" style="width:150px">
3、datagrid (数据表格)
$(function() {
    $('#dg').datagrid( jquery在线教程交流{
        url : 'user/jsonFindAll',
        //title:'????',
        columns : [ [ {
            field : 'id',
            title : 'ID',
            width : 100,
            align : 'center',
            checkbox : true
        }, {
            field : 'userName',
            title : '??',
            width : 100,
            align : 'center',
            sortable : true
        }, {
            field : 'userPwd',
            title : '??',
            width : 100,
            align : 'center',
            sortable : true
        }, {
            field : 'age',

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。