如何從多個鏈接調用相同的fancybox javascript？

的的fancybox模式彈出使用一些JavaScript：如何從多個鏈接調用相同的fancybox javascript？

$("#PeoplePopup").fancybox({ 
'autoScale'   : false, 
'padding'   : 0, 
'width'    : 800, 
'height'   : 600, 
'transitionIn'  : 'elastic', 
'transitionOut'  : 'elastic', 
'type'    : 'iframe', 
'overlayColor'  : '#000', 
'overlayOpacity' : 0.5 
});

鏈接被點擊時被觸發：

<a href = "peoplesearch.aspx" class="SmallWhite" 
     id="PeoplePopup">Search for Internal Contact details &gt; </a>

我如何可以調用從多個鏈路使用相同的彈出代碼？

來源

2012-07-31 Digital Lightcraft

的用戶class代替id，這樣你就可以調用popupcode複式時間。

//html 
<a href = "peoplesearch.aspx" class="SmallWhite PeoplePopup"> 
     Search for Internal Contact details </a> 

//other links 
<a href = "peoplesearch2.aspx" class="PeoplePopup">...</a> 
<a href = "peoplesearch3.aspx" class="PeoplePopup">...</a> 

//this jquery code will apply to the three links above 
$(".PeoplePopup").fancybox({ 
    //the same code here 
})

來源

2012-07-31 07:48:55 bingjie2680

非常感謝！ - 我的java是最小的tbh - 我知道這將是簡單的事情，我會盡快接受。 – 2012-07-31 07:59:48

使用類，而不是每個在你需要該鏈接的ID

$(".PeoplePopup").fancybox({ 
'autoScale'   : false, 
'padding'   : 0, 
'width'    : 800, 
'height'   : 600, 
'transitionIn'  : 'elastic', 
'transitionOut'  : 'elastic', 
'type'    : 'iframe', 
'overlayColor'  : '#000', 
'overlayOpacity' : 0.5 
});

然後，添加PeoplePopup類 -

<a href = "peoplesearch.aspx" class="SmallWhite PeoplePopup">Search for Internal Contact details &gt; </a> 

<a href = "peoplesearch.aspx" class="SmallWhite PeoplePopup">Internal Contact details &gt; </a>

來源

2012-07-31 07:51:11

雖然提供的答案是正確的，我d建議給jQuery一些範圍，否則你正在通過整個窗口對象搜索.PeoplePopup的存在，例如

$（ '＃PeopleContainer .PeoplePopup'）

或

$（ '＃PeopleContainer'）。找到（ 'PeoplePopup'）

雖然XPath選擇器正常工作，從左到右， jQuery瞭解如何優化第一個示例。

，如果它是一個小網站，你不會注意到其中的差別，但如果你已經得到了網頁和相當複雜的DOM上一打以上的情況下，將開始重要。

來源

2012-07-31 08:03:32 hedgehog

嗨，感謝你 - 即時通訊使用彈出窗口編輯大表中的每個元素，你提到的情況實際上會導致什麼樣的問題？ – 2012-07-31 08:06:35

單獨在類名上選擇可能會導致性能下降。大約5年前，當我將一個定製的手風琴插件應用到100頁左右div的頁面時，我很難學會這門課。在速度較慢的機器上，用戶會體驗到可怕的「這個腳本需要很長時間才能運行，你想等待還是殺死它？」錯誤（我是釋義，因爲它依賴於瀏覽器）。 this： $（'。PeoplePopup'）必須搜索DOM中的每個元素，然後檢查該類。 $（'＃PeopleContainer'）。find（'。PeoplePopup'）只在您分配ID爲「PeopleContainer」的任何元素內搜索。 – hedgehog 2012-07-31 08:24:55

啊我看到了 - 這很有道理，所以我把第一部分作爲包含DIV的名稱？ – 2012-07-31 09:55:31

如何從多個鏈接調用相同的fancybox javascript？

回答

相關問題