Permalink
Browse files

added first rev of pill buttons for BB6/BB7

  • Loading branch information...
1 parent 4d7ca59 commit 20366ec131aede170da96dbdd64d6897fab432c2 Tim Neil committed Nov 8, 2011
View
@@ -108,7 +108,7 @@ An alternative is to declare a linked in style sheet within your screen's conten
start from the main HTML page that you have loaded as the root of your application. So you should make your paths relative to that root document.
<div x-bb-type="screen">
- <link rel="stylesheet" type="text/css" href="css/tabs.css"></link>
+ <link rel="stylesheet" type="text/css" href="css/tabs.css"></link>
</div>
@@ -346,6 +346,25 @@ a display image (**x-bb-img**), a title (**x-bb-title**), a time (**x-bb-time**)
<div x-bb-type="item" x-bb-img="adamA.jpg" x-bb-title="AdamA" x-bb-time="10:24 PM May 22">Gotta love BlackBerry WebWorks!</div>
</div>
</div>
+
+## Pill Buttons
+
+Pill Buttons can provide a "Tab Like" interface for quickly switching between multiple views of data.
+
+![Control Panel](bbUI.js/raw/master/screenshots/pillButtons.png)
+
+Pill Buttons are a &lt;div&gt; with a **x-bb-type="pill-buttons"** attribute. Each pill button is then added to the container by creating a &lt;div&gt; with
+a **x-bb-type="pill-button"** attribute. The caption the button is determined by the contents of the &lt;div&gt;. The bbUI tookit knows which button is first and
+last to create the rounded ends of the pill button UI. To handle the click of the button simply add an "onclick" handler.
+
+<div x-bb-type="screen">
+ <div x-bb-type="pill-buttons">
+ <div x-bb-type="pill-button" onclick="selectContact()">Contact</div>
+ <div x-bb-type="pill-button" onclick="selectAddress()">Address</div>
+ <div x-bb-type="pill-button" onclick="selectPhone()">Phone</div>
+ </div>
+</div>
+
# Known Issues
View
@@ -272,14 +272,15 @@ a.bb5-button-highlight span {
.bb-text-arrow-list-item-hover
{
background-image: -webkit-gradient(linear, center top, center bottom, from(#0dacff), to(#0f75ff));
- /*background-color:#2175F7;*/
+ background-color:#2175F7;
}
.bb-text-arrow-list-item-value
{
line-height:40px;
padding-left:7px;
display:inline;
+
}
.bb-text-arrow-list-item-hover .bb-text-arrow-list-item-value
@@ -300,6 +301,11 @@ a.bb5-button-highlight span {
display:inline;
margin-right: 5px;
top: 15px;
+ width: 20px;
+ height: 20px;
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAALCAYAAACzkJeoAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oFGxUUItGqPS0AAABBSURBVBjTdcxBDgAhCATBlo87vnz2siYICidSHTBGkk3f4J+lZcpEPmoQtc5BwxxccQdPnJojXnB9u6FhhgMrAHy5yiKIJPT0DgAAAABJRU5ErkJggg==");
+ background-repeat: no-repeat;
+ background-position: top right;
}
@@ -970,6 +976,139 @@ a.bb5-button-highlight span {
font-weight: bold;
}
+/* =================================================
+ Pill Buttons
+ =================================================*/
+
+.bb-pill-buttons
+{
+ margin: 8px;
+ margin-bottom: 0px;
+ text-align:center;
+ /*position:relative;*/
+
+}
+
+.bb-pill-buttons .buttonLeft {
+ background: transparent url('../images/button/pillButtonRight.png') no-repeat scroll top right;
+ color: White;
+ display: block;
+ float: left;
+ height: 39px;
+ margin-right: 0px;
+ padding-right: 10px;
+ text-decoration: none;
+ width: 30%;
+}
+
+.bb-pill-buttons .buttonLeft span {
+ background: transparent url('../images/button/button.png') no-repeat;
+ display: block;
+ line-height: 39px;
+ padding: 0px 0px 0px 10px;
+ text-align:center;
+}
+
+.bb-pill-buttons .buttonRight {
+ background: transparent url('../images/button/btnRight.png') no-repeat scroll top right;
+ color: White;
+ display: block;
+ float: left;
+ height: 39px;
+ margin-right: 0px;
+ padding-right: 10px;
+ text-decoration: none;
+ width: 30%;
+}
+
+.bb-pill-buttons .buttonRight span {
+ background: transparent url('../images/button/button.png') no-repeat;
+ background-position: -10px 0px;
+ display: block;
+ line-height: 39px;
+ padding: 0px 0px 0px 10px;
+ text-align:center;
+}
+
+.bb-pill-buttons .buttonMiddle {
+ background: transparent url('../images/button/pillButtonRight.png') no-repeat scroll top right;
+ color: White;
+ display: block;
+ float: left;
+ height: 39px;
+ margin-right: 0px;
+ padding-right: 10px;
+ text-decoration: none;
+ width: 30%;
+}
+
+.bb-pill-buttons .buttonMiddle span {
+ background: transparent url('../images/button/button.png') no-repeat;
+ display: block;
+ line-height: 39px;
+ padding: 0px 0px 0px 10px;
+ text-align:center;
+ background-position: -10px 0px;
+}
+
+/* =================================================
+ BB7 Pill Buttons
+ =================================================*/
+
+.bb-bb7-pill-buttons {
+ height:45px;
+ padding-top: 5px;
+}
+
+.bb-bb7-pill-buttons .button {
+ float: left;
+ border-width:1px;
+ border-color:#BCBEC2;
+ border-style: solid;
+ height:40px;
+ color: black;
+ text-align:center;
+ white-space:nowrap;
+ vertical-align: middle;
+ padding-left: 0px;
+ padding-right: 0px;
+ line-height:40px;
+ display: table-cell;
+ box-shadow:1px 1px 1px #DCDCDC;
+ background-clip: padding-box;
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#F9F9F9), to(#D0D2D4));
+}
+
+.bb-bb7-pill-buttons .highlight-button{
+ float: left;
+ border-width:1px;
+ border-color:#0060E6;
+ border-style: solid;
+ height:40px;
+ color: White;
+ text-align:center;
+ white-space:nowrap;
+ vertical-align: middle;
+ padding-left: 0px;
+ padding-right: 0px;
+ line-height:40px;
+ display: table-cell;
+ box-shadow:2px 2px 2px #DCDCDC;
+ background-clip: padding-box;
+ background-image: -webkit-gradient(linear, center top, center bottom, from(#098CEE), to(#1766DB));
+}
+
+.bb-bb7-pill-buttons .left{
+ border-top-left-radius:5px;
+ border-bottom-left-radius:5px;
+}
+
+.bb-bb7-pill-buttons .right{
+ border-top-right-radius:5px;
+ border-bottom-right-radius:5px;
+}
+
+
/* =================================================
Not sure if these are needed anymore
View
@@ -305,7 +305,7 @@ bb = {
var text = innerChildNode.innerHTML;
innerChildNode.innerHTML = '<span class="bb-text-arrow-list-item-value">'+ text + '</span>' +
- '<img class="bb-arrow-list-arrow" src="images/arrow.png"/>';
+ '<div class="bb-arrow-list-arrow"></div>';
// Create our separator <div>
if (j < items.length - 1) {
@@ -393,46 +393,78 @@ bb = {
pillButtons: {
// Apply our transforms to all pill buttons passed in
apply: function(elements) {
- for (var i = 0; i < elements.length; i++) {
- var outerElement = elements[i];
- outerElement.setAttribute('class','bb-pill-buttons');
- // Gather our inner items
- var items = outerElement.querySelectorAll('[x-bb-type=pill-button]');
- for (var j = 0; j < items.length; j++) {
- var innerChildNode = items[j];
- innerChildNode.setAttribute('x-blackberry-focusable','true');
- var text = innerChildNode.innerHTML;
- innerChildNode.innerHTML = '<span>' + text + '</span>';
-
- if (j == 0) {
- innerChildNode.setAttribute('class','buttonLeft');
- }
- else if (j == items.length -1) {
- innerChildNode.setAttribute('class','buttonRight');
- }
- else {
- innerChildNode.setAttribute('class','buttonMiddle');
- }
-
- // See if the item is marked as selected
- if (innerChildNode.hasAttribute('x-bb-selected') && innerChildNode.getAttribute('x-bb-selected').toLowerCase() == 'true') {
- bb.pillButtons.selectButton(innerChildNode);
- }
-
- // Change the selected state when a user presses the button
- innerChildNode.onmousedown = function() {
- bb.pillButtons.selectButton(this);
- var buttons = this.parentNode.querySelectorAll('[x-bb-type=pill-button]');
- for (var i = 0; i < buttons.length; i++) {
- var button = buttons[i];
- if (button != this) {
- bb.pillButtons.deSelectButton(button);
+ if (bb.device.isBB5()) {
+ for (var i = 0; i < elements.length; i++) {
+ var outerElement = elements[i];
+ outerElement.setAttribute('class','bb-pill-buttons');
+ // Gather our inner items
+ var items = outerElement.querySelectorAll('[x-bb-type=pill-button]');
+ for (var j = 0; j < items.length; j++) {
+ var innerChildNode = items[j];
+ innerChildNode.setAttribute('x-blackberry-focusable','true');
+ var text = innerChildNode.innerHTML;
+ innerChildNode.innerHTML = '<span>' + text + '</span>';
+
+ if (j == 0) {
+ innerChildNode.setAttribute('class','buttonLeft');
+ }
+ else if (j == items.length -1) {
+ innerChildNode.setAttribute('class','buttonRight');
+ }
+ else {
+ innerChildNode.setAttribute('class','buttonMiddle');
+ }
+
+ // See if the item is marked as selected
+ if (innerChildNode.hasAttribute('x-bb-selected') && innerChildNode.getAttribute('x-bb-selected').toLowerCase() == 'true') {
+ bb.pillButtons.selectButton(innerChildNode);
+ }
+
+ // Change the selected state when a user presses the button
+ innerChildNode.onmousedown = function() {
+ bb.pillButtons.selectButton(this);
+ var buttons = this.parentNode.querySelectorAll('[x-bb-type=pill-button]');
+ for (var i = 0; i < buttons.length; i++) {
+ var button = buttons[i];
+ if (button != this) {
+ bb.pillButtons.deSelectButton(button);
+ }
}
}
+ }
+ }
+ } else {
+ for (var i = 0; i < elements.length; i++) {
+ var outerElement = elements[i];
+ outerElement.setAttribute('class','bb-bb7-pill-buttons');
+ // Gather our inner items
+ var items = outerElement.querySelectorAll('[x-bb-type=pill-button]');
+ var percentWidth = Math.floor(98 / items.length);
+ var sidePadding = 102-(percentWidth * items.length);
+ outerElement.style['padding-left'] = sidePadding + '%';
+ outerElement.style['padding-right'] = sidePadding + '%';
+ for (var j = 0; j < items.length; j++) {
+ var innerChildNode = items[j];
+ innerChildNode.setAttribute('x-blackberry-focusable','true');
+ if (j == 0) { // First button
+ innerChildNode.setAttribute('class','button left');
+ innerChildNode.setAttribute('onmouseover',"this.setAttribute('class','highlight-button left')");
+ innerChildNode.setAttribute('onmouseout',"this.setAttribute('class','button left')");
+ } else if (j == items.length -1) { // Right button
+ innerChildNode.setAttribute('class','button right');
+ innerChildNode.setAttribute('onmouseover',"this.setAttribute('class','highlight-button right')");
+ innerChildNode.setAttribute('onmouseout',"this.setAttribute('class','button right')");
+ } else { // Middle Buttons
+ innerChildNode.setAttribute('class','button');
+ innerChildNode.setAttribute('onmouseover',"this.setAttribute('class','highlight-button')");
+ innerChildNode.setAttribute('onmouseout',"this.setAttribute('class','button')");
+ }
+ // Set our width
+ innerChildNode.style.width = percentWidth + '%';
}
}
- }
- },
+ }
+ } /*,
// Reset the button back to its un-selected state
deSelectButton: function(button) {
@@ -466,7 +498,7 @@ bb = {
button.style.backgroundPosition = 'bottom right';
button.firstChild.style.backgroundPosition = '-10px -39px';
}
- }
+ }*/
},
imageList: {
View
@@ -15,7 +15,7 @@
* limitations under the License.
-->
<div x-bb-type="screen">
- <x-bb-script id="chartsJS" src="js/charts.js"/>
+ <script id="chartsJS" src="js/charts.js"></script>
<div style="margin:15px;color:Gray;">
<p align="center">
Below you will find some examples of how you can use Google's chart API in your HTML5 App<br /><br />
View
@@ -21,12 +21,11 @@
<author href="https://github.com/tneil">Tim Neil</author>
<icon src="images\icon.png" />
<icon src="images\icon.png" rim:hover="true" />
- <rim:loadingScreen backgroundImage="images\background.png" foregroundImage="images\loading1.gif" onFirstLaunch="true" onLocalPageLoad="true">
+ <rim:loadingScreen backgroundImage="images\background.png" foregroundImage="images\hippo.png" onFirstLaunch="true">
<rim:transitionEffect type="fadeIn" />
</rim:loadingScreen>
<content src="index.htm" />
<access uri="http://chart.apis.google.com" subdomains="true" />
- <!--<feature id="blackberry.ui.Spinner" />-->
<feature id="blackberry.push" />
<feature id="blackberry.message.sms" />
<feature id="blackberry.ui.menu" />
Oops, something went wrong. Retry.

0 comments on commit 20366ec

Please sign in to comment.