用戶界面手風琴標題中的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插件

回答

相關問題