jQT
Create powerful mobile apps with just HTML, CSS, and Zepto.js (or jQuery).
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).
- 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
- Zepto integration - Use Zepto.js instead of jQuery to cut down on precious bandwidth. Zepto.js features a similar API to jQuery, but optimized for WebKit and much smaller.
- Sass-based stylesheets, easily modified with variables and optimized for size.
- Image-less stylesheets -- Using Compass Recipes, we have recreated all of the gradients and background patterns with CSS. This way, they are resolution independent, dynamically theme-able, and lower bandwidth.
- 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
- New demos: Clock and Todo
Getting Started
The easiest way to try out jQT is with the demo archive, which can be found in the release tab on Github:
Please look for the download (green button) with filename prefixed with jqt-demo
(ie, jqt-demo-<< version >>.tar.gz
.)
Once unzipped and untar, you can open package/demons/index.html
with any WebkitBrowser on a desktop.
Links
Recently added features can be found at New and Noteworthy page.
Source code, issue tracking, and documentation are available on github.
Watch this video preview to see it in action.
Building your own version of jQTouch
Dependencies
We have quite a few dependencies at the moment, as we build with Compass/SASS for stylesheets, which is only available via Ruby. The actual build system, however, is built on Grunt.
Please make sure you have the following installed:
- Ruby — Comes default on Macs, Windows users can use RubyInstaller
- Sass & Compass — Install both with
sudo gem install compass
once you have Ruby/RubyGems installed - Node.js & NPM —
brew install node
- Grunt CLI — Install with
npm install -g grunt-cli
once you have Node.js as listed above. - Local node packages — Run
npm install
from this directory
Commands
grunt
(default)
Will create a build of jQTouch in the build/
directory, compiling any theme files and updating with source from the Zepto submodule. This must be run to preview jQTouch.
grunt build
This task is used only for iterative development. It does not update submodule, nor clean the build. (The default
grunt task must be called once before this task.)
grunt watch
Will create the same build as grunt build
, but will continue to watch for file changes to theme and source files, compiling/copying them into build every time you save. If you have a livereload browser extension installed and enabled, the page will update live after every change. (The default
grunt task must be called once before this task.)
grunt compass
Only build the theme files. Typically, you'll want to use grunt watch
for developing a custom theme. (The default
grunt task must be called once before this task.)
grunt test
Run our test suite. (The default
grunt task must be called once before this task.)
grunt dist
This is typically used internally for creating releases — It does everything the standard build does, but then additionally minifies all JS/CSS and updates the paths in demo files.
External Guides
Jonathan Stark has created an excellent introduction to jQTouch as part of his book, Building iPhone Apps with HTML, CSS, and Javascript.
PeepCode did a screencast ($9), as well as a cheat sheet, which have been helpful to many people.
Credits
Created, and still occasionally maintained, by David Kaneda.
Maintained by Thomas Yip.
Special thanks to pinch/zoom and Jonathan Stark.
(c) 2009-2013 Sencha Labs.
jQTouch may be freely distributed under the MIT license. See LICENSE.txt for license.
Ghostclicks
Hey Guys, I got the same problem like the people here: http://groups.google.com/group/jqtouch/browse_thread/thread/ca1b5b163cdbebfe/b51172a19616d605 and http://groups.google.com/group/jqtouch/browse_thread/thread/6a782a9a5deed8a4
but i try everything and nothing works.
Im using jQTouch Revision 166
Long list items causes flicker - Not fixed
I'm pretty new to jQTouch, but loving it so far. One thing I have noticed though is if I have a list with 20 items or more, navigating to and from that list causes a black flicker. The flicker doesn't happen all of the time but it happens more often than not. Say 90% of the time. This occurs on both the device and simulator.
Anyone else had this problem or have a fix?
Why no tap events bound to ids
My code only seems to work with tap events bound to classes in tags, not tags. And ids don't seem to work at all with 'tap'? Is this correct behavior?
Issue scrolling page in stock Android ICS browser
In the stock Android ICS browser, I am experiencing an issue being able to scroll to a page that is longer than the initial home/main page. It seems like browser is unaware that the page height has changed, and will not let you scroll any further. A temporary fix is to rotate to landscape and then back to portrait, but this is not acceptable for our users. This is not present in Android 2.1/2.2, only 4.0.3.
That said, all animations and effects work perfectly in this version, but I really need to resolve this!
Thanks
Flashing last page on the iPad
By using jQTouch on an iPad it happens that after page switches with any effect, the last page flashes again for a very short time.
Maybe this depends on the iPad´s strong CPU, but anyways it would be great if jQTouch can be used on any “iDevice”.
Adding additional button in titlebar of a slide
Hello,
I'd like to add an additional button in the titlebar of each slides that offers to send a postcard of that slide width email. Ordinarily it just should be a button with a link to the postcard sending form.
That's the Page I'd like to do that.
http://www.schauenburg.de/index.php?article_id=81
Thanks for you answers.
Long Content Breaking Page Transition
Hello Guys,
Im new to JQTouch and Im having an issue setting up my site, my initial layout works great and the transition works great when the second page has no content, as soon as I put the content in the second page which is rather long it breaks the transition between home and the second page. It does link to the page but it sort of jumps. Please any help would be great.
Thank you.