iPhone Springboard 在 XHTML、CSS 和 jQuery 中

这篇文章是由 Marco Kuiper 撰写的，他是一位热爱 XHTML、CSS 和 jQuery 的创意设计极客。 Marco 的个人博客可以在 Marcofolio.net 上找到。

上周，我写了一篇文章，介绍了如何使用 XHTML、CSS 和 jQuery 创建 iPhone 解锁屏幕。 正如文章中所述，我非常想将更多 iPhone 的简洁设计移植到网页上。 接下来我自然而然地想用 XHTML、CSS 和 jQuery 创建 **iPhone Springboard**。

查看演示   下载文件

功能

• XHTML 和 CSS 有效。
• 图标“滑动进入”（主图标）就像真正的 iPhone 一样。
• 图标“淡入”（栏图标）就像真正的 iPhone 一样。
• 图标在点击时“淡出”，就像真正的 iPhone 一样。
• 与 解锁屏幕 结合使用，看起来真的很像真机。
• 已在 Firefox 3、Internet Explorer 7 和 Safari 3 上测试并工作。
• 好吧，你还想怎样呢？

已知问题

• 它没有像真正的 iPhone 那样拥有“多桌面”功能，但这可以在将来添加。
• 当点击图标时，真正的 iPhone 会显示一个调整大小的窗口。 您可以使用iframe来重新创建这种效果，但我想要一个更简洁、更简单的解决方案。 现在，图标只是简单地淡出。
• 在真正的 iPhone 上不能（正常）工作，但能很好地回退。

除了这些小问题外，它按预期工作。 我计划制作更多这种“iPhone 风格”的网页，所以如果你想保持更新，请 订阅订阅源。 想知道我是如何创建它的吗？ 请查看。

资源

在我开始之前，我需要一些参考资料来使用。

• 对于高分辨率 iPhone 布局，Teehan+lax 对我有所帮助。
• Teehan+lax 提供的 PSD 没有提供所需的图标，所以我从 Judge on DeviantArt 获得了它们。
• 我想要使用 jQuery 来实现功能（滑动、淡入等）。 我正在使用当前版本：**1.3.1**

就是这样。 所有资源都已设置好，我们可以继续进行下一步。

xHTML

我使用了以下结构来构建 HTML。

如您所见，

1. #iphone-scrollcontainer 是内部内容的整体容器。
2. #springboard-items 是放置在栏之外的图标的容器。
3. #springboard-bar 是手机底部的栏。
4. .row 是每一行，包含图标。
5. .icon 是实际图标和文本的容器。

这让我们有了以下 XHTML（部分）

<div id="iphone-scrollcontainer">
    <div id="springboard-bar">
        <div class="icon">
            <a href="phone.html" title="Phone" id="ico_btn"><img src="images/icon_phone.png" alt="Phone" /></a>
            <p class="ico_txt">Phone</p>
        </div>
        <!-- Bar Icons Removed -->
    </div>
    <div id="springboard-items">
        <div class="row">
            <div class="icon">
                <a href="#" title="Text" class="ico_btn"><img src="images/icon_text.png" alt="Text" /></a>
                <p class="ico_txt">Text</p>
            </div>
            <!-- Springboard Items Removed -->
        </div>
        <div class="row">
            <div class="icon">
                <a href="#" title="Marcofolio" class="ico_btn"><img src="images/icon_marcofolio.png" alt="Marcofolio" /></a>
                <p class="ico_txt">Marcofolio</p>
            </div>
            <!-- Springboard Items Removed -->
        </div>
        <!-- More Rows Removed -->
    </div>
</div>

我将springboard-bar放在顶部的原因是，无论 Springboard 上有多少图标，您都可以将它的位置固定在 iPhone 底部。

这让我有了完美的 XHTML 来使用。 现在进入有趣的部分：使用 CSS 添加一些颜色、样式以及更多内容。

CSS

