easy-ui

使用jquery的easyui前，要引用
  <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.3/themes/icon.css">
    <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>


1.easyui-layout
可用region=north/south/west/center 等来开始简易布局


2.easyui-tabs
可用 title="XXX"，来设置tab


3.easyui-tree 简单使用
<script type="text/javascript">
    $(function(){
    var treeData=[{
    text:"根",
    children:[{
    text:"班级信息管理",
    attributes:{
    url:"gradeInfoManage.jsp"
    }
    },{
    text:"学生信息管理",
    attributes:{
    url:"studentInfoManage.jsp"
    }
    }]
    }];
    //实例化菜单
    $("#tree").tree({
    data:treeData,
    lines:true,
    onClick:function(node){
    if(node.attributes){
    openTab(node.text,node.attributes.url);
    }
    }
    });
    //新增Tab
    function openTab(text,url){
    if($("#tabs").tabs('exists',text)){
    $("#tabs").tabs("select",text);
    }else{
    var content="<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="+url+"></iframe>";
    $("#tabs").tabs('add',{
        title:text,
        closable:true,
        content:content
        });
    }
    }
    });
    </script>


4.easyui-dialog 对话框