easyui

1.面板的使用：

创建div，直接渲染

<div id="p"></div>

$('#p').panel({    
 width:392,    
 height:250,    
 title: '面板',    
 tools: [{    
   iconCls:'icon-add',    
   handler:function(){
    $("#ff").show();
    $('#dd').dialog({    
       title: '对话框',    
       width: 300,    
       height: 200,    
       closed: false,    
       cache: false,    
    /*     href: 'get_content.php',  */   
       modal: true   
    });    


    }    
 },{    
   iconCls:'icon-remove',    
   handler:function(){
    $.messager.alert('提示','请选择一条数据！');    
    }    
 },{    
   iconCls:'icon-save',    
   handler:function(){alert('保存')}    
 },{    
   iconCls:'icon-cut',    
   handler:function(){alert('剪切')}    
 },{    
   iconCls:'icon-help',    
   handler:function(){alert('剪切')}    
 }
 ],
 onLoad:function(){
 alert('loaded successfully');
 }
});

这是点击面板弹出的新增

<div id="dd">
<form id="ff" method="post" style="display: none;">
<div>
<label for="name">姓名：</label> <input class="easyui-validatebox"
type="text" name="name" data-options="required:true" />
</div>
<div>
<label for="email">密码：</label> <input id="pwd" name="pwd"
type="password" class="easyui-validatebox" />
</div>
<div>
<label for="email">邮箱：</label> <input class="easyui-validatebox"
type="text" name="email" data-options="validType:'email'" />
</div>
<div>
<label for="email">日期：</label> <input id="dd" type="text"
class="easyui-datebox" />
</div>
<div>
<input type="submit" value="保存" /> <input type="button" value="取消" />
</div>
</form>
</div>

2.如果想直接用layout，可以在body里面写上class="easyui-layout"，然后进行渲染

$('body').layout();    

然后你就可以开始布局，什么左右上下等，

<div data-options="region:'north',split:true" style="height: 100px;">头部</div>

类似这样写就行了。