0

我正在尝试在我的 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>

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

当我下载并运行插件时，它工作正常，但是当我将它集成到 Joomla 中时，它会失败。在集成它时我可能会遗漏一些简单的步骤，但我无法弄清楚。

4

2 回答 2

2

首先，检查 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。

希望这可以帮助

于 2013-11-05T11:31:51.527 回答
0

尝试首先包含 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>
于 2013-11-05T11:39:25.787 回答