EasyUI一些布局（基本介绍）以及运行结果

最新推荐文章于 2022-05-10 13:02:50 发布

2896405089

最新推荐文章于 2022-05-10 13:02:50 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/qq_39469809/article/details/78367823

版权

本文介绍了EasyUI布局的使用，包括东、西、南、北、中五个区域，强调中心面板的必要性和可选区域的灵活性。通过HTML和JavaScript展示了如何创建和操作EasyUI布局，并给出了具体代码示例，包括通过div和JavaScript创建布局，以及添加和管理选项卡的操作。同时，文章还涉及到了EasyUI中按钮、文本框、日期选择器和下拉框等组件的使用。

摘要由CSDN通过智能技术生成

一、EasyUI布局介绍

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

1、通过div创建easyUI布局

easyUI的layout可以通过div来创建，使用div来创建easyUI的layout布局，那么div的html代码结构如下：

      <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.4.1/jquery.min.js"></script>
      <!-- 引入EasyUI -->
      <script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
       <!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
     <script type="text/javascript" src="jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
      <!-- 引入EasyUI的样式文件-->
      <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
       <!-- 引入EasyUI的图标样式文件-->
    <link rel="stylesheet" href="jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
  </head>
  <body>
      <!--给div指定class属性指定easy的easyui-layout样式，这样就可以通过div创建easyui的layout -->
      <div class="easyui-layout