Personnaliser les boutons radio du module de sondage

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Personnaliser les boutons radio du module de sondage

    Je vais bientot mettre ici un petit tuto pour personnaliser ces boutons radio du module de sondage. On les remplacera par une image.
    Voici en avant première le code mootools
    Code PHP:
    window.addEvent('domready', function() {

    $$(
    '.radioClass').each(function(el2){el2.setStyle('opacity','0'); });
    var 
    monimage = $$('.boutonRadio');
    monimage.each(function(el) {
                
    el.addEvent('click',function(){
                      
    monimage.removeClass('coche');
                      
    el.addClass('coche');
                      var 
    moninput el.getFirst();
                      $$(
    '.radioClass').each(function(el2){el2.removeAttribute("checked","checked"); });
                      
    moninput.setAttribute("checked","checked");
                });

    });

    }); 
    et le fichier CSS :
    Code:
    .boutonRadio {
    display : inline-block;
    width : 15px;
    height : 15px;
    background : url(../images/bouton1.gif) left top no-repeat;
    }
    
    .coche {
    display : inline-block;
    width : 15px;
    height : 15px;
    background : url(../images/bouton1.gif) left -15px no-repeat;
    }
    
    .radioClass {
    position : absolute;
    }
    Et le code HTML qui sert au sondage :
    Code HTML:
    <td class="<?php echo $tabclass_arr[$tabcnt]; ?><?php echo $params->get('moduleclass_sfx'); ?>" valign="top">
    <span class="boutonRadio">
    <input type="radio" name="voteid" id="voteid<?php echo $options[$i]->id;?>" value="<?php echo $options[$i]->id;?>" alt="<?php echo $options[$i]->id;?>" class="radioClass"/>
    </span>
    </td>
    Ce n'est que le bout du fichier default.php du module poll que j'ai modifié pour y ajouter un span et des classes

    Démo et tuto pour l'installation disponible sur mon site :
    http://www.joomlack.fr.nf/tutos-desi...u-sondage.html
    Edit : fichier html ajouté et lien vers le tuto. Plus bas dans les posts les explications du code mootools
    Dernière édition par ced1870 à 22/08/2009, 13h37
    Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
    http://www.template-creator.com Outil de création de templates
    Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

  • #2
    Salut,

    çà m'a l'air intéressant ce petit projet et en image çà va donner quoi

    bye
    j!lm
    http://www.joomlabox.com

    Commentaire


    • #3
      bon alors en avant première je te donne le lien de la démo sur mon site :
      http://www.joomlack.fr.nf/tutos-desi...u-sondage.html

      On ne critique pas la qualité des boutons SVP, j'ai fait ça vite fait-bien fait...

      J'essaie de sortir le tuto complet aujourd'hui
      Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
      http://www.template-creator.com Outil de création de templates
      Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

      Commentaire


      • #4
        Envoyé par ced1870 Voir le message
        bon alors en avant première je te donne le lien de la démo sur mon site :
        http://www.joomlack.fr.nf/tutos-desi...u-sondage.html

        On ne critique pas la qualité des boutons SVP, j'ai fait ça vite fait-bien fait...

        J'essaie de sortir le tuto complet aujourd'hui
        Merci pour l'avant-première mais les boutons sont pas TOP........OK JE SORS.........
        http://www.joomlabox.com

        Commentaire


        • #5
          Envoyé par pyor Voir le message
          mais les boutons sont pas TOP........OK JE SORS.........
          ha voilà comment on est remercié quand on essaie de faire plaisir...
          Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
          http://www.template-creator.com Outil de création de templates
          Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

          Commentaire


          • #6
            et voilà, j'ai fait des plus beaux boutons !! na ! et je suis en train de rédiger le tuto.
            J'expliquerai ici un peu plus en détails les lignes de codes mootools
            Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
            http://www.template-creator.com Outil de création de templates
            Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

            Commentaire


            • #7
              Explications du code mootools

              Code PHP:
              window.addEvent('domready', function() { ... }); 
              pas besoin de préciser que c'est ce qui permet de charger le code une fois que les éléments DOM principaux de la page ont été chargés.

              Code PHP:
              $$('.radioClass').each(function(el2){el2.setStyle('opacity','0'); }); 
              Sur chaque bouton radio de type Input qui contient la classe .radioClass on ajoute une transparence totale. Attention cette fonction rend inactif les boutons !
              Code PHP:
              var monimage = $$('.boutonRadio'); 
              on enregistre tous les span qui ont la classe .boutonRadio dans la variable monimage
              Code PHP:
              monimage.each(function(el) {               // sur chaque span enregistré
                          
              el.addEvent('click',function(){           // on ajoute un événement "click"
                                
              monimage.removeClass('coche'); // on supprime la classe .coche de tous les span enregistrés (permet de remettre à zéro toutes les images)
                                
              el.addClass('coche');                  // on ajoute la classe .coche sur l'image(span) cliquée ce qui va décaler le background de 20px et rendre le bouton "actif" visuellement
                                
              var moninput el.getFirst();      // on récupère la balise input qui est dans le span cliqué dans la variable moninput
                                
              $$('.radioClass').each(function(el2){el2.removeAttribute("checked","checked"); });     // on "décoche" tous les boutons radio avec la classe .radioClass
                                
              moninput.setAttribute("checked","checked"); // on coche le bouton enregistré dans la variable moninput
                          
              });
              }); 
              Voili voilou pour les infos.
              Dernière édition par ced1870 à 22/08/2009, 13h47
              Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
              http://www.template-creator.com Outil de création de templates
              Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

              Commentaire


              • #8
                Bonsoir,

                Pour des beaux boutons, c'est là qu'on en trouve
                GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                Commentaire


                • #9
                  merci mais mes boutons actuels sont très bien
                  Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                  http://www.template-creator.com Outil de création de templates
                  Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                  Commentaire


                  • #10
                    moi, je les trouve très bien ces boutons.
                    Joli tut.
                    “Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter le nouveau service (en Beta) de la base de connaissance https://kb.joomla.fr

                    Commentaire


                    • #11
                      Merci ghazal
                      Vive Joomla! http://www.joomlack.fr Tutoriels et extensions pour Joomla!. Livre création de template Joomla de plus de 200 pages.
                      http://www.template-creator.com Outil de création de templates
                      Module Maximenu CK - Megamenu, multicolonnes, chargement de module, description de lien, deroulement animé - Compatible Virtuemart, Hikashop

                      Commentaire

                      Annonce

                      Réduire
                      1 sur 2 < >

                      C'est [Réglé] et on n'en parle plus ?

                      A quoi ça sert ?
                      La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                      Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                      Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                      Comment ajouter la mention [Réglé] à votre discussion ?
                      1 - Aller sur votre discussion et éditer votre premier message :


                      2 - Cliquer sur la liste déroulante Préfixe.

                      3 - Choisir le préfixe [Réglé].


                      4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                      2 sur 2 < >

                      Assistance au forum - Outil de publication d'infos de votre site

                      Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                      Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                      Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                      UTILISER À VOS PROPRES RISQUES :
                      L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                      Problèmes connus :
                      FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                      Installation :

                      1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                      Archive zip : https://github.com/AFUJ/FPA/zipball/master

                      2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                      3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                      4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                      5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                      6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                      et remplacer www. votresite .com par votre nom de domaine


                      Exemples:
                      Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                      Télécharger le script fpa-fr.php dans: /public_html/
                      Pour executer le script: http://www..com/fpa-fr.php

                      Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                      Télécharger le script fpa-fr.php dans: /public_html/cms/
                      Pour executer le script: http://www..com/cms/fpa-fr.php

                      En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                      Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                      Voir plus
                      Voir moins
                      Travaille ...
                      X