Joomla后台提供了一套通用的UI框架，我们只需要按照规范，就可以开发出和系统界面完全兼容的组件。统一的界面风格对于方便用户操作能起到很大的作用，大大的减少用户的学习成本。同时对于我们开发人员（特别是后端开发人员）能够大大的加快速度。

1，本节目标

了解Joomla后台组件的一些通用的UI元素。

2，通用UI元素

列表页面

下面以系统自带的菜单组件为例来说一下。菜单项列表页面截图如下：

上面是一个典型的列表页面。一共分为5个部分。按照标注，说明如下：

• 1，标题栏 。用来说明当前页面的功能是什么。支持带一个图标
• 2，工具栏。 以按钮的形式说明当前页面提供什么功能。每一个按钮都可以带一个图标
• 3，侧边栏。这个侧边栏是可以伸缩的。在这里可以进行组件的子菜单的切换
• 4，搜索栏。实现搜索过滤功能
• 5，记录列表。展示一些记录的列表。试用table元素生成的列表。

其中 1,2,3,4joomla都提供的相应的PHP函数，我们只需要调用对应的方法就可以动态的改变内容，而不用写HTML代码。

详情页面

下面以系统自带的菜单组件为例来说一下。菜单详情页面截图如下：

详情页和列表页面差不多，在详情页一般不显示侧边栏。当详情页内容较多的时候，joomla使用TAB选项卡来进行切换。同样的，joomla对如何输出选项卡也做了php封装，只需要调用PHP代码而不需要写HTML和JS就可以动态的修改TAB选项卡的内容。非常的方便。

3，UI框架

Joomla的UI框架使用的是JUI框架，这个框架可以算作是bootstarp的子集，大部分的样式和用法和bootstarp类似。支持栅格系统，与bootstarp不同的是，JUI中的栅格类使用的是span.

在bootstarp中我们定义两个平分的行内DIV

<div class="row">
  <div class="col-md-6">A1</div>
  <div class="col-md-6">A2</div>
</div>

在Joomla中的代码为

<div class="row">
  <div class="span6">A1</div>
  <div class="span6">A1</div>
</div>