JQuery цикл пейджер с деревом меню?

Question

В прошлом я получал много помощи от других постов, поэтому я надеюсь, что вы можете помочь мне сейчас.

Я хочу использовать цикл jquery с функцией пейджера (http://malsup.com/jquery/cycle/pager3.html) но вместо того, чтобы генерировать миниатюры в виде ссылок, я хотел бы, чтобы навигация была текстовыми ссылками в дереве аккордеона, как это прекрасное демо: jquery.bassistance.de/treeview/demo/?1.0

Моя основная проблема заключается в том, что цикл пейджера генерирует числа вместо текста в виде ссылок, и чтобы переопределить это, я попытался использовать тег 'title' в теге image и изменить 'return' в 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>

, который сработал - но тогда я не смогу манипулировать или стилизовать текстовые ссылки. И в идеале я бы хотел, чтобы навигация была в текстовом дереве, как ссылка выше.

Я довольно новичок в JQuery и узнал то, что знаю только, просматривая темы, форумы и форумы, но на самом деле не могу понять, как написать это самостоятельно ... так расстраивает!

Answer 1

В документации цикла рекомендуется использовать css, например

#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; }

Если вы не хотите, чтобы все это было в ваших исходных css-файлах, вы можете записать это в html с помощью $ ('head'). Append () или чего-то еще. Или вы можете стилизовать элементы с помощью jQuery, используя что-то вроде

$('#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'
});

Это не проверено, и часть "focus: {...}" - это просто желаемое за действительное. Я не знаю, есть ли способ сделать это с помощью jQuery.