Conjuntos plegables de jQuery Mobile, ¿abrir varios a la vez?

¿Es posible usar el estilo del widget Conjunto plegable de jQuery mobile pero hacer que funcione como un plegable normal (por ejemplo, permitir que se abra más de un plegable a la vez dentro del conjunto plegable)?

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

preguntado el 22 de mayo de 12 a las 14:05

Primero, el enlace que proporciona es de una compilación alfa, consulte la documentación actualizada: jquerymobile.com/demos/1.1.0/docs/content/… También puede tener un evento personalizado para abrir cualquiera o todos los conjuntos plegables:

¿Intentó leer esto? Eche un vistazo a las demostraciones de jquery: jquerymobile.com/demos/1.1.0/docs/content/…? Muy bien, es un bloque, pero la funcionalidad es la misma. -

6 Respuestas

Sí, es posible, pero tienes que abrirte camino así:

$('.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');

Puede hacer esto con tantos plegables en un conjunto como desee. Sin embargo, tienes que identificar de alguna manera los plegables.

Estoy haciendo esto en un formulario, así que estoy empezando a formar campos de formulario defectuosos y me abro camino hasta el conjunto contraíble:

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');

Respondido el 08 de junio de 12 a las 13:06

Otra solución que usa un pequeño truco pero sin ninguna manipulación de atributo de clase es declarar un nuevo widget que se extienda collapsible-set y desvincule el controlador de eventos no deseados.

$.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 );
});

Para usarlo, simplemente cambie el data-role a collapsible-group en lugar de collapsible-set.


Aviso: Esto funciona solo con jQuery 1.8+, para versiones anteriores cambie

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

Respondido 18 Oct 12, 14:10

Explicación adicional a la respuesta frecuente:

$('.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');

agrego estas dos lineas:

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

Respondido el 26 de diciembre de 14 a las 06:12

Podrías usar Plegables en lugar de Conjunto Plegable o Acordeón.

La diferencia con un "Conjunto plegable" es que se pueden abrir varias filas plegables a la vez.

Respondido 11 Jul 13, 15:07

Es decir, simplemente no envuelvas tu plegable en un conjunto plegable. - cbron

Esto se puede hacer deteniendo la propagación del evento después de que finalice el evento principal.

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

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

colaps es el nombre de la clase que le das a todos los plegables del conjunto. Entonces abrir y cerrar uno no afecta al resto.

Respondido el 13 de junio de 12 a las 13:06

Gracias por su solución, aunque tuve que hacer un cambio menor para que funcionara:

stopImmediatePropagation detuvo la ejecución de los controladores, por lo que ya nada se expandió ni colapsó.

Usar stopPropagation(); hace el trabajo por mí:

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

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

Respondido 11 Oct 12, 02:10

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.