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"/>有什么区别？