easyui入门(三)

        我们做web应用，主要是写html、css、js。html语法简单，但是css、js却不容易。甚至可以认可，css、js是我们web开发人员的恶梦。用户、需求人员、实施人员不停提出，界面太丑。但我们开发人员也没辙，唯有依赖美工。

        依赖美工之余，我们也不禁想，我们大部分系统都是管理系统，这部分的界面都是风格统一的，界面设计也是单一的。有没有一套漂亮的web控件可用于web管理系统？

        easyui就是这个解决方案，其对html的基本元素进行样式包装，提供了很多可以开箱即用的漂亮标签。下面我们来简单使用这些标签。

1、可折叠标签

对div应用easyui-accordion样式，子div就拥有折叠属性。(如下所示，titile1、titile2、title3所对应的div具有折叠属性。)

<div id="aa" border="true"class="easyui-accordion" style="width:600px;height:500px;" fit="false">

<div title="Title1" icon="icon-save" style="overflow: auto; padding: 10px;">content1</div>

<div title="Title2" icon="icon-reload" selected="true" style="padding:10px;">content2</div>

<div title="Title3" icon="icon-save">content3</div>

</div>

2、日期标签

对input标签应用easyui-datebox样式，就拥有日期属性；

对input标签应用easyui-datetimebox样式，就拥有日期时间属性。

普通输入框：<input id="dd" type="text"/>

<br/>

日期输入框：<input id="dd2" type="text"class="easyui-datebox"/>

<br/>

日期时间输入框：<input id="dd3" type="text"class="easyui-datetimebox"/>

3、数字标签

对input标签应用easyui-numberbox样式，就拥有数字属性。

4、下拉框标签

对select标签应用easyui-combo样式，就拥有更灵活的下拉框属性。

5、校验属性

对input,textarea标签应用easyui- validatebox样式，就拥有校验属性。

基本校验功能：不能为空、字符长度、邮箱格式、URL格式等校验。

另，数值的校验可以使用数字标签来解决；日期的校验可以使用日期标签来解决。

但，easyui的验证功能还是比较弱、比较少，要么使用其扩展校验功能，要么使用其它的jquery校验插件。

【备注】

除require属性验证失败不会提交外，其它的验证失败并不会阻止表单提交，需注意处理。

$(":submit").click(function(){
if(!$("#form").form('validate')){
return false;
}
})

6、数据表标签

对table元素应用 easyui-datagrid 样式，就拥有数据表格属性。

非常强大的标签，但需结合jquery才能体现其功能强大。如下所示，数据表标签有工具条、分页等功能。

 

 

<script>

         $(function(){

                             

                   $('#tt2').datagrid({

                            title:'Load Data',

                            iconCls:'icon-save',

                            width:800,

                            height:500,

                           singleSelect:true,

                           url:'datagrid_data.json',

                           toolbar:[{

        text:'Add',

        iconCls:'icon-add',

        handler:function(){

            alert('add')

        }

    },{

        text:'Cut',

        iconCls:'icon-cut',

        handler:function(){

            alert('cut')

        }

    },'-',{

        text:'Save',

        iconCls:'icon-save',

        handler:function(){

            alert('save')

        }

    }],

                           columns:[[

                                     {field:'code',title:'code',width:80},

                                     {field:'name',title:'name',width:80},

                                     {field:'addr',title:'addr',width:80},

                                     {field:'col4',title:'col4',width:100}

                            ]],

                           pagination:true

                   });

                               });

         </script>