SCript

jQuery在VS2008 SP1中文版中可以使用Intellisense了

topcat — Thu, 21 Aug 2008 15:53:00 GMT

上次提到jQuery開始勾引小喵後，在開發過程中，總覺得少了些什麼。沒錯，在被VS的Intellisense寵壞後的小喵，沒有這個實在有點痛苦。之前網友有篇在VS 2008 使用JQuery 自動提示( Intellisense) 提到不過在中文的VS2008還是無法使用。不過自從更新了SP1後，這一切問題改善了。

使用有幾個必要的條件：

VS2008 SP1:有需要的人可以到這裡下載
jQuery程式庫：當然去官方網頁下載最新的囉
jQuery Intellisense擋：Intellisense

以上的條件必須是同時具備才能使用唷。

使用方式：

首先要把jQuery與jQuery Intellisense放到你的畫面中引用

    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/JQuery.Intellisense.js" type="text/javascript"></script>

接著，就能夠看到囉

享受吧!!

jQuery透過ajax取得yahoo新聞Rss範例

topcat — Fri, 08 Aug 2008 13:39:00 GMT

這個範例是使用jQuery 的.ajax，從Yahoo新聞的Rss擷取後，產生超連結在自己的網頁中。測試的時候只需要一個html與jQuery.js即可。

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<Script Language="JavaScript" type="text/javascript" Src="jQuery.js"></Script>
<Script Language="JavaScript">
<!--
$(document).ready(function(){
    $('#button1').click(function(){
        var strURL='http://tw.news.yahoo.com/rss/tech_3c';
        $.ajax({
            type:'GET',
            dataType:'xml',
            url:strURL,
            success:function(xml){
                var myTitle;
                var myLink;
                $('item',xml).each(function(e){
                    myTitle=$('title',this).text();
                    myLink=$('link',this).text();
                    $('<a/>').attr('href',myLink).attr('target','_blank').text(myTitle).appendTo($('#div1'));
                    $('<br/>').appendTo($('#div1'));
                });
                alert($('#div1').html());
            }
        })
    })
})

//-->
</Script>
<TITLE></TITLE>
</HEAD>
<body onbeforeunload="RunOnBeforeUnload()">
<FORM action="" method=POST id=form1 name=form1>
<INPUT type="button" value="Button" id=button1 name=button1>
</FORM>
<div id="div1"></div>
</BODY>
</HTML>

轉貼_JavaScript的UrlEncode,UrlDecode

topcat — Fri, 25 Jul 2008 11:16:00 GMT

來源：http://www.wujianrong.com/archives/2006/11/javascripturlencodeurldecode.html

<script language="javascript">
//可參考資料 http://www.wujianrong.com/archives/2006/11/javascripturlencodeurldecode.html
/*這裡開始 UrlEncode、UrlDecode 函數*/ 
function UrlEncode(str){ 
  var ret=""; 
  var strSpecial="!\"#$%&'()*+,/:;<=>?[]^`{|}~%"; 
  var tt= "";

  for(var i=0;i<str.length;i++){ 
   var chr = str.charAt(i); 
    var c=str2asc(chr); 
    tt += chr+":"+c+"n"; 
    if(parseInt("0x"+c) > 0x7f){ 
      ret+="%"+c.slice(0,2)+"%"+c.slice(-2); 
    }else{ 
      if(chr==" ") 
        ret+="+"; 
      else if(strSpecial.indexOf(chr)!=-1) 
        ret+="%"+c.toString(16); 
      else 
        ret+=chr; 
    } 
  } 
  return ret; 
} 

function UrlDecode(str){ 
  var ret=""; 
  for(var i=0;i<str.length;i++){ 
   var chr = str.charAt(i); 
    if(chr == "+"){ 
      ret+=" "; 
    }else if(chr=="%"){ 
     var asc = str.substring(i+1,i+3); 
     if(parseInt("0x"+asc)>0x7f){ 
      ret+=asc2str(parseInt("0x"+asc+str.substring(i+4,i+6))); 
      i+=5; 
     }else{ 
      ret+=asc2str(parseInt("0x"+asc)); 
      i+=2; 
     } 
    }else{ 
      ret+= chr; 
    } 
  } 
  return ret; 
}
</script>

jQuery初體驗

topcat — Fri, 25 Jul 2008 10:16:00 GMT

緣起

小喵經常會在各個技術blog中閒逛，有次逛到黑暗執行緒大大的網站，看到了一篇【jQuery, I LOVE YOU~~~】文章，文章中說了他發給【ASP.NET AJAX Client Library】好人卡，並且移情別戀轉而跟【jQuery】在一起的經過。讓小喵留下了深刻的印象。不過，這時小喵還是不曉得jQuery是什麼。

