用于显示动态标签的JQuery，例如Hotmails的电子邮件收件人？

Question

我对JavaScript / JQuery非常陌生......我试图创建一个类似于Hotmail中TO：text字段（作为输入）的电子邮件地址的标签。

我正在寻找的是一种机制，将String名称和String电子邮件传递给JavaScript函数，该函数将生成一个标签（带有人名）以及铅笔图像（用于鼠标悬停时编辑）和X（删除按钮）。

我怎么能创造这个？是否有一个JQuery插件，我可以使用它来使一个文本字段包含这个动态标签，但最终用户可以点击X（并删除它）和/或点击铅笔图像，看到电子邮件邮件地址并编辑它？

（1）联系标签：

（2）编辑联系人：

基本上，我想将一个名称和电子邮件字符串传递给JavaScript函数并提出这些标签：

（1）function createDynamicLabel（String name，String email）{}

（2）function editDynamicLabel（）{}

这需要一个包含两个图像的div标签（可以点击这些图像）吗？我似乎无法想象如何使用HTML / CSS / JavaScript创建这些动态标签......

任何帮助都会非常感激！

感谢您抽出宝贵时间阅读本文。

Answer 1

我不知道基于jQuery的任何插件。

如果我必须这样做，我会使用一些html元素来分组电子邮件地址和组，然后按类（viewMode和editMode）。

你可以创建一个 $（emailSources）.each（） cicle来输出这样的html代码：

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

这些是javascript函数：

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();
}

基本上，您正在使用容器作为电子邮件地址（div）。然后你有编辑模式和视图模式的html元素。 javascript代码使用hide（）;和show（）;处理你想做的事。

生成html代码时，您还必须隐藏所有editMode元素（它以viewMode元素开头）。您还必须在span上设置当前电子邮件地址的文本。

此代码可能无法正常工作，因为我在没有测试的情况下编写了此代码