zii.widgets.jui.CJuiAccordion tab numbering

Archives Feature Requests
1

If tabs have unique id’s then it is possible to navigate directly to a specific accordion panel on a page if the ‘navigation’ option is set to true.

Example /index.php?&r=site/educational/#2 takes you to the page and opens tab 2 on page load.

This is easy to achieve by hacking the core library (which of course we never do!) but I think it is an unobtrusive and useful addition.

In your view make sure ‘navigation’ option is set to true.


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

    'panels'=>$data,

     // additional javascript options for the accordion plugin

      'options'=>array(

      'autoHeight'=>false,

      'navigation'=>true

     ),

     'theme'=>'ui-darkness'

  ));

In my case I am creating tab content on the fly


$page = Webpage::model()->named($pageName)->find();

$this->pageTitle=$page->title;

$tabData = Pagedata::model()->pageID($page->id)->tabOrder()->findAll();

$data=array();


if($tabData){

foreach($tabData as $tab){

$data[$tab->name] = $tab->data;

}}

Modification to core files to make this work

Modify header template var


public $headerTemplate='<h3><a href="#{tabnum}">{title}</a></h3>';

Add a counter var


 public $tabnum=0;

Change one line of the ‘run’ function


echo strtr($this->headerTemplate,array('{title}'=>$title,'{tabnum}'=>++$this->tabnum))."\n";

Just an idea, I can’t see why it would be problem for anyone.

doodle

2

I may be wrong, but IIRC the "activate" option would allow absolute navigation. If so you should be able to pass an initial value to the widget as is.

At least I use this for relative navigation




  n = $("#accordion").accordion("option", "active");

  $("#accordion").accordion("activate", n+1);

(In my case I tab forward/backwards through wizard-like field subsets of a CActiveForm, ‘navigation’: default value)

/Tommy

Edit:

Just realized the main purpose for your solution: to generate html anchors. BTW, relative "subform" navigation is a bit off-topic, please disregard.

3

Thanks for your post Tommy, it helped me with one more piece of the puzzle.

I think I would change my code to


echo strtr($this->headerTemplate,array('{title}'=>$title,'{tabnum}'=>$this->tabnum ++))."\n";

This way the id would match the internal index used by the widget.

To open a tab from another tab on the same page I used


<a href="javascript:jQuery('#accordion').accordion('activate',5);">blah blah blah</a>

I still think it’s a good idea to have these unique id’s in the tabs. For example on my site I want to have a site map and be able to link to a specific panel. Most if not all pages will use the accordion widget.

doodle

4

A little update here

the above mentioned href didn’t work in firefox (it worked in chrome)

So I rethought the whole thing and it seems I can do what I need without any mods to the core libraries.

I put this code in the head section of my layout/main.php


<?php

		

        if(isset($_GET['tab'])){

        $tabnum = $_GET['tab'];

        Yii::app()->clientScript->registerScript('setTab',"$(\"#accordion\").accordion( \"option\", \"active\",$tabnum  );",CClientScript::POS_READY);

        }

	?>

Access to any page and panel can be optained this way

/index.php?&r=site/educational&tab=5

so now the end of my page looks like this


<script type="text/javascript" src="/assets/9bae4ce6/js/jquery-ui.min.js"></script>

<script type="text/javascript">

/*<![CDATA[*/

jQuery(document).ready(function() {

jQuery('#accordion').accordion({'autoHeight':false,'navigation':true,'animated':'easeslide'});

$("#accordion").accordion( "option", "active",5  );

                        $("#jqbm4c0d0c8ba7d16").bookmark({sites:['facebook','linkedin','myspace','twitthis','yahoo','google','delicious'],addEmail:true,popup: true,compact: true,addFavorite: true});

});

/*]]>*/

</script>

So no changes required using this method!

doodle

5

Thanks for sharing your solution.

/Tommy