inline和block

2007-11-29

Block Element:、、、…etc
Inline Element:、、…etc更多可參考 http://big5.ce.cn/gate/big5/blog.ce.cn/html/28/106828-14009.html

Inline特點是和其他元素在同一行顯示，而且height、padding、margin不得改變，寬度是內文或圖片的寬度也不可自行設定ex，block則完全相反，特點為從新的一行開始且width、height、padding、margin都可自行設定。可用display:block或display:inline的CSS屬性把inline元素切換為有block Element的性質，反之亦然。

展開全文 >>

AS3 to JPG

2007-11-06

今天在邦邦和milkmidi看到webcam to JPG的文章蠻有意思的，所以做了一個文字框轉JPG的練習。

DEMO

流程
把文字框畫在Bitmapdata→用JPGEncoder 把bitmapdata編碼為JPG格式→丟到ByteArray→用uploadFile()上傳到後端並產生實體檔案
JPGEncoder和uploadFile的部份是外國強者開發的，所以我們只要懷著感恩的心引用函式即可~
JPEGEncoder 可參考以下網址：
http://marstonstudio.com/index.php/2007/08/19/how-to-take-a-snapshot-of-a-flash-movie-and-automatically-upload-the-jpg-to-a-server-in-three-easy-steps/

http://code.google.com/p/as3corelib/
uploadFile()可參考以下網址：
http://www.jooce.com/blog/?p=143
http://www.jooce.com/blog/wp-content/uploads/2007/06/uploadFile.txt
Code如下:
bytearrayToFile.mxml

$uploadfile = $uploaddir . basename($_FILES['Filedata']['name']);   
$temploadfile = $_FILES['Filedata']['tmp_name'];   
move_uploaded_file($temploadfile , $uploadfile); ?>

展開全文 >>

Jquery入門集錦

2007-11-06

Jquery也不錯喔!以下是最近看到的入門教學
Jquery TutorialsJquery網站提供的的Tutorial

http://docs.jquery.com/Tutorials:How_jQuery_Works
Jquery Tutorials(簡中)熱心的對岸同胞把Tutorial翻成中文http://www.k99k.com/jQuery_getting_started.html
飛翔部落-Jquery基本介紹http://blog.pixnet.net/shian0745/post/7115793
飛翔部落-Jquery Core 筆記http://blog.pixnet.net/shian0745/post/7457977
飛翔部落-Jquery Selectors 筆記http://blog.pixnet.net/shian0745/post/8502341
飛翔部落-Jquery Attributes 筆記http://blog.pixnet.net/shian0745/post/8718699
飛翔部落-Jquery 和Prototype一起使用http://blog.pixnet.net/shian0745/post/8767748

展開全文 >>

解決頁面為BIG5碼或GB碼AJAX中文亂碼的方法

2007-10-03

在Real-Blog看到的
用 AJAX 讀取一個中文頁面時，很多時會出現亂碼，因為 XMLHTTP 處理返回的 responseText 時，會用 UTF-8 編碼解讀，如果頁面送出的文件是 UTF-8 編碼便沒有問題，但如果所使用用的是 BIG5 或者 GB 編碼，就會出現亂碼情況。

解決方法是在送出的頁面加一個 HTTP Header 指定所使用的編碼，方法為:

PHP: header(“Content-Type:text/html;charset=BIG5”);
ASP: Response.Charset=(“BIG5”)
JSP: response.setHeader(“Charset”,”BIG5”);

============================分隔線========================
不過ASP的部份，用codepage不知道為什麼不行?也許codepage指定IIS
用什麼編碼讀取傳遞過來的字串時不會對Header動手腳吧
Whatever，如此一來舊系統也可以用Ajax，帥!!

展開全文 >>

FLEX-TileList練習

2007-09-22

最近在Study Flex，以下是TileList的練習

TilleList元件由dataProvider屬性接收資料，由itemRenderer屬性呼叫

用來layout的自訂元件，然後不斷的repeat。詳細的說明可以看flex2的help

