leman » Java Script http://blog.lmswork.com 所說的三四事 Mon, 25 Jul 2011 10:44:58 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 在 Facebook Apps/Profile Tab 下的圖片按鈕 http://blog.lmswork.com/2010/05/image-button-under-facebook-profile-tab-page/ http://blog.lmswork.com/2010/05/image-button-under-facebook-profile-tab-page/#comments Mon, 31 May 2010 07:32:09 +0000 Leman http://blog.lmswork.com/2010/05/mouse-over-%e5%9c%a8-facebook-appsprofile-tab/ 紀錄在案用!

如要在 Application/Profile Tab 中加入 Mouse Over 換圖, 可使用 CSS 將圖片替換。

<style type=”text/css”>
#btn1{width:109px; height:31px; display:block; float:left;background:url(http://domain.com/image1.jpg); }
#btn1:hover{background:url(http://domain.com/image1.jpg);}
</style>
<a href=”#” id=”btn1″></a>
原本想測試可否用 onmouseover 來解決, 不過總是不能成功.
可能跟那個sandbox 過濾了 javascript 有關
]]> http://blog.lmswork.com/2010/05/image-button-under-facebook-profile-tab-page/feed/ 0 PNG 能在 Internet Explorer 6 透明的方法 http://blog.lmswork.com/2009/04/png-transparency-layer-under-ie6/ http://blog.lmswork.com/2009/04/png-transparency-layer-under-ie6/#comments Mon, 27 Apr 2009 13:40:53 +0000 Leman http://blog.lmswork.com/?p=223 最近找到 PNG 在IE6 上能透明較便利的方法, 

建基於 jQuery, 此方法需要使用 Javascript 和 CSS

 

假設你有這一段code :

<style>
.element{background:url(/some/images/image.png)}
</style>

<div class=”elemet”></div>

 

當執行 $(‘.element’).fixPNG() 之後,

class=”element” 的元件的類別(class) 為 “element” 中的背景圖就會由 backgroundImage 改做 Microsoft 的 Filter,

使 PNG 作結尾的圖片檔案能在InternetExplorer 6 上回覆應有的透明層

要看原始碼可到….

http://docs.jquery.com/Tutorials:PNG_Opacity_Fix_for_IE6

]]> http://blog.lmswork.com/2009/04/png-transparency-layer-under-ie6/feed/ 0 [jQuery] 圖片導覽 http://blog.lmswork.com/2009/04/jquery-image-navigator/ http://blog.lmswork.com/2009/04/jquery-image-navigator/#comments Sun, 26 Apr 2009 19:08:08 +0000 Leman http://blog.lmswork.com/?p=245 純粹公司客戶需要。

大概是要做出一個熱門產品列表, 在”參考”大大小小, 各大同類網站之後, 最後還是選擇了 iTunes 相類似的方式

一開始就使用 jquery-1.3 開發

只在 Safari 4 beta , Chrome, Firefox 3.0, Internet Explorer 6 測試過

展示位置: http://lab.lmswork.com/jq-lms-navigator/

使用方法:

$(‘#test’).Navigator({width:500,height:200,cellWidth:100,cellHeight:100});

width: 顯示長度
height: 顯示高度
cellWidth: 每一格的長度
cellHeight: 每一格高度

這個程式只供測試, 歡迎大家下載試用, 及歡迎提供意見

]]> http://blog.lmswork.com/2009/04/jquery-image-navigator/feed/ 2 漫有引力 http://blog.lmswork.com/2009/03/just-paint-it/ http://blog.lmswork.com/2009/03/just-paint-it/#comments Thu, 05 Mar 2009 17:04:50 +0000 Leman http://blog.lmswork.com/?p=169 最近很榮幸能參與一項專案, 是用 ActionScript3 建立而成的, 使用 Flex SDK 3.2 開發的繪畫工具

這不是什麼新鮮事, 只是由AS1 進化到 AS3, 為客戶編寫他們專用的繪畫工具, 給使用者在他們的網站發表個人作品

 

