Fancybox 綁定選擇器,使用 jQuery
- 2010-12-05
- 13292
- 0
因為在和設計人員配合的時候,經常會請他們要考量到一些頁面是使用 LightBox 因此客製化後很多頁面開起來的大小都不一樣,之前是請設計人員寫一份清單,後來是請設計人員自己寫 LightBox 叫用的Script ,怎樣都是麻煩所以demo就改請設計人員直接使用class來定義需要開啟的大小。
這是一個很無聊的小玩意,基本上懂 jQuery 都寫的出來,所以只是提出一個設計和程式配合的小技巧而已。
基本上所有的LightBox都有兩種設定就是百分比或是像素,因此demo就定義請設計人員依據以下的規則來寫 Class。
- 開頭一定要是fancy
- 長寬使用底線來分隔
- 如果是百分比就使用p來區隔
因此如果要開一個 80% 80% 的視窗就是輸入 fancy80p_80p,如果要開一個320 × 200 就是使用 fancy320_200,當然也可以開一個 50% 400px 的視窗 fancy50p_400
而完整的 JS 就在以下提供
function BindFancybox(){ $("a[class*='fancy']").click(function () { /// <summary> /// fancybox 註冊 /// </summary> var e = $(this); var classValue = e.attr("class").split(' '); var fancyClass = ''; $.each(classValue, function (i) { if (classValue[i].indexOf('fancy') != -1) { fancyClass = classValue[i].replace('fancy', '').split("_"); } }); var width = filterFancySize(fancyClass[0]); var height = filterFancySize(fancyClass[1]); $.fancybox({ href: e.attr('href'), width: width, height: height, type: 'iframe', hideOnOverlayClick: false }); return false; }); }
這是決定數值的函式
function filterFancySize(val) { /// <summary> /// 專門為了 Fancybox 高寬設計的函式 /// </summary> try { var temp = val.toLowerCase(); if (temp.indexOf('p') != -1) return temp.replace('p', '%'); else { temp = parseInt(temp, 10); if (!isNaN(temp)) return temp; else { throw ''; } } } catch (e) { alert('Lightbox Class Fail! \nUsing Default Size 50%'); return '50%'; } }
為了避免解析出現問題,只要發生錯誤的時候就會預設開啟 50% 50% 的大小
回應討論