iPhone Springboard 的 CSS 实际上非常简单，没有太多奇怪的东西。 我使用绝对定位，因为 iPhone 容器具有固定的宽度、高度和位置。 这就是我想出的结果。

body { background-image:url(../images/iphone-bg.png); background-repeat:no-repeat; background-color:#25262b; padding:0; margin:0; }
a { outline:none; }
p { padding:0; margin:0; }
img { border:0; }

#iphone-scrollcontainer { height:461px; width:320px; position:absolute; top:140px; left:40px; background-color:#000000; overflow:hidden; }

.row { clear:both; }
.icon { float:left; margin:9px 11px; }
.ico_txt { text-align:center; font-family:Georgia, Times, serif; font-size:10px; color:#d4d4d5; }

#springboard-bar { position:absolute; top:368px; background-image:url(../images/springboard-bar-bg.png);
			background-repeat:repeat-x; width:100%; height:92px; display:none; }
#springboard-bar div.icon { margin-top:13px; }
#springboard-bar div.icon p.ico_txt { margin-top:8px; }

#springboard-items { width:100%; height:368px; display:none; }

我想从 CSS 文件中指出一些东西

• #iphone-scrollcontainer 具有overflow:hidden;，这样图标在超出 iPhone 屏幕时将不会显示（在它们飞进来之前）。
• #springboard-bar 和 #springboard-items 都有display:none;。 使用 jQuery，我们将让它们淡入，这样它们就会可见。

一切准备就绪：现在是使用 JavaScript / jQuery 来进行一些有趣的操作，为其添加花哨的效果。

JavaScript

首先，我们需要了解 iPhone 图标如何在屏幕内“飞入”。 为此，我有以下参考资料

该图标springboard-bar只是有一个“淡入”效果，这可以用 jQuery 很容易地实现。 我需要一种不同的方法来处理图标，并且必须更改 XHTML。

<div class="icon">

变成了

<div class="icon upleft">

我必须单独更改每个图标，为每个角落提供正确的类。 现在，使用 CSS 中的相对定位，实际上将它们从其位置移动出来

.upleft { position:relative; left:-160px; top:-160px; }
.upright { position:relative; left:160px; top:-160px; }
.downleft { position:relative; left:-160px; top:160px; }
.downright { position:relative; left:160px; top:160px; }

完美！ 这让我们只需使用 jQuery 添加一些花哨的 JavaScript 效果即可。

$(document).ready(function()
{
	// Fade in the docking bar
	$("#springboard-bar").fadeIn(1500);
	
	// Fade and Slide in the elements
	$("#springboard-items").fadeIn(1000);
	$(".downright").animate({left:0, top:0}, 600);
	$(".downleft").animate({left:0, top:0}, 600);
	$(".upright").animate({left:0, top:0}, 600);
	$(".upleft").animate({left:0, top:0}, 600);
	
	// What will happen when an icon gets clicked
	$(".ico_btn").click(function(event) {
		var element = $(this);
		event.preventDefault();
		$("#springboard-bar").fadeOut("slow");
		$("#springboard-items").fadeOut("slow", function(){
			window.location = element.attr("href");
		});
	});

});

我还想在这里指出一些东西

1. event.preventDefault(); 阻止用户直接被重定向到另一个 URL。 首先，图标淡出，完成后，用户使用window.location.
2. 转到另一个站点。 var element = $(this); 允许将 DOM 元素保存到变量中。 这是必需的，因为我们以后需要从该元素中获取 href。 如果不使用它，jQuery 不会知道要转到哪个 URI。

就是这样！ 出于某种原因，Internet Explorer 不会同时淡入和动画图标，这意味着该效果在该浏览器中的显示方式与其他浏览器略有不同。 另外，请使用 _Respring_ 重新加载页面，一次又一次，只是为了查看效果。

希望您像我在创建它时一样喜欢它。 随意进行任何您喜欢的更改，我总是喜欢看到人们用别人的作品进行创作！