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
ravi1989
Posts: 777
Registered: ‎07-21-2012
My Device: 9810

how to Create custom table in phonegap

Hi
can you please explain or share with code , i want to make table ,On each row of table is something like Subject(title)but clicking the row it show description of the tittle(summary)by expanding its length,when user click another row it close the description of previous selected row and open the description of second row..

 

 

Thanks
 

Please use plain text.
Developer
reumerd
Posts: 119
Registered: ‎05-27-2010
My Device: 9900

Re: how to Create custom table in phonegap

Hello Ravi,

 

Not many people use tables anymore for any webcoding.

 

In this case it would also not be needed.

 

you just want to show some more information besides a label, when clikcing on the label.

 

In this case you just need to change the visibility of another element based onClick of another.

 

I would use a following structure:

 

=-=-=-=-=-=-=

 

HTML:

<div id='label_xx1' class='label>Label 1</div><fiv id='label_xx1_desc' class='description hidden'>Description 1</div>

<div id='label_xx2' class='label>Label 2</div><fiv id='label_xx2_desc' class='description hidden'>Description 2</div>

<div id='label_xx3' class='label>Label 3</div><fiv id='label_xx3_desc' class='description hidden'>Description 3</div>

<div id='label_xx4' class='label>Label 4</div><fiv id='label_xx4_desc' class='description hidden'>Description 4</div>

 

CSS:

.hidden {

 visibility: hidden

}

 

JavaScript //use jquery

//Bind function for onclick (so you don't have to type it for every line or parse it for every line item).

$('.label').onClick( make_visible );

 

make_visible () {

  var id = this.id;

  id += '_desc';

 $('.description').addClass('hidden'); //makes everything hidden again

 $('#'+id).removeClass('hidden'); //nunhides the selected label description.

}

 

=-=-==-=-=-=-=

 

Hope this helps.

 

If you want and learn more of CSS3 you can also make use of nice animations, fading in, sliding out, etc.

@reumerd-- @BBDevGroupNL -- about me
If you like it, LIKE it ;-) ----- If it's solved, press solved ! --- If you solved it yourself, please let us know! We might have the same problem!
Please use plain text.
Developer
ravi1989
Posts: 777
Registered: ‎07-21-2012
My Device: 9810

Re: how to Create custom table in phonegap

Hi...

Thanks for explaining...good answer..

 

can you explain this also..

1)  why are jquery is inside the 

$(document).ready(function() this function.?

2) why (".demo6") (label)  

$('.demo6').collapser({       function call?
$(".demo6").click(function() {
                    alert("test");
    });
$(document).ready(function() {
  // Handler for .ready() called.
  $('.panel').hide();
  
  $(".demo6").click(function() {
                    alert("test");
    });

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

 

function(){
	$('.panel').slideUp();
});
	
why this is inside the method..?
Please use plain text.
Developer
ravi1989
Posts: 777
Registered: ‎07-21-2012
My Device: 9810

Re: how to Create custom table in phonegap

Thanks Sir........!! every thing is fine..can you please tell me how to remove some space betwwen two labels . i used youer code working fine

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>

<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />
    <!--title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title-->
	
 <!--script src="jquery.collapser.min.js" type="text/javascript"></script-->
 

    <style type="text/css">
      .hidden {
 visibility: hidden
}
    </style>
   <script src="jquery.min.js" type="text/javascript"></script>
 <!--script src="jquery.collapser.js" type="text/javascript"></script-->
    <script type="text/javascript">


	/*$('.label').onClick( make_visible );
 
make_visible () {
  var id = this.id;
  id += '_desc';
 $('.description').addClass('hidden'); //makes everything hidden again
 $('#'+id).removeClass('hidden'); //nunhides the selected label description.
};*/

$(document).ready(function () {
         $(".label").click(function () {
		 
             var id = this.id;
			 
             id += '_desc';
             $('.description').addClass('hidden'); //makes everything hidden again
             $('#' + id).removeClass('hidden'); //nunhides the selected label description.
         });
 
     });

      
    </script>        
</head>
<body>

<div id='label_xx1' class='label'> Label 1</div><div id='label_xx1_desc' class='description hidden'>Description 1</div>
<div id='label_xx2' class='label'>Label 2</div><div id='label_xx2_desc' class='description hidden'>Description 2</div>
<div id='label_xx3' class='label'>Label 3</div><div id='label_xx3_desc' class='description hidden'>Description 3</div>
<div id='label_xx4' class='label'>Label 4</div><div id='label_xx4_desc' class='description hidden'>Description 4</div>
 

</body>
</html>



 

Please use plain text.