从任何 RSS Feed 创建一个流畅的 iPhone/移动界面

我们将创建一个专门针对 iPhone 格式化的网页（但可以推测也适用于其他移动设备）。此网页将使用您提供的任何 RSS Feed 动态填充内容。该界面将针对移动设备易用性而构建，具有较大的“可触摸”区域以及将您带到文章之间的漂亮（jQuery）动画。

查看演示

让我们开始吧！

1. 创建 iPhone 环境

某些移动界面只是让网站的“包装”完全宽度，理论上应该填充所用浏览器的宽度（例如这个）。由于各种原因，我们需要为我们的包装设置一个固定的像素宽度。iPhone 在正常的纵向模式下宽度为 320 像素，因此让我们适应这一点。我们需要在我们的页面中使用“视口”元标签，以便我们的 320 像素包装在 iPhone 中很好地显示。继续在服务器上的新项目目录中创建一个 index.php 文件。标记将从以下内容开始

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=320" />

	<title>iPhone Interface by CSS-Tricks</title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

	<div id="page-wrap">
	</div>

</body>

</html>

除了我们典型的重置和工具箱内容之外，目前我们只需要在 CSS 中声明我们的页面包装。让我们将其宽度设置为 310 像素，每边有 5 像素的填充，以防止文本触碰边缘。

div#page-wrap { width: 310px; padding: 0 5px; margin: 0px auto; }

2. 导入 RSS Feed

让我们直接进入正题，好吗？有几个免费的选项可以导入 RSS Feed 并显示 HTML。最流行、最酷的是 SimplePie。FeedForAll 还制作了一个免费的 RSS Feed 解析器，他们称之为 RSS2HTML。我实际上最初使用 RSS2HTML 创建了这个，它运行良好，但是为了变得更流行和更酷，我将其切换到 SimplePie。SimplePie 有一些非常强大的额外功能，您可以使用它们（例如轻松地导入多个 Feed），因此我认为这对大家来说会是最好的。

下载 SimplePie 并将 simplepic.inc 文件放在与您的 index.php 文件相同的服务器目录中。

将此 PHP 代码放在您的 index.php 文件的顶部

<?php
	require_once('simplepie.inc');
	
	// CHANGE THE FEED ADDRESS BELOW - THAT'S IT!
	$feed = new SimplePie('http://feeds.feedburner.com/CssTricks');
	
	$feed->handle_content_type();
	
	$total_articles = 3;
	
	for ($x = 0; $x < $feed->get_item_quantity($total_articles); $x++)
	{
		$first_items[] = $feed->get_item($x);
	}
?>

请注意有关文章总数的部分。我们通常不需要经历所有这些额外的步骤。使用 SimplePie，通常获取 Feed 就像这样简单

$feed = new SimplePie(css-tricks.com);

这一小部分将获取 Feed（请注意它甚至不是 RSS Feed，它会自动检测）。但是，这样做会获取 Feed 中的每个项目。在本教程中，我们专门希望获取 3 篇文章，这就是 total_articles 部分的意义所在。

现在我们有了数据，在将数据输出为 HTML 之前，让我们暂停一下，思考一下我们希望如何显示它。

3. 创建首页：仅标题

我们对新 Feed 数据做的最后一件事就是将其全部输出到我们的新“首页”。这对于我们来说不是非常 iPhone 风格，对吧？由于我们的屏幕空间非常宝贵，让我们在首页上只列出标题和日期。这个想法是为三篇最新的文章创建本质上是大型按钮。点击这些按钮将带您进入相应的文章进行阅读。以下是所需界面

要实现这一点，这是每篇文章所需的 HTML 输出

<div class="headline">
   <h2>  ... article title here ...  </h2>
   <p> .... date here ... </p>
</div>
<img src="bottom.png" alt="" />

底部包含的图片是我们实现所需圆角效果底部的效果。顶部圆角将是我们“标题”div 中背景图片的一部分。背景图片需要很高，以便它可以增长以适应大型标题，但底部图片可以很短。我们还将“按钮”作为此背景图片的一部分。以下是它们

这些是 alpha 透明的 PNG 图片。无需担心，iPhone 上的 Safari 浏览器支持它们。我们将在一个白色背景上，因此效果会稍微丢失，但是如果您选择放置纹理或背景图形，这些图片会很好地叠加在上面。

