Question

我正在尝试实现一个jQuery插件，用于将标签转换为Joomla 3模块中的响应式手风琴。该插件名为简易响应标签到手风琴（https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion）。我已经正确地在模块中包含了所需的css和js文件，但它并没有为我启动插件。

在模块的tmpl/default.php中，我已经包含了如下脚本：

$document = JFactory::getDocument();
$document->addScript(JURI::base() . 'modules/mod_mytest/js/easyResponsiveTabs.js');
$document->addScript(JURI::base() . 'modules/mod_mytest/js/jquery-1.9.1.js');
$document->addStyleSheet(JURI::base() . 'modules/mod_mytest/css/mytheme/easyResponsiveTabs.css');
<script type="text/javascript">
$(document).ready(function() {
    $('#horizontalTab').easyResponsiveTabs();
});
</script>

我在tmpl/default.php中也有正确的HTML标记，如文档中所示。

当我下载并运行插件时，它工作正常但是当我将它集成到Joomla中时，它失败了。我可能在整合它时错过了一些简单的步骤，但我无法弄明白。

Answer 1

首先，检查Chrome开发者工具或Firebug（无论您的浏览器使用什么），看看您导入的3个文件是否实际导入。你做这件事的方式没有错，但总是很好检查。然后，替换：

<script type="text/javascript">
$(document).ready(function() {
    $('#horizontalTab').easyResponsiveTabs();
});
</script>

以下内容：

$document->addScriptDeclaration('$("#horizontalTab").easyResponsiveTabs();');

我认为这是你调用插件的方式所以非常确定上面的代码会解决问题

<强>更新

刚才意识到你正在使用Joomla 3.0，所以不要像你那样导入jQuery，而是使用以下代码：

JHtml::_('jquery.framework');

让你在其他脚本之前插入它。这使用Joomla 3.x编码标准以 noConflict 模式导入jQuery。

希望这有帮助

Answer 2

首先尝试包含jquery库：

$document = JFactory::getDocument();
$document->addScript(JURI::base() . 'modules/mod_mytest/js/jquery-1.9.1.js');
$document->addScript(JURI::base() . 'modules/mod_mytest/js/easyResponsiveTabs.js');
$document->addStyleSheet(JURI::base().'modules/mod_mytest/css/mytheme/easyResponsiveTabs.css');

如果不解决，请尝试使用jQuery无冲突

<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
jQuery('#horizontalTab').easyResponsiveTabs();
});
</script>

jQuery插件无法在Joomla 3模块中运行

2 个答案: