2010年8月23日 星期一

套用JQuery的日期選擇器Datepicker

介紹目前如何使用JQuery-UI - Datepicker!

使用步驟

1、載入相關css與js檔案

先到JQuery官方網站下載,http://jqueryui.com/download

進入頁面後,先刪除全部的選取,然後只選擇 Datepicker!


再來選擇想要的樣式及版本,並按Download!!

JQuery相關套件下載

下載完成後會有個壓縮檔,取出下列的檔案!

  • js/jquery-1.4.2.min.js
  • js/jquery-ui-1.8.4.custom.min.js
  • css/redmond/jquery-ui-1.8.4.custom.css
  • css/redmond/images/所有圖檔

再下載繁體語系檔,http://jqueryui.com/ui/i18n/jquery.ui.datepicker-zh-TW.js

全下載完,將載入所有的 css 與 js檔案!

<link type="text/css" href="css/redmond/jquery-ui-1.8.4.custom.css" rel="stylesheet" />    
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-zh-TW.js"></script>    


2、套用Datepicker的 js 語法


<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
</script>

相關設定語法參考:http://jqueryui.com/demos/datepicker/

3、最後設定要使用的文字方塊控制項

 <input type="text" id="datepicker"/>



2010年6月3日 星期四

HTML5-新Tag

在最新的HTML5標準中新加了video的標籤!

主要是可以顯示影片的DOM,使得不一定要用瀏覽器外掛的軟體(ex:flash)才可執行影片!

範例:

<video width="320" height="240" controls="controls" loop="loop" autoplay="autoplay" >
<source src="movie.mp4" type="video/mp4" >
Your browser does not support the video tag.
</video>



2010年3月9日 星期二

在Flash中使用AS3.0將圖片水平反轉

package flashAs {
import flash.display.BitmapData;
import flash.geom.Matrix;
//具有圖片反轉功能的類別
public class ImageRotation extends Sprite{
private var matrix:Matrix;
private var sourceBD:BitmapData;

//建構子, 設定圖片來源和座標
public function ImageRotation (BD:BitmapData, X:int, Y:int){
sourceBD= BD;
this.x = X; this.y = Y;
//--設定變型矩陣的物件
matrix = new Matrix();
matrix.a=-1;
matrix.b = Math.sin( (180/180) * Math.PI);
matrix.tx= sourceBD.width;
this. goRecovery();
}
//進行水平反轉
public function goRotation (){
this.graphics.clear();
this.graphics.beginBitmapFill(sourceBD, matrix, false);
this.graphics.drawRect(0, 0, sourceBD.width, sourceBD.height);
this.graphics.endFill();
}
//恢復原始圖片
public function goRecovery(){
this.graphics.clear();
this.graphics.beginBitmapFill(sourceBD);
this.graphics.drawRect(0, 0, sourceBD.width, sourceBD.height);
}
}
}

2010年2月11日 星期四

flash使用AS3.0水平反轉圖片

使用Matrix來實現, 假設sourceBD是原始圖片, 則newBD為反轉後的圖片

----------------------------------------------
import flash.geom.Matrix;
import flash.display.BitmapData;

var sourceBD:BitmapData = new BitmapData():

var matrix:Matrix = new Matrix(-1, Math.sin( (180/180) * Math.PI), 0, 0, 0, 0);
matrix.a = -1; //把x反向縮放1倍
matrix.b = Math.tan( (180/180) * Math.PI); //表示y軸傾斜180度
matrix.tx= sourceBD.width;
newBD= new BitmapData(BD.width, BD.height);
newBD.draw(BD,matrix);