jQuery插件在Joomla 3模块中不起作用

Question

我正在尝试在我的 Joomla 3 模块中实现一个 jQuery 插件，用于将标签转换为响应式手风琴。该插件被称为 Easy Responsive Tabs to Accordion (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 Dev Tools 或 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>