一、項目背景】

jQuery是當前很流行的一個JavaScript框架，使用類似于CSS的選擇器，可以方便的操作HTML元素，擁有很好的可擴展性，擁有不少jQuery插件，也可對個方面進行插件開發。jQuery可以快速找到文檔中的html元素，并對其進行操作，如隱藏、顯示、改變樣式......

【二、項目準備】

1. 下載 jQuery Mobile

如果你想將 jQuery Mobile 放于你的主機中,你可以從下面這個網站下載該文件。

jQuerymobile.com

2. 在你的網頁中添加 jQuery Mobile

你可以通過以下幾種方式將jQuery Mobile添加到你的網頁中：

• 從 CDN 中加載 jQuery Mobile (推薦)。
• 從jQuerymobile.com 下載 jQuery Mobile庫。

3. 從 CDN 中加載 jQuery Mobile

<!-- meta使用viewport以確保頁面可自由縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 引入 jQuery Mobile 樣式 -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- 引入 jQuery 庫 -->
<script src="http://code.jquery.com/jquery-1.12.2.min.js"></script>

<!-- 引入 jQuery Mobile 庫 -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

【三、項目實施】

1. body里面寫入以下代碼，（img標簽的src屬性導入自己喜歡的圖片，設置圖片的樣式）。

<div data-role="page">
    <a href="#popup_1" data-rel="popup" data-position-to="window">
        <img src="images/p1.jpg" style="width:49%">
    </a>
    <a href="#popup_2" data-rel="popup" data-position-to="window">
        <img src="images/p2.jpg" style="width:49%">
    </a>
    <a href="#popup_3" data-rel="popup" data-position-to="window">
        <img src="images/p3.jpg" style="width:49%">
    </a>
    <a href="#popup_4" data-rel="popup" data-position-to="window">
        <img src="images/p4.jpg" style="width:49%">
    </a>
    <a href="#popup_5" data-rel="popup" data-position-to="window">
        <img src="images/p5.jpg" style="width:49%">
    </a>
    <a href="#popup_6" data-rel="popup" data-position-to="window">
        <img src="images/p6.jpg" style="width:49%">
    </a>

2. 給圖片添圖標。

<div data-role="popup" id="popup_2">
       <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
       <img src="images/p2.jpg" style="max-height:512px;" alt="pic2">
    </div>
    <div data-role="popup" id="popup_3">
        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <img src="images/p3.jpg" style="max-height:512px;" alt="pic3">
    </div>
<div data-role="popup" id="popup_4">
        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <img src="images/p4.jpg" style="max-height:512px;" alt="pic4">
    </div>
<div data-role="popup" id="popup_5">
        <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <img src="images/p5.jpg" style="max-height:512px;" alt="pic5">
    </div>

提示：jQuery Mobile 中的按鈕會自動獲得樣式，這增強了他們在移動設備上的交互性和可用性。我們推薦您使用 data-role="button" 的 <a> 元素來創建頁面之間的鏈接，而 <input> 或 <button> 元素用于表單提交。

【四、效果展示】

1. 下載一個叫Opera Mobile的軟件。

Opera Mobile emulator是一款APP模擬器，專門用來測試APP項目。不過這個需要進行安裝，這個模擬器可以根據手機屏幕大小進行模擬測試。

2. 百度搜索opera mobile，選擇第一個網址。

3. 安裝教程可以直接百度，這里不再贅述。

4. 安裝完成后把我們的頁面拖進去就可以了。（下面是界面效果圖）

5. 效果圖如下圖所示。

6. 點擊其中一張圖片，會放大顯示，效果圖如下圖所示。

【五、總結】

1. 本文章就jQuery Mobile在應用中出現的難點和重點，做出了相對于的解決方案。

2. 使更多的人去了解jQuery Mobile。

3. 歡迎大家積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

4. 如果需要本文源碼，請在公眾號后臺回復“設計相冊”四個字獲取。

看完本文有收獲？請轉發分享給更多的人

IT共享之家

想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/