Create a Web App with jquery mobile

The development of mobile Internet has made a variety of mobile web frameworks. jquery is another excellent JavaScript framework following prototype. With jquery, we can quickly process HTML documents, control events, animate pages, and Ajax effects. In web design, we usually translate the design into code. But the process is often lengthy and repetitive, and, more tragically, the usability of the code has to be a question mark. With the jquery plugin, we can solve problems that have taken hours or even days in just a few minutes.

In this article, Jake Rocheleau will show us how to use jquery to create a mobile-based web App. During the development process, we will use CSS3 's media query function to find out the maximum resolution of the current mobile device screen, using different CSS depending on the resolution. In addition, Media queries can help us hide the navigation menu on a small screen to show more content. We'll also use jquery to help us use Ajax.load () to activate the menu bar and load external page content.

1. Define the page layout first, we'll look at the HTML page and use CSS styles to determine the style of the page. At the beginning I will skip a number of uncommon meta tags (no direct impact on the Web app you create). But we still have to pay attention to some code snippets (which I've 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 how much the file is rendered on some browsers. It has to be said that this is a very interesting thing in the HTML5 programming process. So I don't have to worry too much about it. But it is important that if we use the META tag properly, it will give us a lot of unexpected help. For example, keywords will be automatically collected by large search sites, you can set the page format and refresh and let the Web page automatically adapt to the size of the mobile browser.   Content Body in body, I created a wrapper Div through Id#w. In which I split the page layout into two sections of #pagebody and #navmenu. The width of the entire page is 640px, so the width of the #pagebody and #navmenu can be calculated accurately.  I assign a lower Z-index value to the navigation menu to ensure that the #pagebody always appear at the top of the plane.  <div id= "Pagebody" ><a rel= "external" href= "#navmenu" id= "menu-btn" ></a>     <H1>HK mobile     <section id= "content" class= "Clearfix" ></section></div> <div id= "Navmenu" >     <ul><li><a rel= "external" href= "#homepage. html" class= "NavLink" >Home</a></li><li><a rel= "external" href= "#about. html" class= " navlink" >about us</a></li><li><a rel= "external" href= "#advertise. html" class= "NavLink" >Advertise</a></li><li><a rel= "external" href= "#write. html" class= " navlink" >write for us</a></li><li><a rel= "external" href= "#contacts. html" class= "NavLink" >Contacts</a></li><li><a rel= "external" href= "#privacy. html" class= "NavLink" >privacy policy</a></li></ul></div> I added prefixing (#) to each of the. HTML pages. Whenever a link is clicked, the URL bar will appear and push the main content. When the referenced ID is not overloaded, we can only call it back through JavaScript.   2. CSS Positioning         We don't have a lot of complicated content in our CSS code. Most of the positioning work is done manually, and will not be handed over to jquery until it is completed. Again, there are some snippets of code that we should be aware of.  /** @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 style of the two sections in the page, respectively. The width of the navigation menu is 300px, which leaves a little space for us to navigate the page content, and the open and close menu buttons are also pinned to the left. The most important part here is the Z-index property value and Position (z-index:0;position:fixed) of the navigation menu.           Our top bar header is also an interesting part. It is placed in a fixed position and scrolls as the content of the page scrolls, and most iOS apps have this effect.  /** @group Header **/#w #pagebody header#toolbarnav {    display:block;    POSITION:FIXED;&NBS P   left:0px;    top:0px;    z-index:9999;    background: #0b1851 url (' img/tabbar-solid-bg.png ') top left no-repeat;    border-radius:5px;& nbsp  -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;  & nbsp width:100%;    max-width:640px;}    #w #pagebody header#toolbarnav H1 {    text-align:center;    padding-top:10px;  &N Bsp padding-right:40px;    Color: #e6e8f2;    font-weight:bold;    font-size:2.1em;  &N Bsp text-shadow:1px 1px 0px #313131;}   Move RuleIt is easy to notice that in the background I used the blue bars as the title bar. The size of the title bar is 640x44px so that it fits the layout of the page. Not only that, 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/[email Protected]{system}/demo/img/[email protected]/** Retina display **/@media only screen and (- Webkit-min-device-pixel-ratio:2), only screens and (min--moz-device-pixel-ratio:1.5), only screens and ( min-device-pixel-ratio:1.5) {#w #pagebody header {background: #0b1851 URL (' img/[email protected] ') Top left N        O-repeat;    background-size:640px 44px;        } #w #pagebody Header #menu-btn {background:url (' img/[email protected] ') no-repeat;    BACKGROUND-SIZE:53PX 30px; }} Design of menu ArrowsIn the navigation menu, I've designed an arrow icon pointing to the right of each menu link.        It is a good idea that most CSS3 enthusiasts will love to do so. I use the transform variable to create a small border behind the navigation content, so we can move it arbitrarily in the left frame, and in addition, we can easily change the color and style of the border in the hover state. What's even more amazing is that you only need to use the basic HTML5 and CSS3 styles to complete these border designs. But first, we're going to go into JavaScript coded worlds.    #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         in the course of writing these custom code, I created a new script.js file. You can write the <script> tag directly according to your own needs, or you can download my template directly from SOURCR code.  $ (document). Ready (function () {     var pagebody = $ ("#pagebody");     var themenu = $ ("#navmenu");     var topbar  = $ ("#toolbarnav");     var content = $ ("#content"); nbsp;    var viewport = {     width: $ (window). Width (),     Height: $ (window). He Ight ()     };     //retrieve variables as      // viewport.width/viewport.height         Before I start, I set up some page variables so that we can refer to the variables in the document more conveniently. I've never used a viewport value, but if you want to adjust the animation stage, setting the viewport value can do you a big favor. For example, with viewport values, you can check the width of the current browser and be able to scale your menu bar accordingly.  function OpenMe () {     $ (function () {       Topbar.animate ({   &nbs P     Left: "290px"       }, {duration:300, queue:false});      Pagebody.animate ({         left: "290px"       }, {Duration:3 XX, queue:false});    }); }    function closeme () {     var closeme = $ (function () {     topbar.animate ({       left: "0px"     }, {duration : Queue:false});     pagebody.animate ({       left: "0px"     }, {duration:180, queue:false});     }); }         Next, I have defined two important functions for the open and close menu. Unless we do need two distinct animation elements, we can do this in a single function and callback switch, but unfortunately, jquery doesn't help us solve this problem, so we need to turn to other alternative syntax.          These two functions I'll name Topbar and pagebody for the moment. The white background of the content area is pagebody; we place the title bar at the top of the page. This means that whenever we click the Open or Close button, we need to shift the Topbar and pagebody to the left and right by 290px.   4. Loading dynamic contentIn theory, the code above basically meets the needs of most people to create a simple move, but here I want to add something else. Each time a user clicks on 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 the static. htm, we can do this easily, avoiding the hassle of PHP, Ruby, Perl, or any backend language. Click SettingsFirst, we need to test the navigation buttons. When the user clicks the navigation button, the page stops the normal loading of the href, at which point we can use the function to display the 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> '; With the previous code, whenever the user clicks the navigation menu link, we stop the current page load and set a full URL variable. In addition, I also created an HTML variable that contains the standard image loader. If you want to customize the way your images are loaded, Ajaxload will be a great help. ajax.load ()To achieve this we need two different pieces of code, and the following code will not only help us close the navigation menu and slide the document window, but also help us to replace the main content of the current page with a smaller loading animation.     Closeme ();    $ (function () {TOPBAR.CSS ("top", "0px"); Window.scrollto (0, 1);}); When the content of the external page is loaded, we will replace the loaded animation on the page with the external loading page. Normally, this would only take hundreds of milliseconds or even faster, so I set the timeout feature.     Content.html (Imgloader); SetTimeout (function () {content.load (Linkhtmlurl, function () {/* No callback */})}, 1200);

Create a Web App with jquery mobile