jQuery MobileとHTML 5を使用してWeb Appを開発(15)--jQuery Mobileと応答式
4769 ワード
jQuery Mobileは発売当初、いくつかの重要な特徴を宣伝していたが、Kayoが本シリーズで何度も紹介した「タッチスクリーン最適化」のほか、もう一つの最も直接的な特徴は「応答式設計」であり、応答式設計については、Kayoが多くの関連文章を書いて説明しているが、本稿で紹介するのは、jQuery Mobileでは、レスポンス設計のための最適化とツールです.
jQuery Mobileのテストバージョンのドキュメントには、「Responsive Layout Helpers」というコラムがあります.すなわち、レスポンスレイアウトアシスタントですが、正式版のドキュメントでは、このコラムは削除されています.これは、jQuery Mobileがレスポンスデザインのサポートを削減したという意味ではありません.逆に、jQuery Mobileはレスポンスデザインのサポートをよりよくしています.また、このサポートはjQuery Mobileの設計に組み込まれており、開発者がツールを呼び出してWebページの完全な応答レイアウトを調整することに完全に依存していない.多くの応答式の内容Kayoは以前に文章を書いて紹介したことがあるので、本文はこれらの内容をまとめて紹介するだけで、詳細は具体的な関連文章を参照してください.
一.Media Queries
jQuery MobileのCSSソースコードには、次のようなコードがたくさんあります.
これはMedia Queriesであり、条件に応じて対応するCSSをマッチングすることができ、異なる場合に対応するCSSを適用して適応的な効果を達成することができる.Media Queriesについて、Kayoは前に詳しく紹介する文章を書いたので、参考にしてください.
また、jQuery Mobileではデフォルトでコンポーネントの構造、スタイル、インタラクションが強化されているため、Media Queriesを使用して異なる状況に対応するCSSをマッチングするほか、jQuery Mobileは強化されたコンポーネント構造を設計する際にもレスポンスレイアウトに対して設計を行い、jQuery Mobileによって駆動されるWeb Appsの外観をより柔軟にすることができる.
二.メディアクエリの実行(Running Media Queries)
Running Media Queries(Running Media Queries)は、jQuery Mobileのユーティリティです.jQuery Mobileの内部で複数回呼び出され、主にいくつかの効果が適切な状況で実行されることを確保します.例えば、jQuery Mobileページの回転を紹介する際には、回転ページの幅が大きすぎると、反転などの3 D効果がシステムリソースを過度に消費する可能性があるため、開発者は$を使用することができると説明する.mobile.maxTransitionWidthは、ターンフィールドの最大幅を制御し、それを超えるとターンフィールドアニメーションを使用せず、幅が設定値を超えるか否かを判断する技術原理は、実行メディアクエリを利用することである.開発者としては、JavaScriptを使用してMedia Queries内の条件が満たされているかどうかを判断するためのツールを使用して応答設計を支援することもできます.第1部の内容を知っていれば、開発ではMedia Queriesの結果に基づいてCSSを導入すべきかどうかを判断できるが、ウェブレイアウトではJavaScriptを導入すべきかどうかを判断する必要がある場合もあり、メディアクエリーを実行することでJavaScriptを導入すべきかどうかを判断することができる.
例:
三.デバイス方向変化イベントと方向クラス
デバイスの方向が変化する(すなわち、デバイスが横方向と縦方向の方向に遷移する)と、orientationchangeイベントがトリガーされます.このイベントのコールバック関数のイベントオブジェクト(eまたはevent)には、「portrait」または「landscape」の値を持つorientation属性がカプセル化され、デバイスが縦方向に変化したときにイベントをトリガーするか、横方向に変化したときにイベントをトリガーするかを記述します.旧バージョンのjQuery Mobileでは、この値もclassとしてhtmlタグに追加され、開発者はこのclassに基づいて対応するcss、すなわち方向クラスを追加することができるが、新版のドキュメントには方向クラスに関する説明はなく、Kayoデバッグ後も対応する方向クラスは現れないため、新版jQuery Mobileでは既に原生方向クラスはサポートされていない.しかし、jQueryによって同じ効果を達成することができます.たとえば、次のようにします.
landscapeとportraitにそれぞれ対応するスタイルを指定すればいいです.
また、orientationchangeイベントのバインディング要素や、そのイベントをサポートしない場合の処理についても特に注意が必要であり、具体的には「jQuery MobileとHTML 5を用いてWeb Appを開発する-jQuery Mobileイベントの詳細」の第3部「デバイス方向変化イベント(Orientation change event)」を参照することができる.
最後にDemoを追加し、Android、iPhone/iPadのシステムブラウザで閲覧し、orientationchangeの基本的な効果をテストすることをお勧めします.
レスポンスデザインの詳細について説明します.参考になるのが『フロントエンド開発のレスポンスデザイン』
本稿ではこれまで、jQuery Mobileの各コンポーネント、イベント、方法、およびその中のAjaxメカニズム、強化メカニズム、実行プロセスなどの技術原理を15の文章で詳しく述べてきましたが、jQuery Mobileにはある程度熟知していると信じられています.次に説明するのは、HTML 5のWeb Appsへの応用です.実際、HTML 5は、HTML 4に対する新しい特性がモバイル開発のために設計されていることが多いため、一連のHTML 5の新しい特性の説明でもある.
原文はKayo Leeが発表し、原文リンク:http://kayosite.com/web-app-by-jquery-mobile-and-html5-responsive-of-web.html
jQuery Mobileのテストバージョンのドキュメントには、「Responsive Layout Helpers」というコラムがあります.すなわち、レスポンスレイアウトアシスタントですが、正式版のドキュメントでは、このコラムは削除されています.これは、jQuery Mobileがレスポンスデザインのサポートを削減したという意味ではありません.逆に、jQuery Mobileはレスポンスデザインのサポートをよりよくしています.また、このサポートはjQuery Mobileの設計に組み込まれており、開発者がツールを呼び出してWebページの完全な応答レイアウトを調整することに完全に依存していない.多くの応答式の内容Kayoは以前に文章を書いて紹介したことがあるので、本文はこれらの内容をまとめて紹介するだけで、詳細は具体的な関連文章を参照してください.
一.Media Queries
jQuery MobileのCSSソースコードには、次のようなコードがたくさんあります.
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi) {
.ui-icon-plus, .ui-icon-minus, .ui-icon-delete, .ui-icon-arrow-r,
.ui-icon-arrow-l, .ui-icon-arrow-u, .ui-icon-arrow-d, .ui-icon-check,
.ui-icon-gear, .ui-icon-refresh, .ui-icon-forward, .ui-icon-back,
.ui-icon-grid, .ui-icon-star, .ui-icon-alert, .ui-icon-info, .ui-icon-home, .ui-icon-search, .ui-icon-searchfield:after,
.ui-icon-checkbox-off, .ui-icon-checkbox-on, .ui-icon-radio-off, .ui-icon-radio-on {
background-image: url(images/icons-36-white.png);
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
-webkit-background-size: 776px 18px;
background-size: 776px 18px;
}
.ui-icon-alt {
background-image: url(images/icons-36-black.png);
}
}これはMedia Queriesであり、条件に応じて対応するCSSをマッチングすることができ、異なる場合に対応するCSSを適用して適応的な効果を達成することができる.Media Queriesについて、Kayoは前に詳しく紹介する文章を書いたので、参考にしてください.
また、jQuery Mobileではデフォルトでコンポーネントの構造、スタイル、インタラクションが強化されているため、Media Queriesを使用して異なる状況に対応するCSSをマッチングするほか、jQuery Mobileは強化されたコンポーネント構造を設計する際にもレスポンスレイアウトに対して設計を行い、jQuery Mobileによって駆動されるWeb Appsの外観をより柔軟にすることができる.
二.メディアクエリの実行(Running Media Queries)
Running Media Queries(Running Media Queries)は、jQuery Mobileのユーティリティです.jQuery Mobileの内部で複数回呼び出され、主にいくつかの効果が適切な状況で実行されることを確保します.例えば、jQuery Mobileページの回転を紹介する際には、回転ページの幅が大きすぎると、反転などの3 D効果がシステムリソースを過度に消費する可能性があるため、開発者は$を使用することができると説明する.mobile.maxTransitionWidthは、ターンフィールドの最大幅を制御し、それを超えるとターンフィールドアニメーションを使用せず、幅が設定値を超えるか否かを判断する技術原理は、実行メディアクエリを利用することである.開発者としては、JavaScriptを使用してMedia Queries内の条件が満たされているかどうかを判断するためのツールを使用して応答設計を支援することもできます.第1部の内容を知っていれば、開発ではMedia Queriesの結果に基づいてCSSを導入すべきかどうかを判断できるが、ウェブレイアウトではJavaScriptを導入すべきかどうかを判断する必要がある場合もあり、メディアクエリーを実行することでJavaScriptを導入すべきかどうかを判断することができる.
例:
$.mobile.media('screen') // 'screen'
$.mobile.media('screen and (min-width: 480px)') // 'screen' '480px'
$.mobile.media('@media screen and (-webkit-min-device-pixel-ratio: 2)') // webkit 2x ( iPhone 4)
//
if( $.mobile.media('screen and (min-width: 480px)') )
// 三.デバイス方向変化イベントと方向クラス
デバイスの方向が変化する(すなわち、デバイスが横方向と縦方向の方向に遷移する)と、orientationchangeイベントがトリガーされます.このイベントのコールバック関数のイベントオブジェクト(eまたはevent)には、「portrait」または「landscape」の値を持つorientation属性がカプセル化され、デバイスが縦方向に変化したときにイベントをトリガーするか、横方向に変化したときにイベントをトリガーするかを記述します.旧バージョンのjQuery Mobileでは、この値もclassとしてhtmlタグに追加され、開発者はこのclassに基づいて対応するcss、すなわち方向クラスを追加することができるが、新版のドキュメントには方向クラスに関する説明はなく、Kayoデバッグ後も対応する方向クラスは現れないため、新版jQuery Mobileでは既に原生方向クラスはサポートされていない.しかし、jQueryによって同じ効果を達成することができます.たとえば、次のようにします.
$(window).bind( 'orientationchange', function(e){
if( e.orientation == 'portrait' ) $('html').addClass('portrait').removeClass('landscape');
else if( e.orientation == 'landscape' ) $('html').addClass('landscape').removeClass('portrait');
});landscapeとportraitにそれぞれ対応するスタイルを指定すればいいです.
また、orientationchangeイベントのバインディング要素や、そのイベントをサポートしない場合の処理についても特に注意が必要であり、具体的には「jQuery MobileとHTML 5を用いてWeb Appを開発する-jQuery Mobileイベントの詳細」の第3部「デバイス方向変化イベント(Orientation change event)」を参照することができる.
最後にDemoを追加し、Android、iPhone/iPadのシステムブラウザで閲覧し、orientationchangeの基本的な効果をテストすることをお勧めします.
レスポンスデザインの詳細について説明します.参考になるのが『フロントエンド開発のレスポンスデザイン』
本稿ではこれまで、jQuery Mobileの各コンポーネント、イベント、方法、およびその中のAjaxメカニズム、強化メカニズム、実行プロセスなどの技術原理を15の文章で詳しく述べてきましたが、jQuery Mobileにはある程度熟知していると信じられています.次に説明するのは、HTML 5のWeb Appsへの応用です.実際、HTML 5は、HTML 4に対する新しい特性がモバイル開発のために設計されていることが多いため、一連のHTML 5の新しい特性の説明でもある.
原文はKayo Leeが発表し、原文リンク:http://kayosite.com/web-app-by-jquery-mobile-and-html5-responsive-of-web.html