现在，为了按照我们计划的 HTML 模板输出这三个标题，我们需要进行一个小的 PHP foreach 循环，如下所示

<?php
	foreach ($first_items as $item)
	{
		echo '<div class="headline"><h2>' . $item->get_title() . '</h2><p style="margin: 0;">' . $item->get_date('j M Y') . '</p></div><img src="images/bottom.png" alt="" style="margin: 0 0 10px 5px;" />';
	}
?>

以下是相关的 CSS

.headline           { background: url(images/headline-bg.png) top center no-repeat;
			padding: 3px 68px 0 13px; min-height: 60px; }

4. 创建文章页面：jQuery 滑块风格

我们可以简单地为我们的网站创建一个子页面，并在您点击时加载并显示文章，但这不会有任何乐趣！我们试图在这里创建一个流畅的界面。一个快速且可以滑动的东西！

这就是 jQuery 魔法发挥作用的地方。我们希望发生的事情是，当您点击我们的一个大型标题按钮时，页面会滑动以显示整篇文章。正如我所说的，老式的一触即滑

为了实现这一点，我们将使用所有 javascript 滑块背后的指导原则：遮罩。这个想法是

我们在这里有一个大的宽内容区域，宽度是首页的四倍。在里面是首页，以及包含我们三篇文章的另外三个块。这些被浮动到左侧，以使它们保持在整齐的顶部对齐的行列中。我们通过将内容区域放在另一个 div 内并隐藏溢出部分（在 CSS 中为 overflow: hidden;）来“遮罩”内容区域。

为了在我们标记中构建这一点，我们需要以与构建首页几乎相同的方式进行另一个循环。以下是到目前为止的进度

<body>

	<div id="page-wrap">
	
		<div id="slider">
				
			<div id="mask">
				
				<div id="mainMenu">
					<?php
						foreach ($first_items as $item)
						{
							echo '<div class="headline"><h2>' . $item->get_title() . '</h2><p style="margin: 0;">' . $item->get_date('j M Y') . '</p></div><img src="images/bottom.png" alt="" style="margin: 0 0 10px 5px;" />';
						}
					?>
				</div>
				
				<?php
					foreach ($first_items as $item)
					{
						echo '<div class="article-text"><h1><a href="' . $item->get_permalink() .'">' . $item->get_title() . '</a></h1><p>' . $item->get_date('j M Y') . '</p><p>' . $item->get_content() . '</p></div>';
					}
				?>
				
			</div>
			
		</div>
		
	</div>
	
</body>

此代码将首先运行一个循环来构建首页，然后构建三个文章页面（每个页面都是一个类为“article-text”的 div）。请注意，在我们这次的循环中，我们不仅获取了标题和日期，还将标题链接到原始文章的永久链接，并且还获取了完整内容。

所有这些内容将在页面加载时加载，但当然您首先只能看到首页，因为其他文章隐藏在遮罩后面。

以下是使之发生的相关的 CSS

#slider 		{ width: 320px; overflow: hidden; position: relative; }
#mask			{ width: 1280px; position: relative; left: 0px;}
#mainMenu		{ width: 320px; float: left; }
.article-text		{ width: 320px; float: left; overflow: hidden; }

那么，如果它们隐藏在遮罩后面，我们如何才能看到这些文章呢？这就是 jQuery 魔法开始的地方！

如果我们将内容区域向左“滑动”，我们可以隐藏首页并显示一篇文章。我们需要向左滑动的距离取决于我们点击哪个标题。如果我们点击第一个标题，我们需要向左滑动 320 像素（一个可视区域的宽度）。如果我们点击第二个标题，我们需要滑动两个可视区域或 640 像素。同样，第三个为 960 像素。这些需要是负值，因为 Web 上的“左侧”通常意味着负值。请注意应用于滑块区域的相对定位，这是左侧值具有任何意义并实际上进行任何滑动的必要条件。

以下是您可以在 index.php 文件的头部部分添加的 jQuery 代码，以使其发生。

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$('.headline:eq(0)').click(function() {
		$("#mask").animate({
			left: "-320px"
		});
	});
	
	$('.headline:eq(1)').click(function() {
		$("#mask").animate({
			left: "-640px"
		});
	});
	
	$('.headline:eq(2)').click(function() {
		$("#mask").animate({
			left: "-960px"
		});
	});

});
</script>