範例下載

a1.mxml主要的mxml

itemRenderer="placelist" width="476" y="68" height="229" x="10"/>

placelist.mxml-自訂元件(用來layout內容)

horizontalAlign="center"  
verticalGap="0" borderStyle="none" width="148" height="86">

place.xml-xml檔

it  
peter  
板橋  
0926xxxxxx  
2007/02/01  



it  
jane  
台北_  
0923xxxxxx  
2007/02/01  


it  
david  
新竹  
0946xxxxxx  
2007/02/01  


it  
albert  
台中  
0928xxxxxx  
2007/02/01

展開全文 >>

PVD3D小試

2007-09-18

上禮拜參加MMUG的網聚，邦邦介紹了使用PVD3D的方法。寫了一個小練習，附上的自已畫的sprite、camera、3D物件的關係圖，有錯的話請指正，哈哈
~

範例連結

package {  
 import flash.display.BitmapData;  
 import org.papervision3d.events.InteractiveScene3DEvent;  
 import org.papervision3d.scenes.MovieScene3D;  
 import org.papervision3d.cameras.Camera3D;  
 import org.papervision3d.objects.*;  
 import org.papervision3d.materials.*;  
 import org.papervision3d.utils.*;  
 import org.papervision3d.objects.Sphere;  
 import org.papervision3d.scenes.*;  
 import flash.events.Event;  
 import flash.display.Sprite;  
 import flash.events.MouseEvent;  
 import flash.display.DisplayObject;  
 import flash.display.MovieClip;  
 import flash.display.BlendMode;  
 import flash.display.StageAlign;  
 import flash.display.StageScaleMode;  
 import flash.geom.Matrix;  
 import flash.display.Bitmap;  

[SWF(backgroundColor="#000000", frameRate="30", width="1400", height="1400")]  

public class Step2 extends Sprite  
{  
[Embed(source="min.JPG")]  
private var CubeTexture:Class;  
private var container:Sprite;  
private var scene:Scene3D;  
private var camera:Camera3D;  
private var rootNode:DisplayObject3D;  
private var material:ColorMaterial;  
private var myCube1:Cube;  
private var myCube3:DisplayObject3D;  

public function Step2()  
{  
// initialize the objects  
init3D();  

// add a listener for the 3D loop  
addEventListener(Event.ENTER_FRAME, loop3D);  
}  

private function init3D():void{  

container = new Sprite();  
addChild(container);  
//產生最原始的影片物件  

container.x =300;  
container.y = 300;  
//設定影片大小  

scene = new Scene3D(container);  
//把Scenen3D物件放到影片物件中  
var cubeTexture:Bitmap = new CubeTexture() as Bitmap;  
//新增Bitmap類別(用來載入jpg)  
var bpp:ColorMaterial=new ColorMaterial(0xffcc00);  
//顏色材質，等等要貼在cube上  
 var mp2:MaterialsList = new MaterialsList(  
//材質列表物件，應該是用來貼多邊型，有前後左右下上面可設定材質  
 {  
 //all:  
 front: new ColorMaterial(0xffcc00),  
 back: new ColorMaterial(0x5CCC00),  
 right: new ColorMaterial(0xEBEBEB),  
 left: new BitmapMaterial(cubeTexture.bitmapData),  
 top: new ColorMaterial(0x3D38EB),  
 bottom: new ColorMaterial(0xffcc00)  
 } );  

//mp2.addMaterial(bpp,"all");  
//也可以用add的方式貼   
 var myCube1:Cube=new Cube(mp2,500,500,800);  
 //產生cube物件，帶入材質和大小  
scene.addChild(myCube1);  
//把cube增加入畫面  

camera = new Camera3D();  
//攝影機物件  
camera.z = -1000;  
//攝影機的距離  
camera.zoom = 5;  
//攝影機的zoom in程度  
camera.focus = 100;  
}  

private function loop3D(event:Event):void{   
//不斷loop的程式   
 camera.hover(1, (container.x - mouseX)/100, (container.y-mouseY)/100);  

scene.renderCamera( this.camera );   
}  
}  

}  


