像这样的“向导”html页面可以使用jquery构建还是需要flash?

时间:2011-06-01 09:52:03

标签: jquery flash user-interface

我需要构建一个looks like this的小向导,在这个向导中,您可以通过向导引导一个人并使用每个选项更新图像。由于一些原因,如ipad兼容性,我不能像在这个网站上使用闪存。我可以从简单地使用javascript和jquery获得这种用户体验的接近程度。是否有任何类似的例子(通过谷歌用这种用户体验找不到任何东西)

12 个答案:

答案 0 :(得分:10)

我有很好的使用经验:

https://github.com/kflorence/jquery-wizard

使用分支实现多步骤向导。我只是使用普通的jQuery来添加一些额外的效果,比如过渡动画等等。

答案 1 :(得分:7)

可以使用JQuery完成,你可能会非常光滑。 ,Flash和其他类似技术往往会使构建此类网站更容易,或者至少需要更少的编码。

答案 2 :(得分:4)

HTML5当然可以。 http://www.html5rocks.com/是一个很好的网站,展示了所有HTML5的力量。

答案 3 :(得分:2)

如果不使用Flash,这是100%可行的。有一些使用jQuery的JavaScript中的多状态表单的例子,你可以寻求指导。想到的两个是Living Social和Groupon,他们这样做,但是你给出的榜样却没有那么大的天赋。

这里的关键是:

  1. 您有责任更新表单各部分的用户界面
  2. 在表单完成之前,所有值都将进入隐藏的输入字段
  3. 您不限于动画或过渡,这可以像任何其他ODM体验一样对待
  4. 验证应该在表单中的每个状态下进行,以防止用户需要回溯以修复错误
  5. 使用CSS精灵,因为您不希望用户必须等待图像加载
  6. 祝你的表格好运,并随时提出完成任务所需的任何其他问题。

答案 4 :(得分:2)

正如大家所说,你可以用jquery来做这件事。

我会使用简单的GIF制作大部分动画(就像那些闪亮的小闪光灯每个都可以是.gif图像)。

悬停在效果上很简单,你可以像在jquery中用.hover()函数替换图片一样简单。

AFAIK在jQuery中唯一真正无法做到的是大动画(比.gif可以容纳的大),拥有完整的视频需要使用HTML5(我认为)或flash的播放按钮。

答案 5 :(得分:1)

使用一些css和jquery来切换预览图像和表单内容的类是非常简单的。

简单地渲染所有向导步骤,如隐藏的div,当用户点击“继续”时,显示下一个容器并隐藏上一个

在用户点击某个项目的每个表单步骤中,只需将一个类添加到预览图像或替换图像的src属性

我会将几个图像一个放在另一个上面(位置绝对)像图层一样,并根据用户在当前步骤中更新相应的“图层”

加载的图像当然应该是透明的png,并且具有适当的z-index。

答案 6 :(得分:1)

您可能希望查看HTML5 canvas元素以及一个帮助画布的jQuery插件,例如恰当命名的canvas

答案 7 :(得分:1)

以下是一个可以满足您的需求的示例网站......

http://custom.case-mate.com/imakemycase/

它基于javascript与casalab(可能还有jQuery)库。

然而,这些网站承认,在javascript然后flash中创建要困难得多。因为您需要通过代码完成大部分图形创建和编辑。除非你非常偏向代码(我猜这里很多,哈哈)。这是一个非常困难的过程。 Flash中的GUI使其成为更多,拖放,链接过程。对于简单的东西。

答案 8 :(得分:1)

Wijmo为此目的提供了一个jquery组件:

Wijmo Wizard

它易于使用,如果你知道jquery你知道wijmo = D

答案 9 :(得分:0)

转到HTML5和CSS3。 如果你想要旧版浏览器的兼容性(ie7)回到现代化器上然后使用js,否则这里没有任何东西不能用css3和html5完成。 这只是我发现的众多例子中的一个

http://www.romancortes.com/blog/pure-css-coke-can/

答案 10 :(得分:0)

当然可以!实际上 canvas 元素应该足够了(请参阅tutorialsome demo)。我什么都看不到需要Flash :)。

答案 11 :(得分:0)

如果您具备基本的编程技能,可以完成并且代码不会太难实现。

您需要做的就是调整您在此处找到的代码:

  1. http://plugins.jquery.com/project/SmartWizard了解向导的步骤
  2. http://www.sohtanaka.com/web-design/examples/image-rotator/查看用户做出选择时需要显示的缩略图/图片/文字。
  3. 这两个链接包含实现与您链接的网站类似的网站所需的所有代码以及一些说明。

    此致 甲