demoshop

demo, trying to be the best_

因為在和設計人員配合的時候,經常會請他們要考量到一些頁面是使用 LightBox 因此客製化後很多頁面開起來的大小都不一樣,之前是請設計人員寫一份清單,後來是請設計人員自己寫 LightBox 叫用的Script ,怎樣都是麻煩所以demo就改請設計人員直接使用class來定義需要開啟的大小。

demo廢言這是一個很無聊的小玩意,基本上懂 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% 的大小


回應討論