</pre><p></p></div></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></DIV></BODY></HTML>

展開全文 >>

phpMyadmin的文字顯示亂碼?

2007-08-19

加上mysql_query(“SET NAMES utf8”);或mysql_query(“SET NAMES big5”);
表示這個 connection 連線內容都要使用utf8或big5

$link = mysql_connect($host,$user,$pass);   
mysql_select_db($DB,$link);   
$result = mysql_query("SET NAMES utf8");  
if(mysql_query("INSERT INTO member (name,personId,birthday,mobile) VALUES ( '魚缸2', 'a123456', '1981-12-10', '02656+5')")){  
echo "ok";  
}  
$result = mysql_query("select * from member");   
while ($row = mysql_fetch_array($result))   
{   

..........  

}   
?>

展開全文 >>

UTF-7轉BIG5

2007-08-17

參考程式設計俱樂部的文章寫的，感謝ichirolu和chiuinan2無私的分享~

．下載程式．

展開全文 >>

在Ubuntu安裝嘸蝦米輸入法

2007-07-14

筆記一下!

嘸蝦米安裝方法如下：
摘自Ubuntu正體中文站H45大大的發言－原文

安裝 SCIM，下載謎物，解壓縮並編輯它

sudo apt-get install scim  
wget http://cle.linux.org.tw/~edt1023/gcin/noseeing-8.tar.gz  
tar -zxvf noseeing-8.tar.gz  
gedit noseeing.cin  

把第 1 行到第 39 行換成以下  
    SCIM_Generic_Table_Phrase_Library_TEXT  
VERSION_1_0  
BEGIN_DEFINITION  
UUID = 3d872a7a-760e-400c-8b23-688d38390e81  
SERIAL_NUMBER = 20040922  
ICON = /usr/share/scim/icons/liu5.png  
NAME = Liu5  
NAME.zh_CN = 嘸蝦米  
NAME.zh_TW = 嘸蝦米  
NAME.zh_HK = 嘸蝦米  
LANGUAGES = zh_TW,zh_HK,zh_CN,zh_SG  
STATUS_PROMPT = 中  
AUTO_SELECT = FALSE  
AUTO_WILDCARD = TRUE  
AUTO_COMMIT = FALSE  
AUTO_SPLIT = TRUE  
DYNAMIC_ADJUST = TRUE  
AUTO_FILL = FALSE  
ALWAYS_SHOW_LOOKUP = TRUE  
DEF_FULL_WIDTH_PUNCT = TRUE  
DEF_FULL_WIDTH_LETTER = FALSE  
MAX_KEY_LENGTH = 4  
VALID_INPUT_CHARS = ,.'abcdefghijklmnopqrstuvwxyz[]  
SINGLE_WILDCARD_CHAR = ?  
MULTI_WILDCARD_CHAR = *  
SPLIT_KEYS = space  
COMMIT_KEYS = space  
FORWARD_KEYS = Return  
SELECT_KEYS = space,2,3,4,5,6,7,8,9,0  
### The key strokes to page up the lookup table.  
PAGE_UP_KEYS = Page_Up  
PAGE_DOWN_KEYS = Page_Down,space  
END_DEFINITION  
BEGIN_TABLE

在文件的最後一行置加上
END_TABLE
儲存並離開，以此表格建立 scim 使用的二元檔。

scim-make-table noseeing.cin -b -o liu5.bin
到此算是完成最重要的 liu5.bin
開啟 SCIM 輸入法設定視窗
輸入法引擎－＞泛用對照表－＞管理對照表－＞安裝－＞選取檔案
選取剛建立好的 liu5.bin
確定！！

重新登入，開啟文字編輯器，切換 SCIM 輸入法

展開全文 >>

prototype常用函數

2007-07-05

prototype真的是不錯的ajax framework，以下為常用的函數

轉自http://btyang.bloghome.cn/posts/107306.html

