jQueryを使ったモバイルアプリの設計/開発者向けナビゲーション

スマートフォンは現在、いくつかの非常に効率的なWebブラウザを装備しています。 JavaScriptはこれまで以上に強力であり、jQueryなどのコードライブラリを利用して拡張することができます。最新のHTML5 / CSS3仕様を追加すると、いくつかの基本的なフロントエンドコードを使って非常に見栄えのするモバイルWebアプリケーションを構築することができます。.

このチュートリアルでは、モバイルベースのWebサイト/ Webアプリケーションを作成する方法を説明します。特定のデバイスと画面の解像度をターゲットにするためにCSS3メディアクエリを使用します。プラスjQueryの少しはメニューを活気づけ、Ajaxの呼出しを使用して外的なページの内容を荷を積むのを助ける。さらに良いことに、ChromeやFirefoxなどの通常のデスクトップブラウザではレイアウトが適切に表示されるように拡張することさえ可能です。.

• ライブデモ
• ソースコード

ページ構造の定義

まずHTMLページを見て、CSSルールを使ってスタイルを設定しましょう。ヘッダー内の変わったメタタグは、Webアプリケーションには直接影響しないので、ほとんどスキップします。しかし、私が言及すべきことがいくつかあります。すなわち、以下のスニペットからです。

X-UA互換 特定のブラウザで文書をどのようにレンダリングするかを説明するために使用されます。 HTML5でコーディングするときはおもしろいシナリオなので、これについてあまり気にする必要はありません。しかしメタ ビューポート タグはとても重要です。標準のズーム効果ではなく、モバイルブラウザのウィンドウを100％に設定します。.

content値でユーザーズームを無効にすることも可能です。 user-scalable = no. しかしこの場合、フルスクリーンの幅をデバイスの幅と同じにしたいだけです。アップルのWebアプリタグを使用すると、WebサイトをホームスクリーンのアイコンとしてiPhoneまたはiPod Touchに保存できます。必ずしも必要ではありませんが、確かに持つ価値があります.

内部の内容

bodyタグの内側にIDを持つラッパーdivを設定しました #w. 内部私はIDを使用してレイアウトをさらに2つのdivに分割しました #pagebody そして #navmenu. レイアウト全体が厳密な数になるように、ページ全体の幅は選択によって640ピクセルに制限されています。.

 
  
香港モバイル
 
 
 
携帯サイトへようこそ!
 
 
 
 
 
メニューリンク
 
 
 
ホーム
 
私たちに関しては
 
宣伝する
 
私たちのために書く
 
連絡先
 
個人情報保護方針
 
 
 

ナビゲーションメニューには低いZインデックス値が与えられているので #pagebody 常に一番上です。 JavaScriptコードがページ本体上を一定のピクセル数スライドしてその下のナビゲーションを表示するため、これは非常に重要です。.

各.htmlページの前にハッシュ記号（＃）を使用して、Mobile Safariでの悪い動作を防ぎました。リンクをクリックするたびにURLバーが表示され、コンテンツがプッシュダウンされます。しかし、IDを参照するときは、JavaScript呼び出し以外では何もリロードされません。.

CSSポジショニング

CSSコードの中には、混乱を招くような内容はそれほど多くありません。位置決めのほとんどは手動で行われ、その後jQueryを介して操作されます。しかし、私たちの文書にはいくつか興味深い部分があります。.

/ ** @groupコアボディ** / #w #pagebody position：relative;左：0;最大幅：640ピクセル。最小幅：320ピクセル。 z-index：99999。 #w＃ナビゲーションメニュー背景：＃475566;身長：100％。表示ブロック;ポジション：固定。幅：300ピクセル。左：0px。トップ：0px。 ｚインデックス：０。 

この上部セグメントは、ページの両方のセクションのスタイルを定義します。ナビゲーションメニューの幅はわずか300ピクセルなので、ページコンテンツを表示するためのスペースが少し残っています。開閉メニューボタンも左側にあり、いつでもアクセスできます。ここで重要なのは、z-indexプロパティ値と ポジション：固定。 私たちのnavmenuに.

上部のツールバーヘッダーも興味深いセクションです。これは固定位置に設定されているので、ページの内容とともにスクロールします。これは、iOSアプリのタイトルバーに見られるのと同じ効果を再現しています。.

