上次我们做小组设计项目时,我们做了 带函数的列表,并且获得了 很多有趣的想法。然后有一天我链接到 Ryan Singer 的一个视频,其中一小部分启发了 具有双向排他性的单选按钮 的想法。然后读者 Erik Edhagen 建议我做更多此类小组设计项目……所以我们来了!
你的任务
创建一个界面,用户可以在其中按喜欢的程度(第一、第二、第三)对三款巧克力棒(士力架、德芙和健达奇趣)进行评分。
您无需保存数据。您无需围绕它构建整个网页。只需您进行评分的部分。
使用 Tinkerbin 创建您的演示,并在下面的评论中发布链接(以及您可能有的任何注释/评论)。如果您想在 Tinkerbin 中使用 JS 库,您需要在 HTML 部分 链接它。
没有其他规则。发挥你的创意。
奖品
我会挑选三位我认为做得特别好的用户,并向他们发送一件 CSS-Tricks T恤。
假设大约一周时间。我将在 10 月 25 日星期二关闭这篇帖子的评论,并选出获奖者。后续对话将在某种汇总帖子中进行。
为什么?
需要明确的是,我对此没有特别的需求。我并不是想让你“免费工作”。
我认为这只是一个有趣且有用的练习,可以练习设计。你在思考如何最好地处理这个问题时学习。你在创建时学习。你在看到其他人的方法时学习。你学习剖析和讨论所有方法。
听起来很有趣..
确实很有趣。我可能会加入这个。
甜蜜而简单!
http://tinkerbin.com/r0KPfQTA
你甚至尝试过吗,哈哈。
完全失败。我可以将每块巧克力棒的评分都评为 2。
喜欢这个概念。我有一个很棒的想法,只需要找到时间去做!
*很棒的程度取决于你,我们的评委哈哈
给你的巧克力棒评分!点击将其上移!
(您必须点击运行才能使 js 正常工作)
http://tinkerbin.com/KC64oGvH
我喜欢这个想法
太混乱了,而且就像前面的例子一样,我可以给它们都评相同的价值。
仍然需要改进 :/
:)
http://tinkerbin.com/nA3rxWqf
我不太相信拖放是人们喜欢在网络上做的事情。
我喜欢,但你是对的,仍然存在一些极端情况。在最新的 Chrome 中,我可以使巧克力棒图像消失,无法将其恢复。不过,这是我立即想到的那种想法。不错的初步工作!
我真的很喜欢你在 Javascript 中使用“this”的方式;我一直限制自己闭包绑定到的元素,而不是每次都查找它。
一些建设性的批评
– 为了捕获所有 mouseup,您需要绑定到 window.parent.body 并进行一些冒泡。
– 如果元素没有放置在有效插槽上,则将其返回到其原始位置
– 处理将元素放置到其原始插槽中的情况(提示:不执行任何操作 ;) )
– 而不是频繁地重新查询(即 getElementById),尝试记住正在发生的事情。
– 而不是使用 .innerHTML,使用 .replaceChild;更合法,对 DOM 的压力更小。
感谢您的建设性反馈,这是我第一次在没有 jQuery 的情况下做这种事情。我将在午餐时进行优化,在此之前 http://tinkerbin.com/aq1lD5Oq
我非常喜欢它,我唯一看到的问题是,当我将某个东西从 3 拖到 2 时,它不会在我释放鼠标之前将数字 2 向下滑动(它应该显示它是有生命的,并且知道发生了什么)。这不是一个主要问题,并且通过修复它,我认为不可能做得更好。
如果我拖动并放下,它就会消失…… :/
查看最新版本,在您的评论上方 :)
http://tinkerbin.com/i5KAPrgo
我使用主要纯 CSS 获得的最接近的结果。
即将推出:基于 jQuery UI 事件的系统和非 jQuery UI 版本(如果我那时没有感到疲倦)。
我喜欢它,但它需要 jQuery。“主要纯 css”?
哈哈,我指的是编号方案以及颜色。抱歉造成混淆。
向上投票你的糖果,或将其埋入遗忘之中
http://tinkerbin.com/N36eXsb4
正在改进…
不过你仍然可以给两块巧克力棒评相同的等级。
Todd 的版本目前对我来说最棒 :0)
如果 tinkerbin 不工作……查看这个
http://jsfiddle.net/QnnDW/
这里的问题是,a) 你可以给所有 3 个巧克力棒都打同样的分数,b) 用户应该给它们评 1、2 和 3 分。所以我认为这并不符合要求 :(
我也可能考虑一下这个!
更新为使用 Javascript 处理类(因此它不像以前那样会出错)。
此外,还修复了我遗漏的计数错误,并使圆角更符合标准。
http://tinkerbin.com/CZQ0Ey5S
我将把非 jQuery 版本留到以后再做。我认为我无法做出比 jQuery UI Sortable 更好的用户体验。
:( 我从头写了一遍,以为这是挑战的一部分。
嘿,等等。这是一个练习,不是比赛;重点是享受乐趣。我承认,你的作品凭借其复杂性以及自己设计 Javascript 的能力,赢得了胜利。
有点小错误,但还是来了(感谢 David Booth 提供图片资源 ;-) )
http://tinkerbin.com/yfndOlhh
Todd 的解决方案 是我选择的那个,但在移动 Safari 上不起作用。
如果你想非常科学地消除任何默认偏差,你可以让用户从“垃圾箱”中拖动项目到首选项顺序,或者在每次页面加载时随机化默认顺序。
http://tinkerbin.com/ti4c2Zwg
就这么简单 :P
对我来说不起作用……
@Richard:你试过点击“运行”按钮了吗?:P
PMSL – 我真的没有!我真诚地道歉……*真是蠢*
你会觉得你应该能够按下绿色箭头。
绝对……完全忘记了……简单而有效的想法。查看我下面的内容:http://tinkerbin.com/tm7IyKrV
@Thomas:绿色箭头可以作为提示。这只是一个草图。另一方面——它只在鼠标悬停在列表项上时才会出现——无法点击。
@Ritchard:你的 logo 非常棒——好主意,T 恤是你的了:) 但回到主题:我会在两个方面都添加吸附功能:底部容器和领奖台部分,当你的“曼妥思”拖到某个区域上时,显示某种圆形占位符。
http://tinkerbin.com/jXHf7J0I
@rafal – 谢谢你的评论,是的,我同意,吸附功能是我接下来可能会添加的东西,以及一些额外的样式和标签。
哈哈 – 曼妥思……嗯,很好吃,对吧?
躺在床上时,我意识到在没有 jQuery 的情况下完成这个任务会非常快和容易。此外,我一直想做更多 kata。因此,我起床并把这个拼凑到一起。哦,我决定加入“使用图像”的潮流。
http://tinkerbin.com/m2eJWqgu
我觉得我错过了一些好的概念,所以请随时指出它们。此外,对于那些有兴趣的人,我留下了一些 TODO,我希望得到解决方案=P
我认为动画和点击项上的指示器可以更容易地了解发生了什么。
你能否详细解释一下?我确实在点击的项目上放了一个指示器(它使它们变成蓝色),它似乎在支持 Tinkerbin 的浏览器(FF 和 Chrome)中运行良好。
我同意动画会很好看(特别是如果使用 CSS3 动画完成),所以我将在今天晚些时候添加它。
修复了问题 :)
http://tinkerbin.com/DLLzxRIC
错误修复
http://tinkerbin.com/aq1lD5Oq
快完成了……我很快就会分享
http://tinkerbin.com/tm7IyKrV
这是我的版本。
我使用了 JQuery UI 库,利用拖放功能允许用户将他们最喜欢的巧克力棒拖到领奖台上。
在理想情况下,这会将用户数据保存在某种投票中?
我已经用 CSS 尽可能地对其进行了样式设置,除了绿色渐变。在这种情况下,我只是没有时间完成 CSS3 渐变,而是包含了备用 png。
希望它在视觉上足够令人愉悦,并具有所需的功能。
我应该指出,我实际上链接到所有所需的 JS,所以这可能会稍微减慢速度……
很棒的概念!你启发我用 jquery 制作了另一个,也许吧。
非常感谢,
我激励了自己,我正在考虑创建另一个具有更好样式的版本,将其变成一个合适的界面。
如果你/当你有其他东西要展示时,回复此消息。
它来了:巧克力棒狙击手
http://tinkerbin.com/JiwfbytL
@David – 这绝对令人惊叹,真正地令人惊叹。
如果我今天有时间,我的计划是采用我的概念并进行 onClick 事件,有点像这样,正如线程中的另一位成员所建议的那样,但我没有时间。:-( 有趣的是,我朋友昨晚还提到了某种“气泡爆裂”动画,这样当用户点击气泡时,它们就会按照他们选择的顺序出现在领奖台上。
在 Twitter 上关注我/或从我的网站给我发送电子邮件,我非常想与您合作未来的作品……@blandydoes
@ Richard Bland – 谢谢,我将在本周末之前给你发邮件。
这是我的解决方案 http://tinkerbin.com/5BzRC3aU
这是一个纯粹为了娱乐的版本
http://tinkerbin.com/atgItbDk
这是我的作品……我将继续改进它
http://tinkerbin.com/d6IyjNif
http://tinkerbin.com/vxvKIGvr
这是我的版本。我也使用了 JQuery UI……
=)
酷。我最初基于滑块草绘了一些类似的东西。我喜欢它。
非常好,也许可以添加一个指示器来帮助区分它们何时靠近?
我不知道我是否理解了你的问题。我的英语很糟糕……哈哈,抱歉。
我认为可以,因为 jQuery UI 有一个属性值。你可以定义它何时为 0,并添加任何具有不同样式的类,或应用任何内容。
这是一个基于归并排序的:http://tinkerbin.com/4j76GEUi
它应该需要用户最少的工作量,并确保如果棒的数量增加,其复杂度保持最佳 :)
我可以在这里提供一些建设性的批评吗?*看起来很困惑* 我发现很难弄清楚发生了什么……您可能希望添加一些描述或标签,向用户提示他们需要做什么。我发现自己只是随意点击,而没有真正了解结果。
合理 :)
这是带标签的版本:http://tinkerbin.com/8OrNsOsV
其理念是用户无需关心最终排序,只需关心最少的单个选择次数。
我可能会重新审视我之前的版本,并提供一些更好的样式和标签。
我认为,当涉及到让用户与您的网站互动时,需要有一个有趣和有益的元素,以回报他们抽出时间完成您设置的任务。
我将坚持使用领奖台的概念,因为它是一个可识别的定位符号,最好的总是比最差的更高,因此任务更加明显。作为第1、2和第3位的定位任务。
不过,它肯定需要额外的标签。 :-)
克里斯,你让我陷入什么境地了!;-p
哇,很多很棒的例子 -
– 早期的基于条形图的界面从用户的角度来看是最“令人满意”的。拖放版本是有道理的,但没有点击到位或最终性。
-我同意以下观点:在预填充版本(条形图已按 1 2 3 顺序排列)中,顺序可能会影响用户的投票。
我的解决方案是点击增加或减少一个条形图,表示特定品牌的糖果棒。
链接:http://jsfiddle.net/TEfQd/4/
目前它非常基础(没有真正的设计),我想让它在 10/0 处停止增加/减少;我只是现在没有时间。
糟糕 - 忘记添加更新版本了。这是我本来打算发布的!!http://jsfiddle.net/TEfQd/5/
非常酷,伙计……恭喜……
再次更新以添加更多样式(仍然不多:) )
http://jsfiddle.net/3zzsk/2/
好的,更新了设计,添加了逻辑以在 0 或 10 处停止:http://jsfiddle.net/3zzsk/4/
+1 给 Damon 的!
这是我的。
http://tinkerbin.com/Dv5HBu7N
Stursby 的方法看起来很简单,易于理解,效果很好,并且可以轻松定制。我非常喜欢它!
呵呵,它和我一样存在编号问题。有错误(所有操作都在最新的 FF 中完成)
– 点击顶部元素并晃动它。第二个元素会丢失其前缀。
– 点击并拖动第二个元素到底部(不要松开)。第二个元素会丢失其前缀。
– 点击并拖动第三个元素到顶部或第二个位置。最后一个元素会丢失其前缀。
– 点击并拖动顶部到第三个位置。第二个元素会丢失其前缀。
– 点击并拖动顶部到第二个位置。顶部不会更改为“1”。
– 当点击并拖动任何元素时,正在拖动的元素的实际编号会出错。
嗨,Tom,我刚在 FF 中试了一下,它对我来说工作正常……
你所说的“晃动它”是什么意思?你是只是点击它然后在周围移动鼠标吗?
我正在尝试破坏它,通过将元素到处拖放,但它仍然对我有用。
http://tinkerbin.com/qlF4ttF8
我们又得到一个!缺乏可用性,但它很可爱 :D
我的天!它现在正在动画化!
http://tinkerbin.com/5H8VHpD9
@Rafal – 那真是太棒了,伙计!现在你赢得了 T 恤;-p
你赢了!
好吧,这是我的想法
http://jsfiddle.net/p4bl1t0/qcdDJ/
我认为拖放不是最佳选择,因为在移动设备上使用 UI 可能很麻烦。
所以我做了一个点击界面,您可以在其中按您的喜好顺序选择糖果(就像一个小孩子)。您可以再次点击糖果棒以将其重新排序到顶部。
额外:语义标记(OL,UL)
真的很流畅,我喜欢一开始没有指示第 1、2 或第 3 位的非假设水平列表。
– 对拖放对移动用户来说很困难的假设是正确的
但一旦项目出现在列表中,就可以进行拖放,这对没有使用移动设备的用户来说会很不错,他们犯了错误。而不是每次想要重新排序列表时都必须“重置”。
您可以通过重新点击列表中的元素来重新排序 OL。这将使被点击的项目移到列表的顶部。
这是一个稍微修改过的版本
http://tinkerbin.com/uuCFJVoH
这是我修改后的拖放版本。
http://tinkerbin.com/L4VwQF4J
设计更好,我加入了吸附到内部的功能。如果我有更多时间,我想弄清楚如何获得流畅的吸附效果,但就目前而言,我认为这可以解决问题。
我同意一些关于拖放不是移动设备理想解决方案的评论。同样,如果我有时间,我会解决所有这些问题。
顺序选择最合理,但它在过去已经被使用了很多次,我真的没有见过很多将拖放用于此类应用的例子。它真的很有趣!
:-)
我希望人们喜欢这个设计和基本功能。
Richard,你在那里做得非常棒。我唯一想建议的是修复它可以放置的位置。现在它似乎可以在任何地方放置。这是一个很棒的地方,我学到了很多东西
是的,我正在研究这个问题 - 我也希望它能流畅地动画到指定位置……
您能否让项目保持可拖动,或者在点击时让它们移动到最高可用插槽?
这样,您就可以避免拖放问题,同时保留非移动用户的功能。
Richard,干得漂亮!到目前为止,您的开发线程真的很有吸引力!
嗨,Jon,
这对我来说变得非常有趣,因为这确实是我第一次深入研究拖放功能,我是在边学边做。
这是另一个修改后的版本:http://tinkerbin.com/0ndVeGsU
这次我在代码中添加了一个 active 类来突出显示可放置区域,并将可拖动元素包含在 candy-wrapper 中(看看我在代码中做了什么……糖果……哈哈)。
然后,我添加了一个恢复功能,用于当元素放置在“放置区域”之外时,这意味着它们会恢复到其原始位置。
我现在遇到的问题是,我无法让它们准确地落到可放置容器的中心,并且一旦放置,我只能将它们拖放到可放置容器中,而不能像用户改变主意时那样拖回其原始起点。
用户易于理解,直奔主题。有时少即是多。
http://tinkerbin.com/X6hUX9yi
糟糕的标签。这里
http://tinkerbin.com/2zT7sFjF
一旦放置了糖果棒,某种动画(颜色变化,也许)会非常有用。
这是我的尝试:http://tinkerbin.com/zXzQaR6f
这是我的概念 http://tinkerbin.com/isvzmZIr。
我的设计看起来很像你最初的设计。我无意复制你的结构,但它似乎是最容易理解的。
我认为它最易于使用,因为它遵循了长期存在的模式。
当调查要求对客户服务进行评分时,它们会提供一个带有若干单选按钮的列表表单。我立即知道如何阅读和评分每个项目。他们不必解释“点击 1 到 10 之间的数字”。
虽然我认为拖放解决方案阅读效果最好,因为项目按顺序排列。如果你使用像这样的图像(http://dl.dropbox.com/u/14873072/sorter.gif),用法很快就能得到暗示。我想不出一个好的回退方案,以供没有启用 javascript 的浏览器使用,我也不敢确定它在移动平台上的可用性。
这让我想到,这种模式或类似于我使用的模式 是最好的。
—
以下是一些验证我的示例的 PHP 代码示例。
• [PHP 代码示例] 成功
• [PHP 代码示例] 错误
在查看了每个人的想法后,我认为我最喜欢的这种方法(http://tinkerbin.com/gi4pDmEQ)来自 Scott Vivian*。我发现它填写起来更快,并且比我的方法扩展性更好。但是,它完全依赖于 javascript,这让我感到困扰。
因此,我更改了我的原始想法,在启用 javascript 时实现 Scott Vivian 的想法(http://tinkerbin.com/BAJasDxC)。它是可扩展的,如果它位于表单中,您仍然可以从
$_POST['ratings']
获取顺序。## 更改
如果禁用 JS,则会显示常规表单。但是,如果启用了 JS,则会更改为使用“更好”的系统。
—
* 如果我没有引用正确的人,请原谅我的错误。有超过 150 条评论(在我发布时),我可能错过了原始评论。
这是我的尝试:http://tinkerbin.com/57oln1L2
它肯定需要一些视觉改进,但我认为 UI 非常漂亮且易于使用。从我目前看到的来看,拖放操作使得用户难以理解或实际使用。在这里,只需点击两次,您就可以按顺序对糖果进行排名。我很想知道你们的想法。
我认为这是最好的之一。干得好,Remi。
我唯一能看到的缺陷是移动设备,因为有悬停效果。但对于桌面 UI 来说,我认为它可以正常工作。
http://tinkerbin.com/xaWo3Lpi
那是我的。使用巨大的 jQuery 代码后看起来非常丑陋。我非常确定有很多更简洁的方法可以做到这一点,但目前我还没有更好的想法。
这是一个不错的主意!作为清理 jQuery 代码的想法,您可以创建变量中的内容。例如,对于每个选项,它可能有 3 种不同的选择
$(‘.third li:last-child’).html(‘Awful!’);
$(‘.second li:last-child’).html(‘Good enough!’);
$(‘.first li:last-child’).html(‘Delicious!’);
如果将这些设置为变量,您可以让自己的工作变得更容易。
感谢你的想法。我刚开始学习 jQuery,所以它对我来说还是比较新的。
http://tinkerbin.com/QJaVFnJq
Peeter –
看起来好多了!还有一些建议
1. 设置变量,这样您就不必过多地访问“$(this)”了。这会占用 CPU 资源。与其对一个悬停函数调用 6 次 $(this),不如为“li.one”、“li.two”和“li.three”设置一个变量(例如 var $liOne = $(‘li.one’); 会有很大帮助。
2. 有很多行使用 CSS 操作 DOM 以添加背景颜色。这不仅是多余的,而且操作 DOM 需要时间。相反,您可以使用类设置这些 CSS 样式,例如:.red { background:red },在您的 jQuery 中,而不是执行 .css(),您可以执行 addClass(‘red’) 和 removeClass(‘red’) 。您还可以使用白色背景设置默认背景类,并在悬停关闭函数中将其移除后添加该类。
希望这些不会太令人不知所措。如果您需要帮助,可以随时回复。
谢谢!
开始学习一些关于 jQuery 的知识。
1. 当我使用类进行悬停时,我遇到一个问题。当我悬停在一个评分条上时,悬停效果会应用到所有评分条上。除了使用 $(this) 之外,我找不到任何更好的方法来避免这种情况。
2. 我为我使用的每种背景颜色都创建了类。但是我必须在 css 中使用 !important 来覆盖在单击评分条时添加的类。有没有更好的方法来做到这一点。
http://tinkerbin.com/NSw4F9xK
这已经成为最好的帖子之一……让所有读者展示他们的技能和技巧!好东西!
经过认真思考和分析,我认为我已经想出了所有解决方案中最好的一个
http://tinkerbin.com/3tr4Tepl
啊哈,你赢了。
在旧版浏览器中可能看起来不太漂亮……
http://tinkerbin.com/BvMQcIDC
-CP
让我们在那里放一个漂亮的“移动”光标——http://tinkerbin.com/r0dqngk7
很棒的工作。到目前为止,我最喜欢这个。清晰的排名指示,易于使用,并且没有难看的棕色或橄榄色图形,或像素化的糖果包装图片;)
我选择了我认为最易用的方法,我在上一篇文章的评论中提到了这一点。只需点击两次即可!
http://tinkerbin.com/gi4pDmEQ
Firefox 中的列表编号有点奇怪,但除此之外,它工作正常。感谢 stursby 提供他很棒的 CSS 糖果棒设计,我厚颜无耻地“偷”了它们:D
这就是我打算提供的解决方案类型。省去了我的麻烦。:)
我认为它很好,并且与移动设备上流行的 UI 非常一致,这些 UI 会缩小选择范围以最大程度地减少混乱,然后根据您选择的内容进行扩展。我认为这很容易使用,并且与其他一些方法不同,它没有混淆或歧义。
不用担心,伙计。执行得很好!
http://tinkerbin.com/9nBsaALX
快速简便,可以轻松扩展到任意数量的项目。我的代码还有很多需要改进的地方,但你明白了;)
这是另一个简单的示例
http://tinkerbin.com/hQb2Ggcc
我对 Tinkerbin 非常沮丧,当我尝试保存时,它显示出现错误,有人知道原因吗?
抱歉,Chris 不得不使用 jsfiddle,Tinkerbin 一直给我报错。
无论如何,这是我的尝试。尽量保持简单。抱歉选择了不好的图片。
http://jsfiddle.net/U8GA8/
这是我的解决方案。我尝试使用一些 jQuery 和少量 CSS;淡入淡出效果可能有点过于强烈,但我认为结果还不错。
http://tinkerbin.com/hdJMUzFn
抱歉!这是一个真正有效的:http://tinkerbin.com/rs5SOZWi
由于某些原因,您必须点击两次“运行”才能使jQuery真正生效。
第一次尝试
http://tinkerbin.com/fC6EOHNO
哦,顺便说一句,您需要点击“运行”
修改了一些外观。
http://tinkerbin.com/ayB2bFkX
http://tinkerbin.com/SoANjm4E
可能唯一值得注意的事情
它在每次选择或重置后都会随机化列表。
到目前为止已经展示了一些不错的作品,Chris 的帖子不错!
如果我现在不忙,我会参与的,在 Photoshop 中快速拼凑了一下,我喜欢拖放,但箭头控制很简单,并且在手机上也能很好地工作。
Image Shack 链接
这次使用 jQuery 的 #2 – 糖果棒狙击手
0.(点击运行)
1. 选择您最喜欢的、第二喜欢的和第三喜欢的糖果棒。
2. 射爆气球,将糖果棒放入正确的杯子中。
http://tinkerbin.com/JiwfbytL
我发现了一个小问题……如果我在杯子之前射爆气球,它们就会掉到地上,游戏结束? – 也许您可以改进一下,如果我错过了目标,气球可以继续存在?
我想我喜欢这样一种想法,即人们可能会错过杯子,因此会“失去一次机会”,如果本周我有空闲时间,我会继续开发。
#2.1 – 糖果棒狙击手
更新日志:1. 错过时重新启动气球。2. 更好的光标外观
http://tinkerbin.com/i3CHOxFf
很棒……现在只需要一个统计面板,显示用户选择的顺序,以及一个重置按钮以再次尝试!;-p
这是我的解释:http://tinkerbin.com/4kW1JySR
记得点击运行!
纯 CSS!
糟糕,有点触发器过头了。意思是说没有图片!
出色的开发。
糟糕,有点触发器过头了。意思是说没有图片!
请删除上面的评论。
http://tinkerbin.com/wc4E6qpT
我尝试这样做,以便最基本的标记可以提供一个表单,该表单有可能在没有 CSS 和 JS 的情况下在服务器端完成工作……
在最新版本的 Chrome、Safari 和 Firefox 中测试过,但我没有尝试使用 CSS 供应商前缀涵盖所有方面。
这是我的纯 CSS 解决方案
http://tinkerbin.com/tBdjBxte
它非常丑陋,但功能齐全。我实在没有时间为了好玩而使它变得漂亮,我还有真正的工作要做。:) 其实很容易美化。
哦,我在 Chrome 14 和 FF 8 中测试过它。这项技术非常简单,我认为我是从 css ninja 那里学到的,所以可能很容易适应任何浏览器。
我的解决方案。
我知道它很复杂=)
http://tinkerbin.com/a20LO9oD
http://tinkerbin.com/a20LO9oD
实际上我认为它非常简单直观,干得好 :)
谢谢=D
我的两分钱:http://tinkerbin.com/L0KJds3Q
不是世界上最棒的设计,但它有效。
我选择简洁性和用户体验。没有花里胡哨的东西,只有用户期望它做的事情。
http://tinkerbin.com/avYPxhOl
对于重复发帖我表示歉意。我这边遇到了一些连接问题!最后一篇帖子才是正确的!
这是我的尝试。很有趣,也学到了一些东西!http://tinkerbin.com/OWGpw3sk
干得好
希望你能获得奖品!
Huree
Stursby 的方法似乎
很简单,很容易
理解,效果很好
并且可以轻松地
自定义。谢谢
大家好!!
我尝试了一下,这是我的结果
http://jsfiddle.net/eruecco87/PaBba/
或者
http://jsfiddle.net/eruecco87/PaBba/embedded/result/
我使用了 JS Fiddle,因为 tinkerbin 给我带来了一些问题
干杯!
我对最初的版本进行了一些调整和改进,这是我最初提交的版本。
http://jsfiddle.net/eruecco87/PaBba/10/
http://jsfiddle.net/eruecco87/PaBba/embedded/result/
基本上改进的版本具有以下特性
– 拖放排序(jQuery UI)
– 点击评分(点击爱心)
– 区域高亮显示
– 确认弹出窗口(在评分更改时触发)
我只是这样做是为了尝试扩展功能,并注意到此处发布的大多数好想法都可以组合。
请仅根据我的原始条目进行评判
http://jsfiddle.net/eruecco87/PaBba/10/
好的,我从视觉上清理了我的纯 CSS 解决方案。这是它
http://tinkerbin.com/AcdTuJP0
感谢提供需要解决的问题,这帮助我跳出思维定势。非常感谢看到大家制作的所有炫酷视觉效果。给了我一些好主意。希望我有一些人的风格,大家真的制作了一些很酷的物品。
我希望我的 0 JavaScript 方法不会太土。
大家好,
这是我的参赛作品:http://tinkerbin.com/GzuqKZmm
适用于现代浏览器。
希望您喜欢;)
附注:我会去参加 CSSOff,所以这只是一个代表我知识的小作品 :)
我在我的示例中忘记了……抱歉语义不好:/
顺便说一句,伙计们……别用 jQuery ui 来写这个小程序……
你用大炮打小鸟……
http://tinkerbin.com/IswKwjIo
我添加了一个滚动条,这样您就可以实际看到第三个选项。抱歉,没有考虑 tinkerbin 视图区域的小框架。
我忘记了 ol……strip_tags 切断了我的标签……
不幸的是,我使用了类作为属性文本属性……我应该使用 data-*……没关系……我不会发布新版本,我认为这不太公平。在 CSSOff 上我会更加注意语义。
我将用一个非常简单的设计来尝试一下:http://tinkerbin.com/lh0bAyoy
我尝试使其简单易懂。我在该位置的活动项目中包含了onstates,如果您改变主意,它会替换现有的项目。如果项目超过三个,我可能会更改方法,但我认为在这些参数范围内,这种方法效果很好。
迫不及待地想听听你的想法!
另外,阅读了一些评论后,我同意拖放不是人们一直想做的事情。我尝试在不使用任何过于花哨的功能的情况下解决这个问题,并且选择不使用拖放。我还尝试通过隐藏下拉选项并仅显示必要且有用的内容来保持界面简洁。我想尝试使其成为一键式解决方案。
我参与过一个项目,用户有机会将其选择从1到[我们设置的值]进行排名。
单选按钮的想法很好,但它不可扩展,而且在我看来感觉不太对。
我最喜欢的是拖动,但你会惊讶地发现有多少人不懂拖动。只需让你的父母尝试一下。
因此,通过一些用户体验,我认为最好也为排名提供向上和向下按钮。同样重要的是,确保它是可视化的,并确保人们无法双击。(大多数非技术人员都会对所有东西都双击)
我的示例基于此处发布的其他示例之一(Remco Hendriksen),因为其代码简洁且具有我需要的基础。原始项目甚至具有更多用户友好的界面控件,但复制所有内容需要花费我太多时间。
总之,我的示例
http://tinkerbin.com/KuBFUbUo(我建议使用支持:first-child和:last-child的浏览器)
这是我的。
http://tinkerbin.com/q4XAsn3H
我使用了jquery sortable。我包含了这些项目,因此你无法将它们拖动到任何地方。我还添加了一些反馈,表明你的选择已更新。
http://tinkerbin.com/vYNc8dJ2
非常基本的交互。可以使用jQuery UI/sortable,但并不值得使用KB。
我应该指出,我没有在除Chrome以外的任何浏览器上测试过。
我认为这是一个不错的选择……我看到了很多好主意……但所有代码/语义都不好……我认为这是一种不错的方法……
在你的代码中有一个建议->不要使用全局函数->在私有段中创建私有函数
希望我的评论对您有所帮助!
哇,已经有很多提交了。我还没有时间阅读所有内容,所以不知道我是否提出了新的东西。
http://tinkerbin.com/9d05DBSc
只需点击你的巧克力棒,看看独占系统是如何工作的!
这个不错,因为我喜欢它的简洁性。
非常好;简洁易用的设计,代码清晰。
当你点击一个已经标记的棒,它会得到一个“1”时,几乎感觉它读懂了你的想法。
这是我的解决方案:http://tinkerbin.com/ASQNijM6
现在的代码真的很丑,可能可以做得更好……但至少它可以工作!
这个想法是,每个巧克力棒都在一列中,你可以将其上下拖动。松开后,它会捕捉到四个位置中最接近的一个(底部=未确定,顶部=最佳巧克力棒)。如果两个巧克力棒在松开时处于相同位置,则较旧的巧克力棒会被推回底部/未确定位置。
我喜欢这个实际上强制排序,并且不允许你对两个棒进行相同评分。
我不确定当你将一个棒拖到与另一个棒相同的高度时,发生的事情是否总是合乎逻辑的。特别是如果还有一个棒挡住了它正下方的位置。
是的,起初我只是想让冲突的那个向下移动一个等级,但后来我不确定如果然后发生第二次冲突应该发生什么,所以我决定让它一直向下移动,到未确定位置。
另一个改进是允许人们只需点击垂直列中的一个位置即可设置特定巧克力棒的评分,而不是点击和拖动,以适应不想或无法轻松拖放的人。
http://tinkerbin.com/rt9cpXOz
制作了一个名为jQuery插件,它可以将任何ul变成一个可拖放的排名系统。功能不太丰富,但具有一定的潜力。
这正是我想要实现的,但风格更加出色。你显然比我更了解jQuery。干得好……对于“拖放”条目来说,这是我的最爱。:-)
我的第一次体验:我最初以为可以再次将它们拖出来。我只是偶然发现,我应该点击它们。
建议
如果你想面向“触控人群”,可以使用拖放界面。
对于“鼠标用户”,可以使用某种单选框界面来禁用已选选项。
这是我的解决方案,它基于我在elated.com上找到的拖放教程。
这是我的版本.
以及在jsfiddle上的版本,因此你可以看到整个内容(并且不必点击运行来启动jQuery)。
我花了大约一个小时,包括图像处理,这是我想到的第一个想法。在制作之前我没有查看其他条目 :)
我通常去这个名为The Web Squad的地方满足我的网络需求,但最近我开始自己学习一些编程。我喜欢CSS,因为它功能强大(即使没有技巧)。
最终版本!添加了jscript回调以保持颜色在移动时的状态,提交按钮以及一些moz css。
jsFiddle版本.
现在来看看其他一些条目 :)
http://tinkerbin.com/gA92nwiv
必须在Chrome中查看才能获得更好的字体视图!
混合使用JQuery UI、CSS3和Google网络字体。无需图像 :) http://tinkerbin.com/ucFifkTI
这是我的。剧透警告:没有花哨的功能,没有拖放,没有OOP……我追求的是人性化的体验。但我可能错过了重点?
仅两个问题: http://tinkerbin.com/2002OW3G
请点击运行。谢谢!
这是我的条目http://jsfiddle.net/YasirTheLeGend/QcmDz/embedded/result
我的CSS编码很糟糕,请见谅。
http://jsfiddle.net/xpertdev/wfaxb/
这是我的。拖动每个糖果下方的滑块。
概念就像下面一样
询问你有多喜欢每种糖果。你拖动滑块并为你打开那么多糖果.. :)
希望你喜欢这个。
大家好,我已经完成了我的项目,如下所示http://jsfiddle.net/QETJM/25/embedded/result/
非常粗糙,缺乏风格,但这是我的作品……
http://tinkerbin.com/NhV4SAqB
(此版本中没有拖放)
对于只有三个选项的评分,我觉得可排序列表是最容易管理的。这是我的尝试。
另外,我非常喜欢 Ryan Singer 的 peepcode 屏幕录制。来自最佳开发者之一的关于如何解决 UI 问题的精彩见解。
http://tinkerbin.com/nsA8vFCk
看起来你需要点击运行才能使其工作。我链接了 jquery + jqueryUI,所以这似乎是原因。
http://tinkerbin.com/BZaIgqZF
你需要点击“运行”。
我的方法有两个明显的缺点:(1)它不具有可扩展性,以及(2)它比其他一些提交更依赖文本。
优点是选择只需要点击一次。
http://tinkerbin.com/S1axsjQU
今天写的。不是我的最佳作品,但当时是深夜。:D
评论、提示、建议?请告诉我。谢谢
http://tinkerbin.com/ImGWVQ8I
只需3次点击:)…我没有编写代码来自动对最后一个(第三个)进行评分,因为用户有机会重新评分…;
http://tinkerbin.com/gIvb36ko
另一个例子。
如果最后一个零食没有自动评分,js 代码会简单得多。
点击次数越少越好。
需要点击运行!
忘记说它在零食数量和容器大小方面完全可扩展。
在 FF 中我遇到了错误。已修复。
最终版本
http://tinkerbin.com/IAsab0hl
http://tinkerbin.com/Ry3CefLa
这是我使用 jQuery sortable 的版本
Dave
您需要点击运行才能使其工作:)
这是我的设计,
我是 Javascript 和 CSS 的新手,所以也许这是我能做到的最好的。
http://tinkerbin.com/HKqcZoJQ
请给我一些建议,
谢谢,
呵呵呵呵呵呵呵呵,
如果我赢了,你会把奖品寄到国外吗?寄到伊斯坦布尔?
这是我的设计
http://tinkerbin.com/TQev7DBO
它使用了 jQuery 和 CSS3 过渡和转换,并且只需三次点击即可评分。
希望您喜欢它。
更新后的设计:http://tinkerbin.com/H7szhuX2
http://tinkerbin.com/XCj8Sn9v
可在 Chrome 中使用,也应该在其他浏览器中使用。
点击并拖动圆圈以更改评分。
这是我的尝试,它利用了表单标签和 CSS。
使用了 jQuery,但仅用于限制一种糖果类型的选择。
http://tinkerbin.com/werIIpXb
欢迎建设性批评!
使用 jQuery UI 和拖放的快速方法。我认为直接操作糖果棒是一种不错的方法。它有点小问题,但我对 JS 还很陌生,所以我没有足够的知识来修复这些问题。
http://tinkerbin.com/vvsCeb3H