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提供 ...

随机推荐

Windown安装Mysql安装图解
一.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.0.27-win32.zip,双击解压缩,运行“setup.exe”. 2.选择安装类型,有“Typical(默认)”.“Comp ...
NLP 苏图南打破自我设限突破自我—在线播放—优酷网，视频高清在线观看
http://v.youku.com/v_show/id_XNTAyNDg3MTky.html?x
收藏的一段关于java大数运算的代码
收藏的一段关于java大数运算的代码: package study_02.number; import java.math.BigDecimal; import java.math.BigIntege ...
POJ3050 Hopscotch 【DFS】
Hopscotch Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 2113 Accepted: 1514 Descrip ...
Knockout应用开发指南第九章：高级应用举例
原文:Knockout应用开发指南第九章:高级应用举例 1 Contacts editor 这个例子和微软为演示jQuery Data Linking Proposal例子提供的例子一样的提供的 ...
数据库关于group by 两个或以上条件的分析
首先group by 的简单说明: group by 一般和聚合函数一起使用才有意义,比如 count sum avg等,使用group by的两个要素: (1) 出现在select后面的 ...
Android Bitmap 载入与像素操作
Android Bitmap 载入与像素操作一:载入与像素读写在Android SDK中,图像的像素读写能够通过getPixel与setPixel两个Bitmap的API实现. Bitmap AP ...
vb.net版机房收费——助你学会七层架构（一）
我自己写机房的时候,看非常多高人的博客,各种的借鉴,当初务必的纠结,如今整个机房敲完了,写这篇博客给大家一个总体上的.简单理解的七层,期望大家看完这篇文章之后,不会这个纠结了. 首先大家得看了我的上一 ...
java反射中Method类invoke方法的使用方法
package com.zsw.test; import java.lang.reflect.Method;import java.lang.reflect.InvocationTargetExcep ...
Nagios经check_http监视web申请书server多个tomcat维修
怎么样nagios显示器tomcat,它是一个相对简单的和复杂的事情.简单是因为,只有监控的假设web应用服务器tomcat无论是服务正常进行,很简单.假设你要监视tomcat其他例子,例如连接数jv ...

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

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

随机推荐

热门专题