6. 添加一些风格

我们快到了，朋友们。我们已经创建了一个功能齐全的界面，但它可以工作得更好……首先，当我们读完一篇文章后，我们如何返回首页？让我们先解决这个问题。较长的文章可能需要在手机上进行大量的手指滚动，因此我们应该在文章底部明确地有一个“返回”按钮。但是，假设您不小心点击了一篇文章，并且需要立即返回首页，我们也应该在顶部有一个“返回”按钮。

对于顶部的“返回”按钮，让我们实际在页面的顶部包含 RSS Feed 的标题，并使其充当“返回”按钮。

<h1 id="home"><?php echo $feed->get_title(); ?></h1>

我们将在以后使用该 ID 值来使用 jQuery 作为目标。在文章的底部，让我们通过包含一个大型箭头图片来使其更加显眼。

然后，我们将通过将其作为循环的一部分将其包含在每篇文章中

<?php
	foreach ($first_items as $item)
	{
		echo '<div class="article-text"><h1></h1><p>' . $item->get_date('j M Y') . '</p><p>' . $item->get_content() . '</p><img src="images/backbutton.png" alt="Back" /></div>';
	}
?>

现在我们需要一些 jQuery 来在点击这两者中的任何一个时“滑动”回首页。但是等等……如果您在页面底部时发生这种情况，您将滚动回一个空白的白色页面。您始终可以向上滚动，但这感觉有点奇怪。我们实际上可以使用 jQuery 为我们向上滚动。让我们将其包含在这些函数中

$('.back').click(function() {
	$("#mask").animate({
		left: "0px"
	});
	$('html, body').animate({scrollTop:0}, 'slow'); 
});

$('#home').click(function() {
	$("#mask").animate({
		left: "0px"
	});
	$('html, body').animate({scrollTop:0}, 'slow'); 
});

问题：iPhone 似乎不尊重 scrollTop，这真是太糟糕了。如果有人知道如何解决这个问题，请告诉我！

其他小事

每个 article div 也都将 overflow 设置为 hidden。这样做是为了防止可能比该区域更宽的图片溢出到其他文章。这是一个对我来说似乎很好的解决方案。如果您认为这更适合您，您可能需要缩小图片大小。
记得根据自己的喜好对内容进行样式化！如果你的订阅源使用 <h3> 标签，你将获得 <h3> 标签，所以记得为这些标签添加 CSS！我的订阅源也包含代码片段，我喜欢将其放置在 <pre> 标签中，这会导致超出 320px 的范围。可以通过设置静态宽度并使用 overflow: auto 来解决，或者将 pre 标签强制回 white-space: normal; - 这样它就会换行。
文章标题、链接、日期和内容并不是你可以从 RSS 订阅源中提取的唯一信息。SimplePie 提供对 **大量** 其他数据的访问。查看他们的 API 信息以获取可以操作的其他变量列表。甚至还有像社交书签按钮和不同订阅内容方式这样的酷炫功能。我也喜欢用于提取订阅源图标的功能。也许有人可以为各种不同的 CSS 博客创建一个多订阅源界面，并将它们整合到一个界面中，通过图标来识别来源！

好的，如果我只想下载这个东西并在我的网站上使用它呢？

首先

下载文件

将文件上传到你的服务器。打开 index.php 文件，并将第 5 行的链接更改为你自己的 RSS 链接。就是这样！

当然，欢迎你自定义它并将其用于任何你想要的目的。我总是感谢链接回源，并乐于看到你的作品。

查看演示

Phil A

# 2008 年 6 月 2 日

嗯，这确实是一个很棒的教程。我之前一直在考虑创建一个 WordPress 主题，允许这种点触和滑动操作，你觉得呢，你认为这种主题会有需求吗？那开发一个能够检测 iPhone 并自动应用这个特定主题的插件呢？

我有很多想法，但是没有足够的动力去实现它们。我认为，如果我使用你的 “框架” 来做主题，我可以做到，因为我知道如何将 WordPress 内容整合到主题中，所以我不使用 SimplePie 代码，而是使用 WordPress 的 WP 命令。
很棒，真的！

网页设计

感谢你发布这篇很棒的文章；D

链接

好的，看来已经有类似的东西了。然而，一个 “独特” 的 iPhone WordPress 主题还没有出现，我已经做了一些研究，但没有找到…

