为什么不能通过 jquery 在 joomla 中创建选项卡？答案

【问题标题】：Why can't create tab in joomla by jquery?为什么不能通过 jquery 在 joomla 中创建选项卡？
【发布时间】：2014-02-03 10:12:39
【问题描述】：

此代码通过 jquery 创建选项卡：

 <link rel="stylesheet" href="../../../../../js/themes/base/jquery.ui.all.css">
        <script src="../../../../../js/jquery-1.9.1.js"></script>
        <script src="../../../../../js/ui/jquery.ui.core.js"></script>
        <script src="../../../../../js/ui/jquery.ui.widget.js"></script>
        <script src="../../../../../js/ui/jquery.ui.tabs.js"></script>
        <link rel="stylesheet" href="../../../../../css/demos.css">
        <script>
            $(function() {
                $("#tabs").tabs();
            });
        </script>
        
    <?php
    // No direct access to this file
   // defined('_JEXEC') or die('Restricted access');
    ?>
    
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            tab 1
        </div>
        <div id="tabs-2">
            tab 2
        </div>
        <div id="tabs-3">
            tab 3
        </div>
    </div>

如果我将该代码放在正常页面中。它显示选项卡正常：

但是，如果我将该代码放在 Joomla 的页面中。它无法显示选项卡：

jquery 为什么不能在 joomla 中创建标签页？或如何在 Joomla 的页面中创建标签？谢谢大家。

【问题讨论】：

它似乎缺少样式表或您正在使用的某些样式被覆盖。
检查路径是否正确，这真的很疯狂../../../../../
尝试打开 Firebug 或 Chrome 开发者工具并点击“网络”标签并刷新页面。它会告诉您引用的任何内容是否加载失败。
还要检查你没有加载多个 jQuery 副本，并且你的插件在 noConflict 模式下使用 jQuery。 JQuery 和 MooTools 都使用 $，这可能会导致 joomla 网站出现严重问题。
您检查控制台是否有任何错误？您可能没有正确加载库。还要确保你没有加载 jQuery 两次，因为这会导致冲突。看看这个：stackoverflow.com/questions/12471067/…

标签： php jquery joomla joomla2.5

【解决方案1】：

您应该使用$this->baseurl 表示js and css paths，并使用jQuery 而不是$ 表示no confliction 之类的，

<script src="<?php echo $this->baseurl;?>js/jquery-1.9.1.js"></script>
<!-- other scripts -->
<script>
   jQuery(function() {
      jQuery("#tabs").tabs();
   });
</script>

【讨论】：

检查路径。没关系。
如果我使用jeasyui.com/easyui/jquery.easyui.min.js，它可以创建标签。但是jquery-ui-1.10.3还是不行
如果您使用的是Jquery 1.9，请使用Jquery-ui-1.9 而不是jquery-ui-1.10
我使用 jqery 1.9。它放在包中我下载 jquery-ui-1.10.3\jquery-1.9.1.js

【解决方案2】：

我已经解决了 jQuery UI tabs() 和 Joomla SEF 之间的冲突，将此代码添加到我的脚本中：

//Get app object
$app = JFactory::getApplication();
// Dispatch the application.
$app->dispatch();
// added these to lines
$document = JFactory::getDocument();
$document->setBase("http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"]);

【讨论】：