< 返回 7.1 后台的UI元素 - E计划

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>

 

 

 

E计划

第11章:支持多语言
第12章:前台展示组件
第13章:组件开发FAQ
第14章:高级功能
第15章:使用分类
第16章:让组件支持插件
  • 内容提要
  • 留言讨论 (0)
  • 视频教程
Joomla后台提供了一套通用的UI框架,我们只需要按照规范,就可以开发出和系统界面完全兼容的组件。统一的界面风格对于方便用户操作能起到很大的作用,大大的减少用户的学习成本。同时对于我们开发人员(特别是后端开发人员)能够大大的加快速度。

评论 (0)

  • 最新在前
  • 最佳在前

内容待完善

该课程提供视频版,可以观看完整的视频教程