用户界面手风琴标题中的jQuery ColorBox插件

首先，这是我想要实现的：我有一个包含图像的拇指和一些基本信息的对象列表。您可以单击图像查看图像的大版本或对象信息的任何其他位置，以展开具有大量关于对象的额外信息的DIV。用户界面手风琴标题中的jQuery ColorBox插件

我曾与jQuery UI手风琴和yoxview的组合工作，但yoxview在几个浏览器给我这么多的痛苦，我决定用ColorBox取代它。

现在问题是，我有这个工作，但是当点击图像时，ColorBox打开，因为它应该，但它也触发手风琴，当然，它不应该。例如，如果您单击打开额外信息，然后单击拇指以查看放大的图像，手风琴会关闭，这实际上会让您感到痛苦，而不是轻松浏览和检查这些对象。

这是它是如何设置：

<div id="list-accordion"> 
    <div class="list-accordion-header"> 
    <span class="list-thumb-container"> 
     <a href="someplace_thumb.jpg" title="some title" class="group1"> 
     <img src="somplace_large.jpg" /> 
     </a> 
    </span> 
    <div class="list-basic-details"> 
     The basic explanation comes here 
    </div> 
    </div> 
    <div class="list-extra-detail"> 
    All the rest of the information in the panel of the accordion 
    </div> 
</div>

在文件准备好我再有这样的：

$("#list-accordion").accordion(
    { 
     icons: false , 
     autoHeight : false , 
     active: false , 
     header: '.list-accordion-header' , 
     collapsible: true 
    } 
);

，为彩盒：

$(".group1").colorbox({rel:'group1'});

（我使用rel因为它可能有一个对象的几个图像，我简化了我的html例子）

为了确保被点击图像时，我通常会使用代码沿着这条线：

$(".group1").click(function(e){ e.stopPropagation(); });

不过，我已经试过stopPropagation各种途径，但每一个每一个试图破坏活动的彩盒。大图像打开好，但在窗口本身，而不是在灯箱，因为它应该。

总之，我知道有一个灯箱，不像yoxview作品跨浏览器，但我有不想要的副作用，点击图像触发手风琴。

我真的很感谢这里的任何帮助，尽管图片（链接）位于手风琴的头部，但点击它会触发ColorBox，而不是手风琴本身。

干杯。

来源

2012-02-02 Peter

想象您的用户界面非常困难;也许提供一个链接或者更多地填写用例描述。但从它的声音来看，您需要能够在任何特定点击时更仔细地区分“UI模型”的状态。我通常使用Pub/Sub和事件来实现它。 – 2012-02-02 18:36:01

我明白这个事实很困难，但不幸的是，我不允许发布该项目的链接，这意味着我需要在这个相当复杂的结构中设置一个虚拟的地方。我会看看你的酒吧/小费小费，如果我不能解决问题，我将不得不安置那个假人。 – Peter 2012-02-03 07:04:35

好吧，我花了一段时间，但我解决了这个问题。我并不是说这个解决方案非常干净，它似乎正在工作，并且在这方面跨浏览器。

我的解决方案的关键是从手风琴的标题中删除ColorBox链接。但是，我仍然希望在该标题内有一个拇指，该用户可以单击以打开图像的放大版本（如果可用，还可以在ColorBox中浏览其他图像，如果有的话），而不需要手风琴窗格打开！

这就是我所做的，首先我重建了手风琴。我保留了拇指，但删除了触发围绕它的ColorBox的链接。然后，我将该链接添加到窗格，而是添加到隐藏的div中。

<div id="list-accordion"> 
    <div class="list-accordion-header"> 
    <span class="list-thumb-container"> 
     <img src="somplace_thumb.jpg" class="img-thumb" rel="group1"/> 
    </span> 
    <div class="list-basic-details"> 
     The basic explanation comes here 
    </div> 
    </div> 
    <div class="list-extra-detail"> 
    <div class="hidden-img-links">      
     ** all my image links in this format ** 
    <a class="group1" href="somplace_large.jpg" title="some text">name</a> 
    </div> 
    All the rest of the information in the panel of the accordion 
    </div> 
</div>

现在我用下面的js代码我的文件准备：

$('a.group1').colorbox({rel: group1});  

$(".img-thumb").click(function(event){ 
    $('.' + $(this).attr('rel') + ':first').click(); 
    return false; 
}) 

// of het nu items of veilingen bevat, de item accordion moet opgestart 
$("#list-accordion").accordion(
    { 
     icons: false , 
     autoHeight : false , 
     active: false , 
     header: '.list-accordion-header' , 
     collapsible: true 
    } 
);

正如你所看到的，我捉对拇指点击并阻止它，这样它不能泡了给父母。但在实际阻止之前，我会向第一张要在ColorBox中打开的图像发送点击。由于这些ColorBox链接不再位于手风琴的头部，因此我可以在不影响手风琴的情况下单击它们，因此我现在可以单击拇指以打开ColorBox而无需打开手风琴的窗格。

来源

2012-02-03 11:08:10 Peter

用户界面手风琴标题中的jQuery ColorBox插件

回答

相关问题