IE8 及更低版本的 jQuery Cycle pagerAnchorBuilder 问题

发布于 2024-12-09 15:22:21 字数 867 浏览 0 评论 0原文

以下代码：

<ul>
   <li>
     <div>
       <h2>Surveys</h2>
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
         <p class="more"><a href="#" title="XXXXX>XXXXX</a></p>
     </div>
   </li>
</ul>

$('.tabs ul')
  .after('<div class="nav">')
     .cycle({
       cleartypeNoBg:true,
       timeout:10000,
       speed:350,
       pause:1,
       pager:'.tabs .nav',
       pagerAnchorBuilder:function(idx,slide){
       return'<a href="#">'+$(slide).find('.more a').attr('title')+'</a>';
   }
});

在 Chrome、Firefox 和 IE9 中工作正常，但在 IE8 及更低版本中，我得到的选项卡数量是原来的两倍，其中一半显示“未定义”。如果我移动锚点，使其包围所有内容（即仅在

内部），那么 IE8 会显示正确的选项卡，但这并不真正适合我正在尝试的内容来完成。

有什么方法可以让它在 IE8 中使用我当前的标记工作吗？

原文

The following code:

<ul>
   <li>
     <div>
       <h2>Surveys</h2>
         <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
         <p class="more"><a href="#" title="XXXXX>XXXXX</a></p>
     </div>
   </li>
</ul>

$('.tabs ul')
  .after('<div class="nav">')
     .cycle({
       cleartypeNoBg:true,
       timeout:10000,
       speed:350,
       pause:1,
       pager:'.tabs .nav',
       pagerAnchorBuilder:function(idx,slide){
       return'<a href="#">'+$(slide).find('.more a').attr('title')+'</a>';
   }
});

works fine in Chrome, Firefox and IE9, but in IE8 and lower, I get twice as many tabs and half of them say 'undefined'. If I move the anchor so that it wraps around all the contents (i.e. just inside the <li>) then IE8 shows the correct tabs, but that doesn't really work with what I'm trying to accomplish.

Is there any way to get this to work in IE8 with the markup I have currently?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

冷了相思 2024-12-16 15:22:21

我对整个 pageanchorbuilder 的事情有疑问，它对于做任何奇特的事情来说都是基本的。它还迫使您使用列表，我认为这就是您的问题所在（IE8 和列表==麻烦！）。这是我发现效果更好的方法。

首先像这样构建您的自行车舞台和拇指托盘。您现在可以完全控制格式！

<div class="gallery">
    <div class="stage">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    </div>
    <div class="thumb-tray">
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
    </div>
</div>

然后使用此 JS 将缩略图链接到幻灯片。基本上，拇指 1 链接到幻灯片 1，依此类推。

// Start Cycle
jQuery('.stage').cycle({ 
    timeout:  0,
});

// Make the thumbs change the stage
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

这也适用于页面上的多个自行车画廊。我想会解决你的问题。

I had problems with the whole pageanchorbuilder thing, it's way to basic for doing anything fancy. It also forces you into using lists, which I think is where you're problems are coming from (IE8 and lists == trouble!). This is what I found worked better.

First build out your Cycle stage and thumb tray like this. You now have complete control over the format!

<div class="gallery">
    <div class="stage">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    </div>
    <div class="thumb-tray">
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
        <div class="thumb">Anything in here</div>
    </div>
</div>

Then use this JS to link the thumbnails to the slides. Basically, thumb 1 links to slide 1 and so on.

// Start Cycle
jQuery('.stage').cycle({ 
    timeout:  0,
});

// Make the thumbs change the stage
jQuery('.gallery .thumb').click(function(){
    var thumbIndex = jQuery(this).closest('.gallery').find('.thumb').index(jQuery(this));
    jQuery(this).closest('.gallery').find('.stage').cycle(thumbIndex);
});

This will work with multiple Cycle gallery's on a page too. I think will solve your problems.

回复收藏 0 原文

~没有更多了~