JQuery question using CJui add-in built into Yii

Yii 1.1 General Discussion
1

Hey guys, I am working on a few tweaks to one of my websites and have a curious question. Can we pass the other "Non-built in" variables to the CJui add-ons? Here is what I mean.

We have the CJuiTabs function


$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,

    ),

));

Now lets say I want to use the "Method" from the JQuery site for "rotate". Is there a way to pass that information through the CJui function? I know I can write the raw JQuery script to do this without the CJui use, but would be nice to find a way to pass the non-wrapped methods and such to the CJui function.

Just for ease of code comparison, this would be the raw JQuery version using rotate


<script type="text/javascript">

	$(function() {

	$( "#tabs" ).tabs()

        .tabs( "rotate", 5000, false );

</script>

Is it as simple as using the CJui function to setup the main function, then write the script to just work off the “id” given to the CJui? Or will the CJui options overwrite the raw javascript? The only reason I ask this without just using this options is that I don’t want to go this route and find out there is some nuances that will cause this to not work.

Just for clarity this process works, but want to make sure its a good process to follow. Well I should add that is mostly works, the “rotate” and 5000 go through, but it seems the ‘false’ setting isn’t working.

2

Inspecting the javascript that is created by CJui I see this


<script type="text/javascript">

/*<![CDATA[*/

jQuery(function($) {

    jQuery('#tabs').tabs({'collapsible':true});

});

/*]]>*/

</script>

If I remove the ‘options’ from the CJui and just write the script like this


<script type="text/javascript">

/*<![CDATA[*/

jQuery(function($) {

    jQuery('#tabs').tabs({'collapsible':true}).tabs("rotate", 3000);

});

/*]]>*/

</script>

It works. So the question is, how do I add the


.tabs("rotate", 3000)

to the CJui function?

3

So here is my final conclusion

Use CJui for the initial setup




$this->widget('zii.widgets.jui.CJuiTabs', array(

                'id'=>'tabs',

                'tabs'=>array(

                    'StaticTab 1'=>'Content for tab 1',

                    'StaticTab 2'=>array('content'=>'Content for tab 2', 'id'=>'tab2'),

                ),

                // additional javascript options for the tabs plugin

                'options'=>array(

                    'collapsible'=>true,

                ),

            ));

Then write the javascript you need specifically in the head




<script type="text/javascript">

/*<![CDATA[*/

jQuery(function($) {

    jQuery('#tabs')

        .tabs()

        .tabs("rotate", 5000)

        .tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });

});

/*]]>*/

</script>

Any feedback on if this is the accepted format would be greatly appreciated.

4

I am doing it the same way. don’t know any way to pass JS code any CJUI widget.

5

I was interested in this so I quickly extended CJuiTabs like so:

Create file protected/components/XTabs.php


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


class XTabs extends CJuiTabs{


	public $methods=array();

	

	public function run()

	{

		$id=$this->getId();

		$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))."\n";

				$contentOut .= strtr($this->contentTemplate, array('{content}'=>$content,'{id}'=>$tabId))."\n";


			}elseif (isset($content['content'])){

				$tabsOut .= strtr($this->headerTemplate, array('{title}'=>$title, '{url}'=>'#'.$tabId))."\n";

				$contentOut .= strtr($this->contentTemplate, array('{content}'=>$content['content'],'{id}'=>$tabId))."\n";


			}elseif (isset($content['ajax'])){

				$tabsOut .= strtr($this->headerTemplate,array('{title}'=>$title, '{url}'=>CHtml::normalizeUrl($content['ajax'])))."\n";

			}

		}

		echo "<ul>\n" . $tabsOut . "</ul>\n";

		echo $contentOut;


		echo CHtml::closeTag($this->tagName)."\n";


		$options=empty($this->options) ? '' : CJavaScript::encode($this->options);

		$methods = '';

		if (!empty($this->methods)) {

			if (isset($this->methods['rotate'])) {

				$methods.= ".tabs('rotate', ". $this->methods['rotate']. ")";

			}

			// add code for other methods here

		}

		

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

	}

}

Add widget like this:


$this->widget('application.components.XTabs', array(

                'id'=>'tabs',

                'tabs'=>array(

                    'StaticTab 1'=>'Content for tab 1',

                    'StaticTab 2'=>array('content'=>'Content for tab 2', 'id'=>'tab2'),

                ),

                // additional javascript options for the tabs plugin

                'options'=>array(

                    'collapsible'=>true,

                ),

                // extra functionality here

		'methods'=>array(

			'rotate'=>3000,

		),

            ));

Obviously in this case it’s probably easier just to add the extra javascript, but this class could be modified to include all available methods.

JqueryUI Tabs

6

Nice job. A similar approach can be used for append methods to CJuiAutocomplete.

This can work like the methodChain (old but very confortable method of the old CAutocomplete).

You can try inspiration from this methodchain fore make more general your solution.

7

Thanks for the info, I hadn’t come across that yet :)