An easy way to change the Action Button on a per page basis

[GoogleCodeExporter]

See the iPhone Contacts application... Depending on where the user is the 
button changes from '+' 
to 'Edit' to 'Done'

Original issue reported on code.google.com by dwke...@gmail.com on 20 Nov 2007 at 8:08

[GoogleCodeExporter]

I had the same issue... here's a way to tweak it.

Here's a patch that you can apply to iui.js from 0.13 to get this effect if you 
add this to your <div 
id="toolbar">

      <a id="extraButton" class="button" href="#">Place-holder</a>

And, you add this to the attributes of your panel:

      extraLabel="Edit" extraHref="edit.php"

Original comment by patrickw...@gmail.com on 18 Dec 2007 at 5:34

Attachments:

• iui.diff

[GoogleCodeExporter]

For simplicity, here's just the code to tack into the end of the 'function = 
updatePage' in iui.js

    var extraButton = $("extraButton");
    if (extraButton)
    {
        var label = page.getAttribute("extraLabel");
        var href  = page.getAttribute("extraHref");
        if (label && href)
        {
            extraButton.style.display = "inline";
            extraButton.setAttribute( "href", href );
            extraButton.innerHTML = label;
        }
        else
            extraButton.style.display = "none";
    }

Original comment by patrickw...@gmail.com on 18 Dec 2007 at 5:37

[GoogleCodeExporter]

I am pleased to share a new extension I made for modifying the upper right 
toolbar
button based on page context. I'm sorry i don't know how to use mercurial yet 
but
still want to share so here is zip. Just unzip and open index for Demo in 
action and
instructions to use. It is a stand alone js that you add to your index. It 
modifies
button text, visibility, and href based on page content and then reset it before
leaving page. I plan more for it in the future like Back Button modding and the
ability to load form results from the left. Please let me know if anyone finds 
this
useful or has other feed back. Thanks!

Original comment by vichuds...@gmail.com on 10 Mar 2010 at 7:47

Attachments:

• [TbBMod Demo.zip](https://storage.googleapis.com/google-code-attachments/iui/issue-47/comment-3/TbBMod Demo.zip)

[GoogleCodeExporter]

I developed on my laptop and have no access to server right now. If anyone 
wants to
place on their server so people have any easy way to view I have no objections. 
I am
giving TbBMod freely to the iUI community to do with as they please. 

;-)
Vic

Original comment by vichuds...@gmail.com on 10 Mar 2010 at 8:15

[GoogleCodeExporter]

How would you make the button into a submit button?

Original comment by alex.zy...@gmail.com on 10 Mar 2010 at 9:24

[GoogleCodeExporter]

I haven't tried it but I think you could just give the button a type = submit
attribute. Of course that would make it a submit button always. I could add the
ability to the script to do it dynamic pretty easy I think. To tell you the 
truth I
made it for a checkbook app I'm throwing together, and hadn't thought of submit 
for
forms. Good catch. I'll re-post when I add that later.

Original comment by vichuds...@gmail.com on 10 Mar 2010 at 9:30

[GoogleCodeExporter]

You can try the demo here: http://www.remi-grumeau.com/labs/iui/tdbmod/

Well done Vic!!! Awesome job!

Original comment by remi.gru...@gmail.com on 10 Mar 2010 at 10:01

[GoogleCodeExporter]

Is there a way to make work your extension for the version 0.31. It only work 
with
0.40 right?

Original comment by judith.f...@gmail.com on 25 Mar 2010 at 6:10

[GoogleCodeExporter]

I have not tried it with version .3. I'm not sure if that version includes the 
neccesary blur and focus events 
to trigger the extensions button modding behaviors. When I get home from school 
tonight I'll check it out. 
Has anyone tried with version .3 yet?

Original comment by vichuds...@gmail.com on 25 Mar 2010 at 6:43

[GoogleCodeExporter]

Issue 259 has been merged into this issue.

Original comment by msgilli...@gmail.com on 29 Jun 2010 at 10:12

[GoogleCodeExporter]

I think this issue should be expanded beyond the initial complaint.  Vic, 
you've done some great work, but I want to take it a step further.

