background preloader

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App
Mar 08 2012 With an increase in the number, diversity and complexity of smartphones, more and more companies want to have their own mobile app, but creating a native app can be pretty expensive. It requires special skills, as well as special coding tools, and then there is also the need to build an app per platform (Android, iOs, BlackBerry, Windows Phone, etc). All of this figures in to a higher price tag for the app development. The jQuery framework has been around the web for a while now, but the jQuery base technology was basically designed for browser apps. 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). 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. The Concept of the Mini App: Restaurant Picker Wireframing Our Application. Home Screen : Choose a Plate Choose a Town

Using Backbone.js with jQuery Mobile Backbone.js is an architectural framework that helps you write well-structured Web applications. It is not, however, a user interface framework and it therefore doesn’t help you with the way your application looks. Backbone’s confined scope is a good thing: it’s lightweight, non-intrusive, not coupled to things you don’t need, and it lets you use the UI toolkit of your choice or simply roll your own styles and widgets. In my previous post, I demonstrated how to use Twitter Bootstrap on top of Backbone. Quest for a Mobile UI Toolkit After that post, I wanted to create a mobile version of the same application; a version that I could package with PhoneGap and that would look and behave like a native app. Another Way to Use jQuery Mobile jQuery Mobile (jQM) is one option that I’ve explored before (here and here), but it fits more in the category of full-stack frameworks that tie together architectural structure and UI controls and behaviors. Sample Application Here is the app: How it works

