Сортировка:
Я хотел бы реализовать фразы в неупорядоченном списке (ul), что делает его так просто, как
$("#ulId").sortable();
Вы можете размещать элементы ul / li рядом друг с другом аналогично тому, как вы делаете горизонтальные навигационные меню из элементов ul.
Кнопка вызова:
Просто используйте шаблон li, похожий на этот
<li id="text1Wrapper">
<span id="text1"
onmouseover="javascript:$('text1Remove').fadeIn();"
onmouseout="javascript:$('text1Remove').fadeOut();"
onclick="javascript:$('text1Content').
replaceWith(
$(document.createElement('input'))
.attr('type','text')
.val($('text1Content').text())
);">
<span id="text1Content">Text Here</span>
<img id="text1Remove"
style="display: none;"
src="./x.jpg" alt="Remove"
onclick="javascript:$(this).parent().remove();"
/>
</span>
</li>
Краткое описание:
Событие span over mouse указывает на исчезновение jquery с помощью кнопки удаления (поэтому при наведении курсора кнопка удаления становится доступной).
Событие span mouse out указывает jquery на исчезновение кнопки удаления, когда она больше не нужна (поэтому, когда вы убираете мышь из li, кнопка удаления больше не видна)
При щелчке по диапазону диапазон заменяется текстовым полем, содержащим содержимое диапазона. Я оставлю «сохранить изменения» в качестве упражнения для читателя, поскольку по сути это то же самое, но в обратном порядке.
Стиль тега Img имеет отображение: нет, чтобы скрыть его изначально. По сути, это конечный продукт fadeOut (), но без затухания.
Событие нажатия кнопки «Удалить» получает родительский объект (li) и удаляет его, а также всех дочерних элементов из домена.
Обратите внимание, что события помещены здесь только потому, что это казалось логичным местом, чтобы объяснить это. Все события во внешнем теге SPAN - бесполезная трата пространства, так как все они будут переопределены, когда мы клонируем узел в следующем разделе.
Вставка на страницу:
Все, что вам нужно сделать сейчас, это
var cloneLi = $('#text1Wrapper').clone();
cloneLi.attr('id', 'text2Wrapper');
var cloneSpan = cloneLi.children('#text1').attr('id', 'text2');
var cloneContent = cloneSpan.children('#text1Content').attr('id', 'text2Content');
var cloneRemove = cloneSpan.children('#text1Remove').attr('id', 'text2Remove');
Затем вам нужно будет изменить функции mouseover, mouseout и onclick внешнего диапазона, используя события jquery:
cloneSpan.mouseover(function(e) {
// Insert functionality from template here
});
cloneSpan.mouseout(function(e) {
// Insert functionality from template here
});
cloneSpan.click(function(e) {
// Insert functionality from template here
});