jquery-ui - 邮箱电子邮件地址，如 hotmail

Question

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

谢谢。

Answer 1

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

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

Answer 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>

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

Answer 3

尝试使用 Firefox+Firebug 来检查 hotmail 中的元素。它会帮助你发现自己。