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é 1 year 4 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é 1 year 4 months ago #96430

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6358
  • Thank you received: 824
  • Karma: 245
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é 1 year 4 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é 1 year 4 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é 1 year 4 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.

"Habillage" des boutons radio et/ou type de quetion personnalisé 1 year 4 months ago #96458

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6358
  • Thank you received: 824
  • Karma: 245
Oui,

C'est du au fonction javascript déjà associée ... zut.
En fait : test si la case est coc

Il me semble que il n'ya pas de onchange event sur l'état du bouton. Peut être le "$().on("input.checbox","change") ferait l'affaire.

Par contre : à tester et valider.

A voir aussi:
- ejohn.org/blog/how-javascript-timers-work/
- github.com/nickyleach/jQuery.bindLast

Ou peut être: retire l'événement par défaut du label, puis : l'éxécuter (click sur le checbox) et tester.

Denis
Last Edit: 1 year 4 months ago by DenisChenu.
The administrator has disabled public write access.

"Habillage" des boutons radio et/ou type de quetion personnalisé 1 year 4 months ago #96500

  • DenisChenu
  • DenisChenu's Avatar
  • OFFLINE
  • Moderator Lime
  • Posts: 6358
  • Thank you received: 824
  • Karma: 245
Grâce à Philippe, j'ai pu travailler sur cet habillage.


Le choix :
- Dans les réponses/qous-question : <span id="titre">Le titre comme on veut</span>
- Les images dans le répertoire du questionnaire, sous répertoire images
3 fichiers à modifier:
startpage.pstpl: ajouter:
<script><!--
    templateurl="{TEMPLATEURL}";
    surveyid="{SID}";
    --></script>

Fichier template.js: ajout d'une fonction (celle ci se lance dans le document.ready)
function updateImgLabel(){
    $(".subquestions-list label span,.answers-list label span").each(function(){
        var thispan=$(this);
        var thispicture=$(this).attr("id");
        var thislabel=$(this).closest("label");
        var ncimg = document.createElement("img");
        ncimg.src = templateurl+"../../surveys/"+surveyid+"/images/"+thispicture+".png?" + new Date().getTime();
        ncimg.className="unchecked";
        var cimg = document.createElement("img");
        cimg.src = templateurl+"../../surveys/"+surveyid+"/images/"+thispicture+"Oui.png?" + new Date().getTime();
        cimg.className="checked";
        $(ncimg).load(function(){
            var w = ncimg.width;
            var h = ncimg.height;
            thislabel.closest("li").find("input.checkbox").hide();
            thislabel.closest("li").find("input.radio").hide();
            thispan.addClass("hide");
            thislabel.addClass("withimage").width(w).height(h);
            thislabel.append(ncimg).append(cimg);
        });
    });
    $(".subquestions-list").delegate("label","click",function(event){
        $(this).toggleClass("checked").toggleClass("unchecked");
    });
    $(".answers-list").delegate("label","click",function(event){
        $(this).closest(".answers").find("label").removeClass("checked").addClass("unchecked");
        $(this).addClass("checked").removeClass("unchecked");
    });
    $(".subquestions-list input[type=checkbox],.answers-list input[type=radio]").each(function(){
        if($(this).is(':checked')){
            $(this).closest(".answer-item").find("label").addClass("checked");
        }else{
            $(this).closest(".answer-item").find("label").addClass("unchecked");
        }
    });
}
/* Bouton personnalisé */
label.withimage{padding:5px 5px 5px 5px}
label.withimage:hover,label.withimage.hover{padding:4px 6px 6px 4px}
label.unchecked img.checked{display:none;}
label.checked img.unchecked{display:none;}

Merci Philippe :)

Denis
PS: mon flattr flattr.com/profile/shnoulle
Last Edit: 1 year 4 months ago by DenisChenu. Reason: Correction du code js
The administrator has disabled public write access.
The following user(s) said Thank You: Philipppe

"Habillage" des boutons radio et/ou type de quetion personnalisé 1 year 4 months ago #96512

  • Philipppe
  • Philipppe's Avatar
  • OFFLINE
  • Junior Lime
  • Posts: 26
  • Thank you received: 1
  • Karma: 0
Super merci @Denis :
Très efficace, et très simple à mettre en oeuvre pour moi maintenant !
J'ai plus qu'à me "rattraper" sur les traductions ....
Je mettrai un lien vers le résultat complet en fin de semaine ..., pour donner des envies de zolis questionnaires ergonomiques .....
The administrator has disabled public write access.
Moderators: Nickko
Time to create page: 0.151 seconds
Donation Image