The color, text, and function of the buttons on both sides of the toolbar 
should be controllable, not only because that's the way Apple does it, but more 
importantly because screen real estate is at a premium on the iDevices.  Check 
out the Contacts.app, for example, where Apple puts the Done button for contact 
changes--what we would call a Submit button--in the upper right corner and 
colors it dark blue to make it stand out.  The same can be seen if you go into 
Settings.app to add a new e-mail or Exchange account.  The submit button is 
dark blue and in the upper right corner, which is where people are going to 
expect to find it, even in a web app (ESPECIALLY in a web app pretending to be 
a real app).

NOW, a real-world example of why this should be expanded to include the left 
button as well:

The very first page in my application is an authentication page, very common 
for web apps.  Therefore, I want the first page AFTER that (the "main" page) to 
have a big RED Logout button instead of the simple back button.  Also, I want 
it to say Logout, not the default behavior which makes it say the Title of the 
authentication page (which doesn't even fit and has to be ellipsized).

FINALLY, how I think we should implement:

Key points are, this needs to be simple and not require a lot of coding 
experience, per the mission of iUI, but also needs to be extraordinarily 
flexible so it can accomplish lots of magic.

I think both points can be satisfied if we modify iUI a little bit to make it 
look inside any class="panel" elements for A elements with class="button".  
These elements would be optional, but if present (with appropriate 
class="button left" or class="button right" multiattributes) would 
automatically hide and replace the original buttons.  Further class definitions 
could include color.  In theory, this would make it easy as pie to customize 
your own toolbar buttons, like so:

<form class="panel">
  <a href="#" class="button right blue" onclick="this.parent.submit()">Login</a>
  <fieldset>
    <div class="row">
      <label>Username</label>
      <input type="text" name="username"/>
    </div>
    <div class="row">
      <label>Password</label>
      <input type="password" name="password"/>
    </div>
  </fieldset>
</form>

Or, for my "real-world" example:

<div class="panel">
  <a href="?view=logout" class="button left red">Logout</a>
  <a href="#states" class="button right">Running</a>
  <ul>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

For now, these are just my ramblings.  I'm expecting that I'll have to 
implement this myself, and if so I'll keep you guys posted.  But I wanted to at 
least get what I had in my head down before I plunge ahead in case this part 
gets put on the back burner for me.

Original comment by eslind...@gmail.com on 29 Jul 2011 at 6:15

[GoogleCodeExporter]

Alright here's my progress so far.  Make the additions in the attached file to 
iui.css (some may belong in the theme's CSS file etc. but I'll leave that for 
someone else).

Now, you can do WHATEVER you want with the toolbar, on a per-page basis.  I've 
built in support for the BUTTON element (in multiple colors!) on the left AND 
right sides.  You can choose from leaving the default (slate) color or adding 
'red' or 'blue' to the class as desired (blue is used throughout iOS for 
submissions or making changes, and red for deleting or similar).  If all you 
need to do is add a button to the right side, it's easy as pie:

<form class="panel" title="My Form" action="..." method="...">
  <div class="toolbar">
    <button class="right blue" type="submit">Submit</button>
  </div>
  ...
  <!--Standard iUI code goes here.-->
  ...
</form>

If you want to completely override the toolbar, including the title area (which 
would allow you to replace it with filtering buttons (All|Missed, 
Day|Month|Year, etc.) or whatever else you need, just specify class 'solid' in 
addition to 'toolbar':

<div id="console" title="Console">
  <div class="toolbar solid">
    <h1>My Custom Title</h1>
    <button class="left">Back</button>
    <button class="right">Forward</button>
  </div>
  ...
  <!--standard iUI code-->
  ...
</div>

I'm working on adding a 'withback' class that is similar to 'solid' except 
doesn't defeat iUI's own Back button functionality.  But I thought I'd post 
what I have so far for anyone that finds it useful.  Also (disclaimer 
disclaimer), this hasn't been thoroughly tested, and I don't know if it will 
break any other iUI functionality.

Original comment by eslind...@gmail.com on 30 Jul 2011 at 5:12

Attachments:

• additions.css

[GoogleCodeExporter]

Original comment by msgilli...@gmail.com on 26 Mar 2012 at 7:33

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

Issue 89 has been merged into this issue.

Original comment by msgilli...@gmail.com on 26 Mar 2012 at 7:35

[GoogleCodeExporter]

Original comment by msgilli...@gmail.com on 26 Mar 2012 at 7:35

• Changed state: Accepted