Drawer|web制作に関するネタの引き出しサイトweb制作に関するネタの引き出しサイトTwitterFacebookRSS登録TOPページに戻るJavascriptiPhoneページ製作用jQueryプラグイン「jQTouch」iPhoneページ製作用jQueryプラグイン「jQTouch」2010年02月28日JavascriptiPhoneページ製作用jQueryプラグイン「jQTouch」をご紹介します。jQTouchとはiPhone(WebKit)向けjQueryのプラグインです。何ができるかiPhoneでよく利用される機能を容易に実装されるようになっている。ページ移動のアニメーションなどの機能が最初からついているjQTouchの使い方まずサンプルページを見て、必要なJSファイルを読み込みます。charset="utf-8"></script>JSまでのパスはそれぞれあわせてください。基本的にはこれで準備完了です。読み込むCSSのパス「jqt」の箇所を「apple」に変更すると、白っぽいスタイルに変更できます。HTMLファイルでbody直下のdivごとにページが分かれます。ページごとにHTMLファイルを分ける事も可能ですが、リンクのモーションが使用できません。下記はソースを抜粋したものです。*/上記のようにソースの順番が逆でもbody直下divのidにhomeがついている箇所が最初に表示されます。body直下divにclass="currnet"をつけると一番最初に読み込まれる。(読み込み時にチラっとうつります)aタグについているclassがモーションの種類を決めています。(class="slideup"やclass="dissolve")詳しいソースはサンプルページをご覧いただくか、ダウンロードしたファイル(/demos/main/index.html)をご覧下さい。利用する際の注意点このプラグインを入れたことによっていろいろできるわけではなく、元のテンプレートに沿った構造でサイトを構築することになります。リンクのモーションがbody直下div直下のリストのaタグにしか効かないので、モーションを付けたい箇所などは注意して製作する必要があります。href="#">ここのモーションを動かすにはモーションのclassを何か指定する(ただしそのモーションの効果はえられない)</p></div>iphone用シュミレーターここからはjQTouchだけのないようではありませんが、PCでのiphone用表示確認は以下の方法があります。SafariiphoneはブラウザのSafariを使用していますので、基本的な見た目はSafariと変わらないようです。iBBDemoこちらはSafariにiphoneの見た目の枠をつけたもののようです。Drawerこのサイトについてホームページ制作のマークアップエンジニアをしています。このブログはWebに関する記事を扱っています。自分で作ったものや試したもの調べたものを紹介しています。webdrawer.netページTOPへ戻る。