Использование сортировки с Tag-it jqueryui

Я использовал плагин tag-it из https://github.com/aehlke/tag-it (демо - http://aehlke.github.com/tag-it/examples.html).

В этом коде есть возможность отображать введенные теги в другом поле ввода, текстовой области и т. д. Первый вариант -

        $('#singleFieldTags').tagit({
            availableTags: sampleTags,

            singleField: true,
            singleFieldNode: $('#mySingleField')
        });

Здесь id - #singleFieldTags - это поле ввода, которое представляет собой список, подобный <ul, а id - #mySingleField отображает теги, упорядоченные по списку, с запятыми между ними.

Все теги, добавленные и удаленные в #singleFieldTags, отображаются в #mySingleField. Поскольку нет встроенной функции сортировки с tag-it, добавление sortable() для изменения порядка тегов в #singleFieldTags не меняет порядок тегов в #mySingleField.

Второй вариант представляет собой равнину только с #singleFieldTags следующим образом:

        $('#singleFieldTags').tagit({
            availableTags: sampleTags,
        });

Хотя в tag-it.js есть , значение не отображается в таблице mysql после отправки формы php, так как приведенный выше список тегов помещается между <li></li>.

Как можно сделать теги сортируемыми и гарантировать, что такое же расположение тегов в поле списка <ul будет отображаться в <textarea, как и в первом варианте? Или как может работать второй вариант сортировки тегов в одном поле <input и возможность его отправки через форму?

РЕДАКТИРОВАТЬ: Существует аналогичный плагин, такой как Tag-it, называемый tagit здесь: http://webspirited.com/tagit/ . Этот плагин имеет сортировку с полем ввода, означающим, что теги были заменены местами, и при отправке в форму они будут отображаться в порядке сортировки. Однако недостатком является то, что у него есть пользовательские темы для тем, которые не похожи и даже не могут быть связаны с теми, что есть в пользовательском интерфейсе jQuery (jqueryui.com).

Но, с другой стороны, плагин tag-it (не tagit) может быть загружен с этими темами, но не предоставляет функцию сортировки.


person Javier Brooklyn    schedule 28.01.2013    source источник
comment
Themeroller (jqueryui.com/themeroller) является частью JQueryUI. Плагин Tag-it позволяет загружать совместимую тему JQUeryUI. Так в чем проблема использовать второй плагин, который вы нашли: Tag-it? Вам просто нужно указать тему файла CSS, которую вы в настоящее время используете на своем сайте, для плагина tag-it, или я что-то упустил?   -  person sdespont    schedule 09.02.2013
comment
Я пытался link href подключиться к этим (jqueryui.com/themeroller) темам, но они не работают с тегом - он как тег - у него есть предопределенные темы в определенной папке, когда вы загружаете его, файл css в этих темах очень отличается от тех, что находятся на jqueryui.com/themeroller, и они даже не выглядят так хорошо, как оригинальный темороллер jQuery. .   -  person Javier Brooklyn    schedule 09.02.2013


Ответы (1)


Вот решение, в котором используется плагин tag-it, потому что я понимаю, что недостающая функциональность объясняется в вашей цитате "... добавление sortable() для изменения порядка тегов в #singleFieldTags не меняет порядок тегов в #mySingleField".

Чтобы «#mySingleField» отражал новый порядок сортировки, я добавляю обработчик события остановки sortable():

$('#singleFieldTags').sortable({
    stop: function(event,ui) {
        $('#mySingleField').val(
            $(".tagit-label",$(this))
                .clone()
                .text(function(index,text){ return (index == 0) ? text : "," + text; })
                .text()
        );
    }
});

а также

$('#singleFieldTags2').siblings(".tagit").sortable({
    stop: function(event,ui) {
        $('#singleFieldTags2').val(
            $(".tagit-label",$(this))
                .clone()
                .text(function(index,text){ return (index == 0) ? text : "," + text; })
                .text()
        );
        console.log( $('#singleFieldTags2').val() );        // just for reference
    }
});

Вот jsfiddle, демонстрирующий функциональность (добавлена ​​функциональность для одного поля ввода)

person marty    schedule 10.02.2013
comment
Да, это работает хорошо, можно ли будет использовать эту функцию только для одного поля ввода? Я уверен, что это не будет так сложно для вас теперь, когда вы решили сортировку тегов для 2 полей, потому что кажется, что плагин будет неполным или предвзятым только к 2 полям, предположим, если в какой-то момент времени я захочу переключиться на простой ввод и обнаружите, что эти теги не сортируются. - person Javier Brooklyn; 10.02.2013
comment
@ Хавьер, да, это было просто, я добавил сортировку для простого поля ввода в jsfiddle. - person marty; 11.02.2013
comment
Превосходно! Спасибо за помощь! - person Javier Brooklyn; 11.02.2013