dialog
// html中已经设置了"display=none",之后js代码再手动显示dialog的话，需要先.show()再.dialog()
<script type="text/javascript">
$('#dd').dialog({
title:'myDialog',
height:400,
width:200,
closed:false,
cache:false,
href:'get_content.php',
modal:true
});
</script>
<!-- easyLoader -->
<script type="text/javascript">
$(function () {
easyLoader.load(['dialog','messager'],function() {
$('#dd').dialog({
modal:true
});
$().messager().alert('title','load OK');
});
});
$(function () {
using('./dialog.js',function(){});
});
</script>
<!-- // parser -->
<!--
// panel
// properties:id|title|iconCls|footer...
-->
<div class="easyui-panel" data-options:"footer:'#ft,border:false"></div>
<div id="ft">footer content</div>
<!--
//events:onBeforeLoad|onOpen|onDestroy...
-->
<div class="easyui-panel" data-options="onBeforeClose:function(){return false;}"></div>
<!--
//method:options|panel|footer|setTitle|resize...
-->
<script type="text/javascript">
$('#pp').panel('resize',{
width:600,
height:400
});
</script>
<script type="text/javascript">
$('#p').panel({
width:500,
height:150,
title:'my panle',
tools:[{
iconCls:'icon-add',
handler:function () {
// body...
},{
iconCls:'icon-save',
handler:function () {
// body...
}
}
}]
});
$('p').panel('method',{options}|'option');
</script>
****
<script type="text/javascript">
$(function () {
$('#log').dialog({
buttons:[{
text:注册,
handler:function () {
$().ajax({
url:'userController.do?login',
data:{
name:$("#login input[name='username']").val();
password:$("#login input[name='password']").val();
},
// data:$(#login).serialize(),
dataType:'json',
success:function (r) {
//$.messager.alert("warnning",r.msg);
if(r&&r.success){
$("#log").dialog('close');
$.messager.show({
title:'提示'，
msg:r.msg
});
}else{
$.messager.alert('标题',r.msg);
}
}
});
}
},{
text:登录，
handler:function () {
// body...
}
}]
});
//form、validatebox
$('#login').form({
url:'userController.do?login',
success:function (r) {
console.info(r);//r是一个字符串
// r = eval("(" + r + ")");
r = $.parseJSON(r);
console.info(r);//r是一个对象
if(r&&r.success){
$("#log").dialog('close');
$.messager.show({
title:'提示'，
msg:r.msg
});
}else{
$.messager.alert('标题',r.msg);
}
}
});
</script>
<div id="log" width="250px" height="200px">
<form id="login" method="post">
<table>
<tr>
<td align="right">用户名</td>
<td><input name="username"></td>
</tr>
<tr>
<td align="right">密码</td>
<td><input type="password" name="password"> </td>
</tr>
</table>
</form>
</div>
<input name="usernem" class="easyui-validatebox" validType="email" required="true"/>
<!-- 扩展：确认密码 -->
<script type="text/javascript">
$.extend($.fn.validatebox.default.rules,{
eqPassword:{
validator:function (value,param) {//value不用传，内置的，是当前的元素的value
return value==$(param[0]).val();
}
},
message:'密码不一致'
});
</script>
<form id="regForm">
<input type="password" name="password" required="true"/>
<input type="password" name="rePassword" class="easyui-validatebox" required="true" validType="eqPassword['#regForm input[name=password]']"/>
</form>
<!-- depand panel + resizable
可以使用ajax加载
一定要有center，其他部分可选
可嵌套-->
<body class="easyui-layout">
<div data-options="region:'west',href:'west_content.php'" style="width: 180px"></div>
<!-- datagrid -->
<script type="text/javascript">
var datagrid;
$(function () {
$('#datagrid').datagrid({
url:'userAction.getUsers()',//
title:'datagrid',
iconCls:'icon-save',
pagination:true,
pageSize:10,
pageList:[10,20,30,40],
fit:true,
fitColumns:false,
nowrap:false,
border:false,
idField:'id',
sortName:'id',
sortOrder:'desc'，
columns:[[{
title:'编号',
field:'id',
width:100，
sortable：true
},{
title:'题目',
field:'title',
width:100
},{
title:'姓名',
field:'name',
width:100
}]],
toolbar:[{
text:'增加'，
iconCls:'icon_add',
handler:function () {
}
},'-',{
text:'删除'，
iconCls:'icon_remove',
handler:function () {
}
}]，
// toolbar:'#toolbar'
});
})
</script>
<div data-options="region:'center'">
<div class="easyui-tabs" fit="true" border="false">
<div title="用户管理" border="false">
<table id="datagrid">
</table>
</div>
</div>
</div>
</body>
jQuery的ajax提交与easyUI的form提交的区别
form提交就是普通的表单文本提交，控制台是空的，实质是要刷新的，它是用了一个隐藏的iframe去刷新提交。
ajax是异步提交，控制台会有post/连接/文件头/相应什么的。
未解决的问题
data-options是否可以去掉？ 比如
<input type="password" name="password" data-options="required='true'"/>与
<input type="password" name="password" required="true"/>有什么区别？
