我怎样才能实现一个gmail风格的标签选择器？ [英] How can I implement a gmail-style label chooser?

问题描述

实施（类似）Gmail标记邮件界面的最简单方法是什么？是否有任何JavaScript库有这样的小工具？

http://img294.imageshack.us/img294/7097/36698396.png

行为：

1. 单击下拉列表中的标签即可为消息立即添加标签。
   
2. 选中多个标签，然后点击应用添加多个标签（不确定我喜欢应用要求...）


3. 输入框以缩小标签列表的范围。如果您将其缩小到1，则按回车将应用该标签。


4. 使用快捷键L触发小部件。
   

$ b Horace - 你想要的东西真的很复杂，你应该考虑到，即使有很多预制的组件，它也需要一些时间来（更不用说 - 很漂亮:-)）。

无论如何，预制组件都很好，但我经常喜欢自己破解它，免费风格喜欢。所以这里有一些我熟悉的事情：我的简单标签演示（ warning - 我只在Firefox 3上测试过，我确信它不会在其他任何地方使用）

很漂亮，但代码非常简单，应该很容易理解。

What's the easiest way to implement (something like) Gmail's interface for labeling messages? Does any javascript library have a widget like this?

http://img294.imageshack.us/img294/7097/36698396.png

Behavior:

1. Click a label in the dropdown to immediately label the message.
2. Check multiple labels and then "Apply" to add multiple labels (not sure I like the "Apply" requirement...)
3. Type in the box to narrow down your list of labels. If you narrow it down to 1, pressing enter applies that label.
4. Trigger the widget with the shortcut key "L".

解决方案

Horace - you want something really complicated, and you should take into account that even with a lot of pre-made component, it will take some time to get something like this working (not to mention - being pretty :-) ).

Anyway, pre-made components are nice but I often like to hack it myself, free-style like. So here is something I cooked up to get you going: My simple label demo (warning - I only tested this on Firefox 3 and I'm pretty sure that it won't work in anything else).

It is far from being pretty, but the code is pretty straight forward and should be easy to understand.

这篇关于我怎样才能实现一个gmail风格的标签选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！