65.9K
CodeProject 正在变化。 阅读更多。
Home

Web 上的 iPhone 风格菜单布局

Thulasee Shan
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.92/5 (8投票s)

2009 年 7 月 9 日

CPOL

5分钟阅读

viewsIcon

43413

downloadIcon

772

Web 用户界面实现 iPhone 风格菜单布局。

iphone.gif

引言

iPhone 的推出让手机用户界面得到了飞跃式的发展。多点触控（捏合）、手指操作、滑动等技术无疑开启了人机交互的新时代。这是一种革命性的想法，许多人都从中获得了灵感。在苹果向公众大规模推出这些技术后，每家手机制造商都在努力“模仿”他们产品中的许多技术。于是我想到：“为什么 Web 用户界面不能借鉴 iPhone 的想法呢？”正是这种热情驱使我写下了这个项目。虽然这是一个简单而不起眼的想法，但它确实值得考虑，因为它允许用户控制网页的显示方式。

screenshot.jpg

我们可以用这个做什么

这个想法有很多用途。但以下只是几个建议：

  • 销售产品：像 eBay 或 Amazon 这样的网站可以为客户提供这种功能，让他们将产品放入展示柜，并让用户安排产品的显示顺序。
  • 门户网站：iGoogle 或 Netvibes 等门户网站可以像 iPhone 图标一样排列他们的组件。

它的魔力何在

最近我接触到了 Yahoo 开发者们开发的强大工具，并在一小段时间后就爱上了它们。它们非常令人惊叹且功能强大，我发现它们拥有巨大的潜力。最重要的是，它们完全免费且 100% 开源。有关更多详细信息和下载，请访问 http://developer.yahoo.com/。如果您花几分钟时间研究这些令人惊叹的 YUI 工具，我相信在 Web 上可以轻松地重现 iPhone 中的所有 GUI 幻想。这确实令人震惊。现在让我们开始吧。

使用 YUI 非常简单。有大量的示例代码和海量文档。首先，我们需要在 HTML 中链接 YUI 脚本文件。我们可以将 *.js 文件下载到本地存储，或者链接到 Yahoo 商店本身。在这个项目中，我直接从 Yahoo 的商店链接 *.js 文件。

<script type="text/javascript" 
	src="http://yui.yahooapis.com/2.7.0/build/yuiloader/yuiloader-min.js"/>
<script type="text/javascript" 
	src="http://yui.yahooapis.com/2.7.0/build/dom/dom-min.js" />
<script type="text/javascript" 
	src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" />
<script type="text/javascript" 
	src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js" />
<script type="text/javascript" 
	src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js" />
<script type="text/javascript" 
	src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js" />
<script type="text/javascript" 
	src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js" />

然后我创建了 24 个可拖动的对象，如下所示：

<div id="ProductItem-1" class="ProductItem">
    <span class="ItemTitle">Yahoo Widgets</span><br />
    <img style="float: right" src="imgs/Yahoo Widgets.png" />
    <span class="ItemDesc">Yahoo Widgets.png</span>
</div>
      
...
    
<div id="ProductItem-24" class="ProductItem">
            <span class="ItemTitle">Ad Aware</span><br />
            <img style="float: right" src="imgs/Ad Aware.png" />
            <span class="ItemDesc">Ad Aware.png</span>
</div>

以及这 24 个可供可拖动项停靠的占位符：

<div id="ItemBase-1" class="ItemBase"></div>
...
<div id="ItemBase-24" class="ItemBase"></div>

注意：可拖动对象和占位符的 id。id 的后缀是一个顺序编号，我用它来识别哪个 DD 位于哪个 DDTarget 中。
有了基本的东西准备好后，我现在可以编写代码来处理用户拖动项目时的动画效果了。

当窗口加载时（即在 window.onload 事件中），占位符会以表格的形式排列，这得益于强大的 CSS。然后，根据 id 后缀的顺序，可拖动项会被停靠在占位符中。

现在，有趣的部分开始了。每个占位符都注册为“Drop-Target”（YAHOO.util.DDTarget），而每个产品项都注册为“DragDrop-Item”（YAHOO.util.DD）。

//Register as Drop-Target Item
new YAHOO.util.DDTarget(document.getElementById('ItemBase-X'));
//Register as Drag-Drop Item
new YAHOO.util.DD(document.getElementById('ProductItem-X'));

现在是时候处理事件了。当一个 DD 项进入（事件：onDragEnter）一个 DDTarget 项的边界时，将现有的 DD 项移动到相邻的 DDTarget，并重复地将 DD 移动到相邻位置，直到达到当前 DD 项的原始 DDTarget。我知道这听起来可能有点棘手。但它非常简单。

//Dragging started from a proceeding position
if(startIndex < tIndex) 
{
    for(var i=startIndex+1;i <= tIndex;i++)
    {
        //move up
        setPosition(m_Store[i], i-1);
    }
}
else
{
    //Dragging started from a lower position
    for(var i=startIndex-1;i >= tIndex;i--)
    {
        //move down
        setPosition(m_Store[i], i+1);
    }
}
    
...
    
function setPosition(el, index)
{
    var Dom=YAHOO.util.Dom;
    m_Store[index]=el;
        
    var pos = Dom.getXY('ItemBase-' + (index+1).toString());
        
    //Wow! I love to create an animation here.
    new YAHOO.util.Motion( 
        el.id, { 
            points: { 
                to: pos
            }
        }, 
        0.3, 
        YAHOO.util.Easing.easeOut 
    ).animate();
}

请注意 Motion 类——YUI 的动画库。它提供了许多有趣的动画效果。

  • backBoth, backIn, backOut：稍微后退，然后反转方向，超出终点，然后反转并回到终点。
  • bounceBoth, bounceIn, bounceOut：从起点和终点弹跳。
  • easeBoth, easeIn, easeOut：开始缓慢，然后向终点减速。
  • elasticBoth, elasticIn, elasticOut：弹性伸缩效果。

类似地，我也编写了代码来处理项目被拖放到 DDTarget（事件：onDragDrop）时以及被拖放到无效 DDTarget（事件：onInvalidDrop）之外时的动画。实际上，代码非常简单，任何人都能理解。感谢 YUI 工具提供了如此好的库，让生活变得更加轻松。

关注点

好吧，这只是一个包含一些硬编码项的静态网页。但我目前正在开发一个网站，该网站将推销给许多财务顾问，他们可以在自己的主页上自定义和排列他们的金融产品。他们的网站的客户或最终用户可以根据自己的优先级进一步进行安排。我认为这将是一个突破性的网站，并且会吸引许多时尚的网络爱好者。一旦网站上线，我将在此处发布 URL，所以请继续关注。

如何重用此代码

重用此代码很容易，但我恐怕不能对由此代码产生的任何结果承担任何责任。为了使其适用于您的情况，需要考虑以下几点：

  1. 任何可拖动项都应将类名设置为 ProductItem。
  2. 必须为每个可拖动对象定义一个空的占位符，并将类名设置为 ItemBase。
  3. 可拖动对象 ID 应设置为“ProductItem-X”，其中“X”是顺序号。
  4. 定义的每个 ItemBase 都应具有“ItemBase-X”的 ID 格式，其中“X”是顺序号。

就是这样。您现在就在您的幻想岛上。

历史

  • V 1 - 2009/07/08 11:59 - 首次提交，技术细节不多
  • V 2 - 2009/07/08 16:20 - 添加了更多技术细节
© . All rights reserved.