A couple of months ago, we designed and released two custom iOS themes for jQuery Mobile. They were a big hit in the mobile web community, and hopefully still getting some good usage. I thought it would be fun to follow up with a ‘how-to’ on creating themes using jQuery Mobile ThemeRoller. This time around, I created a custom theme based on Twitter’s mobile app. Like before, this theme is 100% free to use (personal or commercial), packaged with ThemeRoller generated CSS and a custom background image.
Best jQuery jQuery Mobile Plugins & Tutorials with Demo
app-UI : Creating interactive mobile applications in jQuery
app-UI is a collection of user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and jQuery, especially those targeting mobile devices. app-UI is a continual work in progress – it was born out of the necessity to have rich & native-feeling interfaces in HTML/JS experiences, and it works great with PhoneGap applications (http://www.phonegap.com). app-UI can easily be styled/customized using CSS.
Create a mobile website with jQuery Mobile
jQuery Mobile is a free, open-source, cross-platform, JavaScript library that you can use for developing mobile websites. This library lets you create pages that look and feel like the pages of a native mobile application.
In this article you’ll learn the basic techniques for creating the pages of a mobile website. That will include the use of dialog boxes, buttons, and navigation bars.
Sidetap : Quickly build mobile web interfaces with jQuery
Sidetap is a simple framework that allows you to quickly build platform-independent mobile web interfaces.We built Sidetap to be an easy-to-use implementation of the side navigation pattern popularized by apps like Sparrow and Facebook. It solves many common mobile development problems right out of the box. Here are some of the specific things we like about it:
- Lightweight: Sidetap only weighs 2k when minifyied and gzipped!
- Device Support: Sidetap aims to always deliver the best possible experience for all devices by starting with a basic experience and progressively enhancing it for more capable devices.
- Less Decisions to Make: By embracing convention over configuration, Sidetap let’s you start building your mobile interfaces right away.
- Simple: Sidetap provides a flexible foundation for navigating between content panels on mobile devices using an easy-to-use syntax.
jQuery Mobile Twitter Bootstrap Theme
A jQuery Mobile theme based on Twitter Bootstrap.
The title says it all. I thought it would be a fun project to build out a jQuery Mobile theme emulating everyone’s favorite hotness, the Twitter Bootstrap UI library. It’s not a perfect translation of course, but consider it a work in progress.
This theme overrides the existing jQuery Mobile A – E swatches (and adds an F swatch as well) with colors and styles found in Twitter Bootstrap. It’s meant to be used with A as the primary swatch for the page, and B – F as accents as needed.
NiceScroll : jQuery Scrolling plugin for desktop,mobile & touch devices
Nicescroll (as nice scroll for browsers) is a jquery (since 1.5) plugin, for nice scrollbars with a very similar ios/mobile style. It supports DIVs, IFrames and document page (body) scrollbars. Compatible with Firefox 4+, Chrome 5+, Safari 4+ (win/mac), Opera 10+, IE 6+. (all A-grade browsers) Compatible with iOS devices as iPad. So you have scrollable divs for iPad.
Mobile App Design/Dev: Building Navigation with jQuery
Smartphones are now equipped with some very efficient web browsers. JavaScript is more powerful than ever before, and can be extended with the help of code libraries such as jQuery. When you add in the latest HTML5/CSS3 specs, it’s possible to build very snappy mobile web apps with some basic frontend code.
In this tutorial I’ll show how you can build a mobile-based website/webapp. We’ll use CSS3 media queries for targeting specific devices and screen resolutions. Plus a bit of jQuery helps to animate the menu and load external page content using Ajax calls. Even better, the layout can even expand to display properly in regular desktop browsers such as Chrome or Firefox.
jQTouch : Zepto/jQuery plugin for mobile web development
jQTouch is a JavaScript plugin which works with either Zepto.js or jQuery, and comes with smooth animations, navigation, and themes for mobile WebKit browsers (as found in iOS, Android, BlackBerry, and WebOS).
Features:
- Easy to install. Get up and running in a few minutes.
- Entirely customizable with selector options
- Theme support, including default Apple and jQTouch custom themes
- Callback functions throughout, including swipe and orientation change detection
- Page history management and CSS3 page transitions, including 3D flip, cube, and swap
- Failover to 2D animations for devices that don’t support 3D
- Easily allow apps to run in fullscreen mode with custom icons and startup screens
- The power of jQuery to build AJAX applications
Awesome jQuery Mobile Image Gallery Web App
With more and more users browsing the web with a mobile device, it’s time to begin with mobile web development. In this tutorial we are going to develop a simple mobile image gallery using the amazing jQTouch jQuery plugin for mobile web development. jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, iPod Touch, G1, and Pre.
Our little application is going to show some albums in a list view which will reveal a wall of thumbnails once it’s clicked. When a thumbnail is clicked, we get to the full image view where we can navigate through all the photos by either clicking on the navigation buttons or swiping over the image.we will be using PHP to automatically generate albums with PHP from the folder structure.
