Learn to Code by Making Art
Learn programming while your create computer art by copying code from my free guide.
https://splashofcode.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>
Learn to Code by Making Art
Learn programming while your create computer art by copying code from my free guide.
https://splashofcode.com
comments powered by Disqus
javascript/jquery_mobile_template.txt · Last modified: 2013/01/31 14:16 by Joel Dare