jQuery Mobile Lesson 3

jQuery Mobile Lesson 3

0 21700
jQuery Mobile Lesson 3

Our third jQuery Mobile tutorial is ready. The new lesson tells about mobile page orientation, page events (pagebeforecreate, pagecreate, pageinit etc), touch and swipe events, virtual mouse events. Multiple examples demonstrates how you can use these events.

ADAPTING TO THE ORIENTATION EVENT

When viewing a mobile device, there are two options or modes for screen orientation. When a page is viewed in portrait, it means that the height of the screen is greater than the width of the screen. When a page is viewed in landscape, the width of the screen is greater than the height of the screen.
Unless the device is locked into one viewing mode, the screen can be rotated and content shifted dynamically to make use of the extra space. While jQuery Mobile handles the resize of many of your elements, you may want to trigger a custom function whenever a screen change is detected.

Using the orientationchange Event
Example 7: orientation change Event

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script>
  $(document).on("pagecreate",function(event){
    $(window).on("orientationchange",function(){
      if(window.orientation == 0) {
        $("p").text("The orientation has changed to portrait!").css({"background-color":"yellow","font-size":"300%"});
      } else {
        $("p").text("The orientation has changed to landscape!").css({"background-color":"pink","font-size":"200%"});
      }
    });
  });
  </script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>The orientationchange Event</h1>
    </div>
    <div data-role="main" class="ui-content">
      <p>Try to rotate your device!</p>
      <p><b>Note:</b> You must use a mobile device, or a mobile emulator to see the effect of this event.</p>
    </div>
    <div data-role="footer">
      <h1>Footer Text</h1>
    </div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: Page orientaton Event</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script>
  $(document).on('pageinit', function() {
    $(window).on('orientationchange', function(e) {
      $("#mode").html('orientation is currently '+e.orientation);
    });
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page" id="mode">
    <div data-role="header"><h1>Page orientaton Event</h1></div>
    <div data-role="main" class="ui-content">
      <p>Content in orientation</p>
      <a href="pageexist.html" data-role="button">External Page Exist</a>
      <a href="page_notexist.html" data-role="button">No Page Exist</a>
      <p>Try to rotate your device!</p>
      <p><b>Note:</b> You must use a mobile device, or a mobile emulator to see the effect of this event.</p>
    </div>
    <div data-role="footer">
      <h1>www.Script-tutorials.com</h1>
    </div>
  </div>
</body>
</html>

INITIALIZING PAGE IN JQUERY MOBILE

Example 8: initializing page in jQuery mobile

Page markup before jQuery Mobile initialization Page markup after jQuery Mobile initialization
<!-- begin first page -->
<section id="page1" data-role="page">
  <header data-role="header"><h1>jQuery Mobile</h1></header>
  <div data-role="content">
    <p>First page!</p>
  </div>
  <footer data-role="footer"><h1>Footer</h1></footer>
</section>
<!-- end first page -->
<!-- begin first page -->
<section class="ui-page ui-body-c ui-page-active" data-url="page1" id="page1" data-role="page">
  <header role="banner" class="ui-bar-a ui-header" data-role="header">
    <h1 aria-level="1" role="heading" tabindex="0" class="ui-title">jQuery Mobile</h1>
  </header>
  <div role="main" data-role="content" class="ui-content">
    <p>First page!</p>
  </div>
  <footer role="contentinfo" class="ui-bar-a ui-footer" data-role="footer">
    <h1 aria-level="1" role="heading" tabindex="0" class="ui-title">Footer</h1>
  </footer>
</section>
<!-- end first page -->
Both markup script Page markup after jQuery Mobile initialization and Page markup before jQuery Mobile initialization gives same result:

When building a jQuery application, it is common practice to bind your event handlers on document load. You can do something similar using jQuery Mobile’s page hide and show events, but be careful. Since the page hide and show events are triggered every time a page transition happens, you might bind the event handlers more than once. For example, if you bind a click event listener to an element within a page show event, that click event listener will be bound every time that page is shown. If you are only using that page once, that’s fine, but if the user goes to that page multiple times, then the event listener will be bound multiple times.
To get around this problem, you can either check to see if you have already bound the event handler (and if you have, do not bind it again), or clear the binding each time before you rebind. If you use the latter method, namespacing your bindings can be particularly useful. For more information on namespaced events, see http://docs.jquery.com/Namespaced_Events. Namespaced events are a useful tool to have in your jQuery toolbox.

USING PAGEBEFORECREATE TO DYNAMICALLY ADD AN ATTRIBUTE

The pagebeforecreate event is used when you have content that you want modified before jQuery Mobile has had a chance to lock in and write the data-roles and attributes of page elements to the DOM.

Example 9: using pagebeforecreate to dynamically add an attribute

The file starts out as a standard HTML file that uses jQuery Mobile, but we start a script element. Some jQuery code that is used to bind the pagebeforecreate event to the document. This is done by using the .on() function that is available when using jQuery 1.7+. When the pagebeforecreate event runs it searches for any elements that have an attribute of class="modify" and applies an attribute of datainset="true" to any that are found by using the .attr() function.
Because the pagebeforecreate event runs before the page code is added to the DOM, jQuery Mobile sees the data-inset="true" attribute and styles it as an inset list.
<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: Developing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
  $(document).on('pagebeforecreate', function(event) {
    $(".modify").attr('data-inset','true');
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page" id="home">
    <div data-role="header"><h1>pagebeforecreate event</h1></div>
    <div data-role="content">
      <p>The following list will be inset during the pagebeforecreate event</p>
      <ul class="modify" data-role="listview">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>
  </div>
</body>
</html>

USING THE PAGECREATE EVENT

The pagecreate event can be used either to apply your own widgets or to use the built-in widget or plug-in controls that jQuery Mobile provides.
Example 8: using the pagecreate event in conjuction with the listview plug-in

The code starts out as a standard page using jQuery Mobile, and the .on() function is using the pagecreate event to run.
There is a selector that finds any element on the page that has a class="modify" attribute and then adds an attribute of data-inset="true". After that has been done you can see that a function called listview() is being run. This function is known as the listview plug-in and is used to apply the styles and markup for a list. Line 11 then closes the .on() function, which is the binding to the pagecreate event.
There is a ul element that contains only an attribute of class="modify". The data-role="listview" attribute is not present, and neither is the data-inset="true" attribute.
<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: Developing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
  $(document).on('pagecreate', function(event) {
    $(".modify").attr('data-inset','true').listview();
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page" id="home">
    <div data-role="header"><h1>pagecreate event</h1></div>
    <div data-role="content">
      <p>The following list will be styled during the pagecreate event</p>
      <ul class="modify">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>
  </div>
</body>
</html>

USING THE PAGEINIT EVENT

The pageinit event is best described and used as you would use the $(document).ready() function of jQuery. This event is triggered after the DOM has been loaded and all widgets and plug-ins have been run. This event also is triggered whenever a page is loaded either directly or through the AJAX call of another page. This event is triggered only once when included in the DOM.

Using pageinit When Loading the Second Page

The initial page setup should be familiar by now. Starting you can see the same method is employed to bind the pageinit event as was used to bind the pagebeforecreate and pagecreate events. The difference of course is where a selector for an element with an id="away" is used in the .on() function to bind an alert() function that will only run on the page with that selector when it is first loaded into the DOM.
Continuing down the code you can see that a page has been set up with a div element using the data-role="page" attribute.

Example 9: using the pageinit when loading the second page

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: Developing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
  $(document).on('pageinit','#away', function(event) {
    alert("The pageinit event has been run");
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page" id="home">
    <div data-role="header"><h1>pageinit event</h1></div>
    <div data-role="content">
      <p>I am the #home page</p>
      <a href="#away" data-role="button">Go Away</a>
    </div>
  </div>
  <div data-role="page" id="away">
    <div data-role="header"><h1>pageinit event</h1></div>
    <div data-role="content">
      <p>
      I am the #away page. The pageinit event runs on first page load.
      </p>
      <a href="#home" data-role="button">Go Back</a>
    </div>
  </div>
</body>
</html>
1st image on preview in a browser 2nd image when Go Away button is click on preview in a browser 3rd image of the initialized image

Now lets consider A jQuery Mobile Page Initialization Pattern

Example 10: Nice tweet without initialization script

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <style>
    img {max-width:100%;} p{text-align:center;}
  </style>
</head>
<body>
  <!-- begin first page -->
  <section id="page1" data-role="page">
    <header data-role="header">
      <h1>Nice Tweet</h1>
    </header>
    <div data-role="content" class="content">
      <p>Twitter feed goes here.</p>
      <p><a href="#page2" data-role="button">Settings</a></p>
      <p><img src="images/twitter-logo-hashtag.jpg" alt="Twitter settings" /></p>
      <p>Powered by jQuery Mobile</p>
    </div>
    <footer data-role="footer">
    <h2>Because the world needed another Twitter app.</h2>
    </footer>
  </section>
  <!-- end first page -->
  <!-- Begin second page -->
  <section id="page2" data-role="page">
    <header data-role="header">
      <h1> Nice Tweet: Settings</h1>
    </header>
    <div data-role="content" class="content">
      <p>Settings go here.&nbsp;<a href="#page1" data-role="button">Go back</a></p>
      <p><img src="images/business-twitter-page-img.png" alt="Settings" /></p>
      <p style="text-align:center;">Powered by jQuery Mobile</p>
    </div>
    <footer data-role="footer">
      <h2>Because the world needed another Twitter app.</h2>
    </footer>
  </section>
  <!-- end second page -->
</body>
</html>
<script>
$(document).ready(function() {
  // Refresh the feed on first load
  // (pretend we've written this function elsewhere)
  refreshFeed();
  $("#page1").bind("pageshow", function(event, ui) {
    // Refresh the feed on subsequent page shows
    refreshFeed();
  })
})
</script>

TOUCH EVENTS

Whenever users interact by touch with your site they are triggering touch events. You can tap (pardon the pun) into these events to run custom functions.

USING TAP EVENTS

The main difference between a click and touchstart event is about 300ms. While that may not seem like a lot of time, an almost 1/3 of a second delay can make your mobile site or application feel slow and unresponsive. While the tap event is used by default on links, lists, and similar jQuery Mobile plug-ins and widgets, you can use the tap event to trigger custom functions on different elements on your page.
Example 11: Using the tap and taphold events

<!DOCTYPE html>
<html>
<head>
  <title>Developing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
  $(document).on("pageinit", function(){
    $("#home").on('tap', '#image', function(event, ui) {
      var tapCaption = $(this).data("tap");
      $("#caption").addClass("comment").html(tapCaption);
    });
    $("#home").on('taphold','#caption', function(event, ui) {
      var $this = $(this);
      var tapholdCaption = $this.data("appTaphold");
      $this.html(tapholdCaption);
    });
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <style type="text/css">
  img {max-width: 100%}
  .comment {background: #FFF;border-radius: 5px;
  border: 2px solid #000;padding: 5px}
  </style>
</head>
<body>
  <div data-role="page" id="home">
    <div data-role="header"><h1>Tap Events</h1></div>
    <div data-role="content">
      <p>Tap or tap-and-hold the image below.</p>
      <img id="image" src="images/golden_gate.jpg" alt="An image of a river" data-tap="You tapped the picture, try tap-and-holding on this caption" />
      <div id="caption" data-app-taphold="This picture was taken during a flood.">Caption</div>
    </div>
  </div>
</body>
</html>

The tap and taphold events must be bound in either the document.ready() function or inside the pageinit event. Since we already know that using the document.ready() function is not recommended for use with jQuery Mobile, we are binding the pageinit event using the .on() function. Inside the function, you can see the .on() function attaching the tap event to an element with an attribute of id=”image”.

USING SWIPE EVENTS

Swiping at your mobile device is common when moving through image galleries, deleting email, bringing up contact information, and more. With jQuery Mobile you can tap into three swipe events: swipe, swipeleft, and swiperight. A swipe is similar to a click-and-drag action on a computer. For any of the swipe events to trigger, the touch must travel more than 30px horizontally and take less than 1 second to complete. It also may not move more than 20px vertically or the event trigger will be cancelled.

Example 12: using swipe events

The below image is shown when swipe the box to the right as it previews on your mobile browser on your device.
<!DOCTYPE html>
<html>
<head>
  <title>Developing with jQuery Mobile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script>
  $(document).on('pageinit', function() {
    $("#home").on('swipe','#swipe', function(event, ui) {
      $("#caption").html("Swipe detected!");
    });
    $("#home").on('swipeleft','#swipe-box', function(event, ui) {
      ("#caption").html("Swipe to the left detected!");
    });
    $("#home").on('swiperight','#swipe-box', function(event, ui) {
      $("#caption").html("Swipe to the right detected!");
    });
  });
  </script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <style type="text/css">
  #swipe-box {
    width: 200px;
    height: 200px;
    background: #FFF;
    border: 2px solid #000
  }
  .comment {
    background: #FFF;
    border-radius: 5px;
    border: 2px solid #000;
    padding: 5px
  }
  </style>
</head>
<body>
  <div data-role="page" id="home">
    <div data-role="header"><h1>Swipe Events</h1></div>
    <div data-role="content">
      <p id="swipe">Take a swipe this text or at the box below.</p>
      <div id="swipe-box"></div>
      <br />
      <div id="caption" class="comment">Waiting for swipe...</div>
    </div>
  </div>
</body>
</html>

VIRTUAL MOUSE EVENTS

The virtual mouse events are an answer to compatibility problems between mobile and desktop browsers. For example, some mobile browsers support an event called touchstart, while other mobile browsers do not. Desktop browsers support the mousemove event and have support for hover through the use of the mouseover event while mobile devices have a hard time emulating or using the correct event. These problems are solved in jQuery Mobile by using virtual mouse events. When a page is loaded with jQuery Mobile, the browser is checked for event support.
Events are then supported based on the virtual mouse events. While this happens in the background, you can bind virtual mouse events to run specific functions, or even to get data that can be used in other functions.
The virtual mouse events that are available are

  • vmouseover
  • vmousedown
  • vmousemove
  • vmouseup
  • vclick
  • vmousecancel

To use the vmousedown, vmousemove, and vmouseover Events snippet of code below is included in the head tag <head></head>

Example 13: snippet of code for vmousedown, vmousemove and vmouseover

<script>
$(function(){
  $(document).on("vmousedown", "p", function() {
    $(this).append('<span style="color:#108040;">vmousedown...</span>');
  });
});
</script>

Example 14: vmousedown in jQuery mobile

Once you click on the caption inside your browser an event will trigger vmousedown
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Script-tutorials: vmousedown</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script>
  $( function(){
    $(document).on("vmousedown", "p", function() {
      $(this).append('<span style="color:#108040;"> vmousedown...</span>');
    });
  });
  </script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header"><h1>Vmousedown event example</h1></div>
    <div data-role="content">
      <p>Touch here to see what happens.</p>
    </div>
  </div>
</body>
</html>

Example 15: vmouseup event in jQuery mobile

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Script-tutorials: vmouseup</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script>
    $(function() {
      $(document).on("vmouseup", "p", function() {
        $(this).append('<span style="color:#108040;"> vmouseup when you click i will not until you releases the click button up...</span>');
      });
    });
  </script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>VmouseUp event example</h1>
    </div>
    <div data-role="content">
      <p>Touch here to see what happens.</p>
    </div>
  </div>
</body>
</html>

Example 16: vmouseup event in jQuery mobile

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Script-tutorials: vmouseover</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script>
    $(function() {
      $(document).on("vmouseover", "p", function() {
        $(this).append('<span style="color:#108040;"> vmouseover I will not appear unless you move the pointer over that touche and see...</span>');
      });
    });
  </script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>VmouseOver event example</h1>
    </div>
    <div data-role="content">
      <p>Touch here to see what happens.</p>
    </div>
  </div>
</body>
</html>

BUILDING YOUR FIRST MOBILE SITE USING JQUERY MOBILE

The Header
This section is the first thing a user sees, and may be the most prominent feature of your mobile site. This informs users where they are, and may include a search bar, a call-to-action button, and/or a logo.

The Content Area
Content areas are exactly what they sound like: buttons, text, call-outs, and everything else that is not already included in the other sections. The content area houses the core of your site and displays everything you want the user to see, absorb, or spend time on.

The Footer
The footer is an often overlooked but important area of your site. It can contain everything from extra links to a simple credit line for ownership of the site. In mobile development the footer is often omitted and replaced with a navigation bar or other static element.

Example 16: basic mobile sit layout

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="content">
      Welcome message.
    </div>
  </div>
</body>
</html>

ADDING A HEADER AND FOOTER

Example 17: adding a header and footer to mobile site

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      My First Mobile Site
    </div>
    <div data-role="content">
      Welcome to my first mobile site.
    </div>
    <div data-role="footer">
      Tutors footer!
    </div>
  </div>
</body>
</html>
FORMATTING TEXT CONTENT

The Mobile Site with Included Formatting Tags

Example 18: mobile site with included formatting tags

<!DOCTYPE html>
<html>
<head>
  <title>Script-tutorials: My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>My First Mobile Site</h1>
    </div>
    <div data-role="content">
      <p>Welcome to my first mobile site.</p>
      <p>Try me on all of your mobile devices! You can use any
        <strong>valid HTML</strong> on this page</p>
      <p style="text-align:center;">Powered by jQuery Mobile</p>
    </div>
    <div data-role="footer">
      <h3>Tutors footer!</h3>
    </div>
  </div>
</body>
</html>
ADDING IMAGE IN MOBILE SITE

The Mobile Site with the Addition of an Image That Will Scale

Example 19: adding image in a mobile site

<!DOCTYPE html>
<html>
<head>
  <title>My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <style>
    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>My First Mobile Site</h1>
    </div>
    <div data-role="content">
      <p>Welcome to my first mobile site.</p>
      <p>Try me on all of your mobile devices! You can use any<strong>valid HTML</strong> on this page</p>
      <img src="images/golden_gate.jpg" alt="Golden Gate Bridge" />
      <p style="text-align:center;">Powered by jQuery Mobile</p>
    </div>
    <div data-role="footer">
      <h3>Tutor footer!</h3>
    </div>
  </div>
</body>
</html>
LINKING TO A SECOND PAGE

Example 20: vmouseup event in jQuery mobile

<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <style>
    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <div id="pageone" data-role="page">
    <div data-role="header">
      <h1>My First Mobile Site</h1>
    </div>
    <div data-role="content">
      <p>Welcome to my first mobile site.</p>
      <p>Try me on all of your mobile devices! You can use any
        <strong>valid HTML</strong> on this page</p>
      <img src="images/golden_gate.jpg" alt="Golden Gate Bridge" />
      <a href="#pagetwo" data-role="button">Go to Page 2</a>
      <p style="text-align:center;">Powered by jQuery Mobile</p>
    </div>
    <div data-role="footer">
      <h3>Tutor footer!</h3>
    </div>
  </div>
  <div id="pagetwo" data-role="page">
    <div data-role="header">
      <h1>My First Mobile Site</h1>
    </div>
    <div data-role="content">
      <p>You've made it to page 2!</p>
      <p>Isn't that awesome?</p>
      <a href="#pageone" data-role="button">Go Back to Page 1</a>
      <p style="text-align:center;">Powered by jQuery Mobile</p>
    </div>
    <div data-role="footer">
      <h3>Viva la footer!</h3>
    </div>
  </div>
</body>
</html>

PAGES

Internal pages
Multiple internal pages in one HTML document
Example 21: example of three internal pages



<!DOCTYPE html>
<html>
<head>
  <title>Script-Tutorials: My first mobile site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
  <style>
    img {
      max-width: 100%;
    }
  </style>
</head>
<body>
  <!-- begin first page -->
  <section id="page1" data-role="page">
    <header data-role="header">
      <h1>jQuery Mobile</h1>
    </header>
    <div data-role="content" class="content">
      <p>First page!</p>
      <p>Welcome to my first mobile site.</p>
      <p>Try me on all of your mobile devices! You can use any<strong>valid HTML</strong> on this page</p>
      <img src="images/golden_gate.jpg" alt="Golden Gate Bridge" />
      <p style="text-align:center;">Powered by jQuery Mobile</p>
      <p><a href="#page2" data-role="button">Go to Second Page</a>
      </p>
    </div>
    <footer data-role="footer">
      <h1>Footer</h1>
    </footer>
  </section>
  <!-- end first page -->
  <!-- Begin second page -->
  <section id="page2" data-role="page">
    <header data-role="header">
      <h1>jQuery Mobile</h1>
    </header>
    <div data-role="content" class="content">
      <p>Second page!</p>
      <p>Welcome to my first mobile site.</p>
      <p>Try me on all of your mobile devices! You can use any<strong>valid HTML</strong> on this page</p>
      <img src="images/cable_car2.jpg" alt="Cable Car" />
      <p style="text-align:center;">Powered by jQuery Mobile</p>
      <p><a href="#page3" data-role="button">Go to Third Page</a>
      </p>
    </div>
    <footer data-role="footer">
      <h1>Footer</h1>
    </footer>
  </section>
  <!-- end second page -->
  <!-- begin third page -->
  <section id="page3" data-role="page">
    <header data-role="header">
      <h1>jQuery Mobile</h1>
    </header>
    <div data-role="content" class="content">
      <p>Third page!</p>
      <p>Welcome to my first mobile site.</p>
      <p>Try me on all of your mobile devices! You can use any<strong>valid HTML</strong> on this page</p>
      <img src="images/alcatraz.jpg" alt="alcatraz" />
      <p style="text-align:center;">Powered by jQuery Mobile</p>
      <p><a href="#page1" data-role="button">Go back to First Page</a>
      </p>
    </div>
    <footer data-role="footer">
      <h1>Footer</h1>
    </footer>
  </section>
  <!-- end third page -->
</body>
</html

SIMILAR ARTICLES

Understanding Closures

0 24640

NO COMMENTS

Leave a Reply