background preloader


Facebook Twitter

Using Backbone.js with jQuery Mobile. Backbone.js is an architectural framework that helps you write well-structured Web applications.

Using Backbone.js with jQuery Mobile

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: 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.

a free jQuery slideshow by Pixedelic

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).

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.

jQuery Mobile Tutorial: Creating a Restaurant Picker Web App

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. Another solution for developers is then to create something called web-apps: HTML CSS apps, which users can access from their browsers. They are cross-platform, and cross device. 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).

The Concept of the Mini App: Restaurant Picker Wireframing Our Application. 960 Grid on jQuery-Mobile - merge flexibility with jquery-mobile ease. Jquery-mobile-960 is a port of 960 grid to jquery mobile.

960 Grid on jQuery-Mobile - merge flexibility with jquery-mobile ease

It merge the flexibility of, 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. Try it! 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.

Introduction to jQuery Mobile

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 Themeroller by