Kevin Seer

不错… 但是直接使用免费的订阅源转换服务会更容易 - 我使用 RSS Builder for the iPhone - http://www.thesmespace.com/smeutils/feed - 可以将任何 RSS 或 Atom 订阅源转换为 iPhone 风格的界面

Chris Coyier

@Phil: 好主意！我之前见过那个插件，也短暂地使用过。它确实很棒。不过，用这种方法做的好处在于它不依赖于 WordPress，因此你可以使用任何订阅源（甚至多个订阅源）

@Kevin: 这也相当酷，但是它只返回部分订阅源，而且不在你的网站上托管，我认为大多数网站所有者都会想要这两样东西。

Chris，如果你想让我研究一下，也许把它变成一个 WordPress 主题，然后可以用 CSS 自定义，并且提供所有 WordPress 功能，例如评论，请告诉我。你可以通过我的博客或 AIM 联系我… 我不会用 jQuery，所以我需要以你的代码为基础。
我相信一些用户会喜欢这个主题，因为他们希望他们的读者拥有完整的功能。

Tim Wright

我喜欢这个，它非常流畅且实用。我一直想要找到一个适合我网站的移动界面。这可能就是它了。
感谢 Chris

rmaspero

这有点复杂，但我认为我明白了。

Darren

# 2008 年 6 月 3 日

Chris，这里的东西真的很棒。一个看似简单的界面，却利用了一些优雅的工具协同工作 - 你还能要求什么呢？

Uri L.

# 2008 年 6 月 4 日

10x - 非常有启发性的信息。

Mike

# 2008 年 6 月 8 日

很棒的教程。我没有捐款，但我确实访问了一些我觉得有趣的赞助商。

Rob

# 2008 年 6 月 10 日

真的很酷，我可能会很快在我的网站上尝试着实现它。我可能尝试改变的一件事是隐藏帖子（display: none）。当用户点击某个帖子时，显示该帖子并启动滑动。这样动画就不会在背景中显示其他帖子滑过去了。

干得漂亮！

嘿 Rob，

这是一个非常棒的想法，在其他文章上使用 display: none。我不介意滑动，但我确实介意主页在你刚进入页面时为什么会出现巨大的垂直滚动，好像没有任何理由。我认为这可以解决这个问题！

webpixelkonsum

# 2008 年 6 月 13 日

太棒了… 你的教程将改善下一代像 iPhone 用户这样的用户的源代码；)

Ralph

Rich Palmer

# 2008 年 12 月 11 日

创建移动页面的有趣方法。我尝试了这个，并在我的 Blackjack II 上查看了它。不幸的是，这不是触摸屏 - 所以我真的不知道它在那些移动设备上做了什么。

在我的 Blackjack 上，主背景图片（带有选择按钮）不可见。当然，我的浏览器是缩小版的 IE，因此滑动部分的附加内容被包裹在主要标题下方。

我可能会稍微调整一下，看看如何处理非触摸屏的缺失背景和选择按钮。但这是一个不错的尝试。我不认为我会保留它，因为它不是所有移动设备的 “最佳实践”。但值得一试。

非常感谢

Harley Alexander

# 2008 年 12 月 26 日

嘿 Chris，

很棒的教程！只是几件事，

为什么不使用 each() 而不是 headline:eq(1) 等等呢？

其次，我不知道其他人是否也遇到了这种情况（这可能只是我的运气… 我的 iPhone 运气一直很糟糕），但是我的 iPhone 3G 显示滑动非常卡顿… 像是突然跳动，如果我一次操作太多，它就直接跳过了动画！

Chris Coyier

评论永久链接# 2008 年 12 月 26 日

自从最初发布以来，我已经对这段代码进行了大幅改进。我可能会最终发布一些关于它的内容… 如果你想要代码，请随意查看这里的新 iPhone 界面，或者给我发邮件获取完整包。
Harley Alexander

评论永久链接# 2008 年 12 月 26 日

即使是你的当前版本！但我一定会发邮件给你：）。

Nelson

# 2009 年 2 月 2 日

感谢 Chris，这是我近年来见过的最好的 iPhone UIE 文章。
干杯！

Abhisek

# 2009 年 2 月 3 日

感谢 Chris 发布这篇出色的教程。SimplePie 看起来很有前途。