Geek asks and answers

JQuery Mobile Foldable kits open multiple times?

Is it possible to use the style of the Folding widget widget from jQuery mobile, but it functions like a normal folding widget (for example, allowing more than one legible to open immediately in a collapsible set)?

http://jquerymobile.com/demos/1.1.0/docs/content/content-collapsible-set.html

+3
source share
6 answers

Yes, it is possible, but you have to hack your way like this:

$('.YOUR_COLLAPSIBLE_CLASS.ui-collapsible.ui-collapsible-collapsed')
    .attr('data-collapsed',false).removeClass("ui-collapsible-collapsed")
    .find('.ui-collapsible-content').removeClass('ui-collapsible-content-collapsed');

You can do this with as many collages in the set as you want. You must somehow identify the collapse.

I do this on the form, so I begin to fill out the wrong form fields and work until the collapsible set:

var el = my_faulty_form_field;

el.attr('placeholder', YOUR_ERROR_MSG)
    .closest('.ui-collapsible.ui-collapsible-collapsed')
      .attr('data-collapsed',false).removeClass("ui-collapsible-collapsed")
        .find('.ui-collapsible-content').removeClass('ui-collapsible-content-collapsed');
+2
source

, , , , collapsible-set, .

$.widget( "mobile.collapsiblegroup", $.mobile.collapsibleset, {
    options: {
        initSelector: ":jqmData(role='collapsible-group')"
    },
    _create: function() {
        $.mobile.collapsibleset.prototype._create.call(this);
        var $el = this.element;
        if (!$el.jqmData('collapsiblebound2')) {
            $el.jqmData('collapsiblebound2', true)
                .unbind('expand')
                .bind('expand', $._data($el.get(0), 'events')['collapse'][0]);
        }
    }
});

//auto self-init widgets
$( document ).bind( "pagecreate create", function( e ) {
    $.mobile.collapsiblegroup.prototype.enhanceWithin( e.target );
});

, data-role collapsible-group collapsible-set.

: jQuery 1.8+,

$._data($el.get(0), 'events') $el.data('events')

+2

:

$('.YOUR_COLLAPSIBLE_CLASS.ui-collapsible.ui-collapsible-collapsed')
    .attr('data-collapsed',false).removeClass("ui-collapsible-collapsed")
    .find('.ui-collapsible-content').removeClass('ui-collapsible-content-collapsed');

i :

$( '.YOUR_COLLAPSIBLE_CLASS h2' ).removeClass( 'ui-collapsible-heading-collapsed' );
$( '.YOUR_COLLAPSIBLE_CLASS h2 a' ).removeClass( 'ui-icon-plus' ).addClass( 'ui-icon-minus' );
+2

Collapsibles .

" " , .

+1

, .

$('.collaps').bind('expand', function (evt) {
  evt.stopImmediatePropagation();
})

$('.collaps').bind('collapse', function (evt) {
  evt.stopImmediatePropagation();
});

collaps - , . .

0

Thanks for your decision - although I had to make a small change to get it working:

stopImmediatePropagation stopped any handlers to be executed, so nothing expands or collapses.

Using stopPropagation();does this work for me:

$('.collaps').bind('expand', function (evt) {
  evt.stopPropagation();
});

$('.collaps').bind('collapse', function (evt) {
  evt.stopPropagation();
});
0
source

More articles:


All Articles