Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:

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

"Habillage" des boutons radio et/ou type de quetion personnalisé 1 Jahr 2 Monate her #96429

  • Philipppe
  • Philipppes Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 26
  • Dank erhalten: 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).
Der Administrator hat öffentliche Schreibrechte deaktiviert.

"Habillage" des boutons radio et/ou type de quetion personnalisé 1 Jahr 2 Monate her #96430

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 6252
  • Dank erhalten: 799
  • Karma: 239
Il te manque les parties CSS:

label img.checked{display:none}
label.check img.checked{display:inline}
label.check img.unckecked{display:none}
Der Administrator hat öffentliche Schreibrechte deaktiviert.

"Habillage" des boutons radio et/ou type de quetion personnalisé 1 Jahr 2 Monate her #96431

  • Philipppe
  • Philipppes Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 26
  • Dank erhalten: 1
  • Karma: 0
DenisChenu schrieb:
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 !
Der Administrator hat öffentliche Schreibrechte deaktiviert.

"Habillage" des boutons radio et/ou type de quetion personnalisé 1 Jahr 2 Monate her #96441

  • Philipppe
  • Philipppes Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 26
  • Dank erhalten: 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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

"Habillage" des boutons radio et/ou type de quetion personnalisé 1 Jahr 2 Monate her #96454

  • Philipppe
  • Philipppes Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 26
  • Dank erhalten: 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.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

"Habillage" des boutons radio et/ou type de quetion personnalisé 1 Jahr 2 Monate her #96458

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 6252
  • Dank erhalten: 799
  • Karma: 239
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
Letzte Änderung: 1 Jahr 2 Monate her von DenisChenu.
Der Administrator hat öffentliche Schreibrechte deaktiviert.

"Habillage" des boutons radio et/ou type de quetion personnalisé 1 Jahr 2 Monate her #96500

  • DenisChenu
  • DenisChenus Avatar
  • OFFLINE
  • Moderator Lime
  • Beiträge: 6252
  • Dank erhalten: 799
  • Karma: 239
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
Letzte Änderung: 1 Jahr 2 Monate her von DenisChenu. Begründung: Correction du code js
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Folgende Benutzer bedankten sich: Philipppe

"Habillage" des boutons radio et/ou type de quetion personnalisé 1 Jahr 2 Monate her #96512

  • Philipppe
  • Philipppes Avatar
  • OFFLINE
  • Junior Lime
  • Beiträge: 26
  • Dank erhalten: 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 .....
Der Administrator hat öffentliche Schreibrechte deaktiviert.
Moderatoren: Nickko
Ladezeit der Seite: 0.221 Sekunden
Donation Image