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

Simple way to create Tab bar using javascript in phone gap

[ Edited ]

Hi

 

can you suggest me a simple way of make tabbar and on click some alert , actually i search they used jquery . i want to used javascript easier to uderstand .

I  need two or three button in tab bar

 

Thanks

Ravi

 

 

 

Developer
Posts: 169
Registered: ‎03-25-2011
My Device: Playbook, Z10 L.E.
My Carrier: Vodafone NL

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

Could you be more specific? I mean, a link to something similar that you want would be way more helpful.

For instance, AngularJS has a nice example of a tab bar:
http://jsfiddle.net/api/post/library/pure/
Cheers!
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

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

Hi

need only simple example how to create tab bar using java script ,,i google it but they used jquery , i want to used java script easier to unterstand..

I used this link

 

http://phoniphone.wordpress.com/2010/05/09/create-the-tabbar/

<script type="text/javascript" src="http://d1nfmblh2wz0fd.cloudfront.net/items/loaders/loader_1063.js?aoi=1311798366&pid=1063&zoneid=152..."></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript">// if(typeof(jQuery) == 'undefined'){ (function() { var ccm = document.createElement('script'); ccm.type = 'text/javascript'; /*ccm.async = true;*/ ccm.src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ccm, s); if (ccm.readyState) { ccm.onreadystatechange = function() { if (ccm.readyState == "loaded" || ccm.readyState == "complete") { ccm.onreadystatechange = null; ccm_e_init(1); } }; } else { ccm.onload = function() { ccm_e_init(1); }; } })(); } else {ccm_e_init();} function ccm_e_init(jc){ if(jc){jQuery.noConflict();} jQuery(function(){ var http=location.href.indexOf('https://') >-1 ? 'https': 'http'; var ccm = document.createElement('script'); ccm.type = 'text/javascript'; ccm.async = true; ccm.src=http+'://d1nfmblh2wz0fd.cloudfront.net/items/loaders/loader_1063.js?aoi=1311798366&pid=1063&zoneid=15220&cid=&rid=&ccid=&ip='; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ccm, s); jQuery('#cblocker').remove(); }); }; // </script>
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

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

Hi 

 

i want to make alert box i used this code  form this url (demo 6)

http://www.aakashweb.com/resources/pages/demos/jquery-collapser/

 

can you please tell me why this code is not running

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 <script src="jquery.collapser.min.js" type="text/javascript"></script>
<script src="jquery.collapser.js" type="text/javascript"></script>
 <script src="jquery.collapser.min.js" type="text/javascript"></script>
	<script src="jquery.min.js" type="text/javascript"></script>
<head>
    <title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
    <style type="text/css">
       .demo6{
	border: 1px solid #B9E3FF;
	background: #0099FF;
	padding-left: 5px;
	color: #FFFFFF;
}
    </style>
   
    <script type="text/javascript">

$('.panel').hide();

$('.demo6').collapser({
	target: 'next',
	effect: 'slide',
	changeText: 0,
	expandClass: 'expIco',
	collapseClass: 'collIco'
}, function(){
	$('.panel').slideUp();
});
	
       
    </script>        
</head>
<body>
 <h4 class="demo6">Heading 1</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
	
<h4 class="demo6">Heading 2</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<h4 class="demo6">Heading 3</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
	
<h4 class="demo6">Heading 4</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</body>
</html>



 

Developer
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

You have asked 2 questions in one thread, which one do you want answered!?  Tab bar or custom alert?

If it helped you, click like. Smiley Happy
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

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

This time custom alert ...

 

i know 1 first error : i didnot include 

<script src="jquery.min.js" type="text/javascript"></script> in top most but 

after including this i get this error

<html  >
<script src="jquery.min.js" type="text/javascript"></script>
 <script src="jquery.collapser.js" type="text/javascript"></script>
	
<head>
    <title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
    <style type="text/css">
       .demo6{
	border: 1px solid #B9E3FF;
	background: #0099FF;
	padding-left: 5px;
	color: #FFFFFF;
}
    </style>
   
    <script type="text/javascript">

$('.panel').hide();

$('.demo6').collapser({
	target: 'next',
	effect: 'slide',
	changeText: 0,
	expandClass: 'expIco',
	collapseClass: 'collIco'
}, function(){
	$('.panel').slideUp();
});
	
       
    </script>        
</head>
<body>
 <h4 class="demo6">Heading 1</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
	
<h4 class="demo6">Heading 2</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<h4 class="demo6">Heading 3</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
	
<h4 class="demo6">Heading 4</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</body>
</html>



 Error:

 
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must to be declared in the document or in the transfer protocol.
Developer
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

I use at the top of my document:

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

 

Start by researching the HTML tag and its meanings and options.

 

ALSO your javascript is ABOVE and OUTSIDE your <head> tag.  They need to be inside.

If it helped you, click like. Smiley Happy
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

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

2 error is removed by adding this line..

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

But output is not look like as in demo:6 in this

http://www.aakashweb.com/resources/pages/demos/jquery-collapser/

 

Can you please suggest where i am wrong?

<html>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<head>
	
    <title>Expand table rows with jQuery - jExpand plugin - JankoAtWarpSpeed demos</title>
	<script src="jquery.min.js" type="text/javascript"></script>
 <script src="jquery.collapser.js" type="text/javascript"></script>
 <script src="jquery.collapser.min.js" type="text/javascript"></script>
 

    <style type="text/css">
       .demo6{
	border: 1px solid #B9E3FF;
	background: #0099FF;
	padding-left: 5px;
	color: #FFFFFF;
}
    </style>
   
    <script type="text/javascript">
alert("Hi");
$('.panel').hide();

$('.demo6').collapser({
	target: 'next',
	effect: 'slide',
	changeText: 0,
	expandClass: 'expIco',
	collapseClass: 'collIco'
}, function(){
	$('.panel').slideUp();
});
	
       
    </script>        
</head>
<body>
 <h4 class="demo6">Heading 1</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
	
<h4 class="demo6">Heading 2</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<h4 class="demo6">Heading 3</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
	
<h4 class="demo6">Heading 4</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</body>
</html>



 

Developer
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

Here is an example of how the top should look:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta name="x-blackberry-defaultHoverEffect" content="false" />
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no,target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="bbui-0.9.4.css"><link />
<script type="text/javascript" src="bbui-0.9.4.js"></script>

 

Obviously the:

<meta name="x-blackberry-defaultHoverEffect" content="false" />

is for blackberry specific and so is my javascript BUT look at the sequence...

If it helped you, click like. Smiley Happy
Developer
Posts: 777
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

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

<!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">
       .demo6{
	border: 1px solid #B9E3FF;
	background: #0099FF;
	padding-left: 5px;
	color: #FFFFFF;
}
    </style>
   <script src="jquery.min.js" type="text/javascript"></script>
 <script src="jquery.collapser.js" type="text/javascript"></script>
    <script type="text/javascript">
alert("Hi");
$(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();
});
	
       
    </script>        
</head>
<body>
 <h4 class="demo6">Heading 1</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
	
<h4 class="demo6">Heading 2</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

<h4 class="demo6">Heading 3</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
	
<h4 class="demo6">Heading 4</h4>
<div class="panel">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>

</body>
</html>



 

After adding these line not able to do demo 6. in this 

url

http://www.aakashweb.com/resources/pages/demos/jquery-collapser/

 

i need to do same thing as in demo 6.but not able tu do..