JQuery Mobile's layout plug-ins and examples

"Go from Network"

Now that it's moving into the mobile internet era, it's important to move your site to mobile devices. The question is, how do you render everything in your site on a small screen of your mobile device?

This article introduces 13 jquery mobile-based layout plug-ins and examples that can help you create multi-view or split-view-layout mobile Web pages, and dynamically adjust what is displayed based on the direction and screen size of your mobile device.

1. Three Column iPad Layout

The three-column Split view layout effect provides a good platform for mobile page layouts on mobile phones and tablets.

< Span class= "Apple-converted-space" >
Source code &NBSP; /  demo &NBSP;

2.  JQM Multiview Plugin &NBSP;

JQM Multiview plugin is a multi-view page navigation plugin developed based on jquery Mobile, Helps you create various types of page views, and provides menus. &NBSP;

< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >
SOURCE &NBSP; /  demo &NBSP;

3.   jQuery Mobile SplitView &NBSP;

Splitview dynamically adjusts the page based on the orientation of the tablet and the screen size. Adjust your browser size and rotate your tablet to experience the browsing effect!

< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >
SOURCE &NBSP; /  demo &NBSP;

4.  Multiview Plugin &NBSP;

This page is a multi-view page that contains 4 panels and 16 pages, all of which are loaded into the DOM when the page loads. &NBSP;

< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >
Source + demo &NBSP;

5.  multi-page (boiler) template &NBSP;

This is a template page for multiple pages, You can copy and build your own jquery mobile page. This template contains multiple page containers. &NBSP;

Source + Demo &NBSP;

6.  multi-page Template &NBSP;

This plug-in is used to pre-read multiple previous pages when loading a child page, enabling faster response times. &NBSP;

Source + demo &NBSP;

7.  JQuery Mobile multiple Pages &NBSP;

In this example, Describes how to build a simple mobile website with multiple pages. Multiple pages can be embedded in a single document or in a separate file. &NBSP;

Source + Demo &NBSP;

8.  960 Grid on Jquery-mobile &NBSP; the

960 gird is a grid framework for mobile Web development that combines the flexibility of 960.gs and the convenience of jquery mobile. Its purpose is to make the jquery mobile layout more flexible. &NBSP;

Source   /  demo &NBSP;

9.  Creating A Tablet Split View for JQuery Mobile &NBSP;

In this example, you can see that the documentation for jquery Mobile uses the split view created by CSS. &NBSP;

Source + demo &NBSP;

10.  JQuery Mobile and Dynamic page Generation &NBSP;

The plugin can generate HTML pages/fragments on the server side, or dynamically generate page content in the client based on JSON or other format content. &NBSP;

Source &NBSP; /  demo &NBSP;

11.  Fixed Toolbars &NBSP;

Using the Fixedtoolbar plug-in, the toolbar is pinned to the top or bottom of the page, The content of the page can be scrolled freely in the middle. In browsers that do not support fixed positioning, when the page scrolls, the toolbar is hidden or displayed at the top or bottom of the page. &NBSP;

Source + demo &NBSP;

12.  App-ui &NBSP;

App-ui is a collection of UI components, can help Web or mobile developers use HTML and JavaScript to create interactive applications, especially for mobile devices. &NBSP;

Source code Span class= "Apple-converted-space" >&NBSP; /  demo &NBSP;

13.  jquery-mobile–plugin:multiview &NBSP;

Features: &NBSP;

• Split-screen mode
• full-screen mode
• popover: Main Panel full screen, remaining popup
• allow Web site to have split-screen display and normal display of two modes

Source &NBSP; /  demo &NBSP;

JQuery Mobile Layout plug-ins and examples