12. 利用布局（layout）控件实现页面布局。

在EasyUI中，布局控件（layout）将屏幕分成五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center），每个区域都是一个容器，用于包含其他控件。中间区域面板（region: center）是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局可以嵌套，嵌套在里层的布局也分为5个区域，因此利用布局可建立复杂的页面排版。当布局的选项fit设置为 true 时，该布局的尺寸将与它的父容器相适应。因此，当在<body>标签上创建布局时，它将自动最大化到整个页面的全部尺寸。

本例程序运行界面如图2-9所示，具体布局过程与方法如下。

①在<body>标签中创建一个布局，在该布局中创建4个区域面板（其中东区缺省）。

<body id='main' class=“easyui-layout" data-options="fit:true" style="margin: 1px 1px 1px 1px;">
<div id='top' class='EasyUI-panel' data-options="region:'north'" style="overflow:hidden;
background-color: #E0ECFF; height:30px; padding: 1px 1px 1px 10px;"></div>
<div id='bottom' class='EasyUI-panel' data-options="region:'south'" style="height:60px;
overflow:auto;"></div>
<div id='left' class='EasyUI-panel' data-options="region:'west', split:true" style="overflow:auto;
width:250px;"></div>
<div id='middle' class='EasyUI-panel' data-options="region:'center', split:true"
style="overflow:auto;"></div>
</div>

css html jquery桌面模板 jquery页面布局_数据结构

图2-9  利用layout实现屏幕区域分割与布局

②在中间区域（id='middle'）中再创建另一个布局middlelayout，并将该区域分成左右两个部分：middletop和middlebottom。

<div id='middle' class='EasyUI-panel' data-options="region:'center', split:true" style="overflow:auto;">
                   <div id="middlelayout" class=“easyui-layout" data-options="fit:true">
                            <div id='middletop' class='EasyUI-panel' data-options="region:'north',split:true,
border:false" style="overflow:auto;height:300px;"></div>
                            <div id='middlebottom' class='EasyUI-panel' data-options="region:'center', split:true,
                              border:false" style="overflow:auto;"></div>
                   </div>
          </div>

③在左侧区域（id='left'）中添加一个EasyUI-accordion类型的（手风琴）可折叠控件，在该可折叠容器中添加3个栏目。

<div id='left' class='EasyUI-panel' data-options="region:'west', split:true"
tyle="overflow:auto; width:250px;">
<div class=“easyui-accordion" data-options="fit:true, border:false">
<div id='content1' title="C程序设计简介"></div>
                            <div id='content2' title="数据库原理与应用简介" data-options="selected:true"></div>
                            <div id='content3' title="数据结构简介"></div>
</div>
</div>

④在javascript中编写程序，在bottom区域实时显示当前系统时间，第一个手风琴可折叠面板中加载一个服务器端的文本文件，在第2和第3个可折叠面板中添加HTML文字描述。

$(document).ready(function() {
     setInterval(function() {     //实时显示系统当前时间
         var now = (new Date()).toLocaleString();
         $('#bottom').text("系统当前时间："+now);
     },1000);
//提取服务器的文本文件   
$('#content1').load('mybase/c-programming.txt');

//在手风琴控件中添加文字

$('#content2').append("数据库技术是计算机科学的一个重要组成部分，基于数据库技术的计算机应用已成为当今计算机科学与技术应用的主流，是企业开展信息化和电子商务的技术基础。数据库原理、技术与应用是掌握计算机应用开发技术的基础性课程，也是一门实用性和实战性很强的课程。");

$('#content3').html("《数据结构》的前半部分从抽象数据类型的角度讨论各种基本类型的数据结构及其应用；后半部分主要讨论查找和排序的各种实现方法及其综合分析比较。");             

⑤编写程序，在右上角区域（middletop）使用<object>标签显示一个PDF文件（test1.pdf），设置其类型为"application/pdf"。

var str='<object data="mybase/test1.pdf" type="application/pdf" width="100%" height="100%" >\n';
str+='</object>';                           //swf ,,application/x-shockwave-flash, x-mplayer2
$('#middletop').append($(str));

⑥编写程序，在右下角区域（middlebottom）使用<audio>标签添加一个mp3文件播放器，可以同时选择播放两个mp3文件。只有当出现controls属性时，audio控件及其进度控制条才会在屏幕上显示出现。也可以添加按钮，用程序代码控制mp3的播放过程。

str='<p> 新概念英语第4册第1课</p>'+
'<audio id="main_audio1" src="mybase/lesson4-01.mp3" controls="controls" autoplay="autoplay" preload="auto" loop="loop" '+
'style="position:absolute; top:5px;left:140px; width:400px;"></audio>'+
'<p> 新概念英语第4册第2课</p>'+
'<audio id="main_audio2" src="mybase/lesson4-02.mp3" controls="controls" '+
'style="position:absolute; top:40px;left:140px; width:400px;"></audio>'+
'<p><button οnclick="audioPlay()">播放/暂停</button>'+
'<button οnclick="goToFirst()">从头播放</button></p>';
          $('#middlebottom').append($(str));

相关知识：

1． <audio> 标签是 HTML 5 的新标签。autoplay属性表示音频在就绪后马上播放，controls属性向用户显示控件（比如播放按钮）。Loop属性表示音频结束时重新开始播放。Src指定要播放的音频的URL。

2．可通过append和html方法添加HTML语句。

3．在使用<object>标签时，flash文件（.swf）的类型设置为“application/x-shockwave-flash”。