prototype詳細的用法請按此

函數名

解釋

舉例

|
|

Element.toggle

交替隱藏或顯示

Element.toggle(‘’div1’’,’’div2’’)

|
|

Element.hide

隱藏

Element.hide(‘’div1’’,’’div2’’)

|
|

Element.show

顯示

Element.show(‘’div1’’,’’div2’’)

|
|

Element.remove

刪除

Element.remove(‘’div1’’,’’div2’’)

|
|

Element.getHeight

取得高度

Element.getHeight(‘’div1’’)

|
|

Toggle.display

和Element.toggle相同

Toggle.display(‘’div1’’,’’div2’’)

|
|

Insertion.Before

在DIV前插入文字

Insertion.Before(‘’div1’’,’’my content’’)

|
|

Insertion.After

在DIV後插入文字

Insertion.After(‘’div1’’,’’my content’’)

|
|

Insertion.Top

在DIV裏最前插入文字

Insertion.Top(‘’div1’’,’’this is a text’’)

|
|

Insertion.Bottom

在DIV裏最後插入文字

Insertion.Bottom(‘’div1’’,’’this is a text’’)

|
|

PeriodicalExecuter

以給定頻率調用一段JavaScript

PeridicalExecutor(test, 1)”這裏test是Javascript的函數,1是頻率(1秒).

|
|

取得一個DIV, 相當於getElementById()

$(‘’div1’’)

|
|

Field.clear

清空一個輸入框

Field.clear(‘’textfield1’’)

|
|

Field.focus

把焦點集中在輸入框上

Field.focus(‘’select1’’)

|
|

Field.present

判斷內容是否為空

alert(Field.present(‘’textfield1’’))”

|
|

Field.select

選擇輸入框的內容

Field.select(‘’textfield1’’)”

|
|

Field.activate

把焦點集中在輸入框上並選擇輸入框的內容

Field.activate(‘’textfield1’’)”

|
|

Form.serialize

把表格內容轉化成string

|
|

Form.getElements

取得表格內容為陣列形式

|
|

Form.disable

disable表格所有內容

Form.disable(‘’form1’’) (這個好象不work)

|
|

Form.focusFirstElement

把焦點集中在表格第一個元素上

Form.focusFirstElement(‘’form1’’)

|
|

Form.reset

Reset表格

Form.reset(‘’form1’’)

|
|

Form.Element.getValue

取得表格輸入框的值

Form.Element.getValue(‘’text1’’)

|
|

Form.Element.serialize

把表格中輸入框內容轉化成string

Form.Element.serialize(‘’text1’’)

|
|

等同於Form.Element.getValue()

$F(‘’text1’’)

|
|

Effect.Highlight

高亮特效.

Effect.Highlight(‘’text1’’)

|
|

Effect.Fade

褪色特效

|
|

Effect.Scale

放大縮小(百分比）

Effect.Scale(‘’text1’’, 200)
這裏200 = 200%, 即兩倍

|
|

Effect.Squish

消失特效．文字縮小後消失

Effect.Squish(‘’text1’’)

|
|

Effect.Puff

消失特效．文字放大後消失

Effect.Puff(‘’text1’’)

|
|

Effect.Appear

出現特效

|
|

Effect.ContentZoom

ZOOM特效．

|
|

Ajax.Request

傳送Ajax請求給伺服器

Ajax.Request(‘’http://server/s.php‘’)

|
|

Ajax.Updater

傳送Ajax請求給伺服器並用答復的結果更新指定的Container

Ajax.Updater(‘’text1’’,’’http://server/s.php‘’)

基本用法:prototype.js給每個主要的類都分了一個Class,使用起來很方便.要產生特定的效果,只要用new Class.function()就可以了.例如:

當點擊Click Me的時候,div2就會交替隱藏或顯示.注意,你可以給toggle加上無限個parameter,比如Element.toggle(‘’div2’’,’’div3’’,’’div4’’,…)

Click Me

Hello!

展開全文 >>