jQuery UI可排序，具有最小化和最大化

debugcn 发表于 Dev

拉吉尼坎斯

我正在为当前项目使用jQuery UI Sortable，而我刚刚从jQuery网站找到了，我希望Feed最大化而其他则最小化。

我的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();
});

ey烯

给一个ID来喂div并添加这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();
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。