Вкладки пользовательского интерфейса jQuery: как реализовать перетаскивание AJAX? - PullRequest
Новая
       5

Вкладки пользовательского интерфейса jQuery: как реализовать перетаскивание AJAX?

0 голосов
/ 20 января 2011

Я использую виджет «Закладки пользовательского интерфейса jQuery» и хочу изменить порядок перетаскивания.У меня есть значение «отображать рейтинг» на каждой из этих вкладок, которое определяет, в каком порядке их отображать. Мне нужно иметь возможность сохранять порядок этих вкладок, когда они переупорядочиваются, поэтому мне нужно выполнить AJAX.

Можете ли вы дать мне краткое руководство о том, как мне этого добиться?Или укажите мне учебник, который объясняет, как это сделать?

Ответы [ 2 ]

1 голос
/ 20 января 2011

Это на самом деле довольно просто.Сначала вы выбираете .ui-tabs-nav и говорите, что их можно сортировать по оси x.Затем вы можете сериализовать порядок вкладок.Затем отправьте эти данные в ваше приложение с помощью вызова AJAX. 

$('#TabContainer').tabs();
$('#TabContainer .ui-tabs-nav').sortable({
    axis: 'x',
    update: function(event, ui){
        var data = $('#TabContainer .ui-tabs-nav').sortable('serialize');
        $.ajax({
            url: '/events/update-tab-order',
            data: data,
            type: 'POST',
            mode: 'abort'
        });
    }
});

Единственная сложность заключается в том, что вы должны указать идентификатор для элементов списка в формате groupname_identifier.Например: 

<div id="TabContainer">
    <ul>
        <li id="MyTabs_123"><a href="#tab0">Tab 1</a></li>
        <li id="MyTabs_124"><a href="#tab1">Tab 2</a></li>
        ...etc
    </ul>
    ...tab content goes here
</div>

Тогда, когда ваше приложение получит данные POST, это будет массив, который выглядит следующим образом: 

$_POST['MyTabs']

array(
    0 => '123',
    1 => '124'
)
0 голосов
/ 20 января 2011

Вы можете попробовать добавить сортировку jQuery UI, например: 

$(".list").sortable({
    handle: ".sortableHandle", // Selector for the element that is dragable
    update: function (event, ui)
    {
        // Update the sort of the list via AJAX
        var IdArray = "";
        $(".sortable tr").each(function ()
        {
            IdArray += $(this).attr("id").split("sortList_")[1] + ","; // the tr has an id with this format: "sortList_ID"
        });

        $.ajax(
                {
                    url: "UpdateListSorting.html",
                    data: { "listSorting": IdArray },
                    type: "POST",
                    mode: "abort"
                });
    }
});

Режим: "abort" является расширением вызова ajax: http://www.onemoretake.com/2009/10/11/ajaxqueue-and-jquery-1-3/

Это прерываетпредыдущие вызовы и сохраняет только текущий, поскольку нет необходимости сохранять устаревшую сортировку.

...