後來有次小喵剛好要買幾本書，在逛【書店】的時候的時候(小喵目前已經很少跑真正的書店，逛得只是書店的網站)，還差一點就可免運費，所以順便找找看是否有什麼新書可以買。剛好看到jQuery有本新的中文書出版。於是小喵就把它放入購物車。從此開始與jQuery結緣。本來買了書後，打算先翻翻看看這個東西到底是什麼，能讓黑暗執行緒大大隊ASP.NET AJAX Client Library發出好人卡。沒想到這個迷死人不償命的小寶貝，竟然開始勾引小喵。

jQuery是什麼??

jQuery是一組JavaScript的library，而且是免費的library。使用的時候也只需要指定<Script src="jQuery.js"></Script>就可以開始引用了。因此無論是用什麼樣的網頁開發程式(ASP,ASP.NET,JSP,PHP,CGI,....)，甚至只需要HTML就可以使用。因此要測試jQuery，甚至不必上網，只需要記事本撰寫html就可以測試使用了。

下載

先說明要準備使用jQuery之前，需要些什麼：

首先需要把jQuery帶回家。有個繁體中文的網址【jQuery: 寫得少, 做得多, JavaScript 程式庫】不過也僅止於這麼少少的幾頁，可以把最新版本的jQuery下載回來。下載的部分他分為三種：

GZip的版本(Minified)：js經過GZip壓縮過，檔案最小，適合放在正式環境中，1.26版大約16kb
未壓縮版本(Uncompressed)：適用於測試開發學習。1.26版大約97kb
包裝版(Packed)：給沒有辦法解GZip瀏覽器用的版本1.26版大約30kb

其實就算是使用Uncompressed的版本，大小也只有97kb，檔案非常的小(可能網頁中隨便一張圖就比這個大了)。而小喵自己則是取中庸的Packed版本使用。

測試

接下來開始重頭戲，我們初體驗的實際運作範例。也開始體驗一下為何這個小東西會勾引小喵的原因。首先來個範例，小喵產生一個html檔案在畫面上安排了個兩個按鈕(<input type="button")以及一個img並且指向一個jpg。

現在假設要設定，一開始要把img1圖形隱藏，按下按鈕後，希望可以把他顯示出來，再按一次按鈕，又可以把他隱藏。這個對於已經熟悉JavaScript的人，應該不難。小喵寫個簡單的

<html>
<head>

<script Language="JavaScript">
<!--

function window_onload(){
	var img1=window.document.getElementById('img1');
	img1.style.display='none';
}

function btn1_click(){
	var img1=window.document.getElementById('img1');
	if(img1.style.display=='none')
	{
		img1.style.display='';
	}
	else
	{
		img1.style.display='none';
	}
}

//-->
</script>
</head>
<body onload="window_onload()">
	<input type="button" id="btn1" name="btn1" value="JavaScript按鈕" onclick="btn1_click()" />
	<br />
	<img id="img1" src="topcat.jpg" />
</body>
</html>

而以上的動作，如果希望由jQuery來處理的話，那又如何呢

<html>
<head>
<Script Language="JavaScript" src="jQuery.js"></Script>
<script Language="JavaScript">
<!--
$(document).ready(function(){
	$('#img1').hide();
	$('#btn2').click(function(){
		$('#img1').toggle();
	})
})

//-->
</script>
</head>
<body>
	<input type="button" id="btn2" name="btn2" value="jQuery按鈕" />
	<br />
	<img id="img1" src="topcat.jpg" />
</body>
</html>

一樣的動作，發現了嗎??程式碼精簡到不行。真是太神奇了!!

再來另外一個範例

假設我的畫面中有一個<table>希望，<table>裡面的資料在顯示的時候，可以用不同底色交錯顯示，這樣方便在瀏覽的時候可以方便看。我們用固定的<table>當作示範，我們希望讓偶數行能夠加上class，這樣的要用Javascript有多麻煩各位可以想像一下。但是在jQuery來說確是很簡單的

我們有Style設定

<style>
.TrEven1{background-color:pink;}
.TrEven2{background-color:blue;color:white;}
</style>

在畫面中有兩個Table小喵用asp的方式表式：

table1
<table id="tbl1" border="1">
<%For y = 1 to 10%>
	<tr>
		<td><%=y%></td>
		<td>aa</td>
		<td>bb</td>
		<td>cc</td>
		<td>dd</td>
		<td>ee</td>
		<td>ff</td>
	</tr>
