JQuery Mobile 語法

換頁效果
<li><a href="#page2" data-transition="reverse slideup">第二頁</a></li>

屬性名稱 換頁效果
slide 預設是slide由右方滑入。
slideup 由下方滑入。
slidedown 由上方滑入。
pop 彈出效果。
fade 淡入淡出。
flip 翻頁

對話方塊
      <li><a href="#page2" data-rel="dialog">第二頁</a></li>

將頁首固定在上方
     <div data-role="header" data-position="fixed">
將尾頁固定在下方
      <div data-role="footer" data-position="fixed">
設定全螢幕顯示 (chrome不能測試)
     <div data-role="page" id="page" data-fullscreen="true">
     <div data-role="header" data-position'"fxed">
頁首列是以toggle切換方式來呈現。
頁首列加入按鈕
<div data-role="header" >
    <a href="#logout" data-role="button">登出</a>
    <h1>標題頁</h1>
     按鈕方置右方則
    <a href="#logout" class="ui-btn-right" data-role="button">登出</a>
頁首列加入兩個按鈕
<div data-role="header" >
                <a data-rel="back" data-role="button">回上一頁</a> 
<h1>標題頁</h1>
                <a href="#page4" class="ui-btn-right" data-role="button">登入</a>

以圖示取代頁首文字
    <div data-role="header">
          <h1><img src="logo.png"></h1>
    </div>
將頁尾列加入按鈕
只要在頁尾加入<a>超連結,所有的<a>項目都會轉換為inline按鈕
     設定樣式為 class="ui-bar"
<div data-role="footer" class="ui-bar">
            <a href="#">按鈕一</a> 
           <a href="#">按鈕二</a>
           <a href="#">按鈕三</a> 
           <a href="#">按鈕四</a>
</div>
加入氣泡數字
加入class="ui-li-count"即可在右方顯示氣泡外型的統計數字
  <div data-role="header">
<span class="ui-count">文字或數字</span>
</div>
<div data-role="content">
        <ul data-role="listview">
            <li>jquery Mobile<span class="ui-li-count">12</span></li>
            <li>PhoneGap<span class="ui-li-count">25</span></li>
            <li>JavaScript<span class="ui-li-count">86</span></li>
        </ul>
</div>
加入 class="ui-li-aside" 不顯示氣泡統計數字
        <ul data-role="listview">
            <li>jquery Mobile<span class="ui-li-aside">12</span></li>
            <li>PhoneGap<span class="ui-li-aside">25</span></li>
            <li>JavaScript<span class="ui-li-aside">86</span></li>
        </ul>1
加入文字搜尋功能
如果ListView的項目太多,可以加入data-filter屬性啟動文字搜尋功能,預設搜尋的浮水印提示文字是「Filter items...」,也可以data-filter-placeholder屬性更改搜尋的提示文字。

留言

這個網誌中的熱門文章

歐姆龍 HEM-7600T 評價,購買心得分享(打臉文)

超任 三國志3代,登入武將金手指

年青人眼鏡評價(負評),辛酸血淚史分享文