CJuiTabs
| Package | zii.widgets.jui |
|---|---|
| Inheritance | class CJuiTabs » CJuiWidget » CWidget » CBaseController » CComponent |
| Since | 1.1 |
| Source Code | framework/zii/widgets/jui/CJuiTabs.php |
CJuiTabs displays a tabs widget.
CJuiTabs encapsulates the JUI tabs plugin.
To use this widget, you may insert the following code in a view:
By configuring the options property, you may specify the options that need to be passed to the JUI tabs plugin. Please refer to the JUI Tabs API documentation for possible options (name-value pairs) and JUI Tabs page for general description and demo.
Note, in case you're using <base/> 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:
CJuiTabs encapsulates the JUI tabs plugin.
To use this widget, you may insert the following code in a view:
$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,
),
));
By configuring the options property, you may specify the options that need to be passed to the JUI tabs plugin. Please refer to the JUI Tabs API documentation for possible options (name-value pairs) and JUI Tabs page for general description and demo.
Note, in case you're using <base/> 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:
$this->widget('zii.widgets.jui.CJuiTabs',array(
'tabs'=>array(
'Dynamic Tab'=>array('ajax'=>$this->createAbsoluteUrl('tab/content/route')),
),
));
Public Properties
| Property | Type | Description | Defined By |
|---|---|---|---|
| actionPrefix | string | the prefix to the IDs of the actions. | CWidget |
| contentTemplate | string | the template that is used to generated every tab content. | CJuiTabs |
| controller | CController | Returns the controller that this widget belongs to. | CWidget |
| cssFile | mixed | the theme CSS file name. | CJuiWidget |
| headerTemplate | string | the template that is used to generated every panel title. | CJuiTabs |
| htmlOptions | array | the HTML attributes that should be rendered in the HTML tag representing the JUI widget. | CJuiWidget |
| id | string | Returns the ID of the widget or generates a new one if requested. | CWidget |
| options | array | the initial JavaScript options that should be passed to the JUI plugin. | CJuiWidget |
| owner | CBaseController | Returns the owner/creator of this widget. | CWidget |
| scriptFile | mixed | the main JUI JavaScript file. | CJuiWidget |
| scriptUrl | string | the root URL that contains all JUI JavaScript files. | CJuiWidget |
| skin | mixed | the name of the skin to be used by this widget. | CWidget |
| tabs | array | list of tabs (tab title=>tab content). | CJuiTabs |
| tagName | string | the name of the container element that contains all panels. | CJuiTabs |
| theme | string | the JUI theme name. | CJuiWidget |
| themeUrl | string | the root URL that contains all JUI theme folders. | CJuiWidget |
| viewPath | string | Returns the directory containing the view files for this widget. | CWidget |
Public Methods
| Method | Description | Defined By |
|---|---|---|
| __call() | Calls the named method which is not a class method. | CComponent |
| __construct() | Constructor. | CWidget |
| __get() | Returns a property value, an event handler list or a behavior based on its name. | CComponent |
| __isset() | Checks if a property value is null. | CComponent |
| __set() | Sets value of a component property. | CComponent |
| __unset() | Sets a component property to be null. | CComponent |
| actions() | Returns a list of actions that are used by this widget. | CWidget |
| asa() | Returns the named behavior object. | CComponent |
| attachBehavior() | Attaches a behavior to this component. | CComponent |
| attachBehaviors() | Attaches a list of behaviors to the component. | CComponent |
| attachEventHandler() | Attaches an event handler to an event. | CComponent |
| beginCache() | Begins fragment caching. | CBaseController |
| beginClip() | Begins recording a clip. | CBaseController |
| beginContent() | Begins the rendering of content that is to be decorated by the specified view. | CBaseController |
| beginWidget() | Creates a widget and executes it. | CBaseController |
| canGetProperty() | Determines whether a property can be read. | CComponent |
| canSetProperty() | Determines whether a property can be set. | CComponent |
| createWidget() | Creates a widget and initializes it. | CBaseController |
| detachBehavior() | Detaches a behavior from the component. | CComponent |
| detachBehaviors() | Detaches all behaviors from the component. | CComponent |
| detachEventHandler() | Detaches an existing event handler. | CComponent |
| disableBehavior() | Disables an attached behavior. | CComponent |
| disableBehaviors() | Disables all behaviors attached to this component. | CComponent |
| enableBehavior() | Enables an attached behavior. | CComponent |
| enableBehaviors() | Enables all behaviors attached to this component. | CComponent |
| endCache() | Ends fragment caching. | CBaseController |
| endClip() | Ends recording a clip. | CBaseController |
| endContent() | Ends the rendering of content. | CBaseController |
| endWidget() | Ends the execution of the named widget. | CBaseController |
| evaluateExpression() | Evaluates a PHP expression or callback under the context of this component. | CComponent |
| getController() | Returns the controller that this widget belongs to. | CWidget |
| getEventHandlers() | Returns the list of attached event handlers for an event. | CComponent |
| getId() | Returns the ID of the widget or generates a new one if requested. | CWidget |
| getOwner() | Returns the owner/creator of this widget. | CWidget |
| getViewFile() | Looks for the view script file according to the view name. | CWidget |
| getViewPath() | Returns the directory containing the view files for this widget. | CWidget |
| hasEvent() | Determines whether an event is defined. | CComponent |
| hasEventHandler() | Checks whether the named event has attached handlers. | CComponent |
| hasProperty() | Determines whether a property is defined. | CComponent |
| init() | Initializes the widget. | CJuiWidget |
| raiseEvent() | Raises an event. | CComponent |
| render() | Renders a view. | CWidget |
| renderFile() | Renders a view file. | CBaseController |
| renderInternal() | Renders a view file. | CBaseController |
| run() | Run this widget. | CJuiTabs |
| setId() | Sets the ID of the widget. | CWidget |
| widget() | Creates a widget and executes it. | CBaseController |
Protected Methods
| Method | Description | Defined By |
|---|---|---|
| registerCoreScripts() | Registers the core script files. | CJuiWidget |
| registerScriptFile() | Registers a JavaScript file under scriptUrl. | CJuiWidget |
| resolvePackagePath() | Determine the JUI package installation path. | CJuiWidget |
Property Details
contentTemplate property
public string $contentTemplate;
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.
headerTemplate property
public string $headerTemplate;
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.
tabs property
public array $tabs;
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:
array('id'=>'myTabID', 'content'=>'tab content')
array('id'=>'myTabID', 'ajax'=>URL)
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 CHtml::normalizeUrl. tagName property
public string $tagName;
the name of the container element that contains all panels. Defaults to 'div'.
Method Details
run() method
public void run() |
Source Code: framework/zii/widgets/jui/CJuiTabs.php#97 (show)
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);");
}
Run this widget. This method registers necessary javascript and renders the needed HTML code.
© 2008–2017 by Yii Software LLC
Licensed under the three clause BSD license.
http://www.yiiframework.com/doc/api/1.1/CJuiTabs