box email addresses like hotmail

I don't know what this is called hence having a hard time finding any开发者_开发百科 reference on the net for this. On hotmail when you enter an email it boxes the email into a rectange block one by one on the same line with options to edit and delete the email. What is this and are there any sample code/frameworks to implement something similar?

Thanks.

It's normally a UL, and inside it you have LI which are either elements styled to have a box around them (emails, in your case), or a borderless INPUT box which blends into the surrounding UL of the same background. JavaScript code handles deletion and insertion of box LIs according to keyboard input. I am not aware of framework support for it, but it may exist.

EDIT: It exists. http://plugins.jquery.com/plugin-tags/tags for jQuery options.

I was looking for the same thing, and upon looking at the source code for it. It seems that they are using a UL like Amadan said, but its set up like this:

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

EDIT: I ended up implementing it and it runs wonderfully!

Try to use Firefox+Firebug to inspect the elements in hotmail. It'll help you to find out yourself.