jQuery Mobile学習五


jQuery Mobile学習五
jQuery Mobileトピック
jQuery Mobileは、「a」から「e」までの5つの異なるスタイルのトピックを提供します.各トピックには、ボタン、バー、コンテンツブロックなど、異なる色のトピックがあります.jQuery Mobileのトピックの1つは、複数の可視効果と色で構成されています.
アプリケーションの外観をカスタマイズするには、data-themeプロパティを使用し、そのプロパティにアルファベットを割り当てます.

<div data-role="page" data-theme="a|b|c|d|e">

a
:デフォルトです.黒い背景の白いテキスト.
b
:青色の背景の白いテキスト/灰色の背景の黒いテキスト
c:明るい灰色の背景の黒いテキスト
d:白い背景の黒いテキスト
e:オレンジ色の背景に黒いテキスト
デフォルトでは、jQuery Mobileはヘッダーとフッターに「a」トピックを使用し、ヘッダーの内容に「c」トピック(明るいグレー)を使用します.ただし、トピックを自由にブレンドできます.

<div data-role="header" data-theme="b"></div>

<div data-role="content" data-theme="a"></div>

<div data-role="footer" data-theme="e"></div>

新しいトピックの追加
jQuery Mobileでは、モバイルページに新しいトピックを追加できます.
新しいトピックを追加または編集するには、jQuery MobileをダウンロードしたなどのCSSファイルを編集します.スタイルをコピーし、アルファベット名(f-z)でクラスの名前を変更し、好きな色とフォントに調整するだけです.
HTMLドキュメントでトピッククラスを使用して新しいスタイルを追加することもできます.ツールバーにクラスui-bar-(a-z)を追加し、コンテンツにクラスui-body-(a-z)を追加します.

<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>

jQuery Mobileイベント
jQuery Mobileでは、標準のjQueryイベントを使用できます.
また、jQuery Mobileでは、モバイルブラウズ用にカスタマイズされたイベントもいくつか提供されています.

タッチイベント-ユーザが画面をタッチすると、

がトリガー(タップおよびスライド)される.

スクロールイベント-上下スクロール時に

がトリガーされます.

方向イベント-デバイスが垂直または水平に回転すると

がトリガーされる.

ページイベント-ページが表示、非表示、作成、ロード、および/またはアンインストールされると

がトリガーされます.
すべてのjQuery Mobileイベントに関する完全な情報が必要な場合
jQueryでは、ドキュメントreadyイベントを使用して、jQueryコードがドキュメントのロードを終了する前に実行されないようにすることを学びました.
jQuery document readyイベント

<script>
$(document).ready(function(){

   //     jQuery   ...

});
</script>

jQuery Mobile pageinitイベント

<script>
$(document).on("pageinit","#pageone",function(){

   //     jQuery   ...

});
</script>

tapイベントは、ユーザーが要素をタップしたときにトリガーされます.

$("p").on("tap",function(){
  $(this).hide();
});

tapholdイベントは、ユーザーが要素をノックして1秒保持したときにトリガーされます.

$("p").on("taphold",function(){
  $(this).hide();
});

swipeイベントは、ある要素上でユーザが30 px以上水平にスライドしたときにトリガーされる.

$("p").on("swipe",function(){
  $("span").text("Swipe detected!");
});

swipeleftイベントは、ある要素を左から30 px以上スライドさせたときにトリガーされます.

$("p").on("swipeleft",function(){
  alert("You swiped left!");
});

swiperightイベントは、ある要素を右から30 px以上スライドさせたときにトリガーされます.

$("p").on("swiperight",function(){
  alert("You swiped right!");
});

scrollstartイベントは、ユーザーがページのスクロールを開始するとトリガーされます.

$(document).on("scrollstart",function(){
  alert("    ！");
});

scrollstopイベントは、ユーザーがページのスクロールを停止したときにトリガーされます.

$(document).on("scrollstop",function(){
  alert("    ！");
});

jQuery Mobileでページに関連するイベントは、次の4つに分類されます.

Page Initialization-ページ作成前、ページ作成時、およびページ初期化後の

.

Page Load/Unload-外部ページのロード時、アンインストール時、または失敗した場合

.

Page Transition-ページ遷移の前後

Page Change-ページが変更されたり、失敗したりした場合

jQuery Mobileの典型的なページが初期化されると、3つのフェーズが発生します.

ページ作成前

ページ作成

ページ初期化

各フェーズでトリガーされるイベントは、コードの挿入または操作に使用できます.
pagebeforecreate:ページが初期化され、jQuery Mobileがページの強化を開始する前に、イベントがトリガーされます.
pagecreate:ページが作成されたが、拡張が完了する前にイベントがトリガーされます.
Pageinit:ページが初期化され、jQuery Mobileがページ拡張を完了した後、イベントがトリガーされます.

$(document).on("pagebeforecreate",function(event){
  alert("   pagebeforecreate   ！");
}); 
$(document).on("pagecreate",function(event){
  alert("   pagecreate   ！");
});
$(document).on("pageinit",function(event){
  alert("   pageinit   ！")
});

外部ページがDOMにロードされるたびに、2つのイベントがトリガーされます.1つ目はpagebeforeload、2つ目はpageload(成功)またはpageloadfailed(失敗)です.pagebeforeload:任意のページロード要求が作成される前にトリガーされます.
pageload:ページが正常にロードされ、DOMが挿入された後にトリガーされます.
pageloadfailed:ページロード要求に失敗した場合、イベントがトリガーされます.デフォルトでは、「Error Loading Page」メッセージが表示されます.
ページ遷移は、2つのページに関連します.1つの「来る」ページと1つの「行く」ページです.これらの遷移は、現在のアクティブなページ(「来る」ページ)から新しいページ(「行く」ページへの変更プロセスをよりダイナミックにします.
pagebeforeshow:「行く」ページでトリガーされ、遷移アニメーションが開始される前に.
pageshow:「行く」ページでトリガーされ、遷移アニメーションが完了した後
pagebeforehide:[来た]ページでトリガーされ、遷移アニメーションが開始される前に
pagehide:遷移アニメーションが完了した後、「来た」ページでトリガーされます.

$(document).on("pagebeforeshow","#pagetwo",function(){ //        
  alert("       ");
});
$(document).on("pageshow","#pagetwo",function(){ //        
  alert("       ");
});
$(document).on("pagebeforehide","#pagetwo",function(){ //        
  alert("       ");
});
$(document).on("pagehide","#pagetwo",function(){ //        
  alert("       ");
});