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: 25
Registered: ‎04-26-2012
My Device: Bold 9900
My Carrier: RIM

How can i get the pill button BBUi.js to work for 5 tabs

How can i get the pill button BBUi.js to work for 5 tabs?
Developer
Posts: 314
Registered: ‎03-28-2012
My Device: Curve 9360, Playbook, BB10 Dev Alpha
My Carrier: TMN

Re: How can i get the pill button BBUi.js to work for 5 tabs

Please don't write duplicate posts...

Nuno
Developer
Posts: 25
Registered: ‎04-26-2012
My Device: Bold 9900
My Carrier: RIM

Re: How can i get the pill button BBUi.js to work for 5 tabs

My bad!, It showed an error on my end, didn't know they both got posted
Developer
Posts: 314
Registered: ‎03-28-2012
My Device: Curve 9360, Playbook, BB10 Dev Alpha
My Carrier: TMN

Re: How can i get the pill button BBUi.js to work for 5 tabs

ok...

where are you having problems? phone or PB?

Nuno
Developer
Posts: 25
Registered: ‎04-26-2012
My Device: Bold 9900
My Carrier: RIM

Re: How can i get the pill button BBUi.js to work for 5 tabs

Phone, I tried using the BBUi.js to make the 5 tabs, but it still reads it as 3

Developer
Posts: 314
Registered: ‎03-28-2012
My Device: Curve 9360, Playbook, BB10 Dev Alpha
My Carrier: TMN

Re: How can i get the pill button BBUi.js to work for 5 tabs

can you show the relevant piece of code and a screenshot of the buttons?

Nuno
Developer
Posts: 25
Registered: ‎04-26-2012
My Device: Bold 9900
My Carrier: RIM

Re: How can i get the pill button BBUi.js to work for 5 tabs

That is the javascript file

 

addEventListener('load',doInputLoad,false);

var addressTab = null;
var contactTab = null;
var phoneTab = null;
var somethingDeyTab = null;
var locationTab = null;

function doInputLoad() {
var items = document.getElementsByTagName('input');
for (var i = 0; i < items.length; i++) {
var element = items[i];
element.style.width = screen.width - element.offsetLeft - 50 + 'px';
}
// All the sections are visible to start off with so that the above
// size calculations work
var width = (screen.width - 20) + 'px';

addressTab = document.getElementById('news');
addressTab.style.width = width;
addressTab.style.display = 'none';

phoneTab = document.getElementById('ent');
phoneTab.style.width = width;
phoneTab.style.display = 'none';

contactTab = document.getElementById('home');
contactTab.style.width = width;
contactTab.style.display = 'none';
contactTab.style.display = 'inline';

somethingDeyTab=document.getElementById('somethingdey');
somethingDeyTab.style.width = width;
somethingDeyTab.style.display = 'none';

locationTab=document.getElementById('location');
locationTab.style.width = width;
locationTab.style.display = 'none';

}

function selectLocation() {
phoneTab.style.display = 'none';
addressTab.style.display = 'none';
contactTab.style.display = 'none';
somethingDeyTab.style.display = 'none';
locationTab.style.display = 'inline';
}

function selectPhone() {
phoneTab.style.display = 'inline';
addressTab.style.display = 'none';
contactTab.style.display = 'none';
somethingDeyTab.style.display = 'none';
locationTab.style.display = 'none';
}

function selectAddress() {
addressTab.style.display = 'inline';
phoneTab.style.display = 'none';
contactTab.style.display = 'none';
somethingDeyTab.style.display = 'none';
locationTab.style.display = 'none';
}

function selectContact() {
addressTab.style.display = 'none';
phoneTab.style.display = 'none';
contactTab.style.display = 'inline';
somethingDeyTab.style.display = 'none';
locationTab.style.display = 'none';
}


function selectsomethingDey()
{
addressTab.style.display = 'none';
phoneTab.style.display = 'none';
contactTab.style.display = 'none';
somethingDeyTab.style.display = 'inline';
locationTab.style.display = 'none';
}

 

and this is the html

 

<body>
<div x-ww-type="screen">
<!--<div id="buttons" class="ww-pill-buttons">
<a id="btnContact" class="buttonLeft" onmouseover="doHover('btnContact')" onclick="selectContact();"><span>Contact</span></a>
<a id="btnAddress" class="buttonMiddle" onmouseover="doHover('btnAddress')" onclick="selectAddress();"><span>Address</span></a>
<a id="btnPhone" class="buttonRight" onmouseover="doHover('btnPhone')" onclick="selectPhone();"><span>Phone</span></a>
</div>-->

<div x-ww-type="pill-buttons">
<div x-ww-type="pill-button" x-ww-selected="true" onclick="selectContact();">Home</div>
<div x-ww-type="pill-button" onclick="selectAddress();">News</div>
<div x-ww-type="pill-button" onclick="selectPhone();">Entertainment</div>
<div x-ww-type="pill-button" onclick="selectsomethingDey();">Somethingdey</div>
<div x-ww-type="pill-button" onclick="selectLocation();">Location</div>
</div>

<div id="home" class="tab">

</div>

<div id="news" class="tab">

</div>

<div id="ent" class="tab">

</div>

<div id="somethingdey" class="tab">

</div>

<div id="location" class="tab">

</div>
</div>
</body>

 

localhost.png

Developer
Posts: 314
Registered: ‎03-28-2012
My Device: Curve 9360, Playbook, BB10 Dev Alpha
My Carrier: TMN

Re: How can i get the pill button BBUi.js to work for 5 tabs

that doesn't seem anything similar to bbUI.js

https://github.com/blackberry/bbUI.js/blob/master/samples/pillButtons.htm

Nuno
Developer
Posts: 25
Registered: ‎04-26-2012
My Device: Bold 9900
My Carrier: RIM

Re: How can i get the pill button BBUi.js to work for 5 tabs

It is, i just changed a few Id names and removed the content i didn't need

Developer
Posts: 314
Registered: ‎03-28-2012
My Device: Curve 9360, Playbook, BB10 Dev Alpha
My Carrier: TMN

Re: How can i get the pill button BBUi.js to work for 5 tabs

perhaps you removed too much Smiley Very Happy

couldn't look at the screenshot. can you upload it somewhere? imgur..

Nuno