Questions about toolbar buttons / backbutton label

[Philip Smith]

Hi everyone, we are building our first mobile site and chose to work
with IUI. Thank you for this framework!

I have two questions that I'm trying to figure out in regard to the
title bar area.

1. Is there a way to manipulate the label of the Back button? Instead
of having the Title of the previous page, can we always have it
display as just "Back"?

2. I've implemented another button in the top right corner to be use
as a "return-to-home" button. Is there a way to tell this NOT to
display on the homepage, but display everywhere else?

Here's my existing code:

<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a href="#home" class="button">
<span class="title">Menu</span>
</a>
</div>

Thank you.

[Remi Grumeau]

On Tue, Mar 27, 2012 at 2:49 PM, Philip Smith <psm...@torchmedia.ca> wrote:

Hi everyone, we are building our first mobile site and chose to work
with IUI. Thank you for this framework!

Thx for the team, we all always appreciate some good feedback :)

 

I have two questions that I'm trying to figure out in regard to the
title bar area.

1. Is there a way to manipulate the label of the Back button?

That's the default behavior.

 

Instead of having the Title of the previous page, can we always have it
display as just "Back"?

Easy solution if you need this behavior everywhere in your project:

#1 Open iui.js and search for: BackButton.innerHTML

#2 This should leads you line 814 (or near) " BackButton.innerHTML = prevPage.title ? prevPage.title : "Back"; "  

#3 Comment this line

#4 In your HTML, add "Back" to your backButton

You're done !

 

2. I've implemented another button in the top right corner to be use
as a "return-to-home" button.  Is there a way to tell this NOT to
display on the homepage, but display everywhere else?

Here's my existing code:

<div class="toolbar">
       <h1 id="pageTitle"></h1>
       <a id="backButton" class="button" href="#"></a>
       <a href="#home" class="button">
       <span class="title">Menu</span>
       </a>
</div>

Easy solution:

again in iui.js, 5 lines below the backButton line you did comment, you should see

  backButton.className = (bbClass) ? 'button ' + bbClass : 'button';

}

else

  backButton.style.display = "none";

replace it by

  backButton.className = (bbClass) ? 'button ' + bbClass : 'button';

  $("menuTitle").style.display = "inline";

}

else {

  backButton.style.display = "none";

  menuButton.style.display = "none";

}

And change your HTML code from

<span class="title">Menu</span>

to

<span class="title" id="menuButton">Menu</span>

Good solution (if you have some JS skills):

Use aftertransition event so iUI executes the code you want when the transition between two screens is finished.

See iui/js/iui-event-log.js for an example of how it works.

 

Thank you.

U r welcome :)

Remi

[Hong Xu]

See here
<http://www.iui-js.org/documentation/latest/extensions/extensions-tbbmod.html>

Hong