手把手教你用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="data:images/p1.jpg" style="width:49%"></a><a href="#popup_2" data-rel="popup" data-position-to="window"><img src="data:images/p2.jpg" style="width:49%"></a><a href="#popup_3" data-rel="popup" data-position-to="window"><img src="data:images/p3.jpg" style="width:49%"></a><a href="#popup_4" data-rel="popup" data-position-to="window"><img src="data:images/p4.jpg" style="width:49%"></a><a href="#popup_5" data-rel="popup" data-position-to="window"><img src="data:images/p5.jpg" style="width:49%"></a><a href="#popup_6" data-rel="popup" data-position-to="window"><img src="data: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="data: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="data: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="data: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="data:images/p5.jpg" style="max-height:512px;" alt="pic5"></div>
提示：jQuery Mobile 中的按钮会自动获得样式，这增强了他们在移动设备上的交互性和可用性。我们推荐您使用 data-role="button" 的 元素来创建页面之间的链接，而'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/
想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/
手把手教你用jQuery Mobile做相册相关推荐
- 手把手教你用jQuery实现手动自动轮播
轮播原理简述 假设有三张图,一字排开,用一个div包起来. 再来一个 div ,宽高和每幅图宽高一样,加overflow :hidden,超过此 div 宽高的图,都看不见.例如下图只能看见 2 ,而 ...
- 1号店案例html源码_手把手教一起写jQuery版mini源码，分析jQuery的优势
适合人群 本文适合0.5~3年的前端开发人员,以及想了解jQuery是什么的小伙伴们. 前言 谈谈个人对jQuery的看法. 如果你是一个五年以上的开发人员,相信你一定认识了解jQuery.这好比你十 ...
- 手把手教你用 jQuery 制作无缝轮播
Web 开发已经离不开轮播图,目前轮播的样式五花八门,如:淡入淡出型.上下滑动型.左右滑动型.左右滑动无缝型,对比用户体验的话,无缝轮播方式是最好的,因为在播放多张图片的情况下不会出现间断感,该课程用 ...
- 手把手教你写JQuery之添加一些方法 5
我们要不停的写日记,为啥, 你要是写一万篇日记,你说你不会大前端,人家都不相信,就是这么简单! 显示,隐藏 我们测试页面写法! 是不是有点jQuery的感觉哈,丫的不就一摸一样嘛,至少外表一样哈! 苹 ...
- 【新手向】jQuery Mobile中动态加载或执行脚本的分析
jQuery Mobile是我新的项目中要用到的移动端框架,之所以要使用它,仅仅是因为它的兼容性很好,页面之间的轮转及其优雅.但是jQuery Mobile的UI我并不喜欢,因此又引入bootstra ...
- html5 jquery mobile,html5 jquery mobile
html5 jquery mobile [2021-02-11 11:50:41] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(& ...
- 使用jQuery Mobile快速开发手机站点
来自:http://brooky.cc/2011/04/18/jquery-mobile-for-fast-mobile-website-development/ 當你看著 Apple 的 iOS d ...
- 手把手教你玩转CSS3 3D技术
手把手教你玩转 CSS3 3D 技术 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2 ...
- 手把手教你爬取任意日期全部股票分时数据~
点击上方"Python爬虫与数据挖掘",进行关注 回复"书籍"即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 独怜幽草涧边生,上有黄鹂深树鸣. ...
最新文章
- python数据结构与算法：二叉树及三种遍历方式（先序遍历/中序遍历/后序遍历）
- 【译】使用Kotlin和RxJava测试MVP架构的完整示例 - 第1部分
- tomcat启动卡死在: Initializing Spring root WebApplicationContext的解决办法
- B - Parentheses Balance （UVA - 673）
- golang执行linux命令
- html 渐变透明写法,CSS3透明度+渐变
- oracle按某个字段分组然后从每组取出最大的一条纪录
- 自定义异常时exception is never thrown in the corresponding try block和unhandled exception
- Tomcat原理详解和各种集群的实现(转自：http://harisxiong.blog.51cto.com/7513022/1304746)
- mybatis 使用resultMap实现关联数据的查询（association 和collection ）
- the python interpreter is in_the python interpreter is in - 百度学术
- MySQL 5.7--多源复制(非GTID模式)
- Mybatis之使用注解开发CRUD
- 申请美国J1签证加急最快多久办好？
- 网络工程毕业设计之--校园网络规划与设计
- POJ 1945 Power Hungry Cows(打表技巧)
- Android/Linux招聘要求
- 01—C语言基本语句
- 煤化工工控网络安全解决方案 第一部分
- 在excel/wps中如何实现批量翻译