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

Question

我在页面中创建选项卡：

<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中：它创建Tabs确定。 但在Joomla：这不行。 （此代码放入自定义组件）为什么？ 如何在Joomla 2.5的页面中创建标签？

Answer 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来创建手风琴。

Answer 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/');