Tag Archives: jQuery Mobile

jQuery Mobileをつかって、コーポレートサイトを作成してみました。cssをカスタマイズするのに苦戦しますね。ソースコードがかなり長いので、sampleをご覧ください。 sample：jQuery Mobileでコーポレートサイトを作成 ダウンロード：jQuery Mobileでコーポレートサイトを作成をダウンロード ※実際のコードは下記になります。 ▼htmlソース ▼jquery.mobile-1.0.cssのソースコード ▼style.css　のソースコード

jQuery Mobileで出来るリストの表現を試してみました。サムネイルやアイコンを使うと、いろいろと表現しやすくなりますね。 sample：jQuery Mobileのリストの種類 ※実際のコードは下記になります。

jQuery Mobile 1.0正式版でフォームを作ってみました。サイト作成には必ずといって言いほど、作成するページなので覚えておいて損はないです。 sample：jQuery Mobileでフォーム作成 ※実際のコードは下記になります。

『jQuery Mobileをつかってサンプルページを作ってみる』&『jQuery Mobileのアイコンをつかってみる』引き続き、jQuery Mobile 1.0正式版でのボタンの表現の仕方を試してみました。グループ化するだけで見栄えや使い方が変わるので、スマートフォンサイト作成の際は使いたいですね。 sample：jQuery Mobileのボタンのグループ化 ※実際のコードは下記になります。

次ページに遷移するときの表現に使いたいのが『data-transition 』タグです。このタグで指定するだけで複数の遷移表現が可能です。指定しない場合は、デフォルトで『slide』になるようですね。という事で、jQuery Mobile 1.0正式版の『アニメーションエフェクト』を試してみました。 sample：jQuery Mobileのアニメーションエフェクト ※実際のコードは下記になります。

jQuery Mobile 1.0正式版で『jQuery Mobileをつかってサンプルページを作ってみる』に引き続き、アイコンの種類を表示させてみました。 種類も充実しているので、デフォルトのアイコンだけでも十分に表現できるかと思います。 sample：jQuery Mobileのアイコンサンプル ※実際のコードは下記になります。

jQuery Mobile 1.0正式版が公開されたので簡単なサンプルを作成してみましたが、beta版は「3」まですでに出ているようですね。機能も追加や変更とどんどん進化しているようですし、とりあえずは知って損はしない基本から学ぼうと思います。下記のコードを貼りつけるだけで、それっぽい表示になりますので、気になる方は作成してみてください。 ページ構成は、ホーム / スタッフ / メニュー / ギャラリー / アクセスとしました。1つのhtmlファイル（jsとcssを本家サイトから読み込んでいるので、本当に1つのhtmlファイルだけでOK）で、5つのページに遷移します。※中身は空っぽです。あくまで遷移だけのイメージになります。イメージが沸かない方は、実際のサンプルをiPhoneもしくは、Chromeで見るとより分かりやすいかもしれません。