{"id":7553,"date":"2012-09-15T13:57:08","date_gmt":"2012-09-15T08:27:08","guid":{"rendered":"https:\/\/2thenew.today\/blog\/?p=7553"},"modified":"2012-09-15T14:01:31","modified_gmt":"2012-09-15T08:31:31","slug":"getting-started-with-jquery-mobile","status":"publish","type":"post","link":"https:\/\/2thenew.today\/blog\/getting-started-with-jquery-mobile\/","title":{"rendered":"Getting started with jQuery Mobile"},"content":{"rendered":"

JQuery mobile provides set of features which are supported on almost all smartphones such as touch UI, ajax navigation, animated page transitions. Building jQuery mobile page is very simple, here’s how:<\/p>\n

    \n
  1. A jQuery Mobile site must start with an HTML5 ‘doctype’ to take full advantage of all of the framework’s features.<\/li>\n
  2. First of all you need jQuery, jQuery mobile, mobile theme stylesheets from CDN.<\/li>\n
  3. Reference all styles & scripts in the head of page.<\/li>\n

    [html]<!DOCTYPE html>
    \n<html>
    \n<head>
    \n<meta name="viewport" content="width=device-width, initial-scale=1">
    \n<title>Page Title<\/title>
    \n<link rel="stylesheet" href="css\/jquery.mobile-1.1.1.css"\/>
    \n<script src="js\/jquery-1.8.0.min.js"><\/script>
    \n<script src="js\/jquery.mobile-1.1.1.min.js"><\/script>
    \n<\/head>[\/html]<\/p>\n

  4. A meta viewport<\/strong> tag in the head sets the screen width to the pixel width of the device.<\/li>\n
  5. Inside body<\/strong> of html page a div with data-role<\/strong> of page<\/strong> is used as a wrapper for whole page.<\/li>\n
  6. For header bar add a div<\/strong> with data-role<\/strong> of header<\/strong>.<\/li>\n
  7. For content region add a div<\/strong> with a data-role<\/strong> of content<\/strong> & add content between this div<\/strong>.<\/li>\n

    [html]<body>
    \n<div data-role="page">
    \n <div data-role="header">
    \n Header
    \n <\/div>
    \n <div data-role="content">
    \n <p>This is jquery mobile test page<\/p>
    \n <\/div>
    \n <div data-role="footer">
    \n \u00a9intelligrape
    \n <\/div>
    \n<\/div>
    \n<\/body>
    \n[\/html]<\/p>\n

  8. There are many features provided by jQuery mobile<\/strong>. Here i am explaining one of them which is list. For list, simply add ul<\/strong> tag with attribute data-role<\/strong> of listview<\/strong> between
    \n<\/strong><\/p>\n
    <\/strong> .<\/div>\n<\/li>\n
  9. To make it look like an inset module add an attribute data-inset=”true”<\/strong>.<\/li>\n
  10. For dynamic search filter just add another attribute data-filter=”true”<\/strong>.<\/li>\n

    [html]
    \n<div data-role="content">
    \n <ul data-role="listview" data-inset="true" data-filter="true">
    \n <li>Blue<\/li>
    \n <li>Black<\/li>
    \n <li>Green<\/li>
    \n <li>Yellow<\/li>
    \n <li>White<\/li>
    \n <\/ul>
    \n<\/div>
    \n[\/html]\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    JQuery mobile provides set of features which are supported on almost all smartphones such as touch UI, ajax navigation, animated page transitions. Building jQuery mobile page is very simple, here’s how: A jQuery Mobile site must start with an HTML5 ‘doctype’ to take full advantage of all of the framework’s features. First of all you […]<\/p>\n","protected":false},"author":57,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":6,"footnotes":""},"categories":[518],"tags":[245,32,4842,27,970,327],"class_list":["post-7553","post","type-post","status-publish","format-standard","hentry","category-android","tag-css","tag-gsp","tag-html","tag-jquery","tag-jquery-mobile","tag-plugin"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t