有空可以到 http://app1.rthk.org.hk/elearning/hkillustrators/gallery.php?pg_id=2 使用

]]> http://blog.lmswork.com/2009/03/just-paint-it/feed/ 1 SWFUpload http://blog.lmswork.com/2008/09/swfupload/ http://blog.lmswork.com/2008/09/swfupload/#comments Sat, 27 Sep 2008 07:52:39 +0000 Leman http://blog.lmswork.com/?p=54 SWFUpload 是一個可以同時上傳檔個檔案的flash+javascript 的小程式, 就需要 HTML 及 ServerSide 做一些設定, 以下用 PHP 作示範:

HTML

在<head> … </head>內 加入 以下的 javascript 內容

<script type="text/javascript">
// 上傳之前執行的, 需要return true 代表可以繼續上傳
var uploadStart = function(obj){
return true;
}

// 執行於上傳出現錯誤
var uploadError = function(obj, code, message){
document.getElementById('message').innerHTML+='Upload Failure:'+code+':
\n'+message+'
\n';
}

// 當上傳檔案中執行
var uploadProgress = function(obj, completed, total){
document.getElementById('message').innerHTML='Uploading...'+Math.floor(completed/total)+'%
\n';
}

// 當上傳一個檔案後執行
var uploadSuccess = function(obj, message){
document.getElementById('message').innerHTML='Upload Successful:
\n'+message+'
\n';
}

var fileQueued = function (obj){
//當有檔案被選擇後, 便立即上傳檔案
swfu.startUpload();
}

var swfu;
window.onload = function() {
var settings = {
file_post_name : "Filedata", // 上傳名稱, 等同<input type="file" name="Filedata" />
flash_url : “../swfupload/swfupload_f9.swf”,
upload_url: “../simpledemo/upload.php”, // 這一個檔案是負責接收SWFUpload選擇好的檔案
post_params: {“PHPSESSID” : “”,”other_data”:”123″}, // 如果你需要處理識別使用者, 可加入PHPSESSID 的資料; 另外可加其他資料到 post_params
file_size_limit : “100 MB”, // 最大的檔案size
file_types : “*.*”, // 如需要指定文件格式如jpeg , 可輸入 “*.jpg”
file_types_description : “All Files”,
file_upload_limit : 100, // 同一頁最多上傳的數量(只計成功上傳)
file_queue_limit : 0,
custom_settings : {
progressTarget : “fsUploadProgress”, //
cancelButtonId : “btnCancel”  //取消按鈕位置
},
debug: false,

// 設定 Handler
file_queued_handler: fileQueued,
upload_progress_handler : uploadProgress,
upload_start_handler : uploadStart,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
};

swfu = new SWFUpload(settings);
};
</script>

在<body> … </body>內 加入 以下的內容

<fieldset id="fsUploadProgress">
<legend>Upload Queue</legend>

</fieldset>

<div id="message"></div>

<div>

<input type="button" value="Upload file (Max 100 MB)" onclick="swfu.selectFiles()" />

<input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" />

</div>


在<body> … </body>內 加入 以下的內容

PHP

<?php
// 已接收檔案的位置
$tmp_name = $_FILES['Filedata']['tmp_name'];

// 原本檔案名字
$orginial_name = $_FILES['Filedata']['name'];

// 將檔案放到目標位置
if(move_uploaded_file($tmp_path,’/path/to/your/place/’.$orginial_name)){
print “$orginial_name uploaded successful”;
}else{
print “$orginial_name uploaded failure.”;
}

?>

]]> http://blog.lmswork.com/2008/09/swfupload/feed/ 0 SWFUpload + Ext2 http://blog.lmswork.com/2008/09/swfupload-ext2/ http://blog.lmswork.com/2008/09/swfupload-ext2/#comments Wed, 17 Sep 2008 11:54:11 +0000 Leman http://blog.lmswork.com/?p=3 要做到多個檔案上傳, SWFUpload 是一個不錯的選擇

而 Ext.ux.UploadDialog 是一個較好的GUI 工具, 可以同時上傳多個檔案

不過serverside 就有必須回應一組 json 資料:
{
success: true|false, // 必須, 用作通知是否成功上傳
error: 'Error or success message' // 可選的, 用作顯示上傳情況 ( 可改用message 取代 error)
}
http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php

]]> http://blog.lmswork.com/2008/09/swfupload-ext2/feed/ 0