手把手教你用jQuery Mobile做相册

u1jodi1q

【1、项目背景】

jQuery是当前很流行的一个JavaScript框架，运用类似于CSS的选取器，能够方便的操作HTML元素，持有很好的可扩展性，持有不少jQuery插件，亦可对个方面进行插件研发。jQuery能够快速找到文档中的html元素，并对其进行操作，如隐匿、表示、改变样式......

【2、项目准备】

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>

【3、项目实施】

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> 元素用于表单提交。

【4、效果展示】

1. 下载一个叫Opera Mobile的软件。

Opera Mobile emulator是一款APP模拟器，专门用来测试APP项目。不外这个需要进行安装，这个模拟器能够按照手机屏幕体积进行模拟测试。

2. 百度搜索opera mobile，选取第1个网址。

3. 安装教程能够直接百度，这儿再也不赘述。

4. 安装完成后把咱们的页面拖进去就能够了。（下面是界面效果图）

5. 效果图如下图所示。

6. 点击其中一张照片，会放大表示，效果图如下图所示。

【5、总结】

1. 本文案就jQuery Mobile在应用中显现的难点和重点，做出了相针对的处理方法。

2. 使更加多的人去认识jQuery Mobile。

3. 欢迎大众积极尝试，有时候看到别人实现起来很简单，然则到自己动手实现的时候，总会有各样各样的问题，切勿眼能手低，勤动手，才能够理解的更加深刻。

4. 倘若需要本文源码，请在公众号后台回复“设计相册”四个字获取。

看完本文有收获？请转发分享给更加多的人

IT共享之家

想学习更加多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/