easyui布局实例

2017年12月20日 11:26 | 3649次浏览

一、EasyUI布局介绍

  easyUI布局容器包括东、西、南、北、中五个区域,其中中心面板是必须的,而东、西、南、北这四个面板是可选的,如果布局里面不需要东、西、南、北这四个面板,那么可以把相应的div删掉,另外,如果需要创建复杂的easyUI布局,那么可以通过嵌套东、西、南、北、中五个面板来实现。下面简单演示一下EasyUI布局。

1.1、通过div创建easyUI布局

  easyUI的layout可以通过div来创建,使用div来创建easyUI的layout,那么div的html代码结构必须要如下的结构:

<!--给div指定class属性指定easy的easyui-layout样式,这样就可以通过div创建easyui的layout -->
      <div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
          <!-- 布局中如果不需要north这个面板,那么可以删掉这个div --> 
        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
        <!-- 布局中如果不需要south这个面板,那么可以删掉这个div -->   
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
        <!-- 布局中如果不需要east这个面板,那么可以删掉这个div -->   
        <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
        <!-- 布局中如果不需要west这个面板,那么可以删掉这个div -->  
        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
        <!--north,south, east,west这几个面板都可以删掉,唯有这个center面板一定不能删掉,否则使用easyui-layout就会出错 --> 
        <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>  
     </div>

看看完整的范例:

<!DOCTYPE html>
<html>
  <head>
    <title>通过div创建EasyUI的layout布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!-- 引入JQuery -->
      <script type="text/javascript" src="jquery-easyui-1.5/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
      <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 -->
      <script type="text/javascript" src="jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>
      <!-- 引入EasyUI的图标样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.5/themes/icon.css" type="text/css"/>
  </head>
  
  <body>
      <!--给div指定class属性指定easy的easyui-layout样式,这样就可以通过div创建easyui的layout -->
      <div class="easyui-layout" style="width:600px;height:400px;margin:0 auto;">
          <!-- 布局中如果不需要north这个面板,那么可以删掉这个div --> 
        <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
        <!-- 布局中如果不需要south这个面板,那么可以删掉这个div -->   
        <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
        <!-- 布局中如果不需要east这个面板,那么可以删掉这个div -->   
        <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
        <!-- 布局中如果不需要west这个面板,那么可以删掉这个div -->  
        <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
        <!--north,south, east,west这几个面板都可以删掉,唯有这个center面板一定不能删掉,否则使用easyui-layout就会出错 --> 
        <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>  
     </div>  
  </body>
</html>

运行结果如下图所示:

1.2、通过body创建easyUI布局

<!DOCTYPE html>
<html>
  <head>
    <title>EasyUI布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!-- 引入JQuery -->
      <script type="text/javascript" src="jquery-easyui-1.5/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
      <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 -->
      <script type="text/javascript" src="jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>
      <!-- 引入EasyUI的图标样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.5/themes/icon.css" type="text/css"/>
  </head>
  <!--给body指定class属性指定easy的easyui-layout样式,这样就可以 使用body创建easyui的layout -->
  <body class="easyui-layout">
      <!-- 布局中如果不需要north这个面板,那么可以删掉这个div --> 
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
    <!-- 布局中如果不需要south这个面板,那么可以删掉这个div -->   
    <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
    <!-- 布局中如果不需要east这个面板,那么可以删掉这个div -->   
    <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
    <!-- 布局中如果不需要west这个面板,那么可以删掉这个div -->  
    <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
    <!--north,south, east,west这几个面板都可以删掉,唯有这个center面板一定不能删掉,否则使用easyui-layout就会出错 --> 
    <div data-options="region:'center',title:'center title',href:'center.html'" style="padding:5px;"></div>  
 </body>  
  
</html>

运行结果如下所示:

1.3、使用嵌套easyui-layout来创建复杂布局

<!DOCTYPE html>
<html>
  <head>
    <title>EasyUI布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!-- 引入JQuery -->
      <script type="text/javascript" src="jquery-easyui-1.5/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
      <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 -->
      <script type="text/javascript" src="jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>
      <!-- 引入EasyUI的图标样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.5/themes/icon.css" type="text/css"/>
  </head>
  <!--给body指定class属性指定easy的easyui-layout样式,这样就可以 使用body创建easyui的layout -->
  <body class="easyui-layout">  
    <div data-options="region:'north',title:'North Title'" style="height:100px"></div>
    <!-- 布局中如果不需要west这个面板,那么可以删掉这个div -->  
    <div data-options="region:'west',title:'West'" style="width:100px;"></div>
    <div data-options="region:'center'">
        <!-- 嵌套布局 --> 
        <div class="easyui-layout" data-options="fit:true">  
           <!-- 布局中如果不需要north这个面板,那么可以删掉这个div --> 
            <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>
            <!-- 布局中如果不需要south这个面板,那么可以删掉这个div -->   
            <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> 
            <!-- 布局中如果不需要east这个面板,那么可以删掉这个div -->   
            <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
            <!-- 布局中如果不需要west这个面板,那么可以删掉这个div -->  
            <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
            <!--north,south, east,west这几个面板都可以删掉,唯有这个center面板一定不能删掉,否则使用easyui-layout就会出错 --> 
            <div data-options="region:'center',title:'center title'" style="padding:5px;"></div>  
        </div>  
    </div>  
  </body>  
</html>

运行结果如下所示:

1.4、通过Javascript创建easyUI布局

<!DOCTYPE html>
<html>
  <head>
    <title>通过JavaScript来创建EasyUI布局</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!-- 引入JQuery -->
      <script type="text/javascript" src="jquery-easyui-1.5/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
      <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 -->
      <script type="text/javascript" src="jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>
      <!-- 引入EasyUI的图标样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.5/themes/icon.css" type="text/css"/>
      <script type="text/javascript">
          $(function(){
              //画面加载完成之后就调用layout()方法将body变成easy的layout
              $('#easyUILayoutBody').layout();   
          });
      </script>
  </head>
  <!--给body指定class属性指定easy的easyui-layout样式,这样就可以 使用body创建easyui的layout -->
  <body id="easyUILayoutBody">  
    <div data-options="region:'north',title:'North Title'" style="height:100px"></div>
    <!-- 布局中如果不需要west这个面板,那么可以删掉这个div -->  
    <div data-options="region:'west',title:'West'" style="width:100px;"></div>
    <div data-options="region:'center',title:'center'"></div>  
  </body>  
</html>

 运行结果如下:


小说《我是全球混乱的源头》

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程


上一篇:SQL WHERE语句 下一篇:SQL AND OR运算符
^