Active button in navbar in Jquery Mobile - Yousef Jadallah's Blog When you add ui-btn-active class to your anchor, it will activate the selected button in your navbar. Moreover, if you'd like to keep it active when you return to it again, you need to add ui-state-persist. jquery mobile framework detects ui-state-persist class, then fires the delegate as following: $navbar.delegate( "a", "vclick", function( event ) { if( ! $.mobile.activeBtnClass is equivalent to "ui-btn-active" which it's a class used for "active" button state, from CSS framework. Here you can find an example: <! In the previous example you find out that the navbar transitions with the page; to make the footer sticks persistently. <! Hope that helps.

HTML5 Cross Browser Polyfills - GitHub The No-Nonsense Guide to HTML5 Fallbacks So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly. Looking to conditionally load these scripts (client-side), based on feature detects? svgweb by Brad Neuberg & others Fallback via FlashSnap.SVG from scratch by the author of Raphaël (Dmitry Baranovskiy) Abstracted API. FakeSmile by David Leunen Canvas Web Storage (LocalStorage and SessionStorage) Non HTML5 API Solutions ssw by Matthias Schäfer$.store by Rodney Rehmlawnchair by Brian Lerouxstore.js by Marcus WestinPersistJS by Paul DuncanSquirrel.js by Aaron GustafsonjStorage by Andris Reinman Video

960 Grid on jQuery-Mobile - merge 960.gs flexibility with jquery-mobile ease jquery-mobile-960 is a port of 960 grid to jquery mobile. It merge the flexibility of 960.gs, and the ease of jquery mobile. It aims to bring more flexibility to jquery-mobile layout and thus make it easier to use on tablets. To use 960 grids in jQuery Mobile, simply add one line: And now you can use normal 960 grid syntax inside jQuery mobile pages <fieldset class="container_12"><div class="grid_2"><button type="submit">Button 1</button></div><div class="grid_8"><button type="submit">Button 2</button></div><div class="grid_2"><button type="submit">Button 3</button></div></fieldset> And without more effort, jQuery Mobile gives you this result. The usual demo pages. I loved jQuery-mobile ability to make an application by just describing its structure in HTML5. But jQuery mobile layout is currently rather raw. All in all, i felt jquery mobile layout was uselessly difficult to use, especially on large screens such as tablets. 960 grids are flexible and well known. jQuery Mobile Grid Docs

Adding driving directions to a jQuery Mobile web site My first morning at Scotch on the Rocks was a bit rough. Despite getting to bed at a decent time (10:30 or so) so I could catch up on my sleep, I ended up waking up around 3:30 or so in the morning and tossing and turning till 6. During that time an idea popped in my head for one more demo I could do for my jQuery Mobile presentation. I was thinking about building a simple mobile web site for the hotel. I thought it would be a simple example but also pretty practical. First, I'll begin by showing a few screen shots of the application I built. My hotel mobile home page has three links: Contact Us, Find Us, and About. On a mobile device, clicking that phone number will automatically call the hotel. Yeah, nothing important here. Now that you've seen those pages - let's look at the code behind it. ColdFISH is developed by Jason Delmore. <div data-role="header"> <h1>Apex Hotels</h1> </div> <div data-role="footer"> <h4>This is NOT a real Apex Hotels page. </body></html> 1<! Sweet, right?

When can I use... Support tables for HTML5, CSS3, etc Camera | a free jQuery slideshow by Pixedelic A simple slide This is the "simple anathomy" of a slide: Captions You can add a caption to the slide, just put a div with class "camera_caption" into the div above: <div data-src="images/image_1.jpg"><div class="camera_caption">The text of your caption</div></div> By adding one more class to the "camera_caption" div you can decide the effect of the caption. HTML elements You can also put some HTML elements into your slides. <div data-src="images/image_1.jpg"><div class="fadeIn camera_effected">The text of your html element</div></div> An HTML element can have a class "fadeIn": in this case it will be displayed with a fading effect. Videos To include a video into your slideshow you must put an iframe into one of your slides: As you can see I set the width and the height of the iframe to 100%, so it changes its size according with the size of the slideshows (I mean the iframe, the video in the iframe will mantain its ratio). The "data-" attributes or a particular alignment for one slide only:

Resources In this section, we have gathered useful resources that will help you learn more about jQuery Mobile, find tools to develop jQuery Mobile application designs and mockups, tutorials and tools to guide your through the development of simple or more complex applications and related articles. Featured sites | Books | Apps & Frameworks | Plugins | Extensions | Tools | Themes | Articles & Tutorials Featured jQuery Mobile sites from jQMGallery.com You will find below a great sample collection of Mobile sites built with jQuery Mobile. More examples can be found in the jQM Gallery. Books Apps & frameworks 3rd party plugins These are all jQuery Mobile compatible plugins, many use the theme framework, auto-initialization and data- attribute configuration features or core mobile widgets. 3rd party extensions These are 3rd Party extensions that add capabilities to existing functionality. Tools Themes Articles & Tutorials

HTML5 Please Introduction to jQuery Mobile Introduction jQuery Mobile, a user interface (UI) framework, lets you write a functional mobile web application without writing a single line of JavaScript code. In this article, learn about the features of this framework, including the basic pages, navigation toolbars, form controls, and transition effects. To follow along with this article, you will need: Previous exposure to HTMLUnderstanding of JavaScript fundamentalsBasic knowledge of jQuery You can download the jQuery plug-in source code used with this article from the Download table below. Back to top jQuery Mobile jQuery Mobile is a touch-friendly web UI development framework that lets you develop mobile web applications that work across smartphones and tablets. At the time of this writing, the jQuery Mobile framework is an Alpha 2 version (v1.0a2). Basic features of jQuery Mobile include: General simplicity The framework is simple to use. Progressive enhancement and graceful degradation Accessibility Small size Theming Browser support Pop

Use jQuery Mobile to Build a Native Android News Reader App In this three part tutorial series, our main goal is to describe how jQuery Mobile can be used to develop a native Android application. First, we will develop a stand-alone, sample web application that will browse articles from Yahoo! News using jQuery Mobile. Then we will convert that web application into a native Android application with minimal effort. The jQuery Mobile project is a mobile web framework with its alpha 2 version released in November, 2010. The framework can be used to develop cross-platform mobile web applications for Android OS, iOS, Blackberry OS, and similar platforms (For a complete cross-compatibility chart, see First, we will illustrate the dynamic construction of basic UI elements in jQuery Mobile. Second, we will demonstrate how to develop a native Android application where the UI is coded via the jQuery Mobile framework. Organization Of This Series Page Flow Observe the spinning icon during certain transitions. Page Structure

Related: