CJuiTabs.php 4.71 KB
Newer Older
JULIO JARAMILLO's avatar
JULIO JARAMILLO committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138
<?php
/**
 * CJuiTabs class file.
 *
 * @author Sebastian Thierer <sebathi@gmail.com>
 * @link http://www.yiiframework.com/
 * @copyright 2008-2013 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

Yii::import('zii.widgets.jui.CJuiWidget');

/**
 * CJuiTabs displays a tabs widget.
 *
 * CJuiTabs encapsulates the {@link http://jqueryui.com/tabs/ JUI tabs}
 * plugin.
 *
 * To use this widget, you may insert the following code in a view:
 * <pre>
 * $this->widget('zii.widgets.jui.CJuiTabs',array(
 *     'tabs'=>array(
 *         'StaticTab 1'=>'Content for tab 1',
 *         'StaticTab 2'=>array('content'=>'Content for tab 2', 'id'=>'tab2'),
 *         // panel 3 contains the content rendered by a partial view
 *         'AjaxTab'=>array('ajax'=>$ajaxUrl),
 *     ),
 *     // additional javascript options for the tabs plugin
 *     'options'=>array(
 *         'collapsible'=>true,
 *     ),
 * ));
 * </pre>
 *
 * By configuring the {@link options} property, you may specify the options
 * that need to be passed to the JUI tabs plugin. Please refer to
 * the {@link http://api.jqueryui.com/tabs/ JUI Tabs API} documentation
 * for possible options (name-value pairs) and
 * {@link http://jqueryui.com/tabs/ JUI Tabs page} for general
 * description and demo.
 *
 * Note, in case you're using &lt;base/&gt; HTML tag you may run into the
 * issue when jQuery UI uses altered base URL to load content, but not
 * the base URL content was loaded from. (Developer may expect both behavior
 * in different cases.) For this occasion consider using absolute URL
 * generation as follows:
 *
 * <pre>
 * $this->widget('zii.widgets.jui.CJuiTabs',array(
 *     'tabs'=>array(
 *         'Dynamic Tab'=>array('ajax'=>$this->createAbsoluteUrl('tab/content/route')),
 *     ),
 * ));
 * </pre>
 *
 * @author Sebastian Thierer <sebathi@gmail.com>
 * @package zii.widgets.jui
 * @since 1.1
 */
class CJuiTabs extends CJuiWidget
{
	/**
	 * @var array list of tabs (tab title=>tab content).
	 * Note that the tab title will not be HTML-encoded.
	 * The tab content can be either a string or an array. When it is an array, it can
	 * be in one of the following two formats:
	 * <pre>
	 * array('id'=>'myTabID', 'content'=>'tab content')
	 * array('id'=>'myTabID', 'ajax'=>URL)
	 * </pre>
	 * where the 'id' element is optional. The second format allows the tab content
	 * to be dynamically fetched from the specified URL via AJAX. The URL can be either
	 * a string or an array. If an array, it will be normalized into a URL using {@link CHtml::normalizeUrl}.
	 */
	public $tabs=array();
	/**
	 * @var string the name of the container element that contains all panels. Defaults to 'div'.
	 */
	public $tagName='div';
	/**
	 * @var string the template that is used to generated every panel title.
	 * The token "{title}" in the template will be replaced with the panel title and
	 * the token "{url}" will be replaced with "#TabID" or with the url of the ajax request.
	 */
	public $headerTemplate='<li><a href="{url}" title="{title}">{title}</a></li>';
	/**
	 * @var string the template that is used to generated every tab content.
	 * The token "{content}" in the template will be replaced with the panel content
	 * and the token "{id}" with the tab ID.
	 */
	public $contentTemplate='<div id="{id}">{content}</div>';

	/**
	 * Run this widget.
	 * This method registers necessary javascript and renders the needed HTML code.
	 */
	public function run()
	{
		$id=$this->getId();
		if(isset($this->htmlOptions['id']))
			$id=$this->htmlOptions['id'];
		else
			$this->htmlOptions['id']=$id;

		echo CHtml::openTag($this->tagName,$this->htmlOptions)."\n";

		$tabsOut="";
		$contentOut="";
		$tabCount=0;

		foreach($this->tabs as $title=>$content)
		{
			$tabId=(is_array($content) && isset($content['id']))?$content['id']:$id.'_tab_'.$tabCount++;

			if(!is_array($content))
			{
				$tabsOut.=strtr($this->headerTemplate,array('{title}'=>$title,'{url}'=>'#'.$tabId,'{id}'=>'#'.$tabId))."\n";
				$contentOut.=strtr($this->contentTemplate,array('{content}'=>$content,'{id}'=>$tabId))."\n";
			}
			elseif(isset($content['ajax']))
			{
				$tabsOut.=strtr($this->headerTemplate,array('{title}'=>$title,'{url}'=>CHtml::normalizeUrl($content['ajax']),'{id}'=>'#'.$tabId))."\n";
			}
			else
			{
				$tabsOut.=strtr($this->headerTemplate,array('{title}'=>$title,'{url}'=>'#'.$tabId,'{id}'=>$tabId))."\n";
				if(isset($content['content']))
					$contentOut.=strtr($this->contentTemplate,array('{content}'=>$content['content'],'{id}'=>$tabId))."\n";
			}
		}
		echo "<ul>\n".$tabsOut."</ul>\n";
		echo $contentOut;
		echo CHtml::closeTag($this->tagName)."\n";

		$options=CJavaScript::encode($this->options);
		Yii::app()->getClientScript()->registerScript(__CLASS__.'#'.$id,"jQuery('#{$id}').tabs($options);");
	}
}