jQuery UI可以使用最小化和最大化进行排序

时间:2013-07-09 07:54:27

标签: jquery jquery-ui

我正在为我当前的项目使用jQuery UI Sortable,我刚从jQuery网站找到,我想 Feeds 最大化,其他都是最小化。

我的jsFiddle:jsFiddle

有任何想法或建议吗?感谢。

我的代码:

$(function() {
    $(".column").sortable({
        connectWith: ".column"
    });
    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all").find(".portlet-header").addClass("ui-widget-header ui-corner-all").prepend("<span class='ui-icon ui-icon-minusthick'></span>").end().find(".portlet-content");
    $(".portlet-header .ui-icon").click(function() {
        $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });
    $(".column").disableSelection();
});

1 个答案:

答案 0 :(得分:4)

为Feed提供ID并添加3行,DEMO http://jsfiddle.net/yeyene/7DM3Q/2/

// to open only feed
$('.portlet-content').css({'display':'none'});
$('#feed .portlet-content').css({'display':'block'});
// to change plus icon of feed
$("#feed .portlet-header span").removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");

JQUERY

$(function () {
    $('.portlet-content').css({'display':'none'});
    $('#feed .portlet-content').css({'display':'block'});

    $(".column").sortable({
        connectWith: ".column"
    });
    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
        .find(".portlet-header")
        .addClass("ui-widget-header ui-corner-all")
        .prepend("<span class='ui-icon ui-icon-minusthick'></span>")
        .end()
        .find(".portlet-content");

    $("#feed .portlet-header span").removeClass("ui-icon-minusthick").addClass("ui-icon-plusthick");

    $(".portlet-header .ui-icon").click(function () {
        $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });
    $(".column").disableSelection();
});