liu1007735214
liu1007735214

jquery easyui基本框架搭建

jquery easyui 下载地址：
http://www.jeasyui.com/download/v155.php

下载之后，需要引入里面几个文件：

  
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>  
    <link rel="stylesheet" type="text/css" href="themes/icon.css"/>  
    
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8">script>  
    <script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8">script> 
    <script src="js/easyui-lang-zh_CN.js" type="text/javascript">script>

自己创建一个index.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>index页面title>
      
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>  
    <link rel="stylesheet" type="text/css" href="themes/icon.css"/>  
    
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8">script>  
    <script src="js/jquery.easyui.min.js" type="text/javascript" charset="utf-8">script> 
    <script src="js/easyui-lang-zh_CN.js" type="text/javascript">script> 
    <script src="js/my.js" type="text/javascript" charset="utf-8">script> 
head>
<body>

    <div class="easyui-layout" data-options="fit:true" style="width: 100%;height: 100%;"> 
        <div data-options="region:'north'" style="height:30px; background-color: cornflowerblue;">  
            <div style="text-align: center; line-height:28px">XX有限责任公司管理系统div>  
        div>  
        <div data-options="region:'south'" style="height: 20px;background-color: cornflowerblue;">  
            <div style="text-align: center; line-height:18px">Copyright @ 2010-2018 XX有限责任公司div>  
        div>  
        <div data-options="region:'east',split:true" title="日历" style="width: 300px;">  
            <div id="calendar" class="easyui-calendar" style="width:280px;height:280px;margin: auto">div> 
        div>  

        <div data-options="region:'west',split:true" title="菜单" style="width: 200px;">  
            
            
            <div class="easyui-accordion" data-options="fit:true">
                <div data-options="title:'基础菜单'"><span onclick="addNewTab('name')" style="background: gray;border-radius: 2px;
                    text-align: center;display: block;font-size: 20;cursor: pointer;margin-top: 8px;">面板一span>div>
                <div data-options="title:'系统菜单'">面板二div>
            div>
        div>  

        <div data-options="region:'center'" data-options="fit:true">  
            <div id="mainTabs" class="easyui-tabs" data-options="fit:true">
                <div title="Home" style="padding:10px;">
                        jQuery easyui framework help you build your web page easily.
                div>

            div>  
        div>  
    div>


body>
html>

创建一个my.js

$(function(){

    //点击事件
   // $('#mytree').tree({  
    //var node = 'test';
      //  onClick: function(node){  
       //     if($('#mytree').tree('isLeaf',node.target)){  
                // alert node text property when clicked  
                //alert(node.text);  
         //       addNewTab(node.text);  
        //    }  

       // }  
  //  });  
    //$('#cc').layout('collapse','west');

    //日历初始化
    $('#calendar').calendar({
        current:new Date()
    });

});

function addNewTab(tabname){ 
    //创建一个新的窗口，在mainlayout上  
    if(!$("#mainTabs").tabs('getTab', tabname)) {  
        $("#mainTabs").tabs('add', {  
            title: tabname,  
            selected: true,  
            closable: true,  
            content: "