Aide jQwidgets sur Joomla

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

  • Aide jQwidgets sur Joomla

    Bonjour à tous , je poste ce topic car j'ai en effet un problème pour intégrer les widgets jQuery sur mon site, j'ai suivi ce tuto pour afficher un calendrier :



    Il marche trés bien mais voilà je souhaiterai afficher une jauge de ce genre ci ,

    jQuery Gauge, jQuery Gauge Plugin, jQuery UI Gauge, AngularJS Gauge, JavaScript Gauge, HTML5 Gauge, HTML Gauge, jQuery Mobile Gauge, JavaScript Mobile Gauge, Android Gauge, IPhone Gauge, Windows Phone Gauge, Blackberry Gauge


    j'ai bien intégrer tous les scripts demander sur Joomla seulement je bloque au niveau du code à mettre dans mon article , si quelqu’un pourrait m'éclairer je lui serai grandement reconnaissant .

    En espérant avoir été assez clair, je vous remercie pour votre futur collaboration.

  • #2
    Re : Aide jQwidgets sur Joomla

    salut,
    si tu as bien tous les fichiers JS et CSS requis appelés dans joomla :
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgauge.js"></script>
    Tu copies colles le script présent sur la page démo dans un fichier que tu rajouteras à la fin de la liste précitée :
    $(document).ready(function () {
    $('#gaugeContainer').jqxGauge({
    etc ...
    Pour éviter des soucis, en général j'encapsule le script de cette manière :
    (function($){
    // code ici
    })(jQuery);
    avec le script :
    (function($){
    $(document).ready(function () {
    $('#gaugeContainer').jqxGauge({
    etc ...
    })(jQuery);
    Tu n'oublies pas la CSS additionnelle de la page démo :
    #gaugeValue {
    etc...
    }
    Enfin, dans le corps de ton article Joomla, avec ton éditeur en mode "code" ;
    <div id="demoWidget" style="position: relative;">
    <div style="float: left;" id="gaugeContainer"></div>
    <div id="gaugeValue" style="position: absolute; top: 235px; left: 132px; font-family: Sans-Serif; text-align: center; font-size: 17px; width: 70px;"></div>
    <div style="margin-left: 60px; float: left;" id="linearGauge"></div>
    </div>
    NB : Les CSS inline ne sont pas très recommandées. Il faudrait les reporter aussi dans une feuille CSS.

    NB2 : j'ai conservé l'appel à jQuery dans la liste plus haut, mais tu n'en as pas besoin puisque jQuery est présent par défaut dans Joomla version 3.xx.
    Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

    Commentaire


    • #3
      Re : Aide jQwidgets sur Joomla

      Tous d'abord merci de ta réponse je commence à y voir plus clair , mais je n'ai pas comprit ce que tu me demande de faire ici :

      Envoyé par ghazal Voir le message

      Tu copies colles le script présent sur la page démo dans un fichier que tu rajouteras à la fin de la liste précitée
      désolé encore du dérangement.

      Commentaire


      • #4
        Re : Aide jQwidgets sur Joomla

        C'est dans le fichier (et juste un exemple) :
        jqwidgets-ver3.2.1/demos/jqxgauge/defaultfunctionality.htm

        $(document).ready(function () {
        $('#gaugeContainer').jqxGauge({
        ranges: [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
        { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
        { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
        { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
        ticksMinor: { interval: 5, size: '5%' },
        ticksMajor: { interval: 10, size: '9%' },
        value: 0,
        colorScheme: 'scheme05',
        animationDuration: 1200
        });

        $('#gaugeContainer').on('valueChanging', function (e) {
        $('#gaugeValue').text(Math.round(e.args.value) + ' kph');
        });

        $('#gaugeContainer').jqxGauge('value', 140);

        $('#linearGauge').jqxLinearGauge({
        orientation: 'vertical',
        width: 100,
        height: 350,
        ticksMajor: { size: '10%', interval: 10 },
        ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} },
        max: 60,
        pointer: { size: '5%' },
        colorScheme: 'scheme05',
        labels: { interval: 20, formatValue: function (value, position) {
        if (position === 'far') {
        value = (9 / 5) * value + 32;
        if (value === -76) {
        return '°F';
        }
        return value + '°';
        }
        if (value === -60) {
        return '°C';
        }
        return value + '°';
        }
        },
        ranges: [
        { startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157'} },
        { startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200'} },
        { startValue: 35, endValue: 60, style: { fill: '#FF4800', stroke: '#FF4800'}}],
        animationDuration: 1500
        });

        $('#linearGauge').jqxLinearGauge('value', 40);
        });
        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

        Commentaire


        • #5
          Re : Aide jQwidgets sur Joomla

          Oui j'ai bien comprit qu'il s'agissait du code contenu dans la demo du widget, mais je dois mettre ce code après les fichiers requit appelé par Joomla ??

          Commentaire


          • #6
            Re : Aide jQwidgets sur Joomla

            mais je dois mettre ce code après les fichiers requit appelé par Joomla ??
            tu crées un fichier dans lequel tu colles ce code (avec la précaution indiquée dans mon premier post et lu l'appelles après les autres fichiers du widget.
            Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

            Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

            Commentaire


            • #7
              Re : Aide jQwidgets sur Joomla

              Voilà ce que j'ai ajouté dans mon fichier view.html.php
              $document = JFactory::getDocument();
              // adds jQWidgets JavaScript files
              $document->addScript('/ProjetSTI/media/system/js/jqxcore.js');
              $document->addScript('/ProjetSTI/media/system/js/jqxgauge.js');
              $document->addScript('/ProjetSTI/media/system/js/jqxchart.js');
              $document->addScript('/ProjetSTI/media/system/js/jquery-1.10.2.min.js');
              $document->addScript('/ProjetSTI/media/system/js/demoWidget.js');

              // adds jQWidgets CSS files
              $document->addStyleSheet('/ProjetSTI/media/system/css/jqx.base.css');
              demoWidget.js correspond au script que j'ai crée avec le code de la version demo plus les précautions que vous m'avez donné
              voilà le code du script :
              (function($){
              $(document).ready(function () {
              $('#gaugeContainer').jqxGauge({
              ranges: [{ startValue: 0, endValue: 55, style: { fill: '#4bb648', stroke: '#4bb648' }, endWidth: 5, startWidth: 1 },
              { startValue: 55, endValue: 110, style: { fill: '#fbd109', stroke: '#fbd109' }, endWidth: 10, startWidth: 5 },
              { startValue: 110, endValue: 165, style: { fill: '#ff8000', stroke: '#ff8000' }, endWidth: 13, startWidth: 10 },
              { startValue: 165, endValue: 220, style: { fill: '#e02629', stroke: '#e02629' }, endWidth: 16, startWidth: 13 }],
              ticksMinor: { interval: 5, size: '5%' },
              ticksMajor: { interval: 10, size: '9%' },
              value: 0,
              colorScheme: 'scheme05',
              animationDuration: 1200
              });

              $('#gaugeContainer').on('valueChanging', function (e) {
              $('#gaugeValue').text(Math.round(e.args.value) + ' kph');
              });

              $('#gaugeContainer').jqxGauge('value', 140);

              $('#linearGauge').jqxLinearGauge({
              orientation: 'vertical',
              width: 100,
              height: 350,
              ticksMajor: { size: '10%', interval: 10 },
              ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} },
              max: 60,
              pointer: { size: '5%' },
              colorScheme: 'scheme05',
              labels: { interval: 20, formatValue: function (value, position) {
              if (position === 'far') {
              value = (9 / 5) * value + 32;
              if (value === -76) {
              return '°F';
              }
              return value + '°';
              }
              if (value === -60) {
              return '°C';
              }
              return value + '°';
              }
              },
              ranges: [
              { startValue: -10, endValue: 10, style: { fill: '#FFF157', stroke: '#FFF157'} },
              { startValue: 10, endValue: 35, style: { fill: '#FFA200', stroke: '#FFA200'} },
              { startValue: 35, endValue: 60, style: { fill: '#FF4800', stroke: '#FF4800'}}],
              animationDuration: 1500
              });

              $('#linearGauge').jqxLinearGauge('value', 40);
              })(jQuery);
              j'ai bien copié ceci dans mon article :

              <div id="demoWidget" style="position: relative;">
              <div style="float: left;" id="gaugeContainer"></div>
              <div id="gaugeValue" style="position: absolute; top: 235px; left: 132px; font-family: Sans-Serif; text-align: center; font-size: 17px; width: 70px;"></div>
              <div style="margin-left: 60px; float: left;" id="linearGauge"></div>
              </div>
              malheureusement rien ne s'affiche.

              Commentaire


              • #8
                Re : Aide jQwidgets sur Joomla

                On y arrive

                Reteste en respectant scrupuleusement l'ordre de chargement des fichiers :

                jqxcore.js
                jqxchart.js
                jqxgauge.js
                demoWidget.js

                Normalement tu n'as pas à appeler le fichier jQuery

                Travaille avec Firebug pour Firefox activé, obligatoire quand on bosse avec du JS.

                Après, et dès que ca fonctionne, je t'expliquerai comment faire pour appeler ces fichiers seulement pour l'article concerné.
                Ta technique est très correcte mais elle a le désavantage de charger tes fichiers sur TOUTES les pages de joomla. Ce qui est inutile.
                Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                Commentaire


                • #9
                  Re : Aide jQwidgets sur Joomla

                  J'ai bien modifié l'ordre de chargement des fichiers mais en vain rien ne s'affiche , je me demande si le problème ne viendrai pas de
                  <div id="demoWidget" style="position: relative;">
                  <div style="float: left;" id="gaugeContainer"></div>
                  <div id="gaugeValue" style="position: absolute; top: 235px; left: 132px; font-family: Sans-Serif; text-align: center; font-size: 17px; width: 70px;"></div>
                  <div style="margin-left: 60px; float: left;" id="linearGauge"></div>
                  </div>
                  car le code du tuto que je devais intégrer pour afficher un calendrier était assez différent de celui si .

                  Commentaire


                  • #10
                    Re : Aide jQwidgets sur Joomla

                    * je n'ai fait que reprendre l'html du fichier defaultfunctionality.htm cité plus haut
                    car le code du tuto que je devais intégrer pour afficher un calendrier était assez différent de celui si
                    Normal.
                    Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

                    Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

                    Commentaire

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire

                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X