<%Next%>
</table>
table2
<table id="tbl2" border="1">
<%For y2 = 1 to 10%>
	<tr>
		<td><%=y2%></td>
		<td>aa</td>
		<td>bb</td>
		<td>cc</td>
		<td>dd</td>
		<td>ee</td>
		<td>ff</td>
	</tr>
<%Next%>
</table>

接著，先想像一下如果要用JavaScript要怎麼寫??然後再來看看用jQuery怎麼做

$(document).ready(function(){
	$('#tbl1 tr:even').addClass('TrEven1');
	$('#tbl2 tr:even').addClass('TrEven2');
})

看到了他的魔力了嗎??短短的一行【$('#tbl1 tr:even').addClass('TrEven1');】就可以處理了耶!!有沒有那種被【黯然消魂掌】擊中的感覺。

初體驗就到此先告一段落，有機會在跟網友們分享jQuery的語法與使用方式。在此先介紹個不錯的網站，可以把他當作是jQuery使用時的一個操作說明【http://jquery.org.cn/visual/cn/index.xml】

如何讓IE7中關閉瀏覽器不出現詢問

topcat — Mon, 31 Mar 2008 13:12:00 GMT

在IE7以前，要關閉瀏覽器不出現詢問的對話，用的是以下

window.opener=null;
window.close();

但是這個在IE7卻無效了，要改成用以下的方式

window.open('','_self','');
window.close();

一篇關於ASP.NET撰寫AJAX的不錯文章(Atlas Framework)

topcat — Sun, 18 Dec 2005 23:20:00 GMT

文章是由DotNet 開發聖殿 Blog 殿祭司所發表

真是不錯的文章，將之收集在小喵的Blog中

文章網址如下

http://www.microsoft.com/taiwan/msdn/columns/ASPNET_2/aspnet_2_20051212.htm

^_^

無限層樹狀結構的製作與遞回的應用

topcat — Wed, 14 Sep 2005 14:39:00 GMT

有時候我們需要做出類似檔案總管一樣
可以有無限層的樹狀結構
但是要怎麼設計呢

一、資料表：
其實無限層的資料表的設計非常簡單
資料表中只需要兩個欄位
Node：節點
Parent：該節點的父節點
例如以下的樹狀結構

Root ｜A ｜｜A1 ｜｜｜甲｜｜｜乙｜｜｜丙｜｜｜丁｜｜A2 ｜｜A3 ｜B ｜｜B1 ｜｜B2 ｜C ｜｜C1 ｜｜C2 ｜｜C3 ｜｜C4
資料表內容就會是這樣
Node Parent ---------------- A Root A1 A 甲 A1 乙 A1 丙 A1 丁 A1 A2 A A3 A B Root B1 B B2 B C Root C1 C C2 C C3 C C4 C
藉著兩個欄位就能夠記錄整個數的狀況
但是要把她展開還原成樹
需要怎麼運作呢
這個就必須要運用到遞迴的觀念了

二、遞回介紹
以下這個是藍色小舖中QQ大對於遞迴的介紹
http://www.blueshop.com.tw/article/show.asp?cde=ATL20050513224130PL0

三、程式範例：
以下這個則是ASP中實現樹狀結構遞迴的程式範例
http://www.blueshop.com.tw/download/show.asp?pgmcde=PGM20050914140550XNH

希望對大家有所幫助

RegExp 規則運算式語法

topcat — Wed, 07 Sep 2005 17:11:00 GMT

RegExp的功能強大,但是使用的參數還蠻複雜的

感謝老頑童大大提供相關的網址參考
http://msdn.microsoft.com/library/cht/default.asp?url=/library/CHT/jscript7/html/jsjsgrpregexpsyntax.asp

多筆checkbox(勾選、取消勾選)的顯示、動作、維護範例

topcat — Fri, 02 Sep 2005 09:47:00 GMT

許多人在小舖中問到checkbox這個Form物件在多筆的維護上要如何使用
這裡提供一個小喵的作法

A.顯示資料：
1.顯示資料的時候，放個隱藏的Input,存放Key值
2.在checkbox的旁邊放個隱藏的Input,存放資料庫中該欄位的值
3.checkbox中，依照資料庫中的值判斷是否需要勾選(checked)

B.處理勾選動作：
1.透過JavaScript處理
2.當勾選時，相對隱藏的Input的value改為Y
3.當不勾選時，相對隱藏的Input的value改為N

