网站的iPhone菜单安排

分享于 

9分钟阅读

Web开发

  繁體
iphone.gif

介绍

iPhone的推出给手机用户的手机界面带来了新的活力。 多触摸( 夹)。手指操作。滑动。等等 无疑开创了人类计算机交互的新时代。 这是一个革命性的想法,很多都受到这些神奇思想的启发。 苹果将这些技术在质量水平上推出后,每个手机制造商都在努力在他们的产品中实现这些技术的很多。 所以我想'为什么网络用户界面没有抓住iPhone的想法'。 这就是我写这个项目的热情。 虽然这是一个简单和笨重的思想,但是它真的值得考虑用户控制网页的显示方式。

screenshot.jpg

我们该怎么做?

有很多事情可以用这个想法来完成。 但以下只是一些提示:

  • 产品:易易工作室- 各种在线工具,站长网志,以及多个应用项目。
  • 门户网站:诸如iGoogle或者Netvibes这样的门户网站可以像iPhone中的图标那样排列它们的小部件。

神奇的是

最近我在雅虎的开发人员处理了这些精美的工具,在花费几分钟时间后我就喜欢这些工具。 当我发现它们具有巨大的潜力时,它们是如此的神奇和强大。 上面 全部是免费的,100%个开源。 请访问 http://developer.yahoo.com/ 了解详情并下载。 如果你可以用这些令人奇怪的YUI 工具,我相信一个iPhone中的每个GUI幻灯片都可以在Web上复制。 真是惊人,我们来吧。

使用 YUI 很简单。 有大量的示例代码和数百万个文档。 首先,我们需要首先将 YUI 脚本文件链接到HTML中。 我们可以下载 *.js 文件到本地商店,也可以链接到雅虎存储本身。 在这个项目中,我将直接从yahoo的存储中链接到的*.js 文件。

<scripttype="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个可以拖动对象,如下所示:

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

24位占位符,其中可以拖动项可以停靠在:

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

注意 对象的id 和占位符的idid的后缀是一个序列号,我确定了哪个DD在 DDTarget 中。
准备好基本的东西之后,现在我可以编写代码来在用户拖动项目时完成动画。

加载窗口时( 例如。 在 window.onload 事件中,放置占位符以表格方式排列,这是由伟大的CSS完成的。 然后根据 id 后缀的顺序顺序将dragable项固定在放置占位符中。

现在有趣的部分开始了。 每个地方持有者都注册为'放置目标'( YAHOO.util.DDTarget ),每个产品项都注册为'拖放项目'( YAHOO.util.DD )。

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

现在是处理这些事件的时候了。 当DD项进入( 事件: 将当前 onDragEnter 项移到相邻的DDTarget 中,将DD移动到相邻的中,直到达到当前的DD原始值,直到到达当前的条目 DDTarget。 我知道这听起来有点棘手。 但是很简单。

//Dragging started from a proceeding positionif(startIndex <tIndex) 
{
 for(var i=startIndex+1;i <= tIndex;i++)
 {
 //move up setPosition(m_Store[i], i-1);
 }
}else{
 //Dragging started from a lower positionfor(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 中的动画库。 有许多有趣的动画效果。

  • backBothbackInbackOut: Backtracks稍微,然后反转 direction,端,然后反转,然后返回到结尾。
  • bounceBothbounceInbounceOut: 从起点和终点反弹。
  • easeBotheaseIneaseOut: 慢慢开始减速向终点减速。
  • elasticBothelasticInelasticOut: 弹出/弹出弹性效果。

类似地,我已经编写了在将项放入 DDTarget ( 事件) 时进行动画处理的代码: 当它被放到一个有效的( 事件: onInvalidDrop )。实际上,编码很简单,谁可以理解。 感谢 YUI 工具使我们能够轻松地为我们提供这样的图书馆。

Points of Interest

这只是一个 static 网页,里面有一些硬编码的项目。 但我目前开发一个网站,该网站将向许多金融顾问销售,他们可以在他们的主页上定制和安排他们的金融产品。 用户或者它的网站的最终用户可以根据他们的优先级进行进一步的安排。 我想这将是一个地面破坏的网站,并且会吸引许多迷人的网络爱好者。 一旦网站上线,我会把网址放在这里,所以看这个空间。

如何使用这里代码

使用这个代码很容易,但我担心我不能对这里代码的任何结果负责。 以下需要考虑,以便使它的适用于你的环境。

  • 任何dragable项都应该将类 NAME 设置为 ProductItem
  • 必须为每个dragable对象定义一个空占位符,该类 NAME 设置为 ItemBase
  • dragable对象id应设置为'ProductItem-X',其中'X'是序列编号
  • 定义的每个 ItemBase 应该在前一个'ItemBase-X'中具有 ID,其中'X'是序列号

就是这样你现在在幻想岛。

历史记录

  • 1/Jul/2009: 59 - 首次提交,不需要详细的技术细节
  • 2/Jul/2009 16: - 添加了更多的技术细节

WEB  菜单  ARR  
相关文章