手把手教你用jQuery Mobile做相册

2021-09-22 23:20:42

【一、项目背景】

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>