jQuery Mobile发展新闻阅读器,适应iphone和android打电话

程序猿是很不赖，你知道。

我们经常新浪，腾讯。雅虎等各大网站看到上述新闻。他们还推出了自己的移动新闻阅读器。今天，我自己用的jQuery Mobile 为了实现这一功能，。图像大小上传限制的大小250*400第一眼iphone作用于：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveG10MTEzOTA1NzEzNg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" height="400" width="250">

再看看android上的效果：

OK，很完美,是我想要的结果。直接上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">

<style type="text/css">

	.ui-icon-msg {background:url('../jquery.mobile-1.3.2/images/icons-msg.png') no-repeat 0 0;}

</style>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

</head>

<body>

<div data-role="page">

  <div data-role="header" data-position="fixed">

 	<a href="#" data-role="button" data-icon="home" data-iconpos="notext">首页</a>

    <h1>伪专家新闻</h1>

  	<a href="#" data-role="button" data-icon="msg" data-iconpos="notext">信息</a>

  </div>

  <div data-role="content">

       <ul data-role="listview">

		  <li>

		    <a href="#">

		    <img src="../images/chrome.png">

		    <h2>Google Chrome</h2>

		    <p>Google Chrome 免费的开源 web 浏览器。公布于 2008 年。</p>

		    </a>

		  </li>

		  <li>

		    <a href="#">

		    <img src="../images/firefox.png">

		    <h2>Mozilla Firefox</h2>

		    <p>Firefox 是来自 Mozilla 的 web 浏览器。公布于 2004 年。</p>

		    </a>

		  </li>

		   <li>

		    <a href="#">

		    <img src="../images/opera.png">

		    <h2>Opera</h2>

		    <p>是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。公布于1995年。</p>

		    </a>

		  </li>

		 <li>

		    <a href="#">

		    <img src="../images/aoyou.png">

		    <h2>傲游浏览器</h2>

		    <p>傲游浏览器是一款多功能、个性化多标签浏览器。公布于 2012年。

</p>

		    </a>

		  </li>

		    <li>

		    <a href="#">

		    <img src="../images/netscape.png">

		    <h2>Netscape</h2>

		    <p>网景浏览器（Netscape ）是一个是由 Netscape 通信公司开发的网页浏览器。公布于 1994 年。</p>

		    </a>

		  </li>

		   <li>

		    <a href="#">

		    <img src="../images/liebao.png">

		    <h2>猎豹安全浏览器</h2>

		    <p>猎豹安全浏览器。是由金山网络技术有限公司推出的一款浏览器。公布于2012 年。

</p>

		    </a>

		  </li>

		    <li>

		    <a href="#">

		    <img src="../images/taobao.png">

		    <h2>淘宝浏览器</h2>

		    <p>淘宝浏览器，支持快捷登录淘宝网及旗下站点，提供多重安全防护浏览器。

公布于 2012 年。</p>

		    </a>

		  </li>

		    <li>

		    <a href="#">

		    <img src="../images/baidu.png">

		    <h2>百度浏览器</h2>

		    <p>百度浏览器，以APP打造个性化应用平台,一款简洁轻快的浏览器。公布于 2011 年。

</p>

		    </a>

		  </li>

		</ul>

  </div>

  <div data-role="footer" data-position="fixed">

    <h1>伪专家新闻</h1>

  </div>

</div>

</body>

</html>

这里仅仅列出了部分代码，假设须要看完整代码，请点击下载：http://download.csdn.net/download/xmt1139057136/7436463

如有不懂，请加QQ团：135430763。一起学习！欢迎关注我的博客！

jQuery Mobile发展新闻阅读器,适应iphone和android打电话的更多相关文章

