Latest web development tutorials

jQuery Mobile page

Start Learning jQuery Mobile

lamp Although jQuery Mobile is compatible with all mobile devices, but does not fully compatible with the PC (due to limited CSS3 support).

In order to better read this tutorial, we recommend that you use the Google Chrome browser.

Examples

<body>
<div data-role="page" >

  <div data-role="header" >
    <h1>欢迎来到我的主页</h1>
  </div>

  <div data-role="main" class="ui-content" >
    <p>我现在是一个移动端开发者!!</p>
  </div>

  <div data-role="footer" >
    <h1>底部文本</h1>
  </div>

</div>
</body>

try it"

Analysis examples:

  • data-role = "page" is the page in the browser to display.
  • data-role = "header" is a tool bar at the top of the page is created (usually used for the title or the search button)
  • data-role = "main" defines the content of the page, such as text, images, forms, buttons and so on.
  • "Ui-content" class for this page padding and margins.
  • data-role = "footer" used to create the bottom of the page toolbar.
  • In these containers you can add any HTML elements - paragraphs, pictures, headings, lists, etc.
lamp jQuery Mobile rely on HTML5 data- * attributes to support various UI elements, transition, and page structure. Browser does not support them they will be discarded silently.


Adding jQuery Mobile in the page

Use jQuery Mobile, you can then create a single HTML file in a number of different pages.

You can use different href attribute to distinguish between using the same unique id of the page:

Examples

<div data-role = "page " id = "pageone">
<Div data-role = "main" class = "ui-content">
<a href="#pagetwo"> to jump to a second page </a>
</ Div>
</ Div>

<div data-role = "page " id = "pagetwo">
<Div data-role = "main" class = "ui-content">
<a href="#pageone"> to jump to the first page </a>
</ Div>
</ Div>

try it"

Note: When the web applications have a lot of content (text, images, scripts, etc.) will seriously affect the load time. If you do not want to use in-page links you can use an external file:

<a href="externalfile.html">访问外部文件</a>

Page as the dialog uses

Dialog box is used to display the page information display or input form information.

Add in the link data-rel = "dialog" pop-up dialog box allows users to click on the link:

Examples

<Div data-role = "page" id = "pageone">
<Div data-role = "main" class = "ui-content">
<a href="#pagetwo"> jump to a second page </a>
</ Div>
</ Div>

<div data-role = "page " data-dialog = "true" id = "pagetwo">
<Div data-role = "main" class = "ui-content">
<a href="#pageone"> jump to the first page </a>
</ Div>
</ Div>

try it"