Use jQuery Mobile to create a Web App

The development of mobile Internet has promoted various mobile Web frameworks. JQuery is another excellent JavaScript framework after Prototype. With jQuery, we can quickly process HTML documents, control events, and add animations and Ajax effects to pages. In Web design, we usually convert the design into code. However, this process is often long and repetitive. what's even more tragic is that the availability of code should be subject to a question mark. With the jQuery plug-in, we can solve the problem that used to take hours or even days in just a few minutes.

 

In this article, we will show you how to use jQuery to create a mobile device-based Web App. In the development process, we will use the media query function of CSS3 to find the maximum resolution of the screen of the current mobile device, and use different CSS based on different resolutions. In addition, Media Queries can help us hide navigation menus on small screens to show more content. We will also use jQuery to help us use Ajax. Load () to activate the menu bar and Load External page content.

 

• LIVE DEMO
• SOURCE CODE

 

1. Define the page layout

 

First, we need to view the HTML page and use the CSS style to determine the page style. At the beginning, I will skip many uncommon Meta Tags (which has no direct impact on the created Web App ). But we still need to pay attention to some code snippets (which I have listed below ).

 

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black">

X-UA-Compatible is used to describe the rendering degree of a file in Some browsers. I have to say that this is a very interesting thing in the HTML5 programming process. So I don't have to worry too much about this problem. But what's important is that if we use the Meta tag appropriately, it will give us a lot of unexpected help. For example, adding keywords will be automatically collected by large search websites. You can set the page format, refresh the page, and make the page automatically adapt to the mobile browser size.

Content subject

In the BODY, I created a Wrapper Div through ID # w. The page layout is divided into # pagebody and # navmenu. The width of the entire page is 640px, so the width of # pagebody and # navmenu can be accurately calculated.

I assigned a lower z-index value to the navigation menu to ensure that # pagebody is always displayed on the top.

