Joomla模板制作教程:模块
2010-06-22 14:36
363 查看
当一个模块被 index.php 文件调用, 它有几种显示的选择,语法是下面这样:
mosLoadModules(’$position_name’[, $style] )
$style 参数选择可以是 0, 1, -1, -2 或者 -3.
0 = (默认) 模块用一栏显示. 下面是一个输出的例子:
<table cellpadding=”0″ cellspacing=”0″ class=”moduletable”>
<tr>
<th valign=”top”>Module Title</th>
</tr>
<tr>
<td>Module output</td>
</tr>
</table>
1 = 模块居中显示. 每个模块被显示在一张表的单元格内部. 下面是输出的例子:
<!– Module wrapper –>
<table cellspacing=”1″ cellpadding=”0″ border=”0″ width=”100%”>
<tr>
<td align=”top”> <table cellpadding=”0″ cellspacing=”0″ class=”moduletable”>
<tr>
<th valign=”top”>Module Title</th>
</tr>
<tr>
<td> Module output</td>
</tr>
</table>
</td>
<td align=”top”> <!– …the next module… –>
</td>
</tr>
</table>
-1 = 行方式输出且无标题. 下面是输出的例子:
Module Output
-2 = 用CSS格式输出被封装在 <div>.标签内部 下面是输出的例子:
<div class=”moduletable”>
<h3>Module Title</h3>
Module output
</div>
-3 = 模块用一种允许的格式显示, 比如, 显示圆弧边框. 当这种 $style 被使用, <div> 将取代 moduletable 或者 module. 下面是输出的例子:
<div class=”module”>
<div> <div> <div>
<h3>Module Title</h3>
Module output
</div> </div> </div>
</div>
我们可以看到使用参数(-1, -2 and -3) 可以非常容易的对样式进行控制. 作者不推荐使用参数 0 (default) 或者 1 除非在你需要的时候.
为了设计我们的模板, 我们将使用参数 $style 为 “-2″ 设置我们所有的模块:
<body>
<div id=”wrap”>
<div id=”header”>
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
</div>
<div id=”main-body”>
<div id=”content”>
<div class=”inside”>
<?php mosLoadModules(’top’,-2);?>
<?php mosMainBody(); ?>
</div></div>
<div id=”sidebar”>
<div class=”inside”>
<?php mosLoadModules(’left’,-2);?>
</div></div>
</div> <!–end of main-body–>
<div id=”sidebar-2″>
<div class=”inside”>
<?php mosLoadModules(’right’,-2);?>
</div></div>
<div id=”footer”>
<?php include_once( $mosConfig_absolute_path .’/includes/footer.php’ ); ?>
</div>
</div> <!–end of wrap–>
</body>
请注意下面这些元素的使用我们不能用模块调用的方式,因为它们不属于模块.
* <?php echo $mosConfig_sitename; ?>
* <?php mospathway() ?>
* <?php mosMainBody(); ?>
* <?php include_once( $mosConfig_absolute_path .’/includes/footer.php’ ); ?>
用CSS输出模块之所以受到欢迎是因为我们不再使用TABLE了. 我们做一些简单的样式定义就可以得到下面的输出:
2nd Version after styles added
首先我们使用 <H1> 标签来定义站点标题. 这比较符合语意相关和SEO的宗旨.
<h1><?php echo $mosConfig_sitename; ?></h1>
我们也给头部模块加入边框,背景等CSS样式.
现在我们的 customize.css 文件变成这样:
/*Compass Design Customize.css file */ * {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address{
margin:0.5em 0;
}
ul{
margin-left:2em;
}
fieldset{
padding:.5em;
}
body{
font-size:76.1%;
font-family:Verdana,Arial,Helvetica,sans-serif;
line-height:1.3em;
margin:1em 0;
}
#wrap{
border:1px solid #999;
background: url(../images/threecol-r.gif) repeat-y 75% 0;
height:100% !Important;
height:1%;
}
#wrap-inner {
background: url(../images/threecol-l.gif) repeat-y 25.125% 0;
height:100% !Important;
height:1%;
}
#header{
border-bottom: 1px solid #999;
padding:10px;
}
#footer{
border-top: 1px solid #999;
padding:5px;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
line-height:1.7em;
}
h2,.contentheading{
font-size:1.5em;
line-height:1.5em;
}
h3{
font-size:1.3em;
line-height:1.3em;
}
h4{
font-size:1.2em;
line-height:1.2em;
}
h5{
font-size:1.1em;
line-height:1.1em;
}
h6{
font-size:1em;
line-height:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable{
margin-bottom:1em;
padding:0 10px;
/*padding for inside text*/ border:1px #CCC solid;
}
.moduletable h3{
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px;
/*negative padding to pull h3 back out from .moduletable padding*/ }
mosLoadModules(’$position_name’[, $style] )
$style 参数选择可以是 0, 1, -1, -2 或者 -3.
0 = (默认) 模块用一栏显示. 下面是一个输出的例子:
<table cellpadding=”0″ cellspacing=”0″ class=”moduletable”>
<tr>
<th valign=”top”>Module Title</th>
</tr>
<tr>
<td>Module output</td>
</tr>
</table>
1 = 模块居中显示. 每个模块被显示在一张表的单元格内部. 下面是输出的例子:
<!– Module wrapper –>
<table cellspacing=”1″ cellpadding=”0″ border=”0″ width=”100%”>
<tr>
<td align=”top”> <table cellpadding=”0″ cellspacing=”0″ class=”moduletable”>
<tr>
<th valign=”top”>Module Title</th>
</tr>
<tr>
<td> Module output</td>
</tr>
</table>
</td>
<td align=”top”> <!– …the next module… –>
</td>
</tr>
</table>
-1 = 行方式输出且无标题. 下面是输出的例子:
Module Output
-2 = 用CSS格式输出被封装在 <div>.标签内部 下面是输出的例子:
<div class=”moduletable”>
<h3>Module Title</h3>
Module output
</div>
-3 = 模块用一种允许的格式显示, 比如, 显示圆弧边框. 当这种 $style 被使用, <div> 将取代 moduletable 或者 module. 下面是输出的例子:
<div class=”module”>
<div> <div> <div>
<h3>Module Title</h3>
Module output
</div> </div> </div>
</div>
我们可以看到使用参数(-1, -2 and -3) 可以非常容易的对样式进行控制. 作者不推荐使用参数 0 (default) 或者 1 除非在你需要的时候.
为了设计我们的模板, 我们将使用参数 $style 为 “-2″ 设置我们所有的模块:
<body>
<div id=”wrap”>
<div id=”header”>
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
</div>
<div id=”main-body”>
<div id=”content”>
<div class=”inside”>
<?php mosLoadModules(’top’,-2);?>
<?php mosMainBody(); ?>
</div></div>
<div id=”sidebar”>
<div class=”inside”>
<?php mosLoadModules(’left’,-2);?>
</div></div>
</div> <!–end of main-body–>
<div id=”sidebar-2″>
<div class=”inside”>
<?php mosLoadModules(’right’,-2);?>
</div></div>
<div id=”footer”>
<?php include_once( $mosConfig_absolute_path .’/includes/footer.php’ ); ?>
</div>
</div> <!–end of wrap–>
</body>
请注意下面这些元素的使用我们不能用模块调用的方式,因为它们不属于模块.
* <?php echo $mosConfig_sitename; ?>
* <?php mospathway() ?>
* <?php mosMainBody(); ?>
* <?php include_once( $mosConfig_absolute_path .’/includes/footer.php’ ); ?>
用CSS输出模块之所以受到欢迎是因为我们不再使用TABLE了. 我们做一些简单的样式定义就可以得到下面的输出:
2nd Version after styles added
首先我们使用 <H1> 标签来定义站点标题. 这比较符合语意相关和SEO的宗旨.
<h1><?php echo $mosConfig_sitename; ?></h1>
我们也给头部模块加入边框,背景等CSS样式.
现在我们的 customize.css 文件变成这样:
/*Compass Design Customize.css file */ * {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address{
margin:0.5em 0;
}
ul{
margin-left:2em;
}
fieldset{
padding:.5em;
}
body{
font-size:76.1%;
font-family:Verdana,Arial,Helvetica,sans-serif;
line-height:1.3em;
margin:1em 0;
}
#wrap{
border:1px solid #999;
background: url(../images/threecol-r.gif) repeat-y 75% 0;
height:100% !Important;
height:1%;
}
#wrap-inner {
background: url(../images/threecol-l.gif) repeat-y 25.125% 0;
height:100% !Important;
height:1%;
}
#header{
border-bottom: 1px solid #999;
padding:10px;
}
#footer{
border-top: 1px solid #999;
padding:5px;
}
a{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
h1,.componentheading{
font-size:1.7em;
line-height:1.7em;
}
h2,.contentheading{
font-size:1.5em;
line-height:1.5em;
}
h3{
font-size:1.3em;
line-height:1.3em;
}
h4{
font-size:1.2em;
line-height:1.2em;
}
h5{
font-size:1.1em;
line-height:1.1em;
}
h6{
font-size:1em;
line-height:1em;
font-weight:bold;
}
#footer,.small,.createdate,.modifydate,.mosimage_caption{
font:0.8em Arial,Helvetica,sans-serif;
color:#999;
}
.moduletable{
margin-bottom:1em;
padding:0 10px;
/*padding for inside text*/ border:1px #CCC solid;
}
.moduletable h3{
background:#666;
color:#fff;
padding:0.25em 0;
text-align:center;
font-size:1.1em;
margin:0 -10px 0.5em -10px;
/*negative padding to pull h3 back out from .moduletable padding*/ }
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Joomla!扩展制作实例教程-模板展示组件-增加后台上传图片功能 【转】
- Joomla模板制作教程:joomla模板组成
- Joomla模板制作教程（转）
- Joomla模板制作教程：使用CSS布局
- Joomla模板制作教程
- Joomla模板制作教程:通过Joomla!模板你能做什么
- Joomla模板制作教程:菜单
- 开源博客QBlog开发者视频教程:博客皮肤模板制作指南-模板之拿来主义(六)
- ASP.NET开源博客QBlog模板皮肤制作教程索引贴
- Magento 新闻模块开发教程 (八) 建立模板文件
- PHPCMS2008模板教程—官方默认模板完全解读及制作思路
- phpcms v9模板制作教程（二）
- 火车头采集器教程之实战视频（二）——CMS（DEDE）在线发布模块的制作
- WordPress主题制作教程7：包含指定模块文件
- ECshop新手入门模板制作教程[转载]
- [转]制作LBS模板教程
- ThinkPHP入门教程（一）：模块、方法与模板
- 一整套WordPress模板制作的教程
- dedecms 制作模板中使用的全局标记图文教程