官方系列教材 - Joomla模块开发教程

介绍在如何从0开发一个模块

上一节已经成功的实现了数据的输出,但距离我们想要的滚动效果还差挺远的,在这一节,我们将介绍如何引入js,css文件,来完成最终的效果。

tmpl/default.php文件

这个文件是模块的输出模板文件,在入口点文件中已经完成了数据的注入,因此,下一步的所有操作就是在这个default.php文件中完成。实际上现在和写简单的HTML页面已经没有什么区别了,和Joomla的关系已经不是很大了。tmpl/default.php文件代码如下:

<?php
defined('_JEXEC') or die;

//STEP 1:引入需要的CSS,js资源文件
$doc = \JFactory::getDocument();
$jsPath = "modules/mod_zmaxslidernews/tmpl/asset/slider.js";
$doc->addScript($jsPath); //加载js文件

$cssPath = "modules/mod_zmaxslidernews/tmpl/asset/slidernews.css";
$doc->addStyleSheet($cssPath); //加载css文件
?>
<div class="box">
	<div class="box-1">
		<ul>
			<?php foreach ($items as $item) : ?>
			<?php 
				$images = json_decode($item->images);
				$item->img = $images->image_intro;
				$item->link = JRoute::_("index.php?option=com_content&view=article&id=".$item->id);
			?>
			<li>
				<a href="/<?php echo $item->link;?>">
					<img src="/<?php echo $item->img;?>"></img>
					<h2><?php echo $item->title;?></h2>
				</a>
			</li>
			<?php endforeach;?>
		</ul>
	</div>
	<div class="box-2">
		<ul></ul>
	</div>
	<div class="box-3">
		<span class="prev"> < </span>
		<span class="next"> > </span>
	</div>
</div> 

关于以上代码的说明

1,如何加载需要的js,css文件

joomla中是通过JDocument对象来管理页面的css.js的。通过工厂方法来获得$doc对象,然后调用addScript方法来引入js,调用addStyleSheet方法来引入css。理论上,css,js的文件存放的位置不做限制,只要输入正确的路径即可。

2,如何获得图片,以及文章的详情链接

在joomla的文章表中有一个images字段,这个字段存储了文章编辑页面设置的图片信息,是一个json。因此,上面我们首先解码,然后直接去数据。

文章的详情页链接是固定的。 JRoute::_("index.php?option=com_content&view=article&id=".$item->id); 我们只需要传人文章的ID即可。

3,如何实现图片滚动效果

 这个已经不属于joomla的讨论范畴了,现在你已经知道如何加载css和js了,这也就意味着你可以使用所有已经写好的js动画效果插件,按照的普通的网页来使用就可以了。完全和joomla框架没有任何关系了。

发布模块,测试效果

将以上代码重新打包成一个zip文件,然后重新安装,进行测试。下面是模块在前台展示的截图:

至此本教程就完成了。

更多

1,需要说明的是本模块中使用的js和css文件并不是十分推荐试用的,这是为了编写教程而临时的写的一个slider效果。建议真实环境使用成熟的js插件来实现

2,本教程意在让你掌握joomla相关的模块开发部分,css,js等基础部分不属于本教程范围

3,本模块的最终版下载 [下载文件:]mod_zmaxslidernewsv0.0.3_2022-10-02_for_j4x.zip

作者: 樱木花道

Joomla程序员,从J1.5到J4.x始终都在做Joomla相关开发定制工作,有超过10年行业经验,国内Joomla扩展开发商ZMAX团队的核心成员

作者网站:ZMAX程序人

评论 (0)

  • 最新在前
  • 最佳在前