<div id="pagebody">    I added the well character (#) to each. HTML page (#). When you click a link, the URL bar displays and pushes down the body content. When the referenced ID is not overloaded, we can only use JavaScript to call it again.
 
2. CSS positioning
There is not much complicated content in our CSS code. Most of the positioning work is done manually. after the work is completed, it will be handled by jQuery. Similarly, there are some code snippets that we should pay attention.
 
/** @group core body **/#w #pagebody {    position: relative;    left: 0;    max-width: 640px;    min-width: 320px;    z-index: 99999;}#w #navmenu {    background: #475566;    height: 100%;    display: block;    position: fixed;    width: 300px;    left: 0px;    top: 0px;    z-index: 0;}
The above Code defines the styles of the two parts on the page. The width of the navigation menu is PX, which leaves a little space for us to browse the page content. The Open and Close menu buttons are also fixed on the left side. The most important part here is the attribute value and position of the z-index in the navigation menu (z-index: 0; position: fixed ).
 
The title of the top bar is also an interesting part. It is placed in a fixed position and will scroll with the page content. Most iOS apps have this effect.
/** @group header **/#w #pagebody header#toolbarnav {    display: block;    position: fixed;    left: 0px;    top: 0px;    z-index: 9999;    background: #0b1851 url('img/tabbar-solid-bg.png') top left no-repeat;    border-radius: 5px;    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    -o-border-radius: 5px;    border-bottom-right-radius: 0;    -moz-border-radius-bottomright: 0;    -webkit-border-bottom-right-radius: 0;    border-bottom-left-radius: 0;    -moz-border-radius-bottomleft: 0;    -webkit-border-bottom-left-radius: 0;    height: 44px;    width: 100%;    max-width: 640px;} #w #pagebody header#toolbarnav h1 {    text-align: center;    padding-top: 10px;    padding-right: 40px;    color: #e6e8f2;    font-weight: bold;    font-size: 2.1em;    text-shadow: 1px 1px 0px #313131;}



Mobile rule

 
It is easy to notice that I use a blue horizontal bar as the title bar on the background. The size of this title bar is 640x44px, which can be consistent with the page layout. In addition, I also designed a @ 2x image for the iPhone/iPad Retina display. You can see these images or get them from source code.
 

 

 
  
{System}/demo/img/tabbar-solid-bg@2x.png
 
  
{System}/demo/img/tabbar-solid-bg@2x.png

 
 
/** retina display **/@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {    #w #pagebody header {        background: #0b1851 url('img/tabbar-solid-bg@2x.png') top left no-repeat;        background-size: 640px 44px;    }        #w #pagebody header #menu-btn {        background: url('img/nav-btn@2x.png') no-repeat;        background-size: 53px 30px;    }}
Menu arrow Design
In terms of navigation menus, I designed an arrow icon pointing to the right on the right side of each menu link. I believe most fans of CSS3 will like this, which is indeed a good idea.
I use the transform variable to create a small border behind the navigation content, so we can move it in the frame on the left. In addition, in the hover state, we can easily change the border color and style. Even more amazing, you only need to use the basic HTML5 and CSS3 styles to design these borders.
But first, we need to enter the JavaScript coding world.
#w #navmenu ul li a::after {    content: '';    display: block;    width: 6px;    height: 6px;    border-right: 3px solid #d0d0d8;    border-top: 3px solid #d0d0d8;    position: absolute;    right: 30px;    top: 45%;    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);}#w #navmenu ul li a:hover::after { border-color: #cad0e6; }

3. jQuery animation design
When writing these custom codes, I created a script. js file. You can directly compile the <script> tag as needed, or download my template from sourcr code.
$(document).ready(function(){     var pagebody = $("#pagebody");     var themenu = $("#navmenu");     var topbar  = $("#toolbarnav");     var content = $("#content");     var viewport = {     width : $(window).width(),     height : $(window).height()     };     // retrieve variables as      // viewport.width / viewport.height
Before getting started, I set some page variables so that we can reference the variables in the document more conveniently. I have never used a view value, but if you want to adjust the animation stage, setting the view value can help you a lot. For example, you can check the width of the current browser and scale the menu bar accordingly by using the value of the view.
 
function openme() {      $(function () {       topbar.animate({         left: "290px"      }, { duration: 300, queue: false });       pagebody.animate({         left: "290px"      }, { duration: 300, queue: false });     }); }   function closeme() {     var closeme = $(function() {     topbar.animate({       left: "0px"    }, { duration: 180, queue: false });     pagebody.animate({       left: "0px"    }, { duration: 180, queue: false });     }); }
Next, I defined two important functions for opening and closing menus. Unless we do need two completely different animation elements, we can complete this design in a single function and callback switch, but unfortunately, jQuery does not help us solve this problem, so we need to turn to other alternative syntaxes.
These two functions are now named topbar and pagebody. The white background of the content area is pagebody. We place the title bar on the top of the page. This means that every time we click the open or close button, we need to translate topbar and pagebody to the left and right for 290px.
4. Load dynamic content
In theory, the above Code can basically meet the needs of most people to create a simple move, but here I want to add something else.
When a user clicks a menu link, the page automatically closes the current navigation column and displays a loaded GIF image. When the page content is loaded, the page removes the GIF image and displays the loaded content. By using static. htm, we can easily complete this task, thus avoiding the troubles caused by PHP, Ruby, Perl or any back-end languages.
Click Settings
First, we need to test the navigation button. When you click the navigation button, the page stops loading href normally. In this case, you can use a function to display external content.
// loading page content for navigation$("a.navlink").live("click", function(e){    e.preventDefault();    var linkurl   = $(this).attr("href");    var linkhtmlurl = linkurl.substring(1, linkurl.length);        var imgloader  = '<center style="margin-top: 30px;"></center>';
 
Through the code above, whenever you click the navigation menu link, we will stop loading the current page and set a complete URL variable. In addition, I create an HTML variable that contains the standard image Loader. If you want to customize your image loading method, Ajaxload will be a great help.


 
Ajax. Load ()
To implement this function, we need two different codes. The following Code not only helps us to close the navigation menu and slide the document window, it also helps us to use a small loading animation to replace the subject content on the current page.
closeme();    $(function() {    topbar.css("top", "0px");    window.scrollTo(0, 1);});
When the content of an external page is loaded, we must use an external loading page to replace the loading animation on the page. Usually, this takes several hundred milliseconds or even faster, so I set the timeout function.
content.html(imgloader);    setTimeout(function() { content.load(linkhtmlurl, function() {/* no callback */}) }, 1200);
 
5. Summary
 
I encourage all Web developers to download the source code in the tutorial, and hope that developers can write their own source code. This is just a basic tutorial. Through media queries and more extensible Web browsers, Web development has become easier than ever before. Mobile development is an art that requires a lot of practice and dedication. I hope this tutorial is a good starting point and can help more developers. If you have any questions or experiences with the code, you can share it with me in the discussion board.