Using jquery to simulate the selection of recipients in QQ mail and other effects (1)

Not very clear can first look at the QQ mail operation, or see the demonstration of this article: http://demo.jb51.net/js/email_qq/index.htm

The function has the following three steps: A recipient box, and the Group in the contact table on the right.

A pop-up contact form uses the jquery dialog component. An input smart prompt plug-in, which uses the jquery component Autocomplete.

I think everyone should know something! First of all, from the simplest start, it is to make the pop-up window dialog. This time, I didn't use iframe as I mentioned in my previous article, the official examples and usage of http://jqueryui.com/demos/dialog/ jquery are as follows, basically simple to call on the line:

$ (Function (){
$ ("# Dialog: ui-dialog"). dialog ("destroy ");

$ ("# Dialog-modal"). dialog ({
Height: 140,
Modal: true
});
});
<Div id = "dialog-modal" title = "Basic modal dialog">
<P> Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content. </p>
</Div>

In this way, you can complete the whole process of the pop-up window, which is simple and clear.

The result is to move the left to the right. I believe it is too simple. I did this. Click "hide" on the left, add it to the right, and click "hide" on the right, remove from the right and display the corresponding items on the left. Of course, there are some mouse hover effects, which are also very simple.

Finally, click "OK" to splice the right side and put it in the recipient's box. Note that the box here is not a text box, it is a DIV, but the style is very similar to the text box, so, we need to distinguish the email addresses of names with Different tags. The last one is separated by semicolons.

In this way, you can select a contact in the pop-up window. In this way, you have basically completed 1/4 of the entire function. Another one will be written next time. Thank you for your attention!
Package download http://xiazai.jb51.net/201101/yuanma/email_qq.rar