Joomla后台提供了一套通用的UI框架,我们只需要按照规范,就可以开发出和系统界面完全兼容的组件。统一的界面风格对于方便用户操作能起到很大的作用,大大的减少用户的学习成本。同时对于我们开发人员(特别是后端开发人员)能够大大的加快速度。
了解Joomla后台组件的一些通用的UI元素。
列表页面
下面以系统自带的菜单组件为例来说一下。菜单项列表页面截图如下:
上面是一个典型的列表页面。一共分为5个部分。按照标注,说明如下:
其中 1,2,3,4joomla都提供的相应的PHP函数,我们只需要调用对应的方法就可以动态的改变内容,而不用写HTML代码。
详情页面
下面以系统自带的菜单组件为例来说一下。菜单详情页面截图如下:
详情页和列表页面差不多,在详情页一般不显示侧边栏。当详情页内容较多的时候,joomla使用TAB选项卡来进行切换。同样的,joomla对如何输出选项卡也做了php封装,只需要调用PHP代码而不需要写HTML和JS就可以动态的修改TAB选项卡的内容。非常的方便。
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>
评论 (0)