如何使用easyUI创建选项卡

选项卡是指在一个窗口中可以显示多个页面，每个页面有不同的内容，由这样一个个页面组成的就是选项卡。不仅jQuery代码可以创建出选项卡工具，easyUI也可以，而且代码更加简单易懂，现在我们来使用easyUI代码创建选项卡。

操作方法

（01）新建文档双击桌面上的Dreamweaver图标，打开软件，然后在菜单栏中点击【文件】--【新建】--【HTML】，新建一张HTML页面。

（02）重命名新建的文档系统会给出默认的名称，但是为了见名知意，我们通常是自己命名，快捷键ctrl+s，会弹出一个保存窗口，文件名输入tabs，保存类型为All Document类型，然后点击保存按钮即可。

（03）导入4个js文件首先要将【easyUI文件夹】复制粘贴到站点中，然后在easyUI文件夹中找到4个js文件拉到head头部，如下四个文件：<script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="easyui/"></script><link rel="stylesheet" type="text/css" href="easyui/themes/"/><link rel="stylesheet" type="text/css" href="easyui/themes/default/"/>

（04）选项卡代码然后在body里面编写如下的选项卡代码：<div id="tt" class="easyui-tabs" style="width:500px;height:250px;"> <div title="Tab1" style="padding:20px;display:none;"> tab1 </div> <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;"> tab2 </div> <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;"> tab3 </div> </div>

（05）启动wampserver服务器然后双击桌面上的wampserver图标，启动wampserver服务器，当图标变成绿色说明启动完成。

（06）预览效果点击Dreamweaver的地球图标，选择【在360se浏览】即可以在360浏览器中预览效果。

（07）在浏览器中的效果如下图所示，要记得删除代码中的display:none，否则选项卡将不能切换。

（08）代码解析（1）class="easyui-tabs"说明是tabs选项卡，class是类；（2）style="width:500px;height:250px;"选项卡的高度和宽度，可以调节与删除；（3）data-options="closable:true"说明选项卡是可关闭的；（3）iconCls:'icon-reload'选项卡的头部图标；

特别提示

如果是咋手册中复制的代码，要记得删掉display：none代码，否则将无法实现选项卡的切换功能。