patw 的筆記、生活、隨筆
jQuery
[JavaScript] 在 IE 中隱藏/顯示 DIV 中的 Flash 不會重新播放的解法
九月 28th
在某個案件中,需求是點擊 HTML 頁面上的 button 便會以 BlockUI 方式顯示一個包含 SWF 動畫的 DIV 出來,點擊 SWF 上的叉叉可隱藏此 DIV,若使用者再次點擊 HTML button,該 DIV 又會顯示出來並且從頭再播放 SWF 動畫。
在 Chrome 以及 Firefox 上都可以達到上述需求,但到了 IE 上,隱藏 DIV 後再顯示,其中的 SWF 似乎並不會被重新載入,因此會停留在上次播放的最後一格,尚不知這是 IE 對於 Flash 的 Bug 或這才是正常的,經過一番討論跟摸索後試出了解決方法。
※當然也可以採用 JavaScript 呼叫 SWF 中的重新播放事件來解決,但此次並不是採用此方法解決。
[Facebook] 取得粉絲專頁資訊與最新一筆主題的方法 (PHP/jQuery/ASP.NET(C#))
三月 15th
想要取得粉絲專頁(粉絲團頁面)的公開資訊,以及該粉絲團最新一筆主題該怎麼做呢?
這邊分成三種版本來講:PHP、jQuery 與 C#.NET。
※由於粉絲專頁幾乎是公開資訊,從 Graph API 就可取得。因此其實也可以不用做 app,直接就可以透過 Graph API 撈取。這邊只有 PHP 是用老作法。
[jQuery] 使 ASP.NET 的 DropDownList 支援選項分組(optgroup)
三月 2nd
由於 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;
}
};
[JavaScript] Shadowbox 燈箱效果於父視窗展示 iframe 頁中的圖片 Gallery
十二月 29th
好,我知道這個標題相當拗口 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 的父視窗展示圖片群組的!以下就來看看做法吧。
[AJAX] 跨網域取得/存取資料
十二月 21st
[jQuery] 倒數計時(還有X天X時X分X秒)
十月 19th
jQuery 倒數計時, 需要 jQuery.Timers 這個 plugin.
startDate 可以用 server 的時間輸出, 避免 client 的電腦時間不準。
[jQuery] jQuery plugin: Validation 加上「群組不可有重複值」驗證
八月 18th
jQuery plugin: Validation 是一套很讚的表單前端驗證工具,但少了「群組不可有重複值」這項驗證有些可惜。
什麼時候會用到呢?舉個例來說,表單希望你填入親友A、親友B與親友C 三者的 E-mail,但我們又不希望使用者通通填同一個 E-mail,這時三個欄位就為一個 E-mail 群組,並希望每欄皆為獨立值。
幸好有熱心高手寫了 Validation 的 plugin,可以加掛這項驗證上去,以下來說明怎麼做吧。
原始網址在此
[jQuery] 自訂 select 選單樣式
八月 18th
需求:下拉選單的設計是自訂的樣式,不只背景,連右方箭號也是。使用 jQuery 的解法很多,此為其中一種。
若要連下拉出的選單樣式都要變更 .. 可參考 jQuery UI 的版本。
解法:
http://mondaybynoon.com/2009/02/23/creating-custom-form-elements-using-jquery-selects/
[jQuery] blockUI + jQuery.validate 配合使用
六月 30th
使用 jQuery.validate 驗證表單內容,若通過驗證則加上 blockUI 遮蓋畫面(一方面是防止使用者重複按下送出鈕、另一方面是有個 Loading 畫面可以讓使用者知道表單仍在處理中),反之(驗證不通過)則僅顯示錯誤就好。作法如下:
使用 jQuery.validate 的 submitHandler 事件:
[jQuery] lightbox 彈出時造成頁面上的 Flash 消失
六月 10th
某個案子使用了 lightbox2 燈箱效果(jQuery 版,jquery-lightbox-0.5.js),而當 lightbox 彈出後,頁面上的 Flash 項目卻都消失了。看了一下 jquery-lightbox-0.5.js 的原始碼,原來是為了避免 Flash 顯示於最上層,也就是跑到 overlay 黑底的上面,而加上蹦現時將 embed、object 與 select 元素隱藏的語法。
其實可以利用 Flash 的 wmode 屬性避免這種現象,同時也可在燈箱效果出現時顯示 Flash(當然,是在 overlay 黑底下方)。
More >
近期迴響