J1.5:Using the JPane classes in a component
m (add 2 parameter explaination) |
(→JPaneTabs options) |
||
| Line 13: | Line 13: | ||
You can set some options in the getInstance method. | You can set some options in the getInstance method. | ||
| − | == | + | == JPane options == |
'''startOffset''': The default tab/slider to start with (zero based index).<br/> | '''startOffset''': The default tab/slider to start with (zero based index).<br/> | ||
'''startTransition''': To show the default tab/slider open (=0) or close (=-1).<br/> | '''startTransition''': To show the default tab/slider open (=0) or close (=-1).<br/> | ||
Revision as of 16:48, 2 April 2012
JPane class types include 'Tabs' and 'Sliders'.
Sliders implement the mootools accordian effect. Examples are the Joomla Admin parameters settings. Tabs also implement mootools (but in which degree?)
startPane and endPane() require a string identifier.
JPanes contain Panels
startPanel() and endPanel() require name and ID parameters.
You can set some options in the getInstance method.
JPane options
startOffset: The default tab/slider to start with (zero based index).
startTransition: To show the default tab/slider open (=0) or close (=-1).
allowAllClose: Can we close all tabs/sliders (=true) or may always have one open (=false).
onActive: Another function to use when making a tab active (??)
onBackground: Another function to use when making a tab dissapear (??)
Example
jimport('joomla.html.pane'); //1st Parameter: Specify 'tabs' or 'sliders' as appearance //2nd Parameter: Array with 3 parameters (optionnal) // - Starting with third tab(=2) as the default (zero based index) // - Specify the Transition of the default tab (-1 = closed, 0 = open) // - Determine if all tabs or sliders can be closed (=true) or if there must always be almost 1 tab/slider open (=false) ! //open one! $pane =& JPane::getInstance('tabs', array('startOffset'=>2, 'startTransition'=>-1, 'allowAllClose'=>true)); echo $pane->startPane( 'pane' ); echo $pane->startPanel( 'Example Panel 1', 'panel1' ); echo "This is panel1"; echo $pane->endPanel(); echo $pane->startPanel( 'Example Panel 2', 'panel2' ); echo "This is panel2"; echo $pane->endPanel(); echo $pane->startPanel( 'Example Panel 3', 'panel3' ); echo "This is panel3"; echo $pane->endPanel(); echo $pane->endPane();
Don't forget the echo's!! Thanks to tcp for this post: FYI - Change in usage of JPane Also notice that the useCookies in the comments in the code or on the api, do NOT seem to be implemented
Adding onClick to Tab
Looking in JTabs source, you will found that there are two more options can be set; onActive and onBackground event. This is easy to add if you familiar with PHP and JavaScript. But I will show you how to do in an easy way (but may not a best practic). Look back to JPane->startPanel(..,...), for the first parameter you can add tag to it instead of normal text. So, I just add span tag to the tab title and set onClick to do something.
$pane = & JPane::getInstance('Tabs'); echo $pane->startPane('doc') ; echo $pane->startPanel('<span onclick="document.adminForm.job_id.value=0;">Summary</span>','doc-summary') ; echo $this->loadTemplate('summary'); echo $pane->endPanel(); foreach($this->jobs as $job) { $this->job = $job; if ($this->doc->type_id == CP_CLEARING_REQ) { $this->refJob = null; foreach ($this->refJobs as $refJob) { if ( ($refJob->project_no==$job->project_no) && ($refJob->subproject_code==$job->subproject_code) ) { $this->refJob = $refJob; break; } } } echo $pane->startPanel('<span onclick="document.adminForm.job_id.value='.$job->id.';">'.$job->project_no.'/' .$job->subproject_code."</span>", 'job-'.$job->id); echo $this->loadTemplate('job'); echo $pane->endPanel(); } echo $pane->endPane() ;