/ ** @groupヘッダー** / #w #pagebodyヘッダー＃toolbarnav display：block;;ポジション：固定。左：0px。トップ：0px。 ｚ指数：９９９９。背景：＃0b1851 url（ 'img / tabbar-solid-bg.png'）左上には繰り返しがありません。 border-radius：5ピクセル。 -moz-border-radius：5ピクセル。 -webkit-border-radius：5ピクセル。 -o-border-radius：5ピクセル。 border-bottom-right-radius：0。 -moz-border-radius-bottomright：0; -webkit-border-bottom-right-radius：0;ボーダー左下半径：0。 -moz-border-radius-bottomleft：0; -webkit-border-bottom-left-radius：0。高さ：44ピクセル。幅：100％。最大幅：640ピクセル。 #w #pagebodyヘッダー＃toolbarnav h1 text-align：center;パディングトップ：10px。右詰め：40ピクセル。色：＃e6e8f2;フォントの太さ：太字。フォントサイズ：2.1em。 text-shadow：1ピクセル1ピクセル0ピクセル＃313131。 

モバイルルール

青いヘッダーバーのテクスチャに背景画像も使用していることに気付くのは簡単です。これは、一貫したレイアウト構造を維持するために640×44ピクセルのサイズです。しかし、私はiPhone / iPadの網膜ディスプレイ用に@ 2xの画像も開発しました。あなたは下の画像の両方を見るか、または私のデモのソースコードからそれらをつかむことができます.

• System/demo/img/[email protected]
• System/demo/img/[email protected]

この機能のためにモバイルCSSを別のファイルに設定します。 respond.css. 網膜デバイスのタイトルバーbgとメニューボタンアイコンを置き換える2つのメディアクエリが含まれています.

/ **網膜ディスプレイ** / @mediaのみスクリーンと（-webkit-min-device-pixel-ratio：2）、スクリーンだけと（min  -  moz-device-pixel-ratio：1.5）、スクリーンだけと（ min-device-pixel-ratio：1.5）#w #pagebodyヘッダー背景：＃0b1851 url（'img/[email protected] '）左上の繰り返しなし。背景サイズ：640ピクセル44ピクセル。 #w #pagebodyヘッダー＃menu-btn background：url（ 'img / nav-btn @ 2x.png'）背景サイズ：53px 30px。 

メニュー矢印の設計

ナビゲーション領域には、各メニューリンクの右側に小さな矢印アイコンもあります。これは簡単に任意のクリエイティブコモンズアートワークからの画像と置き換えることができます。しかし、ほとんどすべてのCSS3愛好家はこの方法を試してみるのが好きでしょう。.

#w＃ナビゲーションメニュー:: after content： ";表示：block;幅：6px;高さ：6px;ボーダーライト：3px solid＃d0d0d8;ボーダートップ：3px solid＃d0d0d8;位置：絶対;右：30px; top：45％; -webkit-transform：rotate（45deg）; -moz-transform：rotate（45deg）; -o-transform：rotate（45deg）; transform：rotate（45deg）; #w #navmenu ul li a：hover :: after border-color：＃cad0e6;

私たちは使っています 変形する コンテンツの後に小さな枠線を作成するためのプロパティ。私もセットアップ 位置：絶対 そのため、内側のリンク項目の周囲でこれらの枠線を自由に移動できます。ホバー状態で境界色を変更するのは非常に簡単です。これにより、より動的な感覚が得られます。 HTML5とCSS3の基本的な規則を使用するだけで達成できることは、非常に信じられないほどです。.

それでは、JavaScriptコードについて説明しましょう。これを実行するには、コードにjQueryライブラリへのインクルードが必要であることを忘れないでください。.

アニメーションjQuery

これらのカスタムコードを書く際に、私は新しいドキュメントを作成しました。 script.js. これらを直接書いてお気軽に > タグ、またはデモのソースコードから私の例をダウンロード.

$（document）.ready（function（）var pagebody = $（ "＃pagebody"）; var themenu = $（ "＃navmenu"）; var topbar = $（ "＃toolbarnav"）; var content = $（ " #content "）; var viewport = width：$（window）.width（）、height：$（window）.height（）; //変数を// viewport.width / viewport.heightとして取得します。 

function openme（）$（function（）topbar.animate（left： "290px"、duration：300、queue：false）; pagebody.animate（left： "290px"、duration：300キュー：false）;）; 関数closeme（）var closeme = $（関数（）topbar.animate（left： "0px"、duration：180、queue：false）; pagebody.animate（left： "0px"、 duration：180、queue：false）;）; 

//ナビゲーション用のページコンテンツの読み込み$（ "a.navlink"）。live（ "click"、function（e）e.preventDefault（）; var linkurl = $（this）.attr（ "href"）; var linkhtmlurl = linkurl.substring（1、linkurl.length）; var imgloader = ''; 

closeme（）; $（function（）topbar.css（ "top"、 "0px"）; window.scrollTo（0、1）;）;

content.html（imgloader）; setTimeout（function（）content.load（linkhtmlurl、function（）/ * no callback * /）、1200）;