Envelopper le texte dans un multiple <select> list

Je souhaite donner à l'utilisateur la possibilité de sélectionner plusieurs éléments (qui se trouvent chacun à environ un paragraphe). Le problème est qu'un multiple select standard en html est (autant que je sache) une seule ligne par choix. C'est un problème car la mise en page devient très difficile si je laisse la ligne aller longtemps. De plus, si je ne fais que tronquer la ligne, l'essentiel du texte est perdu. Y at-il un moyen de contourner cela avec javascript? Existe-t-il une alternative qui permet à tout le texte d'être affiché et de renvoyer les valeurs dans une liste délimitée par deux-points?Envelopper le texte dans un multiple <select> list

Source

2009-11-24 jle

Il y a plusieurs façons de faire cela. Le plus simple serait de simplement mettre une case à cocher à côté de chaque paragraphe. L'utilisateur peut cocher les cases à côté des paragraphes de son choix.

Si vous disposez d'une interface plus lisse à l'esprit, vous pouvez étendre cette idée en se cachant les cases à cocher avec CSS, puis en utilisant JavaScript pour ~~faire les cases cochées lorsque le paragraphe correspondant est cliqué et~~ mettre en évidence le paragraphe (en appliquant un CSS class) pour le montrer comme sélectionné. Un framework comme jQuery simplifiera bien ce processus.

Edit: Maintenant que je pense, aussi longtemps que vous mettez chaque paragraphe dans un élément <label> vous ne même pas besoin de JavaScript pour cocher/décocher les cases cachées; Cela se produira automatiquement tant que l'attribut for du libellé est correctement défini. Tout ce dont vous avez besoin pour JavaScript est de mettre en surbrillance/non-marquer les étiquettes.

Voici une implémentation naïve en utilisant jQuery:

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
    input.hidden-checkbox { display: none; } 
    label.multi-select { display: block; cursor: pointer; } 
    label.checked { background-color: #ddd; } 
</style> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('input.hidden-checkbox').bind('change', function(e) { 
     var checkBox = $(e.target), 
      label = $('label[for=' + checkBox.attr('id') + ']'); 

     if(label) { 
     if(checkBox.attr('checked')) { 
      label.addClass('checked'); 
     } else { 
      label.removeClass('checked'); 
     } 
     } 
    }); 
    }); 
</script> 
</head> 
<body> 

<form> 
    <input type="checkbox" value="1" 
      name="paragraph[]" id="paragraph-1" 
      class="hidden-checkbox"/> 
    <label for="paragraph-1" class="multi-select">Text of paragraph 1. 
    As long as you want. Lorem ipsum dolor sit amet...</label> 

    <input type="checkbox" value="2" 
      name="paragraph[]" id="paragraph-2" 
      class="hidden-checkbox" class="multi-select" /> 
    <label for="paragraph-2" class="multi-select">Paragraph 2's text. 
    Lorem ipsum dolor sit amet...</label> 

    <!-- ...etc... --> 
</form> 
</body> 
</html>

Source

2009-11-24 03:51:26

+1 pour l'amélioration progressive. Serait assez facile à mettre en œuvre même sans un cadre JS. – bobince

Envelopper le texte dans un multiple <select> list

Répondre

Questions connexes