Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
The_Anomaly
Posts: 322
Registered: ‎08-06-2012
My Device: Dev Alpha / Playbook / Curve 9300

Re: Simple way to create Tab bar using javascript in phone gap

Replace this code...  Then mark as solution if this solves your Tab bar problem.

    <style type="text/css">
       .expIco{
	padding-left: 20px;
}
.collIco{
	padding-left: 20px;
}
.demo6{
	border: 1px solid #B9E3FF;
	background: #0099FF;
	padding-left: 5px;
	color: #FFFFFF;
}
.panel{
	border: 1px solid #B9E3FF;
	padding: 10px;
}
    </style>
   <script src="jquery.min.js" type="text/javascript"></script>
 <script src="jquery.collapser.js" type="text/javascript"></script>
    <script type="text/javascript">

$(document).ready(function(){

  // Handler for .ready() called.
  $('.panel').hide();

$('.demo6').collapser({
	target: 'next',
	effect: 'slide',
	changeText: 0,
	expandClass: 'expIco',
	collapseClass: 'collIco'
}, function(){
	$('.panel').slideUp();
});
	
});
    </script> 

 

If it helped you, click like. :smileyhappy:
Developer
ravi1989
Posts: 777
Registered: ‎07-21-2012
My Device: 9810

Re: Simple way to create Tab bar using javascript in phone gap

hi can you please explain this.?

 

$('.demo6').collapser({ //.demo6 is id..collapser is function?..target, effect are they parameters ? and their values are 'next', slide...,why after , another fuction present
$('.panel').slideUp();??
? target: 'next', effect: 'slide', changeText: 0, expandClass: 'expIco', collapseClass: 'collIco' }, function(){ $('.panel').slideUp(); });
Developer
The_Anomaly
Posts: 322
Registered: ‎08-06-2012
My Device: Dev Alpha / Playbook / Curve 9300

Re: Simple way to create Tab bar using javascript in phone gap

[ Edited ]

Collapser is a function in the jquery.collapser.js

 

$('.demo6').collapser

it will be easier to explain if you read the code in that file.  

The brackets like: (' something here ') are for the class or id of the HTML element that the collapser is going to work with.

 

<div class="panel">Lorem Ipsum is simply dummy text.</div>

 or

<div id="panel">Lorem Ipsum is simply dummy text.</div>

in this case its class.  In effect '.demo6' becomes the "clickable" part for collapser and the '.panel' is hidden until demo6 is clicked and toggled on/off from there.

 

Not sure about the target though, it could be a jquery thing.  The effect is obvious, you will see in the jquery.collapser.js file there is also fade effect...

 

the expandClass: 'expIco', is when expanded what CSS must be applied, and the opposite would be collapseClass: 'collIco'.  You can play with the CSS style to see this effect.

If it helped you, click like. :smileyhappy:
Developer
ravi1989
Posts: 777
Registered: ‎07-21-2012
My Device: 9810

Re: Simple way to create Tab bar using javascript in phone gap

Thanx sir...great