JQuery для отображения динамических меток, таких как получатели электронной почты Hotmails? - PullRequest
Новая
       11

JQuery для отображения динамических меток, таких как получатели электронной почты Hotmails?

3 голосов
/ 31 июля 2011

Я очень новичок в JavaScript / JQuery ... Я пытаюсь создать ярлык, похожий на адреса электронной почты, которые есть в их текстовом поле TO: (в качестве ввода) в Hotmail.

Я ищу механизм передачи имени String и электронной почты String в функцию JavaScript, которая создаст метку (с именем человека) вместе с изображением карандаша (для редактирования при наведении курсора) и X ( кнопка удаления).

Как я мог создать это? Есть ли плагин JQuery, который я могу использовать, чтобы сделать так, чтобы текстовое поле содержало эту динамическую метку, но конечный пользователь может щелкнуть по X (и удалить его) и / или щелкнуть по изображению карандаша и увидеть электронное письмо? адрес электронной почты и редактировать его?

(1) Контактные этикетки:

Dynamic Contact Labels

(2) Редактировать контакты:

enter image description here

По сути, я хочу передать имя и строку электронной почты в функцию JavaScript и предложить следующие метки:

(1) функция createDynamicLabel (String name, String email) {}

(2) функция editDynamicLabel () {}

Требуется ли для этого тег div, содержащий два изображения (можно ли нажать на эти изображения)? Кажется, я не представляю, как создавать эти динамические метки с использованием HTML / CSS / JavaScript ...

Любая помощь будет самой благодарной!

Спасибо, что нашли время, чтобы прочитать это.

1 Ответ

0 голосов
/ 09 августа 2011

Я не знаю никаких подключений на основе 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 (); и показать (); справиться с тем, что вы хотите сделать.

Вам также придется скрывать все элементы editMode при создании html-кода (он начинается с элементов viewMode). Вам также нужно установить текст текущего адреса электронной почты на span.

Этот код может не работать на 100%, потому что я написал это без тестирования

...