The LiquidGear UI integrates converts Javascript objects into iPhone UI components. You can build and display Navigational Bars, Tab Bars, and more. As you can see below we have added a couple elements.

  • There are two new scripts, jQuery and the LGUI library. Note: LGUI requires jQuery to function.
  • Give the body tag the id, stage.
  • We will use a NavBar, so we call the lg.navigation.show() function.
  • Create a div for each page we want to preload. In this example we have the home screen, intro, and contacts.
  • Set the class to page.
  • In this example we will be using an HTML page, so you would set the type to html.
  • Set a unique id to reference the page later, here we use home.
  • The title of the page. This will appear in the NavBar, if one is used.
  • The description of the page will be shown in as the sub header in the NavBar.
  • Callback runs a function once the page has been brought to view.
  • Navigation adds the page to the NavBar, if used.

 

index.html

<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>LiquidGear</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" charset="utf-8">
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/lg_iphone.js"></script>
  <script type="text/javascript" charset="utf-8" src="js/lg_iphone_ui.js"></script>
  <script type="text/javascript">
  lg.navigation.show();
  </script>
</head>

<body id="stage">
<div class="page" type="html" id="home" url="home.html" title="LiquidGear" desc="Welcome to LG" navigation="true" selected="true"></div>
  <div class="page" type="html" id="info" url="info.html" title="Info" desc="Device information" callback="setInfo" navigation="true"></div>
</body>
</html>

 

home.html

<h1>LiquidGear</h1>

<div>
    <ul>
        <li><a href="info.html" type="internal" id="link_info" navigation="true" title="Info" callback="setInfo">Info</a></li>
    </ul>
</div>

 

info.html

<h1>Information</h1>

<script>
/************************************
 * Information
 ************************************/
//Get information from device
function setInfo() {
    //Set info listener
    lg.bind('lg_info', getInfo);

    //Get device information
    lg.info.update();
}

//Listener for device information
function getInfo(e){
    //Clean up
    $(document).unbind('lg_info', getInfo);

    //Set info
    $("#uid").html(lg.info.id);
    $("#phonename").html(lg.info.name);
    $("#os").html(lg.info.os);
    $("#version").html(lg.info.version);
    $("#model").html(lg.info.model);
    $("#lgVersion").html(lg.info.lgVersion);
    $("#appVersion").html(lg.info.appVersion);
    $("#wifi").html(lg.info.wifi.toString());
}
</script>

<div class="desc">
  <h4>UID: <span id="uid"> </span></h4>
  <h4>Name: <span id="phonename"> </span></h4>
  <h4>OS: <span id="os"> </span></h4>
  <h4>Version: <span id="version"> </span></h4>
  <h4>Model: <span id="model"> </span></h4>
  <h4>LG Version: <span id="lgVersion"> </span></h4>
  <h4>App Version: <span id="appVersion"> </span></h4>
  <h4>WIFI: <span id="wifi"> </span></h4>
</div>