More fun with iUI

I’ve been working (when the mood takes me) on an iphone/iPod Touch based web app using Joe Hewitt’s iUI framework. While the iUI famework makes a good starting point it does not do everything you might need. Take menu screens for instance, the stock menu screen looks something like this:

stock_iUI_Menu

The emulator cut the right chevrons off from the links but they are there.

This type of menu is created using a simple unordered list like this:

<ul id="First" title="First Choice">
       <li><a href="#FC1">First Choice Option 1</a></li>
      <li><a href="#FC2">First Choice Option 2</a></li>
</ul>

One thing I wanted to do was to be able to include additional markup such as headings, paragraphs or even images say, into the menu like this (multiple sub menus with a heading before each):

iUI_Menu_Option1

This is the markup I used to create the screen above:

<div id="Second" title="Second Choice">
      <h3 align="center">Make a choice from here</h3>
      <div class="CustomLinks">
           <a href="#SC1">Second Choice Option 1</a>
          <a href="#SC2">Second Choice Option 2</a>
          <a href="#SC3">Second Choice Option 3</a>
          <a href="#SC4">Second Choice Option 4</a>
     </div>
     <h3 align="center">Or make a choice from here</h3>
     <div class="CustomLinks">
          <a href="#SC1">Second Choice Option 1</a>
          <a href="#SC2">Second Choice Option 2</a>
          <a href="#SC3">Second Choice Option 3</a>
          <a href="#SC4">Second Choice Option 4</a>
     </div>
     <hr/>
</div>

Notice that the panel is defined with a DIV instead of a UL tag and that the sub menus are themselves DIVs with a class of “CustomLinks”. More about this later.

A variation on this style that I wanted is shown here:

iUI_Menu_Option2

The difference, if it is not obvious, is that the sub menus are now in their own little panels. The markup for this looks like this:

<div id="Third" title="Third Choice" class="panel">
     <h3 align="center">Make a choice from here</h3>
     <fieldset>
          <div class="CustomLinks">
               <a href="#TC1">Third Choice Option 1</a>
               <a href="#TC2">Third Choice Option 2</a>
               <a href="#TC3">Third Choice Option 3</a>
               <a href="#TC4">Third Choice Option 4</a>
          </div>
     </fieldset>
     <h3 align="center">Or make a choice from here</h3>
     <fieldset>
          <div class="CustomLinks">
               <a href="#TC1">Third Choice Option 1</a>
               <a href="#TC2">Third Choice Option 2</a>
               <a href="#TC3">Third Choice Option 3</a>
               <a href="#TC4">Third Choice Option 4</a>
          </div>
     </fieldset>
     <hr/>
</div>

The only difference is that I’ve added the standard iUI class=”panel” attribute to the outer DIV and I’ve wrapped the sub menu DIVs with the standard iUI fieldset tag.

Both of these menu variations still work exactly the same as the original iUI unordered list style menu but they offer the ability to give the user some additional information as well as to group menu items together on the same main menu panel. Anyway I think they look good!

So, what’s the secret ingredient, some custom CSS of course so here it is:

.CustomLinks {
     position: relative;
     margin: 0;
     padding: 8px 0 8px 10px;
     font-size: 20px;
     font-weight: bold;
     list-style: none;
     }

.CustomLinks > a {
     border-bottom: 1px solid #E0E0E0;
     display: block;
     padding: 8px 32px 8px 10px;
     margin: 0 0px 0 -10px;
     text-decoration: none;
     color: inherit;
     text-align: left;
     background: url(iui/listArrow.png) no-repeat right center;
     }

.CustomLinks > a:first-child {
     top: 0;
     border-top: 1px solid #E0E0E0;
     text-align: left;
     }

I placed this in a stand alone css file in the same directory as my web pages and referred to it in the initial page header just as you would for any other css file. The web directory had iui as a child directory, hence the location of listArrow.png as being in the iui sub directory. You could add this css to the original iui.css file in which case you’d need to remove the reference to the iui sub directory from that url, otherwise everything can remain the same.

<div id=”Second” title=”Second Choice”>

<h3 align=”center”>Make a choice from here</h3>

<div class=”iMegLinks”>

<a href=”#SC1″>Second Choice Option 1</a>

<a href=”#SC2″>Second Choice Option 2</a>

<a href=”#SC3″>Second Choice Option 3</a>

<a href=”#SC4″>Second Choice Option 4</a>

</div>

<h3 align=”center”>Or make a choice from here</h3>

<div class=”iMegLinks”>

<a href=”#SC1″>Second Choice Option 1</a>

<a href=”#SC2″>Second Choice Option 2</a>

<a href=”#SC3″>Second Choice Option 3</a>

<a href=”#SC4″>Second Choice Option 4</a>

</div>

<p align=”center”>Dave Ellis Rocks!</p>

<hr/>

</div>

Advertisements

Tags: , ,

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: