bharat sharma

Recently working on a Property project in Joomla I found myself stucked when i got a requirement to show videos, images, location and panoramic street view in tabs. I know there are lots of modules available in joomla to create tabs but my client do not wish an extra module load Hence the only way to implement the functionality in property component and bingo I got Jpane Class at right time.

Yes Most of us used to with the available multitabs modules in joomla but if it comes to Joomla classes to code a similar effect , We have Jpane Class ready to do the magic.

Here it goes:

jimport('joomla.html.pane');
//1st Parameter: Specify 'tabs' as appearance
//2nd Parameter: Starting with third tab as the default (zero based index)
//open one!
$pane =& JPane::getInstance('tabs', array('startOffset'=>2));
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();

Options 

startOffset: The default tab to start with.
onActive: Another function to use when making a tab active (??)
onBackground: Another function to use when making a tab dissapear (??)

Jpane can be used for both tabs or sliders.

I implemented the Jpane code in the propery component like this: Showing in rough manner.

<?php
jimport(‘joomla.html.pane’);
$pane =& JPane::getInstance(‘tabs’, array(‘startOffset’=>0));
echo $pane->startPane( ‘pane’ );

/*….start Video tab *****/
if($ActivarDescripcion == 1){
echo $pane->startPanel( ‘<p>Video</p>’, ‘panel1′ );
}

echo ‘<object width=”478″ height=”373″><param name=”movie” value=”http://www.youtube.com/v/iKKqeeCqTM4&hl=en_US&fs=1&”></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/iKKqeeCqTM4&hl=en_US&fs=1&” type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”478″ height=”373″></embed></object>’;
echo $pane->endPanel();
/*….End  Video tab *****/

/*….start Location/ Google Map tab *****/
if($ActivarDetails == 1){
echo $pane->startPanel( ‘<p>Location</p>’, ‘panel1′ );
}
if($ActivarMapa == 1){
$apikey=$params->get(‘apikey’);
$distancia=$params->get(‘distancia’);
$lat = $Product->lat;
$lng = $Product->lng;
?>

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?php echo $apikey;?>”
type=”text/javascript”></script>

<script type=”text/javascript”>
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(“map”));
map.setCenter(new GLatLng(<?php echo $lat;?>, <?php echo $lng;?>), <?php echo $distancia;?>);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var marker = new GMarker(new GLatLng(<?php echo $lat;?>, <?php echo $lng;?>));
map.addOverlay(marker);
}
}
</script>

<div id=”map” style=”width: 520px; height: 420px;margin:0px;padding:0px;”>
</div>

<script type=”text/javascript”>  loadmap();  </script>
<div style=”clear: both;”></div>

<?php

}

echo $pane->endPanel();
/*….End Location/ Google Map tab *****/
?>

For any confusion on JPane you can contact me at bharat@rhaasoft.com

www.rhaasoft.com

Serving IT Serving You