手把手教你用jQuery Mobile做相冊

【一、項目背景】

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>