NFH.019-JQueryMobile入門

2.28学習経験の共有#
Bruce_Zhuは2017.2.28
一.JQueryMobile

jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

JQMは主に4つの部分に分けられる:ページ&ナビゲーションCSSフレームワークコンポーネントフォームコントロール

3 JQMを使用するには
1)プロジェクトにjquery 1を導入する.8+バージョン
2)プロジェクトはjqmディレクトリを作成し、jqm必須リソースファイルを導入する
jquery-mobile.css jquery-mobile.js images/...

htmlファイルを作成し、必要なcssとjsを導入し、viewport

を設定します.

 
  
body data-role="page"  
 
  
 
  ： jqm html   ，body        page，      ，jqm    
 
 
body       page,            
 
 
jqm               body ，    page 
 
 
jqm             class    ，          class,        data-*        jqm  class   
 
 
 . jqueryMobile-page       
 
 
 
  
        a/button/input ，    a-         
 
  
          HTML  ；        HTML     page, 
 
 
 
 
 1)        HTML  

   2)  のHTMLの のページにジャンプ3)モードボックス  で のページを く
  
 JQMはページ り えに  に  なトランジションアニメーションを  しています.    で  できるアニメーション  は、fade:デフォルトアニメーションpop:ポップアップアニメーションslide:スライドアニメーションslideup:スライドアニメーションtrun:アニメーションflipの  :アニメーションflowの  :フローアニメーションnone:アニメーションなし
です.
 .jqueryMobile-ボタン
 A.buttonを  できます.Input    ボタンのスタイル
 data-role=「button」プロパティを  してボタンスタイルを  するか、ui-btn ui-corner-all ui-shadow 
などのclass  ボタンのスタイルを  できます.
ボタンのデフォルトはブロックレベル  であり、ui-btn-inlineを  して  ボタン
を  することができる.
ボタンには  とアイコンがあり、アイコンがある  は  との    を  する  があります.オプション btn-icon-left btn-icon-right btn-icon-bottom btn-icon-top 
        ，    ：  ，  ，  ，  ，  ，  ，  ，  ....
  
ボタンはpageのヘッダーに
を れることができます.
 header             ，         ，      
 
 


   ツールバーの         

 
  
 .jqueryMobile-ナビゲーションバー
    

  

    

  

 
ナビゲーションバーには   に  5つの  しかないことに  してください.5つを えると、1 に2つのナビゲーションバーが  されます.pageのHeader/Main/FooterがHeaderとFooterにあるnavbarはデフォルトで   を め、タイトルワードと
ずらします.
 .jqueryMobile-loadローダ
ローダを  :$.mobile.loading("show"); 
アンロード:$.mobile.loading("hide"); 
 .jqueryMobile-panel(パネル)
1)パネルは  のバージョンのjqpではpageにしか けず、headerの とfooterの 
     


          


          


          


              パネルを く

          

          


          


     
 
 
 
  
 
                 
 
  data-position="left/right"

  data-display = "reveal/overlay/push"
   
  
 .jqueryMobile- りたたみコンポーネント(collapsible)とオルガン  (collapsibleset)
 りたたみ   

  
   
  
     

 
アコーディオン