程序猿都非常赖。你懂的！



我们常常上新浪，腾讯。雅虎等各大站点上面看新闻。他们也都各自推出了自家的手机新闻阅读器。今天我自己使用jQuery Mobile 来实现这一功能。图片大小上传限制了大小250*400先看看iphone上的效果：



再看看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手机的更多相关文章

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

    程序猿是很不赖,你知道. 我们经常新浪,腾讯.雅虎等各大网站看到上述新闻.他们还推出了自己的移动新闻阅读器.今天,我自己用的jQuery Mobile 为了实现这一功能,.图像大小上传限制的大小250 ...

  2. 18个jQuery Mobile开发贴士和教程

    jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...

  3. 经典收藏 50个jQuery Mobile开发技巧集萃

    http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 1.Backbone移动实例 这是在Safari中运行的一款Ba ...

  4. (转)经典收藏 50个jQuery Mobile开发技巧集萃

    (原)http://www.cnblogs.com/chu888chu888/archive/2011/11/10/2244181.html 经典收藏 50个jQuery Mobile开发技巧集萃   ...

  5. Jquery Mobile转场特效之slide | 小小iPhone开发

    Jquery Mobile转场特效之slide | 小小iPhone开发 2012 Jquery Mobile转场特效之slide 作者:小小   发布:2012-12-12 14:03   分类:j ...

  6. （android高仿系列）今日头条 --新闻阅读器 （三） 完结 、总结 篇

    从写第一篇今日头条高仿系列开始,到现在已经过去了1个多月了,其实大体都做好了,就是迟迟没有放出来,因为我觉得,做这个东西也是有个过程的,我想把这个模仿中一步一步学习的过程,按照自己的思路写下来,在根据 ...

  7. （android高仿系列）今日头条 --新闻阅读器 （二）

    高仿今日头条 --- 第一篇:(android高仿系列)今日头条 --新闻阅读器 (一)    上次,已经完毕了头部新闻分类栏目的拖动效果. 这篇文章是继续去完好APP 今日头条  这个新闻阅读器的其 ...

  8. Android 仿 新闻阅读器 菜单弹出效果（附源码DEMO）

    这一系列博文都是:(android高仿系列)今日头条 --新闻阅读器 (一) 开发中碰到问题之后实现的,觉得可能有的开发者用的到或则希望独立成一个小功能DEMO,所以就放出来这么一个DEMO. 原本觉 ...

  9. CozyRSS开发记录0-RSS阅读器开坑

    CozyRSS开发记录0-RSS阅读器开坑 1.RSS RSS,全名是Really Simple Syndication,简易信息聚合. 关于RSS相关的介绍,网上可以很容易的找到.RSS阅读器是我几 ...

随机推荐

  1. BJOI2019退役记

    update:不想更这个游记……感觉更了只能说明自己菜得只会打嘴炮……那就让这个污痕一直残缺吧 太菜了,就不发具体分数了…… 被北师大附中的高一选手们吊打致死,退役了 4.6 4.7 4.13 4.1 ...

  2. bzoj 3101 N皇后构造一种解 数学

    3101: N皇后 Time Limit: 10 Sec  Memory Limit: 128 MBSec  Special JudgeSubmit: 70  Solved: 32[Submit][S ...

  3. Java.io.File中的delete()方法和deleteOnExit()方法的区别

    1.delete()方法:             当调用delete()方法时,直接删除文件,不管该文件是否存在,一经调用立即执行: 2.deleteOnExit()方法:            当 ...

  4. CODEVS【3556】科技庄园

    题目描述 Description Life是codevs的用户,他是一个道德极高的用户,他积极贯彻党的十八大精神,积极走可持续发展道路,在他的不屑努力下STN终于决定让他在一片闲杂地里种桃,以亲身实践 ...

  5. js,add script async? loaded ok.

    function loadScript(url, callback){ var script = document.createElement_x("script") script ...

  6. Linux 6.x 下Oracle 11g R2 安装配置

    Oracle 11g R2 数据库安装硬件配置要求: 最小内存 1 GB of RAM 虚拟内存容量,这个oracle也有要求,不用担心此时的swap分区不够oracle的要求 .虚拟内存swap如何 ...

  7. Spring Boot学习——数据库操作及事务管理

    本文讲解使用Spring-Data-Jpa操作数据库. JPA定义了一系列对象持久化的标准. 一.在项目中使用Spring-Data-Jpa 1. 配置文件application.properties ...

  8. Day 29 process&thread_1

    进程和线程 1 进程(process): 1.定义: 最小的执行单元.进程就是一个程序在一个数据集上的一次动态执行过程. 进程一般由程序.数据集.进程控制块三部分组成: 我们编写的程序用来描述进程要完 ...

  9. Color.FromArgb(）方法详解

    关于颜色值的表示 常用的颜色值表示方式有两种,一种是10进制的RGB值表示,如(0,113,255),三个值分别表示(红,绿,蓝):一种是16进制的颜色码表示,如#ff3212.这两种形式在编程中都可 ...

  10. window golang1.12.4 安装配置&IDE vscode

    step 1:下载golang golang官网地址是 https://golang.org/dl/ 如果没有墙的话,可以用这个地址 https://golang.google.cn/dl/ 如图: ...