J Query Mobile Menu With the JQuery mobile framework you can quickly and easily create a web layout that looks and feels like a native mobile application. The trick to getting the feel of a native app is duplicating it's transitions.

To try out some of Jquery's transitions, first create the following files.

JQuery1.html


<html>
<head>
<link rel="stylesheet" 
href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />  
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="b">
    <div data-role="header" data-theme="a">	
        <h1>Header</h1>
    </div>	
    <div data-role="content">
    <ul data-role="listview" data-inset="true"
    data-theme="c" data-dividertheme="a">
    <li data-role="list-divider">
        Transition Effects
    </li>
    <li>
        <a href="/jquery2.php" data-transition="flip">
        Flip
        </a>
    </li> 
    <li>
        <a href="/jquery2.php" data-transition="slideup">
        Slide Up
        </a>
    </li>
    <li>
        <a href="/jquery2.php" data-transition="slidedown">
        Slide Down
        </a>
    </li>		
    <li>
        <a href="/jquery2.php" data-transition="slide">
        Slide Left
        </a>
    </li>
    <li>
        <a href="/jquery2.php" data-transition="pop">
        Pop
        </a>
    </li>	           
    </ul>          
</div>
	
<div data-role="footer" data-position="fixed">
    <h1>Footer</h1>
</div>
</div>
</body>

</html>

This creates links to 'jquery2.html' with the transitions: slide, slide-up, slide-down, pop, and flip.

Next, create jquery2.html. This file is identical to jquery1.html, only it links back to jquery1.html. This isn't entirely necessary, but it allows us to freely test the transitions without having to hit the back button each time.

You can test your Jquery Mobile apps by changing the user-agent in Safari to Iphone.
If your develop menu is not already available:
In preferences - Advanced
check 'Show develop menu in menu bar'
Next, in the menu bar
Under Develop - User Agent
Select Iphone

Now you can use Safari web browser as though it were an Iphone and test your applications.

You might also be interested in