Welcome, Guest
Username: Password: Remember me

TOPIC: "Habillage" des boutons radio et/ou type de quetion personnalisé

"Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 9 months ago #95556

  • Philipppe
  • Philipppe's Avatar
  • Offline
  • Junior Lime
  • Posts: 26
  • Thank you received: 1
  • Karma: 0
Merci.
Je vais créer un modèle pour cette enquête, et y intégrer les divers éléments.
Et merci de la précision sur la classe de la question : j'ai en effet lu un certain nombre de choses à ce propos dans les docs et un tuto sur un site universitaire (faut que je retrouve!).
Allez hop : au taf !
The administrator has disabled public write access.

"Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96389

  • Philipppe
  • Philipppe's Avatar
  • Offline
  • Junior Lime
  • Posts: 26
  • Thank you received: 1
  • Karma: 0
J'ai pu disposer du temps nécessaire, et :
  1. Créé des boutonsImage, en deux versions coché ou non, intégrés au label de la question QID=592
<img class="unchecked" src="/limesurvey/upload/surveys/656273/images/acupuncture.png" style="width: 230px; height: 43px;" /><img class="checked" src="/limesurvey/upload/surveys/656273/images/acupunctureOui.png" style="width: 230px; height: 43px;" />
  • Ajouté les éléments de style au template.css de mon modèle
  • label img.checked{display:none}
    label.check img.checked{display:inline}
    label.check img.unckecked{display:none}
  • Ajouté les éléments suivants au template.js
  • $(document).ready(function(){
    	focusFirst();
    $("#question"+592+" input.checkbox").hide();
    });
     
     
    $(document).ready(function(){
     
    });
     
    $("#question"+592+" label").click(function(){
    var thisinput=$(this).attr('for');
    if($("#"+thisinput).is(':checked')){
    $(this).addClass("check");
    }else{
    $(this).remooveClass("check");
    }
    });

    L'enquête est visible ici
    Les boutons s'affichent correctement, les "boutons radio" sont bien cachés sur la question exemple N°2.
    Mais mes boutons image ne sont pas cliquables !

    Une idée de l'erreur ?
    Merci.
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96391

    • Nickko
    • Nickko's Avatar
    • Offline
    • LimeSurvey Team
    • Posts: 2654
    • Thank you received: 343
    • Karma: 77
    En regardant dans Dragon Fly, je ne vois aucun événement déclenché par le clique sur une image...
    Nickko
    Ergonome / Usability expert
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96398

    • Philipppe
    • Philipppe's Avatar
    • Offline
    • Junior Lime
    • Posts: 26
    • Thank you received: 1
    • Karma: 0
    Nickko wrote:
    En regardant dans Dragon Fly, je ne vois aucun événement déclenché par le clique sur une image...
    En effet !
    Donc, persévérer à regarder dans les docs, mais pas toujours simple en anglais !
    Merci.
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96403

    • DenisChenu
    • DenisChenu's Avatar
    • Offline
    • Moderator Lime
    • Posts: 8252
    • Thank you received: 1126
    • Karma: 336
    Si les images sont dans le label : nul besoin d'un élément click ou je me trompe ?
    (tu peux me remettre le lien ?)


    M'a gouré ....

    Il faut modifier l'image ...

    corrigé plus loin

    Denis
    Last Edit: 2 years 8 months ago by DenisChenu.
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96404

    • Nickko
    • Nickko's Avatar
    • Offline
    • LimeSurvey Team
    • Posts: 2654
    • Thank you received: 343
    • Karma: 77
    Ben justement, dans le label, sachant que le label peut être distinct du bouton en lui même j'ai un gros gros doute. (ça reste un doute).
    Nickko
    Ergonome / Usability expert
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96406

    • DenisChenu
    • DenisChenu's Avatar
    • Offline
    • Moderator Lime
    • Posts: 8252
    • Thank you received: 1126
    • Karma: 336
    Nickko wrote:
    Ben justement, dans le label, sachant que le label peut être distinct du bouton en lui même j'ai un gros gros doute. (ça reste un doute).
    Nan, m'a gourré ...
    En fait pas besoin du click pour cocher/décocher mais besoin du click pour tester l'état : script corrigé.

    Sinon, une remarque: tu utilise du texte dans tes images: je pense sincérement qu'il aurait était préférable de garder le texte et de le manipuler via css:

    Par exemple:
    #question592 label{
    font-size:20px;
    line-height:25px
    color:#fff;
    backgroud:#900;
    border:3px solid #400;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    padding:5px;
    }
    #question592 input.checkbox{
    position:absolute;
    left:-99999em;
    }
    Pourquoi : parceque le CSS est fait pour cela. Parceque tu reste accessible aux robots, aux navigateurs texte et surtout au déficients visuels.

    Denis
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96425

    • Philipppe
    • Philipppe's Avatar
    • Offline
    • Junior Lime
    • Posts: 26
    • Thank you received: 1
    • Karma: 0
    Excusez-moi : je n'étais pas en ligne !
    Merci : je vais tester. je reviens
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96427

    • Philipppe
    • Philipppe's Avatar
    • Offline
    • Junior Lime
    • Posts: 26
    • Thank you received: 1
    • Karma: 0
    DenisChenu wrote:
    Il faut modifier l'image ...
    $(document).ready(function(){
      $("#question"+592+" input.checkbox").hide();
      $("#question"+592+" label").click(function(){
        var thisinput=$(this).attr('for');
          if($("#"+thisinput).is(':checked')){
            $(this).addClass("check").removeClass("unchecked");
          }else{
            $(this).removeClass("check").addClass("unchecked");
         }
    });
    Denis
    Quand je teste ce code, les chekbox ne sont plus cachées, alors qu'ils l'étaient avec la première version !

    @Denis, ta solution css : cumulée avec le js ou seule ?
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96428

    • DenisChenu
    • DenisChenu's Avatar
    • Offline
    • Moderator Lime
    • Posts: 8252
    • Thank you received: 1126
    • Karma: 336
    Salut,

    Un oubli de }); de ma part ...
    $(document).ready(function(){
      $("#question"+592+" input.checkbox").hide();
      $("#question"+592+" label").click(function(){
        var thisinput=$(this).attr('for');
          if($("#"+thisinput).is(':checked')){
            $(this).addClass("check").removeClass("unchecked");
          }else{
            $(this).removeClass("check").addClass("unchecked");
         }
      });
    });

    Philippe : il faut vraiment que tu te mette à Firebug : getfirebug.com/logging tu aurais trouvé de toi même.

    Sinon: la CSS se suffit à elle même et n'à pas besoin du javascript. La différence, c'est que :
    1: c'est accessible
    2: cela est directement visible dans la page
    3: est moins lourd pour le client (charge mémoire CSS< charge mémoire JS)
    4: ne rend pas exactement les mêmes résultat qu'avec une image
    5: ne rend pas les mêmes résultats selon le navigateur (notamment IE6/7/8)

    Denis
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96429

    • Philipppe
    • Philipppe's Avatar
    • Offline
    • Junior Lime
    • Posts: 26
    • Thank you received: 1
    • Karma: 0
    Ouiiiii ! merci, @Denis !
    Voilà, les chekbox disparaissent, et quand je clic sur le premier bouton, l'image du "boutonCoché" s'ajoute !
    Donc je revois le code et je reviens !
    Ok pour firebug : je l'ai, mais bêtement pas l'habitude de m'en servir !
    Suis ok avec préférence d'une solution css : ce sera pour un deuxième temps ! (j'ai un délai àrespecter maintenant).
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96430

    • DenisChenu
    • DenisChenu's Avatar
    • Offline
    • Moderator Lime
    • Posts: 8252
    • Thank you received: 1126
    • Karma: 336
    Il te manque les parties CSS:

    label img.checked{display:none}
    label.check img.checked{display:inline}
    label.check img.unckecked{display:none}
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96431

    • Philipppe
    • Philipppe's Avatar
    • Offline
    • Junior Lime
    • Posts: 26
    • Thank you received: 1
    • Karma: 0
    DenisChenu wrote:
    Il te manque les parties CSS:

    label img.checked{display:none}
    label.check img.checked{display:inline}
    label.check img.unckecked{display:none}
    Ben si, elles sont dans le template.css du modèle, tout à la fin !
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96441

    • Philipppe
    • Philipppe's Avatar
    • Offline
    • Junior Lime
    • Posts: 26
    • Thank you received: 1
    • Karma: 0
    @Denis bonjour,

    Je ne comprends pas bien ce que fait ta proposition en css !
    Mais quand je vois ceci dans le template.css:
    button.ui-state-default,
    input.ui-state-default {
    	color: #333333;
    	border: 1px solid #A0A0A0;
    	background: #FAFAFA none;
    }
     
    button.ui-state-hover,
    input.ui-state-hover {
    	color: #212121;
    	border: 1px solid #999999;
    	background: #EBEBEB none;
    }
     
    button.ui-state-active,
    input.ui-state-active {
    	color: #212121;
    	border: 1px solid #AAAAAA;
    	background: #DCDCDC none;
    }
    Je me dis que c'est exactement ce dont j'ai besoin :
    • un bouton état défaut
    • un bouton état hover
    • un bouton état active
    et autant d'occurrence de cette triplette que de boutons sur ma question !
    Est-ce juste ?
    Et si oui, où dois-je ajouter mon code ?
    Y a-t-il un emplacement spécifique pour les questions à choix multiples ?
    Merci.
    The administrator has disabled public write access.

    "Habillage" des boutons radio et/ou type de quetion personnalisé 2 years 8 months ago #96454

    • Philipppe
    • Philipppe's Avatar
    • Offline
    • Junior Lime
    • Posts: 26
    • Thank you received: 1
    • Karma: 0
    @Denis,
    En utilisant la solution avec js,
    $(document).ready(function(){
      $("#question"+592+" input.checkbox").hide();
      $("#question"+592+" label").click(function(){
        var thisinput=$(this).attr('for');
          if($("#"+thisinput).is(':checked')){
            $(this).addClass("check").removeClass("unchecked");
          }else{
            $(this).removeClass("check").addClass("unchecked");
         }
      });
    });
    je constate un comportement dont je ne trouve pas la cause :
    Il est nécessaire de cliquer deux fois sur un bouton pour qu'il soit sélectionné et considéré comme coché.
    Une idée ?
    Le questionnaire est ici.
    The administrator has disabled public write access.
    Moderators: Nickko
    Time to create page: 0.210 seconds