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 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.
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 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.
flipsnap.js is snap scroll for touch device.It supports :
- iOS Safari (iOS4+)
- Android Browser (Android 2.1+) (*1)
- Android Firefox Mobile 9.0+
- Android Opera Mobile 11.50+
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 (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.
- 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
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.