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).
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:
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:
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.
请发表评论