JAT3框架V2.0开发指南-2

1、JA T3 框架V2.0开发指南布局篇JA T3框架1.0就引入了多布局特性，以加入更多的设计灵活性。布局用来定义页面内容的设计排列，但我们的开发者设想一个模板框架使用一个简单的index.php文件，该文件只需完成一般的加载功能，再不管理布局设计、模块位置或脚本调用。通过采用模块化设计，其他文件可以更好的完成这些功能。1、 布局和区块简介概念描述与设计理念n 布局就是一系列文件，这些文件保存着网站前台设计的HTML输出。它们通过加载称为区块的其他文件来完成各种功能。通过为这些区块定义不同的风格和位置，你可以创造无限的布局，用户可以自由选择而享受最好的便利。这些布局由新模板的index.php

2、文件加载。n 区块也是一系列文件，这些文件保存模块位置，执行特定的脚本调用，并生成文章的HTML文件。像我们所知的各种最流行的元素：页眉，页脚，左边栏，右边栏，路径等，这些都被做成单独的文件，而不是在index.php文件中定义长长的HTML元素。n 我们的理念是一个网站使用一个单一的模板，但你的主页、博客、论坛等却可以各自拥有独特的设计。此外，用户也可以选择最方便的布局。n 布局可以在前台通过用户工具面板（UserTools Panel）切换。n 布局可以在后台通过内置编辑器自定义。n 通过修改布局和区块或者自建主题来重写默认的空白核心主题。n 区块类型：l 区块作为独立文件保存特定位置：页

3、脚，主导航，中间栏等；l 区块根据布局设置自动生成：焦点栏（spotlights）、 左边栏（left）、右边栏（right）, 和一些文章模块（content-mass）、分栏模块（column-mass）；l 区块还能管理一些不能在布局配置里定制的一些特殊功能，比如用户工具（user-tools），IE6浏览器警告（IE6warning）；l 区块还能调用动态生成的文章，像系统信息（system messages）、内容组件（content component）等；l 区块还能调用脚本和表单。二、默认布局（实际该图似乎有误，默认布局左右边栏分居左右的）布局的xml文件布局信息这个文件定义默

4、认模板的基本布局，这个模板包含框架支持的所有默认区块，所有区块都有默认的样式、顺序和定位。别的布局可以全部覆盖这些区块设置，而不必改写全部代码。布局区块n ie6 该区块设置管理ie6警告信息；n user-tools 该区块管理前台用户定制工具（控制面板），使用户有更好的使用体验：l color.php 支持主题颜色切换；l cpanel.php 加载前台控制面板（user-tools）所有迷你区块；l direction.php 管理模板的文字排列方向：从左到右还是从右到左；l font.php 管理模板的字体大小；l layouts.php 检测所有的布局，包括核心布局以及自定义的布局，

5、并将其显示与面板；l layout-switcher.php 管理布局的切换；l menu.php 管理菜单系统切换；l profiles.php 管理用户设置的每页的配置设定；l reset.php 重置用户设置，所有设置改为默认设置；l screen.php 管理模板宽度的切换；l themes.php 管理主题切换；l tools-mega.php 加载mega菜单（megamenu）参数；n desktop 为桌面设备指定布局；l content.php 调用内容组件；l css.php 管理页面、模块、文章等标题的字体；l fixheight.php 控制左右边栏与主内容栏保持一定的

6、高度，为内容块（content mass）与边栏块（column mass）确定高度；l footer.php 保存页脚版权、其他菜单、其他广告等的区块位置；l head.php 头文件，调用系统CSS；l header.php 保存页头的网站logo，搜索模块等模块；l mainnav.php 管理模板的主导航菜单；l message.php 控制系统信息：l middle.php 文章、产品、图表等网站内容实际显示的区域，该区块合并了从前的左、右区块（早期版本中是独立文件）；l module.php、modules.php区块生成器，为特殊模块位置创建区块，像广告模块，内容滑块（conte

7、nt sliders）等；l navhelper.php管理路径模块位置（面包屑？）；l spotlight.php 区块生成脚本，用于生成顶部或底部信息焦点模块，要设置多少都可以。3、 变更布局在本节中，我们将探讨如何发展布局变化的方法。1、 改变区块位置如图，左右边栏都布置在左侧（默认在右侧）。边栏左置的xml文件：布局信息这个布局基本继承了默认布局的区块设置，只是改变了左右边栏的位置。详细信息如下：区块布局：left使用的left1的位置（默认布局是right1位置）译者注：默认布局应该也是left1位置，维基原文似未随新版更新；right使用的left2的位置（默认布局是right2位

