He cuadrícula de imágenes en miniatura en un formulario, y me gustaría que el usuario podrá seleccionar varias imágenes, y su elección se presentó con el formulario.

Mis requisitos son:

  • Solo clic para seleccionar la imagen, y la selección se alimenta de nuevo al usuario, correo.g cambiando la frontera.
  • Degradar correctamente a sólo html, y seguir trabajando.
  • Cruz navegador/dispositivo de apoyo (se necesita para trabajar en el ipad por ejemplo)

Puede todos mis requisitos estar satisfecho?

gracias.

  • ¿qué entiende usted por Degrade gracefully to just html, and still work.??
  • Podría no ser exactamente lo que estás buscando, pero este tuto podría ser de uso: blogs.sitepoint.com/controlling-lists-with-jquery
  • Yo estaba anticipando un javascript solución, pero quería dejar en claro que la solución no puede depender de javascript para funcionar. Acepto que un cambio de frontera con sólo HTML no es posible.
  • si usted realmente quiere que funcione sin javascript y sólo por la simple HTML, a continuación, que se habrán de utilizar las casillas de verificación siguiente de la derecha o en la parte superior (depende de tu estilo css) de sus imágenes, de modo que el usuario puede revisar estos.
  • usted puede hacer esto de esta manera: miniatura y en la parte superior o a la derecha junto a usted pone su casilla de verificación. a continuación, a través de jquery se puede ocultar las casillas de verificación y haga clic en adjuntar su eventos a las miniaturas que marcar o desmarcar las casillas de verificación. por lo tanto usted tiene soporte para navegadores compatibles con jquery y no apoyar con javascript. si el navegador no soporta el js, a continuación, las casillas de verificación no se oculta y las casillas de verificación son utilizables como de costumbre. si hace el navegador, a continuación, que se oculta y la fantasía js acciones será usado en su lugar.
  • Eso es lo que yo estaba pensando, pero luego, me gustaría ser capaz de capa de javascript en la parte superior de esta para refinar más la sensación de cambiar los bordes de las imágenes seleccionadas)
  • como he dicho. imagen. casilla de verificación junto a la imagen. en su $(document).lad(function(){...}); hacerlo $(".checkbox").hide(); luego $(".image").click(function(){doyourstuff;});
  • Mi comentario anterior fue en respuesta a tu comentario de partida «si usted realmente quiere que funcione» que se puso un poco fuera de sincronización. ¿Quieres publicar el anterior como una respuesta, puedo aceptarlo?

3 Comentarios

  1. 5

    Que usted podría hacer algo como esto: miniatura y en la parte superior o a la derecha junto a usted pone su casilla de verificación. A continuación, a través de jquery se puede ocultar las casillas de verificación y haga clic en adjuntar su eventos a las miniaturas que marcar o desmarcar las casillas de verificación. por lo tanto usted tiene soporte para navegadores compatibles con jquery y no apoyar con javascript. si el navegador no soporta el js, a continuación, las casillas de verificación no se oculta y las casillas de verificación son utilizables como de costumbre. si hace el navegador, a continuación, que se oculta y la fantasía js acciones será usado en su lugar.

    por ejemplo:

    <div id="container1" class="container">
        <img>
        <input class="cbox" type="checkbox" name="foo[]" value="foo1"/>
    </div>
    <div id="container2" class="container">
        <img>
        <input class="cbox" type="checkbox" name="foo[]" value="foo1"/>
    </div>
    
    $(document).lad(function(){
        $(".container .cbox").hide();
        $(".container img").click(function(){
            //do the stuff you need to do like
           var $checkbox = $(this).parent().find(".cbox");
           $checkbox.attr('checked', !$checkbox.attr('checked'));
        });
    });

    probarlo. esto puede funcionar, pero me dan ningún tipo de garantía.

  2. 1

    Para un javascript enfoque el violín:

    Marcado:

    <div>
        <img data-id="1" src="" />
        <input type="hidden" name="images[ ]" />
    </div>

    Guión:

    $('img').live('click', function(){
        var $this = $(this);
        $this.toggleClass('selected');
    
        if($this.hasClass('selected'))
            $this.next(':hidden').val($this.data('id'))
        else
            $this.next(':hidden').val('');
    });
    • Si este enfoque fue utilizado usted no necesita tener una entrada por cada imagen, sólo uno sería suficiente.
    • Gracias Josías, pero no es bueno si tienen JS desactivado. Tal vez podría ser adaptado para el uso de casillas de verificación en lugar de los insumos.
    • btw live() en comparación con el delegado() es muy muy malo! lea aquí: jquerybyexample.blogspot.com/2010/08/…
  3. 0

    Si quieres tales complicaciones como cambiar el color del borde de las miniaturas seleccionadas, usted necesita tener javascript para hacerlo. Especialmente si usted necesita un navegador cruz de apoyo.

    Como para cuando javascript está desactivado, que supongo, es lo que significaba en su segundo punto, que acababa de utilizar las casillas de verificación para las miniaturas y permitir que el usuario seleccione lo que él/ella necesita.

Dejar respuesta

Please enter your comment!
Please enter your name here