t1.asp代表顯示資料
<%@ Language=VBScript CODEPAGE=950%> <% Response.CacheControl = "no-cache" %> <% Response.AddHeader "Pragma", "no-cache" %> <% Response.Expires = -1 %> <% Response.Buffer = true%> <% Dim OrgData(2,10) For y = 1 to 10 OrgData(1,y) = "Key" & Y OrgData(2,y) = "N" Next OrgData(2,3) = "Y" OrgData(2,6)="Y" '用一個陣列來模擬從資料庫中撈取的資料 '其中第3,6筆資料是Y(選取)，其他為未選取 '******************************************** '透過隱藏的INPUT來記錄每筆資料的Key與勾選或取消勾選後的值 '送出後，直接取得INPUT的值來做資料庫的維護即可 %> <HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="css/css1.css"> <style> .dh{font-size:14;color:yellow;background-color:blue} .dl{font-size:12} </style> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <TITLE><%=Title%></TITLE> <SCRIPT src=js/public.js>  </SCRIPT> <SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>  </SCRIPT> </HEAD> <BODY bgproperties=fixed bottommargin=0 leftmargin=0 rightmargin=0 topmargin=0 onload="return window_onload()" bgcolor=LightSkyBlue> <FORM action="t2.asp" method="post" id="form1" name="form1"> 顯示原始資料： <table border=1 bgcolor=pink> <tr> <th class=dh>原始資料</th> <th class=dh>維護</th> </tr> <tr> <td> <table border=1 bgcolor=LightCyan> <%For y = 1 to UBound(OrgData,2)%> <tr> <%For x =1 to UBound(OrgData,1)%> <td class=dl><%=OrgData(x,y)%></td> <%Next%> </tr> <%Next%> </table> </td> <td> <table border=1 bgcolor=LightCyan> <tr> <th class=dh>Key</th> <th class=dh>勾選(全選)</th> </tr> <%For y = 1 to UBound(OrgData,2)%> <tr> <td class=dl> <%=OrgData(1,y)%>  <INPUT type="text" id=hidKey name=hidKey value="<%=OrgData(1,y)%>"> </td> <td class=dl> <INPUT type="checkbox" id=chkItm name=chkItm <%If OrgData(2,y) = "Y" Then'當資料為Y,則勾選%> checked<%End If%> onclick="chkItm_onclick(<%=y-1%>)" >  <INPUT type="text" id=hidItm name=hidItm value="<%=OrgData(2,y)%>"> </td> </tr> <%Next%> </table> </td> </tr> </table> <INPUT type="submit" value="Submit" id=submit1 name=submit1> <INPUT type="button" value="隱藏Input" id=btnHid name=btnHid LANGUAGE=javascript onclick="return btnHid_onclick()"> </FORM> </BODY> </HTML>
t2.asp帶筆承接送出結果
<%@ Language=VBScript CODEPAGE=950%> <% Response.CacheControl = "no-cache" %> <% Response.AddHeader "Pragma", "no-cache" %> <% Response.Expires = -1 %> <% Response.Buffer = true%> <% Dim RltData ItmCnt=Request.Form("hidKey").Count ReDim RltData(2,ItmCnt) For y = 1 to ItmCnt RltData(1,y) = Request.Form("hidKey").Item(y) RltData(2,y) = Request.Form("hidItm").Item(y) Next %> <HTML> <HEAD> <LINK rel="stylesheet" type="text/css" href="css/css1.css"> <style> .dh{font-size:14;color:yellow;background-color:blue} .dl{font-size:12} </style> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <meta http-equiv="Content-Type" content="text/html; charset=big5"> <TITLE><%=Title%></TITLE> <SCRIPT src=js/public.js>  </SCRIPT> <SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>  </SCRIPT> </HEAD> <BODY bgproperties=fixed bottommargin=0 leftmargin=0 rightmargin=0 topmargin=0 onload="return window_onload()" bgcolor=LightSkyBlue> <FORM action="" method="post" id="form1" name="form1"> 接收送出的結果為 <table border=1 bgcolor=LightCyan> <%For y2=1 to UBound(RltData,2)%> <tr> <%For x2=1 to UBound(RltData,1)%> <td class=dl><%=RltData(x2,y2)%></td> <%Next%> </tr> <%Next%> </table> </FORM> </BODY> </HTML>

一個能夠解析各種程式語言並且設定顏色上去的工具

topcat — Fri, 26 Aug 2005 16:14:00 GMT

首先感謝小舖中檸檬草~* 大大的提供訊息

網址如下
http://www.dreamprojections.com/SyntaxHighlighter/Examples.aspx