javascript:jquery_mobile_template [JoelDare.com]

jQuery Mobile Template

Here's a basic jQuery Mobile template that I use for web based apps based on jQuery Mobile. This simple template uses the jquery.com CDN to load both jQuery and jQuery Mobile so that you don't need to download any of the files and many users will already have cached copies.

<!DOCTYPE html>
<html>
<head>
  <title>Big Fella Software</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  <link rel="apple-touch-icon" href="image/bigfella.gif" />
  <link rel="shortcut icon" href="favicon.ico" />
  <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  <script>
    $(document).ready( init() );
    function init() {
      // Startup stuff
    }
  </script>
  <!-- Google Analytics Code Goes Here -->
  <style>
    .ui-icon-big-fella {
      background-image: url("/common/logo/big_fella_white_trans_18.png");
    }
    /* Two columns for wide windows */
    @media only screen and (min-width: 650px) {
      .content-primary {
        float: left;
        width: 30%%;
      }
      .content-secondary {
        text-align: left;
        float: left;
        width: 67.5%%;
        margin-right: 2.5%;
      }
    }
  </style>
</head>
<body>

<div data-role="page" id="main">

  <div data-role="header">
    <h1>Big Fella Software</h1>
  </div><!-- /header -->

  <div data-role="content">

    <div class="content-primary">

      <div data-role="content">
          <a href="#" data-direction="reverse" data-role="button" data-theme="b">Apps for Artists</a>
          <a href="#" data-direction="reverse" data-role="button" data-theme="b">About Us</a>
          <a href="#" data-direction="reverse" data-role="button" data-theme="b">Contact Us</a>
      </div><!-- /content -->

    </div><!-- /content-secondary -->

    <div class="content-secondary">

      <p>Content goes in this area...</p>

    </div><!-- /content-secondary -->

  </div><!-- /content -->

</div><!-- /main -->

</body>
</html>