jQuery Mobile开发的新闻阅读器,适应iphone和android手机
程序猿都非常赖.你懂的! 我们常常上新浪,腾讯.雅虎等各大站点上面看新闻.他们也都各自推出了自家的手机新闻阅读器.今天我自己使用jQuery Mobile 来实现这一功能.图片大小上传限制了大小250 ...
（android高仿系列）今日头条 --新闻阅读器（三）完结、总结篇
从写第一篇今日头条高仿系列开始,到现在已经过去了1个多月了,其实大体都做好了,就是迟迟没有放出来,因为我觉得,做这个东西也是有个过程的,我想把这个模仿中一步一步学习的过程,按照自己的思路写下来,在根据 ...
（android高仿系列）今日头条 --新闻阅读器（二）
高仿今日头条 --- 第一篇:(android高仿系列)今日头条 --新闻阅读器 (一) 上次,已经完毕了头部新闻分类栏目的拖动效果. 这篇文章是继续去完好APP 今日头条这个新闻阅读器的其 ...
Android 仿新闻阅读器菜单弹出效果（附源码DEMO）
这一系列博文都是:(android高仿系列)今日头条 --新闻阅读器 (一) 开发中碰到问题之后实现的,觉得可能有的开发者用的到或则希望独立成一个小功能DEMO,所以就放出来这么一个DEMO. 原本觉 ...
手机新闻网站,手持移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发
我们坐在地铁.经常拿出新浪手机查看新闻.腾讯新闻,或者看新闻,等刷微信功能.你有没有想过如何实现这些目标. 移动互联网.更活泼. 由于HTML5未来,jQuery Moblie未来. 今天我用jqm的 ...
手机新闻网站,掌上移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发
我们坐在地铁,经常来查看新浪手机新闻,腾讯新闻.或者刷微信看新闻更多功能.你有没有想过如何实现这些目标.移动互联网,更活泼. 因为HTML5到,jQuery Moblie到.今天我用jqm为了给你一个 ...
使用jQuery Mobile实现新闻浏览器（3）
在本教程的前两篇文章中,笔者分别向大家介绍了使用jQuery Mobile框架如何去设计手机新闻浏览器,其中实现了一个WEB版本的新闻浏览器,在本教程的最后一篇中,将讲解如何将已实现的web版本的新闻 ...
RSS新闻阅读器
1.RSS格式结构 http://rss.sina.com.cn/blog/tech/kj.xml <?xml version="1.0" encoding="ut ...
五个最佳RSS新闻阅读器
文章出自http://www.williamlong.info/archives/1591.html 在博客和在线新闻充斥的互联网上,大量信息已经使得用户阅读量过载,幸运的是,通过RSS Feed提供 ...

随机推荐

Ubuntu下将vim配置为Python IDE（转）
工欲善其事,必先利其器. 配置好了Django的环境,该把vim好好配置一下当做python的IDE来用. 在Windows下用惯了各种现成的工具,转到Linux下,一下没了头绪……好歹google出 ...
求1e11以内的素数
有两种做法,一种是打表,另一种是直接求. 打表将1e11每隔len(len=2000w)个数字统计一下该区间内素数的个数,比如cnt[1] 表示[1,len]以内有多少个素数,cnt[2]表示[le ...
crashRpt用法
从官网上下载crashRpt的源代码,按说明编译出对应的lib和dll 1 在编译crashRpt的时候,在环境变量中设置 crashrptDir=D:\work\AIW\WebMicaps\Web ...
KMP算法---字符串匹配
算法细节详见点击打开链接和点击打开链接 #include <stdio.h> #include <stdlib.h> #define N 7 #define M 15 void ...
ftp桥接到http服务
先说一下我的需求:我的linodeserver近期ftp和sftp连不上了,port被封了.仅仅有http能够訪问,我没有办法上传文件了.由于我寻常都用beyond compare上传文件,非常方便. ...
swift 学习资源大集合
今天看到一个swift学习网站,其中我们收集了大量的学习资源 Swift 介绍 Swift 介绍来自 Apple 官方 Swift 简单介绍 (@peng_gong) 一篇不错的中文简单介绍 [译] ...
WEB网站性能优化
最近做了一个WEB现场.幸运的是,一开始.但后来越来越慢,特别是在调试模式,,这肯定是我们的代码有问题.但是即使业务不是非常复杂的也非常慢,我们就想当然的觉得我们的代码没问题,可最后证明还是我们的代码 ...
Windows7在自由的虚拟机（微软官方虚拟机）
Windows7在自由的虚拟机(微软官方虚拟机) 前言: 不是说windows7自带的虚拟机最好用,但他的正式版.免费.只是希望你能windows7用户.它将能够自由使用: 还是Vmware. 微软为 ...
SQL注入的原理解说，挺好！
原文地址:http://www.cnblogs.com/rush/archive/2011/12/31/2309203.html 1.1.1 总结前几天,国内最大的程序猿社区CSDN网站的用户数据库 ...
LAMP一键安装包(Python版)
去年有出一个python整的LAMP自动安装,不过比较傻,直接调用的yum 去安装了XXX...不过这次一样有用shell..我也想如何不调用shell 来弄一个LAMP自动安装部署啥啥的..不过尼玛 ...

jQuery Mobile发展新闻阅读器,适应iphone和android打电话

jQuery Mobile发展新闻阅读器,适应iphone和android打电话的更多相关文章

随机推荐

热门专题