JQuery for Displaying Dynamic Labels such as Hotmails' Email Recipients?

Question

Am very new to JavaScript / JQuery... Am trying to create a label which is similar to the e-mail addresses that one has in their TO: text field (as input) in Hotmail.

What I am seeking is a mechanism to pass in a String name and String e-mail into a JavaScript function which will produce a label (with the person's name) along with a pencil image (for edit during mouseover) and X (delete button).

How could I create this? Is there a JQuery plug-in that I can use to make it so a text field contains this dynamic label but the end user can click on on the X (and delete it) and / or click on the pencil image and see the e-mail address and edit it?

(1) Contact Labels:

(2) Edit Contacts:

Basically, I want to pass in a name and e-mail String into a JavaScript function and come up with these labels:

(1) function createDynamicLabel(String name, String email) {}

(2) function editDynamicLabel() {}

Would this require a div tag which holds two images (can these images be clicked on)? I can't seem to envision how to create these dynamic labels using HTML/CSS/JavaScript...

Any help would be most appreciative!

Thank you for taking the time to read this.

Answer 1

I don't know any plugging based on jQuery for this.

If i would have to do this i would use some html element to group the email addresses and group then by class (viewMode and editMode).

You can make a $(emailSources).each() cicle to output the html code like this:

<div id="emailsContainer">
    <div id="johndoe@aol.com" style="min-width:10px; float:left;">
        <span></span>
        <img class="viewMode" src="pathToPencil" onclick="EmailChangeToEditMode("johndoe@aol.com");" />
        <img class="viewMode" src="pathToDelete" onclick="EmailDelete("johndoe@aol.com");" />
        <input type="text" class="editMode" />
        <img class="editMode" src="pathToOkButton" onclick="EmailSaveChanges("johndoe@aol.com");" />
    </div>
    <div id="jane@aol.com" style="min-width:10px; float:left;">
        <span></span>
        <img class="viewMode" src="pathToPencil" onclick="EmailChangeToEditMode("jane@aol.com");" />
        <img class="viewMode" src="pathToDelete" onclick="EmailDelete("jane@aol.com");" />
        <input type="text" class="editMode" />
        <img class="editMode" src="pathToOkButton" onclick="EmailSaveChanges("jane@aol.com");" />
    </div>
</div>

And those are the javascript functions:

function EmailChangeToEditMode(containerId) {
$(containerId).find(".viewMode").hide(); // this will hide all the elements of the ViewMode
$(containerId).find(".editMode").show(); // this will show all the elements of the EditMode
}

function EmailDelete(containerId) {
$(containerId).remove(); // removes from the DOM
}

function EmailSaveChanges(containerId) {
var newEmail = $(containerId).find("input[class='editMode'][type='text']").value; // gets the new Email Address typed from the user
$(containerId).find("span").text(newEmail) // sets the new email address that will be showed
$(containerId).find(".viewMode").show();
$(containerId).find(".editMode").hide();
}

Basicly you're using an container for the email address (the div). Then you have html elements for edit mode and view mode. The javascript code is using the hide(); and show(); to handle what you want to do.

You'll also have to hide all the editMode elements when you generate the html code (it starts with the viewMode elements). You'll have to set the text of the current email address on span too.

This code may not be working 100% because i wrote this without testing