jquery easyui基本框架搭建

最新推荐文章于 2024-06-19 21:34:23 发布

liu1007735214

最新推荐文章于 2024-06-19 21:34:23 发布

阅读量1.5k

点赞数

文章标签： jQuery easyUI easyUI框架搭建前端

本文链接：https://blog.csdn.net/u012204058/article/details/80518175

版权

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

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

<!--2个样式表文件-->  
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>  
    <link rel="stylesheet" type="text/css" href="themes/icon.css"/>  
    <!--2个js文件 ,要先引入jquery,然后再引入easyui-->
    <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>
    <!--2个样式表文件-->  
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>  
    <link rel="stylesheet" type="text/css" href="themes/icon.css"/>  
    <!--2个js文件 ,要先引入jquery,然后再引入easyui-->
    <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-panel" data-options="fit:true">  
                <ul id="mytree" class="easyui-tree" data-options="animate:true,lines:true"></ul>  

            </div>   -->
            <!--折叠面板-->
            <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: "<iframe src='" +  'http://www.baidu.com' + "' style='width:100%;height:100%'  frameborder='no' border='0' marginwidth='0' marginheight='0' scrolling='yes' />"  
        });  
    }  
    else {  
        $('#mainTabs').tabs('select', tabname);  
    }  
}

最后，直接浏览器访问index.html效果就出来了，如下：
这里写图片描述

liu1007735214

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery easyui基本框架搭建

jquery easyui 下载地址： http://www.jeasyui.com/download/v155.php下载之后，需要引入里面几个文件：&lt;!--2个样式表文件--&gt; &lt;link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/&gt; &lt;...
复制链接

扫一扫