邮箱电子邮件地址，如 hotmail答案

【问题标题】：box email addresses like hotmail邮箱电子邮件地址，如 hotmail
【发布时间】：2011-04-25 18:36:05
【问题描述】：

我不知道这叫什么，因此很难在网上找到任何参考资料。在 hotmail 上，当您输入电子邮件时，它会在同一行上将电子邮件一个接一个地放入矩形块中，并带有编辑和删除电子邮件的选项。这是什么，是否有任何示例代码/框架来实现类似的东西？

谢谢。

【问题讨论】：

【解决方案1】：

它通常是UL，在里面你有LI，它们要么是被设计成在它们周围有一个盒子的元素（在你的情况下是电子邮件），要么是一个无边框的INPUT盒子，它融入了周围的@ 987654328@同背景。 JavaScript 代码根据键盘输入处理框LIs 的删除和插入。我不知道它的框架支持，但它可能存在。

编辑：它存在。 http://plugins.jquery.com/plugin-tags/tags 用于 jQuery 选项。

【讨论】：

所以它不是 jquery，只是为了确定？
嗯，我会玩它，看看它是否有效，然后回发。不过还是谢谢。
插件链接已关闭。 +1 仍然
@ArmelLarcier：还有很多选择。 Tags Manager, jQuery Tagit, jQuery Tags Input...

【解决方案2】：

我一直在寻找同样的东西，并查看了它的源代码。似乎他们正在使用 Amadan 所说的 UL，但它的设置是这样的：

<div id="container">
    <ul id="email_list">
       <li class="email_token valid" id="a@a.com" email="a@a.com">
            <p>a@a.com</p>
            <span class="delete_link">x</span>
       </li>
       <li class="email_token valid" id="b@b.com" email="b@b.com">
            <p>b@b.com</p>
            <span class="delete_link">x</span>
       </li>
       <li class="email_input_container">
            <textarea class="email_input_field"></textarea>
       </li>
    </ul>
</div>

编辑：我最终实现了它，它运行得非常好！

【讨论】：

【解决方案3】：

尝试使用 Firefox+Firebug 来检查 hotmail 中的元素。它将帮助您了解自己。

【讨论】：