允许jQuery手风琴分类几个部分

时间:2014-06-25 04:17:41

标签: jquery

我有手风琴,我允许对它们进行分类。但是对于某些部分我不想允许排序,对于某些我想要允许排序。是否有任何内置选项来实现此目标。我将不胜感激任何帮助。以下是我的代码

$( "#accordion" ).accordion({
    header: "> div > h3",
    heightStyle: "content",
    collapsible: true,
    active: false,
    activate: function( event, ui){  
        //this fixes any problems with sorting if panel was open (remove to see what I am talking about)
        if(sorting)
            $(this).sortable("refresh");   
    }
})
.sortable({
    handle: "h3",
    value: "ui-state-highlight",
    start: function( event, ui ){
        //change bool to true
        sorting=true;

        //find what tab is open, false if none
        active = $(this).accordion( "option", "active" ); 

        //possibly change animation here
        $(this).accordion( "option", "animate", { easing: 'swing', duration: 0 } );

        //close tab
        $(this).accordion({ active:false });
        unloadEditors();
    },
    stop: function( event, ui ) {
        ui.item.children( "h3" ).triggerHandler( "focusout" );

        //possibly change animation here; { } is default value
        $(this).accordion( "option", "animate", { } );

        //open previously active panel
        console.log($(this).accordion);
        $(this).accordion( "option", "active", "none" );
        /*loadEditors();*/

        //change bool to false
        sorting=false;
    },
     update: function(event, ui) {
         return;
        var params = $(this).sortable('toArray');
        var pageUrl = $("#orderUrl").val();
        dataString = 'ordering='+params;            $.ajax({
            type: "POST",
            url: pageUrl,
            data: dataString,
            success: function(data) {
        }
        });
    }
});

1 个答案:

答案 0 :(得分:0)

这是一个小提琴 - FIDDLE

只需在要排序的项目上添加一个课程,然后添加"项目:" .yourclass"可分类的功能。

JS

$('#accordion').accordion({
                           collapsible: true,
                            active: false
                           });

$("#accordion").sortable({
       items: ".sortme"
});