sencha touchみたいなsmart phoneに特化したUIを構築できるのが魅力です。
このjqmobi特徴があります。
いいところ
・１つ目、jqmobiのライブラリがそもそもjqueryみたいなことをしてくれるので、ほかのライブラリとは違いjqueryへのリンクをいれる必要はないです。
・２つ目、sencha touchとは違い、ハッシュへのリンクみたいな感じで表示するパネルを選択することができます。
・３つ目、非常に軽い
わるいところ
・１つ目、動作に癖がある。
・２つ目、jqueryとは違いwebkit系のブラウザでしか動作しないっぽい。
・３つ目、コンテンツの表示はその他の表示されてからなので、bootstrap for twitterみたいに先に表示を書き込んで・・・という手は使えないっぽい。
こんなところです。
とりあえず始めるにあたって知っておかないといけないページはこちら。
本家 http://www.jqmobi.com/
APIドキュメント http://api.jqmobi.com/
Kitchen sink http://jqmobi.com/testdrive/
とりあえず導入しましょう。
まずgithubのjqMobiのページにいきます。
https://github.com/appmobi/jq.mobi
git cloneするかzipをダウンロードします。
今回はzipのダウンロードでいってみました。
解凍してできたデータを適当なところに設置
あとはhtmlを書きます。
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<title>jqMobiテスト</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="http://taktodtools.appspot.com/icons/tora.png" />
<link rel="stylesheet" type="text/css" href="../jqmobi/kitchensink/jq.ui.carbon.css" title="volcano" />
<script type="text/javascript" charset="UTF-8" src="../jqmobi/ui/jq.ui.min.js"></script>
</head>
<body>
<div id="jQUi">
<div id="header">
</div>
<div id="content">
</div>
<div id="navbar">
</div>
<nav></nav>
</div>
</body>
</html>
極限までけずったらこんな感じでしょうか。
これをベースに今後は動作用のjavascriptを追加し、header、content、navbar、navの部分にそれぞれの情報を書き込んでいけば、できあがりとなります。
