jQuery Chinese Characters Length Limit Plugin 1.0

Standard

終於試著寫一個 jQuery Plugin,功能是限制 input 或 textarea 中的文字長度,同時可針對中英文做不同的字元計算,中文時算為 2 字元、英文時則算 1 字元。

使用方法:

Basic:

$(document).ready(function () {
    $('目標對象').ChineseLengthLimit();
});

Advanced:

$(document).ready(function () {
    $('目標對象').ChineseLengthLimit({
        limitCount: 11,
        isByte: true,
        callback: function (data) {
            $("#msg").html("目前輸入:" + data.input + "/" + data.max + " 還剩:" + data.left + "字元");
        }
    });
});

Continue reading

[JavaScript] ASP.NET 的 ImageButton 搭配 jQuery validate submitHandler 事件 submit 時在 IE 無法引發伺服器端事件的問題與解法

Standard

前陣子案子遇到的問題,是一個簡單的表單需求,使用 ASP.NET 作為伺服器端語言,而前端要使用 jQuery validate 做驗證再送出。
在送出前需要再做一些事件,所以使用 jQuery validate submitHandler 事件處理,最後再以 form.submit(); 送出。

code 簡單重現如下:
Continue reading

[Facebook] 取得粉絲專頁資訊與最新一筆主題的方法 (PHP/jQuery/ASP.NET(C#))

Standard

想要取得粉絲專頁(粉絲團頁面)的公開資訊,以及該粉絲團最新一筆主題該怎麼做呢?
這邊分成三種版本來講:PHP、jQuery 與 C#.NET。

※由於粉絲專頁幾乎是公開資訊,從 Graph API 就可取得。因此其實也可以不用做 app,直接就可以透過 Graph API 撈取。這邊只有 PHP 是用老作法。

Continue reading

[jQuery] 使 ASP.NET 的 DropDownList 支援選項分組(optgroup)

Standard

由於 ASP.NET 的 DropDownList 控制項不支援 optgroup 標籤,就無法做選項分組的功能 ..
後來想用 jQuery 實現此一功能,我寫成 plugin 了,可參考一下:

把這段 code 存成 optgroupTrans.js:

$.fn.optgroupTrans = function() {

        var items = $(this);
        var groupnames = [];
        for (var i = 0; i < items.length; i++) {

            if ($(items[i]).attr('optgroup') != null) {
                groupnames.push($(items[i]).attr('optgroup'));
            }
        }

        // groupnames = $.unique(groupnames);
        groupnames = uniqueArray(groupnames);
        for (var i = 0; i < groupnames.length; i++) {
            $("option[optgroup='" + groupnames[i] + "']").wrapAll("<optgroup label='" + groupnames[i] + "'>");
        }


    function uniqueArray(a){
        temp = new Array();
        for(var i = 0; i < a.length; i++){
            if (!contains(temp, a[i])){
                temp.length += 1;
                temp[temp.length - 1] = a[i];
            }
        }
        return temp;
    }
    function contains(a, e) {
        for (j = 0; j < a.length; j++) 
              if (a[j] == e) return true;
        return false;
    }

};

Continue reading

[JavaScript] Shadowbox 燈箱效果於父視窗展示 iframe 頁中的圖片 Gallery

Standard

好,我知道這個標題相當拗口 XD

前幾天寫了篇 [JavaScript] ColorBox 跨越 iframe 顯示完整的黑底(overlay) ,但詢問的網友表示他希望能展示圖片群組,不過ColorBox 的官網,關於 Opening ColorBox in the parent of an iframed document 的這段,最後提到:

Note that grouping will not work with this format since the parent document can not access the content of the iframe to see if any of those elements share a rel attribute value.

也就是用這種方法的話,是無法取得 iframe 中元素的 rel 值的,因此也就無法展示圖片群組了。

也許可以修改以達成目的,但目前還沒空細細研究他的 Code .. 於是就偷懶先找其他替代方案囉 😛

經過連來連去的找尋,找到 Shadowbox.js 這套燈箱效果是可以達成在 iframe 的父視窗展示圖片群組的!以下就來看看做法吧。

Continue reading

[jQuery] jQuery plugin: Validation 加上「群組不可有重複值」驗證

Standard

jQuery plugin: Validation 是一套很讚的表單前端驗證工具,但少了「群組不可有重複值」這項驗證有些可惜。

什麼時候會用到呢?舉個例來說,表單希望你填入親友A、親友B與親友C 三者的 E-mail,但我們又不希望使用者通通填同一個 E-mail,這時三個欄位就為一個 E-mail 群組,並希望每欄皆為獨立值。

幸好有熱心高手寫了 Validation 的 plugin,可以加掛這項驗證上去,以下來說明怎麼做吧。
原始網址在此

Continue reading

[jQuery] lightbox 彈出時造成頁面上的 Flash 消失

Standard

某個案子使用了 lightbox2 燈箱效果(jQuery 版,jquery-lightbox-0.5.js),而當 lightbox 彈出後,頁面上的 Flash 項目卻都消失了。看了一下 jquery-lightbox-0.5.js 的原始碼,原來是為了避免 Flash 顯示於最上層,也就是跑到 overlay 黑底的上面,而加上蹦現時將 embed、object 與 select 元素隱藏的語法。

其實可以利用 Flash 的 wmode 屬性避免這種現象,同時也可在燈箱效果出現時顯示 Flash(當然,是在 overlay 黑底下方)。
Continue reading