jQuery Mobile - Custom responsive grid
Advertisements
The basic grid style can be easily extended to the custom responsive layout using media queries in CSS.
Example
Following example demonstrates the use of custom responsive grid in the jQuery Mobile.
Live Demo<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <style> .rwd-example .ui-block-b, .rwd-example .ui-block-c { float: left; width: 25%; } .rwd-example .ui-block-a{ float: left; width: 49.95%; } </style> </head> <body> <h2>Custom Responsive Grid</h2> <div class = "rwd-example"> <div class = "ui-block-a"> <div class = "ui-body ui-body-a"> <h3>First Block</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldu</p> </div> </div> <div class = "ui-block-b"> <div class = "ui-body ui-body-a"> <h3>Second Block</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> <div class = "ui-block-c"> <div class = "ui-body ui-body-a"> <h3>Third Block</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> </div> </body> </html>
Output
Let's carry out the following steps to see how the above code works −
Save the above html code as custom_responsive_grid.html file in your server root folder.
Open this HTML file as https://localhost/custom_responsive_grid.html and the following output will be displayed.
jquery_mobile_layouts.htm
Advertisements