我们做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>
普通输入框:<input id="dd" type="text"/>
<br/>
日期输入框:<input id="dd2" type="text"class="easyui-datebox"/>
<br/>
日期时间输入框:<input id="dd3" type="text"class="easyui-datetimebox"/>
基本校验功能:不能为空、字符长度、邮箱格式、URL格式等校验。
另,数值的校验可以使用数字标签来解决;日期的校验可以使用日期标签来解决。
【备注】
除require属性验证失败不会提交外,其它的验证失败并不会阻止表单提交,需注意处理。
$(":submit").click(function(){
if(!$("#form").form('validate')){
return false;
}
})
<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>