Web on mobile devices - jQuery Mobile

Question

1 Answer

Best answer

One solution would be to develop an application for each device and platform Android, iOS, BlackBerry, Windows Phone, etc.

The other would be to create a web mobile version. An interesting option is to use Jquery mobile a Jquery framework to facilitate the compatible development of websites oriented to mobile devices. Jquery is a javascript framework widely used in the development of websites.
One of the main objectives of Jquery mobile is that the developer does not have to fight with browsers for compatibility, but that the framework provides compatibility.

We will start downloading the framework from http://jquerymobile.com/download/ the jquery and css libraries, we can use them compressed or unencrypted.

We create the header of the web indicating the libraries that we will use

 <! DOCTYPE HTML> <HTML> <head> <meta charset = "UTF-8"> <title> Rent your car </ title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel = "stylesheet" href = "jquery.mobile.structure-1.3.1.min.css" /> <link rel = "stylesheet" href = "css / jquery.mobile-1.3.1.min.css" /> <script src = "js / jquery-1.7.1.min.js"> </ script> <script src = "js / jquery.mobile-1.3.1.min.js"> </ script> </ head>

Then we create the body of the web, we do not expose here the css but it can be given the format and design that is wanted. The Jqeury framework has different components already programmed so that we can use and facilitate the task. In this case we will use listview.

 <body> <div data-role = "page" id = "home" data-theme = "c"> <div data-role = "content"> <div id = "branding"> <h1> Rent your car </ h1> </ div> <div class = "choice_list"> <h1> Choose your car and see the technical file </ h1> <ul data-role = "listview" data-inset = "true"> <li> <a href="ficha.html" data-transition="slidedown"> <img src = "mini-cooper-s.jpg" /> <h3> mini Cooper </ h3> </a> </ li> <li> <a href="ficha.html" data-transition="slidedown"> <img src = "mercedes.jpg" /> <h3> Mercedes </ h3> </a> </ li> </ ul> </ div> </ div> </ div> </ body> </ html>

The listview component transforms an html list

 <ul> <li> item </ li> </ ul>

in a list with the role attribute lisview

 <ul data-role = listview> <li> Element 1 </ li> </ ul>

Jquery mobile and the css libraries already have predefined the code that will transform listview into a menu like the one we will see

The idea then of a car rental website. Where the user selects the car he wants and can go to a technical sheet, a contact form could also be added.

We see how in this case the listview has become a menu to select the cars, the example is only the home of the web. We can also check that it works on any mobile device or computers.

There are many attributes and advantages that this framework has, another possibility for our application would be to divide into categories using the list-divider attribute for example to divide Sedan and Cabrio.

 <li data-role = list-divider> Sedan <li> <li> <a href="ficha.html" data-transition="slidedown"> <img src = "mini-cooper-s.jpg" /> <h3> mini Cooper </ h3> </a> </ li> <li data-role = list-divider> Cabrio <li> <li> <a href="ficha.html" data-transition="slidedown"> <img src = "mercedes.jpg" /> <h3> Mercedes </ h3> </a> </ li>

The possibilities to create applications are endless, for static, or dynamic websites and data capture applications.
A very good and free tool for developers is Netbeans since it has all the libraries incorporated to develop applications with html5 and Jquery mobile.

There are several online tools such as http://ipadpeek.com/ to test applications although they are not completely accurate since they are simulators.

We can observe the same example but with the list-divider attribute applied as an example

answered Jun 23, 2019 by stackoverflow (3.5m points)
edited Jun 23, 2019

Web on mobile devices - jQuery Mobile

Your answer

1 Answer

Your comment on this answer:

Related questions