开发者

Jquery cycle pager with menu tree?

I have gotten lots of help from others posts in the past so I hope you can help me out now.

I want to use the jquery cycle with a pager funct开发者_开发百科ion (http://malsup.com/jquery/cycle/pager3.html) but instead of it generating thumbnails as links I would like the navigation to be text links in an accordion tree like this lovely demo: jquery.bassistance.de/treeview/demo/?1.0

My main issue is that the pager cycle generated numbers instead of text as links, and to override that I tried using the 'title' tag in the image tag, and change the 'return' in the 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>

which worked-- -but then gives me no ability to manipulate or style the text links. And I would ideally like to have the nav in a text tree like the link above.

I am quite new to JQuery and have learned what I know only from going through threads, tuts and forums but am not really able to figure out how to write it correctly on my own...so frustrating!


The cycle documentation recommends you use css, such as

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

If you didn't want all that in your pristine css files, you could write it into your html with $('head').append() or something. Or you could style the elements with jQuery using something like

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

That's untested, and the "focus: {...}" part is just wishful thinking. I don't know if there's a way to do that with jQuery.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