8、置）。2、 改变区块顺序如图，主导航菜单（mainnav）上移，左右边栏分置主体左右。这种布局的xml文件：布局信息这个例子加载默认布局的所有区块，但对调了header和mainnav的位置，左边栏（left）仍置于left1位置，右边栏（right）置于right2位置，详情如下：区块布局：主导航条（mainnav）被移到最上面；标题模块（header）移到导航条的下面；左边栏（left）使用的left1的位置；右边栏（right）使用的right2的位置。3、 改变区块样式如图，右边栏（right）改为方角样式。相应的xml文件：布局信息这个布局同样加载了默认布局的区块，但改变了右边栏（r

9、ight）的外观样式，默认的圆角变成方角的了。区块布局：右边栏（right）变成了方角样式style="square"，你也可以在template.css文件里自定义区块样式，但modules.php（在html文件夹里）里的代码也需要作相应的修改。注：对于区块名称，下文将采用英文原文，这样更准确，也便于使用。4、 移动设备布局多布局特性同样支持移动设备布局，这些布局有经过优化的自由区块设置，都是依照特定标准开发的。在模板管理面板的“配置”选项卡，你可以为每个移动设备类型分配这些布局。1、 手持设备布局（觉得图文不太相符）特殊的区块布局覆盖了默认布局，经过优化以支持快速加载

10、：n footer 保存网站的版权信息；n head 加载脚本；n header 保存模板logo；n main 主内容区；n mainnav 特别设计的主导航栏；n Toolbar使用户可以选择显示或是隐藏主导航栏。当检测到如下设备时，框架将使用这个手持设备布局：n Windows Mobile设备n 安卓（Android）移动设备n 黑莓（Blackberry）移动设备n Palm移动设备n 其他移动设备2、 iPhone布局特殊的区块布局覆盖了默认布局，这是依据iPhone标准设计的：n footer 保存网站的版权信息；n head 加载脚本；n header 保存模板logo；n m

11、ain 主内容区；n mainnav 特别设计的主导航栏；n menu生成iPhone特定的导航系统。5、 区块属性与参数JA T3框架2.0配备了高级布局特性。布局中的区块可以通过一系列参数和设置来操纵，以便容易的改变HTML呈现。1、 区块一般参数1）区块名称（Block name）语法：<block name="top" .>用途：这个属性是区块的标识符，因为总有一些区块类型相同，框架需要这个标识符来辨识它们。这个标识符涉及到布局内的位置安排。示例：<block name="left1">left</block>

12、这个设定是将left置于主区左侧（left1位置）。2）区块类型（Block type）语法： <block name="header" type="header" .>用途：这个参数设置区块的行为和功能，有几个文件管理区块的行为：n head.php n header.php n middle.php n footer.php 在“默认布局”小节中可以了解到区块功能的更多信息，您也将了解到并非所有区块类型都可配置，有些甚至不显示在布局文件中，因为需要它们支持特定的模板功能。3）区块样式（Block style）语法： <block n

13、ame="top" style="JAxhtml" .>用途：这个参数为一个区块内的所有模块设置模块样式，这些样式定义在modules.php中，modules.php文件的路径是在文件夹your_site/plugins/system/jat3/base-themes/default/html中，这样Joomla！就可以理解如何显示模块的内容。样式列表：n no style无样式，默认区块设置没有定义样式，只提供模块类后缀的支持；n raw 为模块提供一个空白的设计，没有块（div），没有类（classes）；n xhtml主要用于宏区块，如：h

14、eader，middle，footer；n JAxhtml为模块提供一个简洁的设计（常见的直角边框）；n JArounded为模块提供圆角边框支持（圆角边框）。在T3框架FAQs中可以了解如何自定义这些样式，为一个宏区块（top，middle，footer）设置样式，则该宏区块中所有区块将使用这一样式。2、 生成附加块（div）1）区块标高（Block markup）语法：<block name="left" name="top" markup="2" .>用途：这是一个新参数，可以在分栏left或right内生成一些附加

15、的块标签（div tags），理念是为设计者提供更多的灵活性。这个参数的值：markup="1"默认值，无效果；markup="2"高级标记，将在列上方添加一个块l（l指左）（div class="l"），在列的下方添加一个块r（r指右）（div class="r"），示例如下：markup="3"复合标记，将在列上方添加两个块：tl（tl指左上）（div class="tl"）和（tr指右上）（div class="tr"），在列下方添加两个块：bl（b

16、l指左下）（div class="bl"）和（br指右下）（div class="br"），还将添加两个middle块，示例如下：2）区块深度（Block inner）语法：<block name="right" block-inner="3" .>用途：此参数将添加多个块标签（div tags）并封装于区块（block）内部，这个值实际上决定了块（div）结构的深度，附加块标签将会有class="block-inner1"，class="block-inner2"

