Jaguar Pager cycle avec l'arborescence de menu?

Question

J'ai reçu beaucoup d'aide d'autres publications dans le passé et j'espère que vous pourrez m'aider maintenant.

Je veux utiliser le cycle jquery avec une fonction de téléavertisseur (http://malsup.com/jquery/cycle/pager3.html) mais au lieu de générer des vignettes comme des liens, je voudrais que la navigation à des liens de texte dans un arbre accordéon comme cette belle démonstration: jquery.bassistance.de /treeview/demo/?1.0

Mon problème principal est que le cycle pager a généré des nombres à la place du texte en tant que liens, et de surcharger que j'ai essayé d'utiliser la balise 'title' dans le tag image, et changer le 'return' dans le js

<script type="text/javascript"> 
    $(function() { 
    $('#s4').before('<div id="nav" class="nav">').cycle({ 
      fx:  'fade', 
      speed: 'fast', 
      timeout: 0, 
      pager: '#nav', 
      pagerAnchorBuilder: function(idx, slide) { 
      return '<li>' + $(slide).attr('title') + '</li>'; 

      } 
      }); 
     }); 
    </script> 

qui worked-- -mais me donne alors aucune possibilité de manipuler ou sty le les liens de texte. Et j'aimerais idéalement avoir la navigation dans un arbre de texte comme le lien ci-dessus. Je suis assez nouveau à JQuery et j'ai appris ce que je sais seulement en passant par les discussions, les tuts et les forums mais je ne suis pas vraiment capable de comprendre comment l'écrire correctement par moi-même ... tellement frustrant!

Answer 1

La documentation du cycle vous recommande d'utiliser css, comme

#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px; } 
#nav a.activeSlide { background: #ea0 } 
#nav a:focus { outline: none; } 

Si vous ne voulez pas tout cela dans vos fichiers css vierges, vous pouvez écrire dans votre HTML avec $ (la « tête »). append() ou quelque chose. Ou vous pouvez le style des éléments avec jQuery en utilisant quelque chose comme

$('#nav a').css({ 
    border: '1px solid #ccc', 
    background: '#fc0', 
    text-decoration: 'none', 
    margin: '0 5px', 
    padding: '3px 5px', 
    focus: { outline: 'none' } 
}).filter('.activeSlide').css({ 
    background: '#ea0' 
}); 

C'est non testé, et le « focus: {...} » partie est un vœu pieux. Je ne sais pas s'il y a un moyen de le faire avec jQuery.