【原】手把手教你用jQuery Mobile做相冊(cè)

Python進(jìn)階者 2023-02-10 發(fā)布于廣東

展開全文

【一,、項(xiàng)目背景】

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

【二,、項(xiàng)目準(zhǔn)備】

1. 下載 jQuery Mobile

如果你想將 jQuery Mobile 放于你的主機(jī)中,你可以從下面這個(gè)網(wǎng)站下載該文件,。

jQuerymobile.com

2. 在你的網(wǎng)頁中添加 jQuery Mobile

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

從 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./mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- 引入 jQuery 庫 --><script src="http://code./jquery-1.12.2.min.js"></script>
<!-- 引入 jQuery Mobile 庫 --><script src="http://code./mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

【三,、項(xiàng)目實(shí)施】

1. body里面寫入以下代碼,，（img標(biāo)簽的src屬性導(dǎo)入自己喜歡的圖片,，設(shè)置圖片的樣式）。

<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>

屬性	含義
data-role="page"	是在瀏覽器中顯示的頁面,。
data-rel="popup"	設(shè)置當(dāng)前元素具有彈出窗的功能
data-position-to="window"	設(shè)置彈出窗出現(xiàn)在窗口中間位置

2. 給圖片添圖標(biāo),。

<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>

屬性	含義
data-iconpos="notext"	只顯示圖標(biāo)
data-icon="delete"	刪除按鈕
data-role="button"	表示這是一個(gè)按鈕

提示：jQuery Mobile 中的按鈕會(huì)自動(dòng)獲得樣式,，這增強(qiáng)了他們?cè)谝苿?dòng)設(shè)備上的交互性和可用性,。我們推薦您使用 data-role="button" 的 <a> 元素來創(chuàng)建頁面之間的鏈接,，而 <input> 或 <button> 元素用于表單提交。

【四,、效果展示】

1. 下載一個(gè)叫Opera Mobile的軟件,。

Opera Mobile emulator是一款A(yù)PP模擬器,，專門用來測試APP項(xiàng)目。不過這個(gè)需要進(jìn)行安裝,，這個(gè)模擬器可以根據(jù)手機(jī)屏幕大小進(jìn)行模擬測試,。

2. 百度搜索opera mobile，選擇第一個(gè)網(wǎng)址,。