iPhonify

A jQuery Plugin

Go From This...
<ul id="top">
  <li>Fruits
    <ul>
      <li>Apple
        <div class="leaf">
          <h3>Apple</h3>
          <img src="apple.jpg" width="75" align="right">
          Mmm, juicy and delicious.  
       </div>
      </li>
      <li>Orange
        <div class="leaf">
          <h3>Orange</h3>
          <img src="orange.jpg" width="75" align="right">
          The only fruit named for its color.
        </div>
      </li>
    </ul>
  </li>
  <li>Nuts
    <ul>
      <li>Pecan
        <div class="leaf">
          <h3>Pecan</h3>
          <img src="pecan.gif" width="75" align="right">
          Makes a delicious pie.
        </div>
      </li>
      <li>Walnut
        <div class="leaf">
          <h3>Walnut</h3>
          <img src="walnut.jpg" width="75" align="right">
          A great topping for sundaes.
        </div>
      </li>
    </ul>
  </li>
  <li>Cheese
    <ul>
      <li>Swiss
        <div class="leaf">
          <h3>Swiss</h3>
          <img src="swiss.jpg" width="75" align="right">
          What's better than a pastrami and swiss sandwich?
        </div>
      </li>
      <li>Cheddar
        <div class="leaf">
          <h3>Cheddar</h3>
          <img src="cheddar.jpg" width="75" align="right">
          A tangy treat on tacos.
        </div>
      </li>
    </ul>
  </li>
</ul>
		
To This...
...with a single line of code!
 

Installation

Download the iPhonify zip file and extract the files to your hard drive. Include the iPhonify.js and iPhonify.css files in your html page. Make sure to include the .js file AFTER you include jQuery.

 

Binding the plugin

To bind the iPhonify plugin, you will want to select the topmost ul element in your markup. In the html examples this is given the id "top".

$(function() {  // shortcut for document ready
  $( "#top" ).iPhonify();
});

 

Configuring your HTML markup

There are two types of content to be concerned about when using iPhonify: lists and leaves.

Lists

A list is a <ul> element containing <li> items as options that you wish to offer the end user. It could be a navigation menu or a list of names, phone numbers or email messages. These lists may be nested as desired, and the <li> items may contain either additional <ul> lists (submenus), or leaves as described below.

Leaves

A leaf is any non-<ul> content of the <li> item, surrounded by <div> tags to distinguish it from the title of the <li> item. An example could be profile information for a person, or a form to request information.
Markup

		<ul id="top">
  <!-- anything after the <li> but before the <div class="leaf"> 
	will appear as the list item's "title" -->
  <li>One
    <div class="leaf">This is one's leaf content</div>
  </li>
  <li>Two
	<div class="leaf">This is two's leaf content</div>
  </li>
  <li>Three
  <!-- nested lists -->
    <ul>
      <li>Submenu 1
	    <div class="leaf">Submenu 1's leaf content</div>
      </li>
      <li>Submenu 2
        <div class="leaf">Submenu 2's leaf content</div>
      </li>
    </ul>
  </li>
</ul>	
	
			
Result
 

Delivering AJAX Content

If you don't want to dump your entire application to the client on the initial page load, you can use ajax links to deliver content on demand. By default, all menuitem links will be ajax-ified. If you want to link to an external site, include the class "external" on your link.

Any content delivered via an ajax link MUST use the same convention as any page load content; that is, it must be <ul> lists and/or <div> leaves.

You can also combine non-ajax menuitems and ajax links as desired.

Markup

		<ul id="top">
  <!-- ajax links -->
  <li>plain menuitem<div>content</div></li>
  <li><a href="ajax2.cfm">Ajax long list</a></li>
  <!-- combo of regular and ajax content -->
  <li>A regular menuitem 
    <a href="ajax3.html">And an ajax link</a>
    <div class="leaf">The regular menuitem's leaf content</div>
  </li>
  <!-- external link -->
  <li>
    <a href="http://www.google.com" class="external">
      Google.com
    </a>
  </li>
</ul>
	
		
Result
   

Static (Top Row) Content

You will probably want some content to remain on the page as users move throughout the dynamic part of the application. This could be a company logo for example. To accomplish this, simply add your static content to the body of your document BEFORE the topmost <ul> on your initial page. This will render that content as static for the life of the application.

Markup

		<div class="leaf" style="padding:12px;background-color:#33cc33;color:white;font-size:13px;font-weight:bold">
  	Joe's Mobile Widgets
</div>
<ul id="top">
  <!-- ajax links -->
  <li><a href="ajax1.html">Ajax link 1</a></li>
  <li><a href="ajax2.cfm">Ajax long list</a></li>
  <!-- combo of regular and ajax content -->
  <li>A regular menuitem 
    <a href="ajax3.html">And an ajax link</a>
    <div class="leaf">The regular menuitem's leaf content</div>
  </li>
  <!-- external link -->
  <li>
    <a href="http://www.google.com" class="external">
      Google.com
    </a>
  </li>
</ul>	
	
		
Result