[jQuery] 解決 IE6 PNG 透明背景 (Supersleight jQuery Plugin for Transparent PNGs in IE6)

今天無意間看到 Drew McLellan 在 2007 年寫了這篇 Transparent PNGs in Internet Explorer 6,真的是太晚發現這篇了,之前自己寫到一篇:『[CSS] IE 6, 7, 8 FireFox hack 支援透明背景圖 background or img javascript』,雖然 Google 官方網站宣佈完全不支援 IE6 瀏覽器,打算只支援 Microsoft Internet Explorer 7.0+, Mozilla Firefox 3.0+, Google Chrome 4.0+, Safari 3.0+,可是我們這些 Web Developer 還是需要考慮客戶的瀏覽器阿,因為客戶才是最大的,尤其是在一些學術機構,安裝好 XP,預設就是 IE6,從 Google 分析裡面,IE6 也是網站的客戶大群。 先來介紹 Drew McLellan 寫的一支好用 js 來改善所有 png 透明圖檔,最主要是修正 background-image 跟 img tag 所包含的 png 圖檔 先下載:Download SuperSleight,解壓縮放到 js 資料夾 針對 IE6 瀏覽器寫入 html [Read More]

[jQuery] AjaxFileUpload : Multiple File Upload plugin

最近 survey 一些 AJAX upload plugin by jQuery,或者是一些網路知名 upload opensource: SWFUpload, 以及目前很強大的 Plupload,先來說明 AjaxFileUpload 這個 jQuery Plugin 單一檔案上傳,如果想要簡單方便的單一上傳,我很推薦這個,搭配回傳的 json type 吐出錯誤訊息還蠻好用的,雖然作者給單一上傳的說明,不過還是可以將它改成多檔上傳,也就是多增加 input type=“file” 就可以了,底下介紹一下怎麼實作單一檔案或者是多檔案上傳。 單一檔案上傳 先 include AjaxFileUpload javascript html: jQuery code: function ajaxFileUpload() { //這部份可以省略,或者是撰寫當 ajax 開始啟動需讀取圖片,完成之後移除圖片 $("#loading") .ajaxStart(function(){ $(this).show(); }) .ajaxComplete(function(){ $(this).hide(); }); /* prepareing ajax file upload url: the url of script file handling the uploaded files fileElementId: the file type of input element id and it will be the index of $_FILES Array() dataType: it support json, xml secureuri:use secure protocol success: call back function when the ajax complete error: callback function when the ajax failed */ $. [Read More]

遲來的 jQuery 1.4 Released

為了慶祝 jQuery 四週年慶,官方網站終於 Release 1.4 版本了,也大幅度修改了 jQuery API 網站,跟以往一樣,jQuery 提供兩種版本讓大家測試跟下載:jQuery Minified (23kb Gzipped),這版本是利用 Google Closure Compiler 去壓縮,以往好像是用 YUI Compressor,另一版本就是沒經過壓縮:jQuery Regular (154kb),當然 Google 也提供了 host 來讓 jQuery 有 cache 檔案作用,增加網站速度: http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js 1.4 版本的出來,最主要就是效能的改善,以及整個 Code Base 翻修,可以參考 John Resig 寫的 JavaScript Function Call Profiling,看到底下的圖,就大致上知道 1.4 的效能改善 4271690739_f0bced3a78 (by appleboy46) .css() and .attr() 效能改善圖: 4271691147_fd72853fa4 (by appleboy46) 整篇都在說明 jQuery 效能的部份,真的是改善很多,Media Temple 主機商也贊助 jQuery 14天的徵文活動,大家可以上去看看有很多影片都是在介紹 jQuery,最後得獎的人可以獲得 13" MacBook Pro,真是太吸引人了。 最後可以參考 黑暗執行緒大大寫的:jQuery 1.4 小閱兵

[jQuery] ThickBox 3.1 無限期停止支援維護

Oceanic / 人生海海 看到這篇 thickbox 停止維護ThickBox jQuery plugin 裡面算是不錯用的工具,在網路上常常會聽到這個名詞,thickbox 作者也推薦了底下類似套件:

fancybox 的,目前開發專案都以它為主,因為在瀏覽整頁圖片,我覺得效果不錯,剛剛去 try 了一下 colorbox,發覺這套也不錯用。在 fancybox 裡面設定 zoomSpeedIn 或者是 frameWidth 的值,就直接設定數字,不用在加上引號,不然會沒出現效果。

$(document).ready(function() {
	$("a.group").fancybox({
		'zoomSpeedIn': 300, 
		'zoomSpeedOut': 300
	});
});

[網站] 好站連結 (四)

PHP How to create Microsoft Office Documents with PHP IP 判斷方式 Get a list of all available constants with PHP Get a list of all available classes with PHP Get a list of all available functions with PHP The Google Analytics API and PHP: A series Google Analytics API PHP Class data method parameters Dynamically Create Menu With PHP DOM Enable the file manager connector with FCKEditor and PHP MySQL [Read More]

[jQuery] 驗證表單實作筆記 API/1.3/Selectors

驗證 form 表單屬於前端的工作,非常重要,避免使用者填錯格式,當然在 jQuery Plugin 可以找到專門驗證表單的外掛:jQuery plugin: Validation,此外掛不能相容於 IE 6,會沒辦法呈現效果,google 到一篇解決方法:Validating not happening in IE6 & no error removal on keyup,這篇裡面提到,必須使用 un-packed and un-minified 的版本,也就是沒有壓縮過的 javascript 檔案,不過我自己沒有試過就是了,底下針對表單的 checkbox select input radio 欄位做檢查的筆記,可以讓大家參考看看。 在 jQuery 1.3 裡面正式拿掉 [@attr] 的寫法,所以以前寫 $(“input:radio[@name=reg_sex]”) 都要改成 $(“input:radio[name=reg_sex]”),這樣才是正確的,可以參考 jQuery Selector 這篇的 Attribute Filters 部份,先來一篇網路上實做提示說明在 text 來未:jQuery: show plain text in a password field and then make it a regular password field on focus 作法很簡單:建立兩個輸入 password 的 text input 欄位:

[Read More]

[jQuery] 日曆時間外掛 timepicker CSS/Offset 問題 | Plugins

最近把之前弄的 jQuery 日期外掛拿出來看看,筆記過兩篇:[jQuery筆記] 時間日期外掛:timepicker | jQuery Plugins[jQuery筆記] 好用的日期函式 datepicker,目前在寫活動的開始時間跟結束時間會用到這兩個外掛,網路上有找到整合日期跟時間的程式,不過效果都不是我很喜歡,因為在時間方面想要設定可以分隔5分鐘,或者是10分鐘間隔,有沒有網友可以提供更好的 jQuery 外掛,可以將日曆跟時間整合在一起,用單一 input 欄位就可以控制,也可以設定間隔時間,目前是搭配這兩個外掛同時使用,也可以達到同樣效果。 timepicker 作者網站,愈到了一個問題,只要網頁裡面有用到 jQuery Showhide 都會讓 timepicker 程式判斷 CSS/offset 發生錯誤,導致功能無法顯示在正確的地方,會跑到網頁其他位置,解決方法就是當滑鼠 click input 欄位時,再去呼叫取得目前 offset 的位置。

var elmOffset = $(elm).offset();
$tpDiv.appendTo('body').css({'top':elmOffset.top + 'px', 'left':elmOffset.left+ 'px'}).hide();
這樣就可以正確顯示在 input 下方,連這個都可以遇到地雷 XD