DailyJS

DailyJS

The JavaScript blog.


TagiPhone
Featured

mobile iPhone interface mootools

MooTouch

Posted on .

MooTouch is a framework for iPhone web app development that uses
MooTools, made by Jacky Nguyen. The code hasn't actually been released yet, but the author promises that it will be
released under the MIT license. You can see the framework in this video:
Native-like iPhone Web Application - Powered by MooTouch and on this site:
ExpatLiving.

MooTouch allows you to build pages that load using Ajax with location
hashes. It uses Safari's native CSS3 features so transitions feel
snappy. The source code has some Android webkit support as well. There
are also interesting references like orientation change support. The
source doesn't appear to have specific multitouch support in the API.

Someone has kindly posted the source, processed through a beautifier, to
GitHub. You can see how the library is used in
ExpatLiving.js, and the source itself in
mootouch.js.

Featured

tutorials libraries jquery iPhone

jQTouch: Build iPhone Apps With JavaScript

Posted on .

jQTouch is a jQuery plugin for mobile web development. It lets you create native-feeling iPhone applications using
just HTML, CSS and JavaScript by taking advantage of native webkit
animations and by capturing events
such as swipes and orientation changes.

As the author, David Kaneda, writes in the online
documentation
, it's easy to get
started: Just include jQuery and jQTouch along with any
themes and extensions in your page, then initialize jQTouch with any
options.

So the head of your document might look a bit like this:

  jQTouch Example
  @import "../../jqtouch/jqtouch.min.css";
  @import "../../themes/jqt/theme.min.css";





    var jQT = new $.jQTouch({
      icon: 'jqtouch.png',
      addGlossToIcon: false,
      startupScreen: 'jqt_startup.png',
      statusBar: 'black'
    });

    // ... more js here ...

There are a few extensions provided (including one for access to the
iPhone's geo-location features, and another for auto-setting the title
in the toolbar from the referrer page), but it's possible to add your
own by writing a function and passing it to
\$.jQTouch.addExtension().

(function($) {
    if ($.jQTouch)
    {
        $.jQTouch.addExtension(function Counter(jQTouch){
            var mycount = 0;          
            function addOne() {
                ++mycount;
            }
            function getCount() {
                return mycount;
            }
            return {
                addOne: addOne,
                getCount: getCount
            }
        });
    }
})(jQuery);

It's even possible to make your jQTouch sites run
offline
, like a
native iPhone app, by using HTML5's Cache
Manifest
feature.

A great way to get started with jQTouch is by exploring the demos that
David has provided in the
download. These cover all of the features I've mentioned here, plus lots more besides: I've only
scraped the surface.

If you want to dig deeper, there's a screencast on
PeepCode
, and online in a
Creative Commons O'Reilly book called Building iPhone Apps with HTML,
CSS, and
JavaScript
.