Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 9.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182
  1. <!doctype html>
  2. <html lang=fr>
  3. <head>
  4. <!-- Always define the charset before the title -->
  5. <meta charset=utf-8>
  6. <title>Une solution élégante au select multiple — Biologeek — David Larlet</title>
  7. <!-- Define a viewport to mobile devices to use - telling the browser to assume that the page is as wide as the device (width=device-width) and setting the initial page zoom level to be 1 (initial-scale=1.0) -->
  8. <meta name="viewport" content="width=device-width, initial-scale=1"/>
  9. <!-- Fake favicon, to avoid extra request to the server -->
  10. <link rel="icon" href="data:;base64,iVBORw0KGgo=">
  11. <link type="application/atom+xml" rel="alternate" title="Feed" href="/david/log/" />
  12. <link rel="manifest" href="/manifest.json">
  13. <link rel="stylesheet" href="/static/david/css/larlet-david-_J6Rv.css" data-instant-track />
  14. <noscript>
  15. <style type="text/css">
  16. /* Otherwise fonts are loaded by JS for faster initial rendering. See scripts at the bottom. */
  17. body {
  18. font-family: 'EquityTextB', serif;
  19. }
  20. h1, h2, h3, h4, h5, h6, time, nav a, nav a:link, nav a:visited {
  21. font-family: 'EquityCapsB', sans-serif;
  22. font-variant: normal;
  23. }
  24. </style>
  25. </noscript>
  26. <!-- Canonical URL for SEO purposes -->
  27. <link rel="canonical" href="https://larlet.fr/david/biologeek/archives/20080810-une-solution-elegante-au-select-multiple">
  28. </head>
  29. <body>
  30. <div>
  31. <header>
  32. <nav>
  33. <p>
  34. <small>
  35. Je suis <a href="/david/" title="Profil public">David Larlet</a>, <a href="/david/pro/" title="Activité professionnelle">artisan</a> du web qui vous <a href="/david/pro/accompagnement/" title="Activité d’accompagnement">accompagne</a><span class="more-infos"> dans l’acquisition de savoirs pour concevoir des <a href="/david/pro/produits-essentiels/" title="Qu’est-ce qu’un produit essentiel ?">produits essentiels</a></span>. <span class="more-more-infos">Discutons ensemble d’une <a href="/david/pro/devis/" title="En savoir plus">non-demande de devis</a>.</span> Je partage ici mes <a href="/david/blog/" title="Expériences bienveillantes">réflexions</a> et <a href="/david/correspondances/2017/" title="Lettres hebdomadaires">correspondances</a>.
  36. </small>
  37. </p>
  38. </nav>
  39. </header>
  40. <section>
  41. <h1 property="schema:name">Une solution élégante au select multiple</h1>
  42. <article typeof="schema:BlogPosting">
  43. <div property="schema:articleBody">
  44. <p>Un <a href="http://www.ryancramer.com/journal/entries/select_multiple/">plugin jQuery</a> permet de sélectionner via une liste déroulante et d'ordonner les résultats :</p>
  45. <p>
  46. <img
  47. src="/static/david/biologeek/images/select_multiple.png"
  48. alt="Select multiple avec le plugin jQuery asm"
  49. style="margin: 0pt auto; display: block;"/>
  50. </p>
  51. <p>C'est pas encore l'idéal mais ça reste une meilleure solution que celle implémentée par défaut dans les navigateurs, il serait temps de faire évoluer un peu certaines interfaces utilisateurs obsolètes...</p>
  52. <p>Vous avez mieux ?</p>
  53. </div>
  54. </article>
  55. <footer>
  56. <h6 property="schema:datePublished">— 10/08/2008</h6>
  57. </footer>
  58. </section>
  59. <section>
  60. <div>
  61. <h3>Articles peut-être en rapport</h3>
  62. <ul>
  63. <li><a href="/david/biologeek/archives/20080808-les-10-meilleurs-geeks-du-web-francais/" title="Accès à Les 10 meilleurs geeks du web français">Les 10 meilleurs geeks du web français</a></li>
  64. <li><a href="/david/biologeek/archives/20080806-qui-peut-changer-votre-vie/" title="Accès à Qui peut changer votre vie ?">Qui peut changer votre vie ?</a></li>
  65. <li><a href="/david/biologeek/archives/20080725-notifications-atom-pubsub-xmpp-et-oauth/" title="Accès à Notifications, Atom PubSub, XMPP et OAuth">Notifications, Atom PubSub, XMPP et OAuth</a></li>
  66. </ul>
  67. </div>
  68. </section>
  69. <section>
  70. <div id="comments">
  71. <h3>Commentaires</h3>
  72. <div class="comment" typeof="schema:UserComments">
  73. <p class="comment-meta">
  74. <span class="comment-author" property="schema:creator">Bastien</span> le <span class="comment-date" property="schema:commentTime">11/08/2008</span> :
  75. </p>
  76. <div class="comment-content" property="schema:commentText">
  77. <p>Pour ma part j&#39;aurais tendance à dire qu&#39;une solution pas mal est celle Facebook quand on veut partager ou inviter des gens:</p>
  78. <p>On voit toutes les possibilités et on clique sur celle qu&#39;on veut et elles s&#39;highlightent. Le tout accompagné d&#39;une textbox plus haut qui permet de filtrer à la volée les données.</p>
  79. </div>
  80. </div>
  81. <div class="comment" typeof="schema:UserComments">
  82. <p class="comment-meta">
  83. <span class="comment-author" property="schema:creator">loïc m.</span> le <span class="comment-date" property="schema:commentTime">11/08/2008</span> :
  84. </p>
  85. <div class="comment-content" property="schema:commentText">
  86. <p>pour moi ça serai d&#39;utiliser des checkbox, mais avec l&#39;inconvénient quand la liste est trop grande...<br />une liste de checkbox dans un div en overflow ?<br />peut-être une piste à suivre.<br />Il me semble que j&#39;avais vus des solutions intéressantes dans ce sens un jour... vas-y pour retrouver le lien maintenant... -_-&quot;</p>
  87. </div>
  88. </div>
  89. <div class="comment" typeof="schema:UserComments">
  90. <p class="comment-meta">
  91. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">11/08/2008</span> :
  92. </p>
  93. <div class="comment-content" property="schema:commentText">
  94. <p>@Bastien : oui, c&#39;est celle que l&#39;on utilise sur mixin pour sélectionner les personnes impliquées dans un évènement. C&#39;est en effet une approche intéressante mais je sais pas si c&#39;est très facile à scanner/comprendre d&#39;un seul coup d&#39;œil.</p>
  95. <p>@loïc m. : <a href="http://www.c82.net/posts.php?id=25">http://www.c82.net/posts.php?id=25</a> ?</p>
  96. </div>
  97. </div>
  98. <div class="comment" typeof="schema:UserComments">
  99. <p class="comment-meta">
  100. <span class="comment-author" property="schema:creator">Louis Pontoise</span> le <span class="comment-date" property="schema:commentTime">11/08/2008</span> :
  101. </p>
  102. <div class="comment-content" property="schema:commentText">
  103. <p>Je suis d&#39;accord avec l&#39;avis général : pour l&#39;instant le mieux reste la liste de checkboxes, avec des filtres si beaucoup de données.</p>
  104. <p>Quant à l&#39;exemple sous JQuery, il serait facilement utilisable sous Mootools, via le plugin Sortable. Démo similaire (il suffit de changer l&#39;entrée des données d&#39;un input à une droplist) :</p>
  105. <p><a href="http://demos.mootools.net/Dynamic.Sortables">http://demos.mootools.net/Dynamic.Sortables</a></p>
  106. <p>PS : on ne peut pas utiliser d&#39;HTML dans les commentaire sur *ce* blog ? o_o</p>
  107. </div>
  108. </div>
  109. <div class="comment" typeof="schema:UserComments">
  110. <p class="comment-meta">
  111. <span class="comment-author" property="schema:creator">zyegfryed</span> le <span class="comment-date" property="schema:commentTime">11/08/2008</span> :
  112. </p>
  113. <div class="comment-content" property="schema:commentText">
  114. <p>Il y a aussi la gestion utilisée par l&#39;Admin de Django. Mais je ne sais pas à quel point le code est facilement réutilisable...</p>
  115. </div>
  116. </div>
  117. <div class="comment" typeof="schema:UserComments">
  118. <p class="comment-meta">
  119. <span class="comment-author" property="schema:creator">David, biologeek</span> le <span class="comment-date" property="schema:commentTime">11/08/2008</span> :
  120. </p>
  121. <div class="comment-content" property="schema:commentText">
  122. <p>@Louis Pontoise : J&#39;ai l&#39;impression que le plugin Sortable ne fait pas exactement la même chose mais je ne doute pas que cela puisse être fait avec n&#39;importe quel framework js.</p>
  123. <p>ps : j&#39;ai pas encore trouvé un intérêt suffisant à ajouter cette fonctionnalité.</p>
  124. <p>@zyegfryed : justement je trouve que Django aurait des progrès à faire pour gérer cette interface.</p>
  125. </div>
  126. </div>
  127. <div class="comment" typeof="schema:UserComments">
  128. <p class="comment-meta">
  129. <span class="comment-author" property="schema:creator">Tutula</span> le <span class="comment-date" property="schema:commentTime">03/05/2009</span> :
  130. </p>
  131. <div class="comment-content" property="schema:commentText">
  132. <p>Bonjour,</p>
  133. <p>Je cherche à faire un combobox avec des cases multiples à cocher comme sur <a href="http://www.emmobilier.com">http://www.emmobilier.com</a></p>
  134. <p>Quelqu&#39;un peut il m&#39;aider.</p>
  135. <p>Merci</p>
  136. <p>Frédéric</p>
  137. </div>
  138. </div>
  139. </div>
  140. </section>
  141. <footer>
  142. <nav>
  143. <p>
  144. <small>
  145. Je réponds quasiment toujours aux <a href="m&#x61;ilto:d&#x61;vid%40l&#x61;rlet&#46;fr" title="Envoyer un email">emails</a> (<a href="/david/signature/" title="Ma signature actuelle avec possibilité de chiffrement">signés</a>) et vous pouvez me rencontrer à Montréal. <span class="more-infos">N’hésitez pas à <a href="/david/log/" title="Être tenu informé des mises à jour">vous abonner</a> pour être tenu informé des publications récentes.</span>
  146. </small>
  147. </p>
  148. </nav>
  149. </footer>
  150. </div>
  151. <script src="/static/david/js/larlet-david-3ee43f.js" data-no-instant></script>
  152. <script data-no-instant>InstantClick.init()</script>
  153. </body>
  154. </html>