如何在 Joomla 2.5 的页面中创建标签？答案

【问题标题】：How create Tabs in a page of Joomla 2.5?如何在 Joomla 2.5 的页面中创建标签？
【发布时间】：2013-12-30 12:19:29
【问题描述】：

我在页面中创建标签为：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
$tpath = $this->baseurl . '/templates/' . $this->template;
?>

<div id="tabs" >
    <ul>
        <li><a href="#tabs-1">Resize Image</a></li>
        <li ><a href="#tabs-2">Rotation Image</a></li>
        <li ><a href="#tabs-3">Crop Image</a></li>

    </ul>
    <div id="tabs-1">

    </div>
    <div id="tabs-2">

    </div>
    <div id="tabs-3">

    </div>
</div>

在简单的 PHP 中：它创建选项卡 OK。但是在 Joomla 中：这是不行的。（此代码放在自定义组件中）为什么？如何在 Joomla 2.5 的页面中创建 Tabs？

【问题讨论】：

你在哪里添加这段代码？
您需要提供更多详细信息，例如此代码在哪里，在自定义组件、模块或插件中，还是您想将其放入文章中？还有你所说的“它不正常”到底是什么意思——你是收到错误消息还是内容显示没有变成标签或其他东西……
这段代码放在一个自定义组件中并显示所有选项卡。

标签： javascript jquery joomla joomla2.5

【解决方案1】：

您可以使用特殊的 Joomla Tabs API

<?php echo JHtml::_('tabs.start', 'tab-group-id', array('useCookie'=>1)); ?>
<?php echo JHtml::_('tabs.panel', JText::_('TAB1'), 'tab-id-1'); ?>

Tab 1 content

<?php echo JHtml::_('tabs.panel', JText::_('TAB2'), 'tab-id-2'); ?>

Tab 2 content

<?php echo JHtml::_('tabs.end'); ?>

您也可以使用sliders.start、sliders.panel 和sliders.end 来创建手风琴。

【讨论】：

【解决方案2】：

您缺少用于激活标签的 javascript。

在您的自定义组件视图中，您可以在 _prepareDocument 函数中添加以下内容：

$tabsjs='$(document).ready(function(){
     $( "#tabs" ).tabs();
 });';
$this->document->addScriptDeclaration($tabsjs);

如果我是你，我也会像这样将我的其他 javascripts 和 css 加载到文档的头部：

$this->document->addscript('http://code.jquery.com/jquery-1.9.1.js');
JHTML::stylesheet('style.css', '/resources/demos/');

【讨论】：