IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

sliders-afficher la valeur courante


Sujet :

jQuery

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2002
    Messages
    32
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Décembre 2002
    Messages : 32
    Par défaut sliders-afficher la valeur courante
    Bonjour,

    Je viens de récupérer "une patate chaude" relative à une modification demandée sur des sliders jquery.
    Je suis débutant de chez débutant en jquery... Les sliders en question sont très semblables à ceux que l'on peut voir ici : http://jqueryui.com/demos/slider/#range

    On me demande aujourd'hui de modifier ceux ci de sorte que la valeur courante soit présente sous le curseur au clic, comme au survol et lors du déplacement.
    En cherchant sur le net j'ai trouvé une ressource proposant quelque chose de très proches du résultat demandé http://www.filamentgroup.com/example..._v2/index.html cependant celle ci ne fonctionne qu'à partir de champs select indiçant chacun des valeurs possibles... je ne dispose pour ma part que du min et du max et ne doit en aucun cas modifier la nature de ces champs!
    Je suppose que les js utilisés actuellement sont jquery-ui.min couplé avec un ui.slider.js puis-je obtenir un résultat similaire à partir de ces js ??
    Merci de m'éclairer un peu car je ne dispose pas d'une visibilité étendue sur le code et mon rayon d'action pour modifier ces slides est très réduit.

  2. #2
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    Salut,

    Arrives-tu a poster un exemple minimal ici d'un slider fonctionnel tel
    qu'il est actuellement dans ton application ?

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2002
    Messages
    32
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Décembre 2002
    Messages : 32
    Par défaut
    ?? je ne comprends pas ta question tu veux que je poste un exemple ??

    Les deux kit en ligne sont globalement des exemples :
    le premier utilisent une borne min et max disponibles sous forme d'input
    le second utilise lui deux champs select afin de déterminer les intervalles ainsi que le "pas" entre chaque valeur.

    mon "soucis" est simple : j'utilise le premier exemple dans une appli php/mysql...
    via ajax je récupère les valeurs de chaque input à savoir le min, le max, la valeurs courante du curseur de gauche et aussi de droite.
    A partir de cet exemple je souhaiterai savoir si je peux et comment puis-je sous chaque curseur afficher la valeur courante.

  4. #4
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    Salut,

    Ton problème est essentiellement lié au plugin que tu utilises. Il va
    falloir gérer des évènements en fonction du plugin. Par exemple si
    c'est le Sider de Jquery.ui il faudra gérer l'event slide (entre autre)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $( ".selector" ).slider({
       slide: function(event, ui) { ... }
    });
    Ma proposition c'est que tu isoles ta problématique dans un exemple.
    ou que tu donne l'url de la page où l'on peut voir le code javascript/html
    existant.

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2002
    Messages
    32
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Décembre 2002
    Messages : 32
    Par défaut
    Hum, synthétiquement
    Je souhaiterai intégrer l'effet obtenu en survol et en clic de l'exemple 2 sur le slide de l'exemple 1
    Les urls sont celles que j'ai posté dans le premier message.
    Je ne puis pour des questions de confidentialité poster mes sources

    voici par exemple ce que contient le js utilisé dans l'exemple 2 au niveau du slide

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    var sliderOptions = {
            step: 1,
            min: 0,
            orientation: 'horizontal',
            max: selectOptions.length-1,
            range: selects.length > 1,//multiple select elements = true
            slide: function(e, ui) {//slide function
                    var thisHandle = jQuery(ui.handle);
                    //handle feedback 
                    var textval = ttText(ui.value);
                    thisHandle
                        .attr('aria-valuetext', textval)
                        .attr('aria-valuenow', ui.value)
                        .find('.ui-slider-tooltip .ttContent')
                            .text( textval );
     
                    //control original select menu
                    var currSelect = jQuery('#' + thisHandle.attr('id').split('handle_')[1]);
                    currSelect.find('option').eq(ui.value).attr('selected', 'selected');
            },
            values: (function(){
                var values = [];
                selects.each(function(){
                    values.push( jQuery(this).get(0).selectedIndex );
                });
                return values;
            })()
        };
    j'en reviens à ma question : comment puis-je et à l'aide de quoi (vu que je débute en JQuery) insérer dans le
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     slide : function(event,ui){ ...
    pour obtenir au survol et au clic la valeurs courante du curseur gauche et droit, et faire disparaitre cette info sur le mouseout ???

  6. #6
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Par défaut
    Dans cet exemple, la fonction slide est définie dans sliderOptions

    cette fonction est appelée chaque fois que le curseur glisse,
    dans textval tu as la valeur actuel. Il te faudra l'afficher dans un
    élément html positionné où tu veux.

    Je pense qu'en retirant l'option values de sliderOptions, le plugin
    devrait se baser sur min, max et step.

    à toi de fixer min, max et step aux valeurs qui te convienne.

  7. #7
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2002
    Messages
    32
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Décembre 2002
    Messages : 32
    Par défaut
    Excuse moi mais je ne cerne pas où je m'exprime mal ?
    ce que je ne sais pas "faire" pour dire, c'est comment dans ce slide : function(event,ui){ de l'exemple 1 => qui est mon support de travail, de développement actuellement, appeler une fonction, un argument ou autre qui me permette justement d'afficher sous le curseur un objet html qui affiche l'info,
    Il me semble aux vues de ce que contient l'exemple 2 que c'est possible (cf code) en appelant directement des composantes jquery..

    Mon problème ne provient pas de la récupération de ces infos c'est plutôt comment je peux l'afficher sous le curseur qui est mobile.
    ui-slider contient il se dont j'ai besoin sinon dois-je changer de librairie et utiliser celle de l'exemple 2 ?
    Le problème des ressources de l'exemple 2 est qu'elles appellent des champs select et que modifier tous les scripts afin qu'ils réponde la même manière mais à partir de deux champs input => là c'est galère !

  8. #8
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2002
    Messages
    32
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Décembre 2002
    Messages : 32
    Par défaut
    ???????

  9. #9
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    Salut,

    Le curseur du slider est représenté par un élément anchor <a>. Avec jquery tu n'as qu'à le retrouver $("#id-slider a") pour y ajouter des éléments <span> avec la méthode append() de jquery par exemple pour y afficher la valeur du curseur au moment de l'événement slide.

    C'est justement ce qu'ils font dans le lien que tu nous présente.

    Ai-je bien compris ton problème?

  10. #10
    Membre averti
    Profil pro
    Inscrit en
    Décembre 2002
    Messages
    32
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations forums :
    Inscription : Décembre 2002
    Messages : 32
    Par défaut
    je te remercie de ta réponse, comme je le précise je débute en jquery et aux vues de l'indentation du code, du point très précis sur lequel je dois intervenir,... +++ je vais tester avec ses éclaircissements et je poste ensuite le résult, en tous cas merci pour vos lumières

  11. #11
    Membre Expert Avatar de franculo_caoulene
    Profil pro
    Inscrit en
    Octobre 2003
    Messages
    2 880
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2003
    Messages : 2 880
    Par défaut
    Petit code rapide :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!doctype html>
    <html lang="fr">
    <head>
    <meta charset="utf-8">
    <title>Ajout de la valeur courante au curseur</title>
    <link type="text/css" href="libraries/jqueryui/css/ui-lightness/jquery-ui-1.8.5.custom.css" rel="stylesheet" />
    <style>
      * {margin:0;padding:0;}
      body {margin:20px;background:#000;color:#ddd;font-size:1em;font-family:Helvetica, Arial, sans-serif;}
      h1 {font-size:1.5em;}
      #s {margin:100px 0 0 0;width:300px;}
      #i {margin:30px 0 0 0;display:block;}
    </style>
    <head>
    <body>
      <h1>Ajout de la valeur courante au curseur</h1>
     
      <div id="s"></div>
     
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
      <script>
      function showIndice() {
        //alert($('#s').value);
        $('#i').text($('#s').slider("value"));
      }
      $(function() {
        $('#s').slider({
          orientation: 'horizontal',
          range: 'mini',
          max: 256,
          value: 0,
          slide: showIndice,
          change: showIndice
        });
        $('#s a').append('<span id="i"></span>');
      });
      </script>
    </body>
    </html>

Discussions similaires

  1. [Débutant] Afficher la valeur d'un slider dans GUI
    Par franck34matlab dans le forum Interfaces Graphiques
    Réponses: 4
    Dernier message: 02/02/2013, 10h53
  2. [Debutant] Afficher la valeur d'un slider ?
    Par mr_samurai dans le forum Débuter
    Réponses: 3
    Dernier message: 02/01/2008, 11h56
  3. [Débutant] Afficher les valeurs d'un slider
    Par emilieGre dans le forum Interfaces Graphiques
    Réponses: 7
    Dernier message: 25/07/2007, 17h11
  4. Réponses: 3
    Dernier message: 28/01/2004, 14h55
  5. Afficher une valeur du context
    Par [DreaMs] dans le forum XMLRAD
    Réponses: 13
    Dernier message: 28/04/2003, 13h49

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo