概要 † iPhoneアプリのような挙動が、ウェブブラウズで提供できるJavaScriptのライブラリです。 jQueryのプラグインとして動作します。 公式: http://www.jqtouch.com/ 公式サイトの動画の最初の方で、SafariでURLにアクセスして「Add to Home Screen」をタップしたらホームに置かれるようですね。 その際のアイコンなども変更可能です。 ↑ 使い方 † 基本、jQueryのプラグインなので、jQueryのライブラリと一緒に読み込んでインスタンスを生成すればOKです。 <script src="js/jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jqtouch/jqtouch.min.js" ty
クラスを指定することで、どのようなアニメーションになるか/どの位置に表示されるかを理解しておこう。まずはアニメーションからだ。jQTouchでは、ソースから推するに3つのアニメーション用セレクタが用意されている。 flipSelector - フリップ表示用 slideInSelector - 横スライド表示用 slideUpSelector - 縦スライド表示用、hello_jqtouch.htmlで使用 さきほどのhello_jqtouch.htmlで、slideupクラスをflipやslideinに変更しどのようなアニメーションになるかを確認する。 動画 classにflipを指定。タッチするとフリップアニメーションがおこなわれる $.jQTouch()時にslideInSelector: '.slidein'としてclassにslideinを指定。タッチすると横スライド表示がおこな
全然Eclipse使った開発はやってないんですが…。 それはともかく、大きな目的はAndroidで動くアプリを作ることであり、その作り方はあくまで手段にしかすぎません。 とある理由により、iPhone/Androidに最適化したWebを作ることとなり、それに伴いJavaScriptによる実装を試みました。 元々jQueryを使った構築をやっているので、最初は独自実装を試してみました。 ユーザーの方はご存じのように、Androidのブラウザはページ遷移に時間がかかるのが弱点となっています。 そのためできるだけページ遷移を行わず、JavaScript/CSSによるブロックの表示・非表示で対応する方がユーザビリティの上で得策だと言えるでしょう。 最初に読み込んでおく方が時間的には短くできるのですが、閲覧者は全てのコンテンツを見るとは限りません。そのため、あらかじめ読み込んでおくコンテンツと、非同
約一ヶ月ぶりのエントリ…完全に暑さに負けてますね^^ というわけで今日は日曜出勤の振替休日を利用して、 最近Ext.jsに合流したりで話題のjQTouchを触ってみました。 そしてできあがったのが、このwikiもどきです。 wiki5 説明 触っていただければ使い方はなんとなくわかると思います。 ただ、Mobile Safari以外では一切動きません。 (iOS4上では動作未確認です。) また、タップが効かない、ボタンがアクティブのままになる、 画面が真っ黒になる等、全体的に挙動が安定していません。 (はい、テスト不足です。) どうにもならなくなったときは「wiki5/index.html?clear」にアクセスすれば、 初期化されます。 あと、ついでですがw3c widgetにもしてみました。 cloud readerで動作することを軽く確認しています。 wiki5 中身の解説は暑いので
slideupの書き方 <ul> <li class="arrow" class="slideup"><a href="#slideup">slideup</a></li> <li class="arrow"><a href="#flip" class="flip">flip</a></li> <li class="arrow"><a href="#slidein" class="slidein">slidein</a></li> </ul> flipの書き方 <ul> <li class="arrow" class="slideup"><a href="#slideup">slideup</a></li> <li class="arrow"><a href="#flip" class="flip">flip</a></li> <li class="arrow"><a href="#sli
以前jqueryMobileを使ってみたので、今度はJQTouchを使ってみた。 印象としては、JQTouchは拡張性があって、こちらの方が使いやすそう。 UIはjqueryMobileの方が強そうだけど。 使ってみたExtensionは以下。 jqt.autotitles.js リンク名をそのままタイトルに自動挿入してくれるもの。 jqt.floaty.js フロートウィンドウを表示するもの。 jqt.location.js GPS情報を取得するもの。 jqt.offline.js オフラインでWEBページを表示するもの。 html5から使用できるローカルストレージにキャッシュするユーティリティ。 TouchScroll for JQTouch タッチでスクロールできるようにするもの。 jqt.scroll.jsというのもあるけど、こちらの方が使えそう。 ただ、スクロールしたい要素を追加
jQuery on iPhone - jQTouchを使ったWebアプリ開発を参考にして、iPhoneのWebアプリを作成してみました。 jQTouchとは?名前を見て、想像が出来る通り、iPhone向けWebアプリを作るためのjQueryです。オフィシャルのjQtouchより、ダウンロードして使用することができます。すぐに分かる特徴としては テーマサポート(2種類) Apple jQTouch custom themeiPhoneお作法の自動補完 実装方法実際に作ったのがこちらのページ。蛇田.jpのiPhone版です。 html> head> meta http-equiv="content-type" content="text/html" charset="UTF-8"> meta name="viewport" content="width=320; initial-scale=1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く