![jquery mobile responsive layout jquery mobile responsive layout](https://i.pinimg.com/originals/2d/37/c4/2d37c4daa6eb79483d489f8de48e5cfe.png)
The first thing to notice is the “new” HTML5 doctype. Some jQuery Mobile Basicsįirst let’s take a look at what the header of our first HTML page will look like : Now that we’ve see the direction that we are heading, we can begin digging a little bit into the code. The last part of this view is a select box, where the user can rate the restaurant. Another link will dial the restaurant phone number directly on the mobile device so that user can place a reservation. A link enables the user to open Google maps (either using the browser or the Google map app if available depending on the device) to locate the restaurant on the map. The contact details will display the address of the restaurant, and an image of a Google map that will locate the restaurant in the town. The restaurant details will display a short description of the restaurant, some plates, a picture and a link to their website if they have one. The restaurant’s details view is composed of three parts: restaurant details, contact details, and the establishment’s user rating. The user can then click on a specific restaurant, to see the details.
![jquery mobile responsive layout jquery mobile responsive layout](https://1.bp.blogspot.com/-wbwebuFyxIM/V2P3Gkuec3I/AAAAAAAAAWQ/yLCMsMci0cUZKM0a4PcZsLG9l_jbGuO2QCLcB/w1200-h630-p-k-no-nu/navigasi-responsive.jpg)
The title bar will use the branding of the application, and a “back” button that user can click to go back to previous step. The application displays a list of restaurant with a little image, the name, and the number of rating stars the previous users gave to this restaurant. The user can now choose in which restaurant he wants to eat. When the user clicks on a town, they are lead to the page where they can choose a restaurant. The title bar will use the branding of the application, and a “back” button that user can click to go back to the previous step. Since the list of towns can be pretty long, we will provide a filter so that the user can quickly search for a town at the end of the list. Beside each town there is a bubble that gives the user the number of restaurants available for the chosen plate in this town. The towns are displayed in a list of clickable items. On the second screen, the user can choose the town where they want to eat. Each choice comes with an image illustrating the plate, and each is a link that will lead to the second page where the user can choose the town. We will then give the user a choice between different plates. On the first screen we will put the logo of our application. In order to see where we are going, we will first draw some wireframes to see what each screen of the app will look like.
![jquery mobile responsive layout jquery mobile responsive layout](https://i.pinimg.com/originals/c2/04/68/c20468d69113f61fbbc498b62e3ba5f4.jpg)
Also note that jQuery Mobile uses Ajax navigation, so you’ll need to put the files either on a local server (xampp, mamp, etc) or on a real server to make the demo work properly. Please note that this is only the front development, you will of course need a server and a database if you want to create a real app. The jQuery Mobile mini app we’re creating will be called “Restaurant Picker”. We will create an application that will enable the user to choose a restaurant based on what they want to eat tonight, the town where they want to eat and other user’s ratings of the restaurants. The Concept of the Mini App: Restaurant Picker
Jquery mobile responsive layout download#
In this jQuery Mobile tutorial, we will create a nice demo app from scratch, to show some of the things that can be easily done using this powerful tool.īefore we start, you might want to download the files, or see a demo. The framework is touch optimized, uses responsive layout so that elements will automatically adapt on different device sizes, and supports a range of different platforms and devices. jQuery Mobile is a framework based on jQuery that enables web designers to create web-apps that are optimized for use on a mobile device (Smartphone and tablets). The jQuery framework has been around the web for a while now, but the jQuery base technology was basically designed for browser apps.