17、;，. class="block-innerX"。如下图所示：3）主体深度（Main inner）语法：<block name="right" main-inner="2" .>用途：此参数将添加多个块标签（div tags）并封装于区块（block）内部，这个值实际上决定了块（div）结构的深度，附加块标签将会有class="main-inner1"，class="main-inner2"，. class="main-innerX"。如下图所示：4）封装深度（W

18、rap inner）语法：<block name="right" wrap-inner="3" .>用途：此参数将添加多个块标签（div tags）并封装于区块（block）内部，这个值实际上决定了块（div）结构的深度，附加块标签将会有class="wrap-inner1"，class="wrap-inner2"，. class="wrap-innerX"。如下图所示：3、 删除块（div）1）No wrap语法：<block name="header"

19、no-wrap="1" .>用途：删除带有（class="wrap"）的块，这些块为填满整个模板宽度的宏区块（header，mainnav，middle，footer等）包装区块。2）No main语法： <block name="header" no-main="1" .>用途：删除带有（class="wrap"）的块，这些块为填满整个模板宽度的宏区块（header，mainnav，middle，footer等）包装区块。4、 middle宽度1）分栏一般宽度语法：<b

20、lock name="middle" type="middle" colwidth="20" .>用途：这个参数设置middle宏区块中left，component body和right 三个区块的默认列宽。left和right块各使用20的列宽，component body将使用余下的60。2）定制分栏宽度语法：<block name="right" width="25" .>用途：这个设置将覆盖默认的20%列宽（我的理解是，middle宏区块中的区块，默认宽度是20%，三栏

21、划分，则左右各20%，主体60%，若增加分栏，仍将是20%列宽，于是主体会被“挤占”掉20%），调高这个参数，将增加left或right区块的宽度，而减少主体的宽度。5、 中央位置（Middle Positions）1）标准分栏用途：middle.php宏区块可以为left，content-body (主显示区)和right区块各呈现一个分栏， 也可以为这些区块呈现第二个分栏。每个分栏都可以单独为任一布局设置特别的样式。变体：n left + body + right<blocks name="middle" colwidth="20" fixhe

22、ight="1"><block name="left1/left2">left</block><block name="right1/right2">right</block></blocks>n left + right + body<blocks name="middle" colwidth="20" fixheight="1"><block name="left1"&

23、gt;left</block><block name="left2">right</block></blocks>n body + left + right<blocks name="middle" colwidth="20" fixheight="1"><block name="right1">left</block><block name="right2">right</

24、block></blocks>其他变体：n right + left + body <block name="left2">left</block><block name="left1">right</block> n body + right + left <block name="right2">left</block><block name="right1">right</block> n lef

25、t + body + right <block name="left2">left</block><block name="right2">right</block> 2）启用mass positions（一些默认未启用的位置）启用后，可以使用附加模块位置：content-mass-top、content-mass-bottom、left-mass-top、left-mass-bottom、right-mass-top、right-mass-bottom。任何时候都可以启用content-mass位置，但c

26、olumn-mass (left-mass-top，right-mass-bottom等) 只有在left和right区块并入一个分栏时才能启用。变体：n left + body加入所有附加位置 <blocks name="middle" colwidth="20" fixheight="1"><block name="left-mass-top">left-mass-top</block><block name="content-mass-top"&g

27、t;content-mass-top</block><block name="left1">left</block><block name="left2">right</block><block name="content-mass-bottom">content-mass-bottom</block><block name="left-mass-bottom">left-mass-bottom</block>

28、;</blocks>n body + right加入顶部附加位置<blocks name="middle" colwidth="20" fixheight="1"><block name="right-mass-top">right-mass-top</block><block name="content-mass-top">content-mass-top</block><block name="right

29、1">left</block><block name="right2">right</block></blocks>n body + right加入多样附加位置<blocks name="middle" colwidth="20" fixheight="1"><block name="right-mass-top">right-mass-top</block><block name=&quo

30、t;right1">left</block><block name="right2">right</block><block name="content-mass-bottom">content-mass-bottom</block></blocks>3） 插入分栏（Inset Columns）语法：<block name="inset1">left</block>用途：将main-body与left和/或right区块编组

31、而构成一个拥有特殊块结构与样式的分栏。值：n inset1main-body与left/right区块编组，并设置left/left区块位置于main-body的左侧；n inset2main-body与left/right区块编组，并设置left/left区块位置于main-body的右侧；变体：n (left + body) + right<block name="inset1">left</block><block name="right1">right</block>n left + (body + right)<block name="left1">left</block><block name="inset2&quo