jQuery Mobile. jQuery Mobile: Organizing Information with List Views. Exclusive offer: get 50% off this eBook here jQuery Mobile First Look — Save 50% Discover the endless possibilities offered by jQuery Mobile for rapid Mobile Web Development by Giulio Bai | June 2011 | Open Source List views play a huge role in jQuery Mobile when it comes to organizing and laying out our content.
The jQuery Mobile framework makes available a set of list types, each of which is best suited to certain situations and applications: we can have numbered lists, nested lists, lists with icons, thumbnails, and many other improvements, and user-friendly options that will no doubt enhance the usability of our list view elements. This article will address the following issues: Basics and conventions for list viewsChoosing the list type, as per your requirements (For more resources on this subject, see here.)
There is a way in which we can organize our information and take advantage of each and every space in the browser: information is displayed vertically, one piece under another. jQuery Mobile: Demos and Documentation. 8 Useful jQuery Mobile Tutorials. Creating a Website Using JQuery Mobile, Part 1. In this tutorial I will show you how to build a website with JQuery Mobile.
In this first part of the tutorial I will explain the site’s characteristics, and I will implement the home page of the site. The Event Website The website will advertise a fictional event, and it will consist of four distinct pages: HomeSpeakersScheduleInformation The site’s map would be something like this: Let’s take a look at the wireframes for each page. The Event’s Home Page The Home page will have a toolbar, a banner and four buttons linking to different areas of the site. The Speakers, Schedule and Information buttons are pretty self-explanatory. Creating a Website Using JQuery Mobile, Part 2. This article is a continuation of my series on how to build a website with JQuery Mobile.
In the first part of this tutorial, Creating a Website Using JQuery Mobile, Part 1, I presented the requirements for the site and finished implementing the Home page. Now it is time to build the Speakers page. From Wireframe to HTML Let’s take a look at the wireframe for this page: As with the home page, I will use the JQuery Mobile’s standard boilerplate page template for the Speakers page. This is how it looks: Before adding more elements to this page, I will test that the incoming link from the Home page is working correctly: JQuery Mobile Page Transitions When you try the code, you will notice a nice slide transition from the Home to the Speakers page. SlideSlideupSlidedownPopFadeFlip According the the JQuery Mobile’s page transitions documentation , these effects can be applied to any object or page change event. You will also notice the “back” button. Adding Page Elements Next Steps Thoughts? Creating a Website Using JQuery Mobile, Part 3.
JQuery Mobile is a great UI framework for developing mobile applications, which works by applying progressive enhancements to your clean, semantic HTML, and transform it into rich user interfaces.
In this series I have been showing you how to quickly put together a fictional event website using JQuery Mobile. I have saved the construction of the last two pages, event Schedule and Information, for this article. The Schedule Page Below is how I need the Schedule page to look. (Notice that it is simpler than the original version in the first part of this series.)
jQuery Mobile Tutorials. I just published How to Build a jQuery Mobile Application, a book that will teach you the essential skills you need to succeed developing apps with jQuery.
As I do in the tutorials on this blog, the book follows a hands-on approach, walking you through the process of building a jQuery Mobile application. Here are some of the subjects you will learn: jQuery Mobile pages, dialogs, and navigationList view and master-detail user interfacesCapturing user input with form elementsSaving application data on the deviceSynchronizing application data with a server If you like to learn by doing, this is a book for you. Check It Out You can preview the book here: Learn more about How to Build a jQuery Mobile Application.