【问题标题】:Allow jQuery accordion sorting for few sections允许对几个部分进行 jQuery 手风琴排序
【发布时间】:2014-06-25 04:17:41
【问题描述】:

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

$( "#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) {
        }
        });
    }
});

【问题讨论】:

标签: jquery


【解决方案1】:

这是一个可行的小提琴 - FIDDLE。

只需在要排序的项目上放置一个类,然后将“items:”.yourclass”添加到可排序函数中。

JS

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

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

【讨论】:

    猜你喜欢
    • 2021-04-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-12-26
    • 1970-01-01
    • 2021-12-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多