JSON筆記

JavaScript中建立JSON物件


var myCats = [
{
"id": 1,
"name": "水果",
"code": "P01",
  "lv": ["A", "B", "C"]
},

{
"id": 2,
"name": "蔬菜",
"code": "P02",
  "lv": ["A", "A+"]
}

];


.NET 建立JSON字串

JavaScriptSerializer JSS =  new JavaScriptSerializer();

Object Obj = new
{
  id = 1,
  name= "水果",
  code=  "P01"
}

string JSONString = JSS.Serialize(Obj );

.NET 解析JSON字串成物件

           
string JSONString = "[\"A\", \"B\",\"C\"]";
List<string> SelGuidList = new JavaScriptSerializer().Deserialize<List<string>>(JSONString );



參考網址：http://blog.roodo.com/syshen/archives/1410294.html

套用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"/>

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>

參考網址：http://www.w3schools.com/html5/tag_video.asp

在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);

}

}

}

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);

判斷使用者是否正選取本頁面

在製作聊天室的網頁時，需要使用到這個功能！

例如有人對你說話時，而你並不在聊天室的那個頁面視窗時！

可以經由這個判斷來提醒使用者，如果沒有在聊天室頁面，

就將網頁的TITLE顯示如"XXX對你說"類似的資訊！

這樣就能達到不在聊天室也能知道是不是有人對你說話了！

下面是判斷的程式碼：

<script type="text/javascript" src="../Scripts/prototype.js"></script>

var _FOCUSED = true;

//適用IE

if(navigator.userAgent.indexOf("MSIE") > 0){

Event.observe(document, 'focusout', function(){

_FOCUSED = false;

}, false);

Event.observe(document, 'focusin', function(){

_FOCUSED = true;

}, false);

}

else{

//適用FF

window.onblur = function(){

_FOCUSED = false;

}

window.onfocus = function(){

_FOCUSED = true;

}

}

prototype.js套件下載

解決IE6的PNG透明圖

在IE6中並不支援PNG的透明圖片，但可依照下面方法達到透明圖。

一開始需載入jquery.js與jquery.ifixpng.js的套件，

還有一個重點就是需要將此套件使用到的圖片 pixel.gif 儲存到 images/pixel.gif 中，

若想要更改圖片擺放位置，可以到query.ifixpng.js檔案中搜尋"images/pixel.gif"並修改即可，

下面是將全部的物件都使用透明化的概略程式碼

==============================================

<script type="text/javascript"> 

<!--  

$(function(){

     $("*").ifixpng(); 

}); 

//--> 

</script>

==============================================

若只針對PNG來做透明化可用：$('img[@src$=.png]').ifixpng();

此套件著作網址：http://jquery.khurshid.com/ifixpng.php