jQuery Mobile

1.它是什么

jQuery Mobile 是創(chuàng)建移動(dòng) web 應(yīng)用程序的框架。
jQuery Mobile 適用于所有流行的智能手機(jī)和平板電腦。
jQuery Mobile 使用 HTML5 和 CSS3 通過(guò)盡可能少的腳本對(duì)頁(yè)面進(jìn)行布局。

在線(xiàn)教程：http://www.w3school.com.cn/jquerymobile/index.asp
官方下載：http://jquerymobile.com/

2. 廣泛應(yīng)用

  • 單頁(yè)面多應(yīng)用
  • 混合APP開(kāi)發(fā)

3. 如何使用

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
         /*
     content屬性值 :
          width:可視區(qū)域的寬度，值可為數(shù)字或關(guān)鍵詞device-width
          height:同width
          intial-scale:頁(yè)面首次被顯示是可視區(qū)域的縮放級(jí)別，取值1.0則頁(yè)面按實(shí)際尺寸顯示，無(wú)任何縮放
          maximum-scale=1.0, minimum-scale=1.0;可視區(qū)域的縮放級(jí)別，
          maximum-scale用戶(hù)可將頁(yè)面放大的程序，1.0將禁止用戶(hù)放大到實(shí)際尺寸之上。
          user-scalable:是否可對(duì)頁(yè)面進(jìn)行縮放，no 禁止縮放
         */
    <link rel="stylesheet"  />
    <script src="http://code.jquery.com/jquery-[version].min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <p>Page content goes here.</p>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

官網(wǎng)DEMO地址：http://demos.jquerymobile.com/1.4.5/

  • 頁(yè)面
<body>
<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <p>Page content goes here.</p>
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
</body>

例子解釋?zhuān)?br> data-role="page" 是顯示在瀏覽器中的頁(yè)面
data-role="header" 創(chuàng)建頁(yè)面上方的工具欄（常用于標(biāo)題和搜索按鈕）
data-role="content" 定義頁(yè)面的內(nèi)容，比如文本、圖像、表單和按鈕，等等
data-role="footer" 創(chuàng)建頁(yè)面底部的工具欄
備注：在這些容器中，您可以添加任意 HTML 元素 - 段落、圖像、標(biāo)題、列表等等。
提示：HTML5 data-* 屬性用于通過(guò) jQuery Mobile 為移動(dòng)設(shè)備創(chuàng)建“對(duì)觸控友好的”交互外觀(guān)。

  • 單頁(yè)面多應(yīng)用
  • 1.在 jQuery Mobile，您可以在單一 HTML 文件中創(chuàng)建多個(gè)頁(yè)面。
  • 2.請(qǐng)通過(guò)唯一的 id 來(lái)分隔每張頁(yè)面，并使用 href 屬性來(lái)連接彼此
<body>
<!-- Start of first page -->
<div data-role="page" id="pageone">
    <div data-role="header">
        <h1>pageone</h1>
    </div><!-- /header -->
    <div role="main" class="ui-content">
        <p>I'm first in the source order so I'm shown as the page.</p>
        <p>View internal page called <a href="#pagetwo">to pagetwo</a></p>
    </div><!-- /content -->
    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
        <div data-role="navbar">
            <ul>
              <li><a href="#pageone">頁(yè)面一</a></li>
              <li><a href="#pagetwo">頁(yè)面二</a></li>
            </ul>
          </div>        
    </div><!-- /footer -->
</div><!-- /page -->

<!-- Start of first page -->
<div data-role="page" id="pagetwo">

    <div data-role="header">
        <h1>pagetwo</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <p>I'm first in the source order so I'm shown as the page.</p>
        <p>View internal page called <a href="#pageone">to pageone</a></p>
    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
        <div data-role="navbar">
            <ul>
              <li><a href="#pageone">頁(yè)面一</a></li>
              <li><a href="#pagetwo">頁(yè)面二</a></li>
            </ul>
          </div>        
    </div><!-- /footer -->
</div><!-- /page -->
</body>
  • 在 jQuery Mobile 中創(chuàng)建按鈕
    jQuery Mobile 中的按鈕可通過(guò)三種方法創(chuàng)建：
    • 使用 <button> 元素
    • 使用 <input> 元素
    • 使用 data-role="button" 的 <a>元素
<button>按鈕</button>
<input type="button" value="按鈕">
<a href="#" data-role="button">按鈕</a>
  • 在 jQuery Mobile 過(guò)渡效果
    jQuery Mobile 擁有一系列關(guān)于如何從一頁(yè)過(guò)渡到下一頁(yè)的效果。
    注釋?zhuān)喝缧鑼?shí)現(xiàn)過(guò)渡效果，瀏覽器必須支持 CSS3 3D 轉(zhuǎn)換：
瀏覽器支持
Internet Explorer 10 支持 3D 轉(zhuǎn)換（更早的版本不支持）
Opera 仍然不支持 3D 轉(zhuǎn)換

過(guò)渡效果可應(yīng)用于任意鏈接或通過(guò)使用 data-transition 屬性進(jìn)行的表單提交：

<a href="#anylink" data-transition="slide">滑動(dòng)到頁(yè)面二</a>

查看官方：http://www.w3school.com.cn/jquerymobile/jquerymobile_transitions.asp

  • jQuery Mobile 事件
    您能夠在 jQuery Mobile 中使用任何標(biāo)準(zhǔn)的 jQuery 事件。
    此外，jQuery Mobile 還提供若干種為移動(dòng)瀏覽定制的事件：
  • 觸摸事件 - 當(dāng)用戶(hù)觸摸屏幕時(shí)觸發(fā)（敲擊和滑動(dòng)）
  • 滾動(dòng)事件 - 當(dāng)上下滾動(dòng)時(shí)觸發(fā)
  • 方向事件 - 當(dāng)設(shè)備垂直或水平旋轉(zhuǎn)時(shí)觸發(fā)
  • 頁(yè)面事件 - 當(dāng)頁(yè)面被顯示、隱藏、創(chuàng)建、加載以及/或卸載時(shí)觸發(fā)

如需關(guān)于所有 jQuery Mobile 事件的完整信息，請(qǐng)?jiān)L問(wèn)我們的 jQuery Mobile 事件參考手冊(cè)。

以上使用方法僅僅是一部分，更多的使用方法請(qǐng)查閱官方。
官網(wǎng) ：http://jquerymobile.com/
DEMO：http://demos.jquerymobile.com/1.4.5/
在線(xiàn)教程：http://www.w3school.com.cn/jquerymobile/index.asp

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀(guān)點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容