Fugenapps

future generation application

by Zuhaib Siddiqui

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fugen Apps | Future Genration Applications</title>
 <!-- jQuery Mobile -->
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="css/themes/my-custom-theme.css" />
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" /> 
  <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
    </head>

<body>
<div data-role="page" id="home">
    <div id="header" data-role="header">       
        <ul id="menu-left" data-role="menu">
            <li>
               <span data-role="button" data-icon="arrow-d" data-iconpos="left"></span>
               <ul data-role="listview" data-inset="true">
                   <li data-icon="false"><a href="#A1">A1</a></li>
                   <li data-icon="false"><a href="#A2">Option A2 is really long</a></li>
                   <li data-icon="false"><a href="#logoutDialog" data-rel="dialog">Logout</a></li>
               </ul>
            </li>
        </ul>
        <ul id="menu-right" data-role="menu">
            <li>
                <span data-role="button" data-icon="arrow-d" data-iconpos="right">Actions</span>
                <ul data-role="listview" data-inset="true">
                    <li data-icon="false"><a href="#a1">Option B1</a></li>
                       <li data-icon="false"><a href="#a1">Option B2</a></li>
                </ul>
            </li>
        </ul>        
        <h1>
            <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"></a>
            <p id="txtSpan">Page One</p>
            <a href="#"...

CSS

#header{
    overflow: visible; /* Let menu content overflow outside the header */
}
#header ul { /* Menu Name */
    margin-top: 1em;
}
#header .ui-btn-corner-all {
    /* border-radius: 0; /* Make the menu button squarish */
}
#header ul ul { /* Menu Item List */
    position: absolute; /* Position absolutely */
    display: none; /* Hide */
    z-index:500; /* Ensure visibility over other elements on page */
    margin-top: 0px; /* Bring menu closer to button; not needed on mobile */
}
#header ul ul li {
    width: 150px; /* Fixed width menu items*/
    display: block; /* JQM makes a inline-blocks... reset it to block */
}
#header ul ul li a {
    white-space: normal; /* Stop long menu names from truncating */
}
#header ul:hover ul {
    /* display: block; /* Display menu on hover over parent */
}
#menu-left {
    float: left;
    margin-left:0.5em;
}
#menu-right {
    float: right;
    margin-right:0.5em;
}
#menu-left ul {
    margin-left:0.5em;
}
#menu-right ul {
    margin-right: 0.5em;
    right: 0em;
}
#home .ui-header {
    height: 75px;
}
#home .ui-header h1 {
    font-size: 16pt;
    color:#FD7E00;
    margin-bottom:0px;
}
#txtSpan {
    position: relative;
    display: inline-block;
    top: -5px; /* Doesnt seem possible to vertically center otherwise */
}
#home .ui-header h2 {
    font-size: 14pt;
    margin-top: 0px;
}
/*=====================================================*/
/*! jQuery Mobile v1.0.1 jquerymobile.com | jquery.org/license */
.ui-bar-a{border:1px solid #2a2a2a;background:#111;color:#fff;font-weight:bold;text-shadow:0 -1px 1px #000;background-image:-webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#111));background-image:-webkit-linear-gradient(#3c3c3c,#111);background-image:-moz-linear-gradient(#3c3c3c,#111);background-image:-ms-linear-gradient(#3c3c3c,#111);background-image:-o-linear-gradient(#3c3c3c,#111);background-image:linear-gradient(#3c3c3c,#111)}.ui-bar-a,.ui-bar-a input,.ui-bar-a select,.ui-bar-a...

JavaScript

$('body').bind('hideOpenMenus', function(){
    $("ul:jqmData(role='menu')").find('li > ul').hide();
});
var menuHandler = function(e) {
    $('body').trigger('hideOpenMenus');
    $(this).find('li > ul').show();
    e.stopPropagation();
};
$("ul:jqmData(role='menu') li > ul li").click(function(e) {
   $('body').trigger('hideOpenMenus');
e.stopPropagation();
});
$('body').delegate("ul:jqmData(role='menu')",'click',menuHandler);
$('body').click(function(e){
   $('body').trigger('hideOpenMenus');
});