Actions

J1.5

Difference between revisions of "Using the JPane classes in a component"

From Joomla! Documentation

(Adding onClick to Tab)
(12 intermediate revisions by 6 users not shown)
Line 1: Line 1:
[[Category:Development]]
+
{{version|1.5}}
 
+
{{deprecated|when=1.5|from=1.6|link=Using_the_JHtmlTabs_class_in_a_component|old=JPane|new=JHtmlTabs}}
 
JPane class types include 'Tabs' and 'Sliders'.  
 
JPane class types include 'Tabs' and 'Sliders'.  
  
Line 13: Line 13:
  
 
You can set some options in the getInstance method.
 
You can set some options in the getInstance method.
== JPaneTabs options ==
+
== JPane options ==
'''startOffset''':  The default tab to start with.<br/>
+
'''startOffset''':  The default tab/slider to start with (zero based index).<br/>
 +
'''allowAllClose''':  Can we close all sliders (=true) or may always have one open (=false).<br/>
 +
'''opacityTransition''': show a fading Transition (=true or =false) when opening or closing the slider/tab.<br/>
 +
'''duration''': Time duration to display or close the slider/tab in milliseconds (default : 300).<br/>
 +
<br/>
 
'''onActive''': Another function to use when making a tab active (??)<br/>
 
'''onActive''': Another function to use when making a tab active (??)<br/>
 
'''onBackground''':  Another function to use when making a tab dissapear (??)<br/>
 
'''onBackground''':  Another function to use when making a tab dissapear (??)<br/>
Line 21: Line 25:
 
<source lang="php">
 
<source lang="php">
 
jimport('joomla.html.pane');
 
jimport('joomla.html.pane');
//1st Parameter: Specify 'tabs' as appearance  
+
//1st Parameter: Specify 'tabs' or 'sliders' as appearance  
//2nd Parameter: Starting with third tab as the default (zero based index)
+
//2nd Parameter: Array with 4 parameters (optionnal)
//open one!
+
// - 'startOffset' : Starting with third tab(=2) as the default (zero based index)
$pane =& JPane::getInstance('tabs', array('startOffset'=>2));  
+
// - 'allowAllClose' : Determine if all tabs or sliders can be closed (=true) or if there must always be almost one tab/slider opened (=false)
 +
// - 'opacityTransition' : Specify if a fade Transition must be use when opening or closing the slider/tab (true or false)
 +
// - 'duration' : Time duration to display or close the slider/tab in milliseconds  (default : 300)
 +
$pane =& JPane::getInstance('tabs', array('startOffset'=>2, 'allowAllClose'=>true, 'opacityTransition'=>true, 'duration'=>600));  
 
echo $pane->startPane( 'pane' );
 
echo $pane->startPane( 'pane' );
 
echo $pane->startPanel( 'Example Panel 1', 'panel1' );
 
echo $pane->startPanel( 'Example Panel 1', 'panel1' );
 
echo "This is panel1";
 
echo "This is panel1";
 
echo $pane->endPanel();
 
echo $pane->endPanel();
echo $pane->startPanel( 'Example Panel 2', 'panel2' );
+
echo $pane->startPanel( '<h3>Example Panel 2</h3>', 'panel2' );
echo "This is panel2";
+
echo "This is panel2 with an header3 tag";
 
echo $pane->endPanel();
 
echo $pane->endPanel();
 
echo $pane->startPanel( 'Example Panel 3', 'panel3' );
 
echo $pane->startPanel( 'Example Panel 3', 'panel3' );
Line 37: Line 44:
 
echo $pane->endPane();
 
echo $pane->endPane();
 
</source>
 
</source>
 +
 
''Don't forget the echo's!! Thanks to tcp for this post: [http://forum.joomla.org/viewtopic.php?f=231&t=135641#p664869 FYI - Change in usage of JPane]
 
''Don't forget the echo's!! Thanks to tcp for this post: [http://forum.joomla.org/viewtopic.php?f=231&t=135641#p664869 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''
 
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 ==
 
== 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.
 
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.
Line 69: Line 78:
  
 
</source>
 
</source>
 +
[[Category:Development]]

Revision as of 19:57, 1 April 2013

Replacement filing cabinet.png
This Namespace has been archived - Please Do Not Edit or Create Pages in this namespace. Pages contain information for a Joomla! version which is no longer supported. It exists only as a historical reference, will not be improved and its content may be incomplete.

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).
allowAllClose: Can we close all sliders (=true) or may always have one open (=false).
opacityTransition: show a fading Transition (=true or =false) when opening or closing the slider/tab.
duration: Time duration to display or close the slider/tab in milliseconds (default : 300).

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 4 parameters (optionnal)
//      - 'startOffset' : Starting with third tab(=2) as the default (zero based index)
//      - 'allowAllClose' : Determine if all tabs or sliders can be closed (=true) or if there must always be almost one tab/slider opened (=false)
//      - 'opacityTransition' : Specify if a fade Transition must be use when opening or closing the slider/tab (true or false)
//      - 'duration' : Time duration to display or close the slider/tab in milliseconds  (default : 300)
$pane =& JPane::getInstance('tabs', array('startOffset'=>2, 'allowAllClose'=>true, 'opacityTransition'=>true, 'duration'=>600)); 
echo $pane->startPane( 'pane' );
echo $pane->startPanel( 'Example Panel 1', 'panel1' );
echo "This is panel1";
echo $pane->endPanel();
echo $pane->startPanel( '<h3>Example Panel 2</h3>', 'panel2' );
echo "This is panel2 with an header3 tag";
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() ;