createRange

Range 屬性

屬性	說明	回傳
collapsed	如果start以及end是在同一點上回傳true，不同為false	Boolean
commonAncestorContainer	回傳涵蓋範圍，最外層標籤	String
endContainer	回傳標籤物件，使用tagName可察看標籤	Object
endOffset	回傳標籤內，最後一個字的位置	integer
startContainer	回傳標籤物件，使用tagName可察看標籤	Object
startOffset	回傳標籤內，第一個字的位置	integer

Range 方法

方法	說明	回傳
cloneContents()	複製	object
cloneRange()	複製選取範圍	Object
collapse(Boolean)	true = Range的開始位置，false = Range的結束位置	無
compareBoundaryPoints(type, rangeToCompare)	rangeToCompare=目標 Type 說明 Range.START_TO_START 開始結束在同一點上，回傳0 Range.START_TO_END 選取範圍，在目標前方，回傳-1 Range.END_TO_END 開始結束在同一點上，回傳0 Range.END_TO_START 選取範圍，在目標後方，回傳-1	Integer
compareNode(nodeToCompare)	nodeToCompare = 選擇的目標 功能和compareBoundaryPoints相同	回傳為Integer 回傳 說明 0 Range.NODE_BEFORE = 選擇在目標之後 1 Range.NODE_AFTER = 選擇在目標之前 2 Range.NODE_BEFORE_AND_AFTER = 開始跟結束在同一點上 3 Range.NODE_INSIDE = 選擇並且涵蓋到目標
comparePoint(nodeToCompare,offsetInsideNode)		回傳Integer 回傳 說明 -1 在目標之前 0 在目標裡 1 在目標之後
createContextualFragment(HTMLtext)	將字串轉標籤物件	Element
deleteContents()	刪除目標內容	無
detach()	離開選取範圍，並允許瀏覽器，以釋放資源	無
extractContents()	用途可用來移動目標內容，完整移動	element
insertNode(nodeToInsert)	nodeToInsert = 要插入的標籤物件	無
intersectsNode(nodeToCheck)	nodeToCheck = 目標	true = 選擇範圍有涵蓋到目標，包含選擇自己；false = 選擇沒有涵蓋到目標
isPointInRange(nodeToCheck,offsetInsideNode)	(nodeToCheck = 目標.focusNode;offsetInsideNode =目標.focusOffset	Boolean
selectNode(node)	目標自己本身	無
selectNodeContents(node)	目標內容	無
setEnd(node,offsetInsideNode)	node = 目標 ；offsetInsideNode = 位置int	無
setStart(node,offsetInsideNode)	node = 目標 ；offsetInsideNode = 位置int	無
setEndAfter(node)	選擇end位置之後節點	無
setEndBefore(node)	選擇end位置之前節點	無
setStartAfter(node)	選擇start位置之後節點	無
setStartBefore(node)	選擇start位置之前節點	無
surroundContents(element)	標籤物件包圍目標	無
toString()	回傳選擇字串	String

window.oper

window.oper(url,name,spec)

• url:網址
• name:選擇彈跳視窗名稱
• spec:彈跳新視窗條件

設定值	說明
fullscreen = yes|no|1|0	視窗最大化
location = yes|no|1|0	是否顯示網址
menubar = yes|no|1|0	是否顯示功能表
resizble = yes|no|1|0	是否可以調整大小
scrollbars = yes|no|1|0	是否顯示捲軸
status = yes|no|1|0	是否顯示狀態
titlebar = yes|no|1|0	是否顯示標題，問了防止(網路釣魚)，幾乎忽略使用者設定，永遠都為yes
left	視窗左邊位置
top	視窗上方位置
height	視窗高度
width	視窗寬度

String字串方法

String Object Properties

Property	Description
constructor	返回的函數創建的String對象的原型
length	回傳字串數
prototype	添加方法的屬性

String Object Methods

Method	Description
charAt()	回傳指定位置字元
charCodeAt()	指定位置字元的十六進位值，並以十進位值回傳
concat()	將兩個字串組成因字串
fromCharCode(n1, n2,nX)	Unicode碼轉成字串
indexOf(str,start)	由第一個字元，開始搜尋特定字串
lastIndexOf(str,start)	由最後個字元，開始搜尋特定字串
match(regexp)	回傳符合regexp，回傳為陣列
replace(str1,str2)	將str1字串更換str2字串
search(regexp)	回傳符合的搜尋位置，如都不符合則回傳-1
slice(begin,end)	擷取字串的特定字元，維新字串，begin(開始)，end(結束)
split(char,howmany)	將字串轉陣列，char(為分隔字元)，howmany(指定要回傳多少陣列值)
substr(start,length)	擷取字串的特定字元，維新字串，start(開始)，length(字元數，可以不填)
substring(start,end)	擷取字串的特定字元，維新字串，start(開始)，end(結束位置)
toLowerCase()	將字串轉為小寫
toUpperCase()	將字串轉為大寫
valueOf()	Returns the primitive value of a String object

String HTML Wrapper Methods

The HTML wrapper methods return the string wrapped inside the appropriate HTML tag.

Method	Description
anchor()	將字串加上錨點
big()	以較大的字級顯示字串
blink()	以閃爍方式顯示字串
bold()	以粗體顯示字串
fixed()	以單調字(固定大小)顯示文字，相當於使用<pre>標籤
fontcolor()	為字串加上顏色
fontsize()	調整字串字字體大小
italics()	以斜體顯示字串
link()	為字串加上超連結
small()	以較小字體顯示
strike()	為字串加上刪除線
sub()	以下標字顯示字串
sup()	以上標字顯示字串

Array陣列方法

Array 物件屬性

屬性	說明
constructor	返回的函數創建的Array對象的原型
length	回傳陣列數
prototype	添加方法的屬性

Array 物件方法

方法	說明	範例	回傳
concat()	將兩組陣列，結合成一組	array.concat(arrayN1,arrayN2,arrayN3)	return Array
join()	將陣列轉成字串	array.join(char)	return String
pop()	移除陣列最後一個元素,並回傳移除元素	array.pop()	return String
push()	加入新元素，至陣列最後一個,回傳陣列數	array.push(ele1,ele2,ele3,......)	return Int
reverse()	將陣列順序前後顛倒	array.reverse()	return Array
shift()	移除陣列第一個元素	array.shift()	return String
slice()	取出陣列特定元素，陣列內容會遭到改變	array.slice(start,end)	return Array
sort()	從新排列陣列元素順序	array.sort()	return Array
splice()	取出特定元素，並置換成指定元素,index(開始位置) n(刪除數量，可以等於0) ele(元素)	array.splice(index,n,ele1,ele2,eleN)	return Array
toString()	將陣列轉成字串，並以逗號分隔	array.toString()	return String
unshift()	將新元素加到陣列中，並回傳陣列總數	array.unshift(ele1,ele2,eleN)	return Int

Math

Math.abs(x)	回傳數值的絕對值
Math.acos(x)	三角函數，反餘弦值
Math.asin(x)	三角函數，反正弦值
Math.atan(x)	三角函數，反正切值
Math.atan2(x,y)	回傳由x到座標(x,y)的角度，這個角度介於-PI/2和PI/2弧度之間
Math.ceil(x)	無條件進位
Math.cos(x)	三角函數，餘弦值
Math.exp(x)	回傳e的指數
Math.floor(x)	無條件捨去
Math.log(x)	回傳已e為底的自然對數
Math.max(x,y,...)	取兩個值中較大者
Math.min(x,y,...)	取兩個值中較小者
Math.pow(x,y)	回傳x的y次方
Math.random	產生介於0與1之間的亂數
Math.round	四捨五入
Math.sin	三角函數，正弦值
Math.sqrt	平方根
Math.tan	三角函數，正切值

canvas+video

<style type="text/css">
 body{ background:#000;}
 #c{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
 }
 #v{
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -180px 0 0 -240px;
 }
</style>

<canvas id="c"></canvas>
<video id="v" controls>
    <source src="/blog/video/大眼睛.mp4" type="video/mp4">
</video>

<script>
document.addEventListener('DOMContentLoaded', function(){
    var v = document.getElementById('v');
    var canvas = document.getElementById('c');
    var context = canvas.getContext('2d');

    var cw = Math.floor(canvas.clientWidth / 100);
    var ch = Math.floor(canvas.clientHeight / 100);
    canvas.width = cw;
    canvas.height = ch;

    v.addEventListener('play', function(){
        draw(this,context,cw,ch);
    },false);

},false);

function draw(v,c,w,h) {
    if(v.paused || v.ended) return false;
    c.drawImage(v,0,0,w,h);
    setTimeout(draw,20,v,c,w,h);
}
</script>

<video id="v" controls>
 <source src="/blog/video/大眼睛.mp4" type="video/mp4">
</video>
<canvas id="c"></canvas>

<script>

function draw(v,c,bc,cw,ch) {
    if(v.paused || v.ended) return false;
    // First, draw it into the backing canvas
    bc.drawImage(v,0,0,cw,ch);
    // Grab the pixel data from the backing canvas
    var idata = bc.getImageData(0,0,cw,ch);
    var data = idata.data;
    var w = idata.width;
    var limit = data.length
    // Loop through the subpixels, convoluting each using an edge-detection matrix.
    for(var i = 0; i < limit; i++) {
        if( i%4 == 3 ) continue;
        data[i] = 127 + 2*data[i] - data[i + 4] - data[i + w*4];
    }
    // Draw the pixels onto the visible canvas
    c.putImageData(idata,0,0);
    // Start over!
    setTimeout(draw,20,v,c,bc,cw,ch);
}
</script>

function draw(v,c,bc,w,h) {
    if(v.paused || v.ended) return false;
    // First, draw it into the backing canvas
    bc.drawImage(v,0,0,w,h);
    // Grab the pixel data from the backing canvas
    var idata = bc.getImageData(0,0,w,h);
    var data = idata.data;
    // Loop through the pixels, turning them grayscale
    for(var i = 0; i < data.length; i+=4) {
        var r = data[i];
        var g = data[i+1];
        var b = data[i+2];
        var brightness = (3*r+4*g+b)>>>3;
        data[i] = brightness;
        data[i+1] = brightness;
        data[i+2] = brightness;
    }
    idata.data = data;
    // Draw the pixels onto the visible canvas
    c.putImageData(idata,0,0);
    // Start over!
    setTimeout(function(){ draw(v,c,bc,w,h); }, 0);
}

文字標籤

標籤	目的	範例
a	超鏈接	Visit my drinks page.
em	斜體強調	I must say I adore lemonade.
strong	重點	This tea is very hot.
small	縮小字體	These grapes are made into wine. Alcohol is addictive.
s	刪除線	text Price: ￡4.50 ￡2.00!
cite	工作職稱	works The case Hugo v. Danielle is relevant here.
q	語錄	The judge said You can drink water from the fish tank but advised against it.
dfn	定義實例	The term organic food refers to food produced without synthetic chemicals.
addr	縮略語	Organic food in Ireland is certified by the IOFGA.
time	日期和時間	Published 2009-10-21.
code	電腦代碼	The fruitdb program can be used for tracking fruit production.
var	變數	If there are n fruit in the bowl, at least n÷2 will be ripe.
samp	電腦輸出	The computer said Unknown error -3.
kbd	用戶輸入	Hit F1 to continue.
sub	下標	Water is H2O.
sup	上標	The Hydrogen in heavy water is usually 2H.
i	斜體	Lemonade consists primarily of Citrus limon.
b	關鍵詞	Take a lemon and squeeze it with a juicer.
mark	覆蓋強調	Elderflower cordial, with one part cordial to ten parts water, stands apart from the rest.
ruby,rt,rp	頂上註解	OJ (Orange Juice)
bdi	文本方向性隔離	The recommended restaurant is My Juice Cafe (At The Beach).
bdo	格式文本方向性	The proposal is to write English, but in reverse order. "Juice" would become "Juice"
span	其他	In French we call it sirop de sureau.
br	換行	Simply Orange Juice Company Apopka, FL 32703 U.S.A.
wbr	換行機會	www.simplyorangejuice.com
ins	底線	底線
del	刪除線	刪除線

列印 HTML 網頁強制換頁的方式

強制分頁有大概只有二種用的到:

{ page-break-after: always; /*在標籤後換頁*/ }
{ page-break-before: always; /*在標籤前換頁*/ }

這二個當中，大概最常用的就是 page-break-after: always，就是在指定的標籤後強制換頁，可以參考下面的 HTML 範例:

<div STYLE="page-break-after: always;">
第一頁

</div>
第二頁

再來就可以試著列印看看效果如何。

IE 7 需加入 才可換頁: (2008/2/16 更新)

範例:

第一頁

<P style='page-break-after:always'>&nbsp;</P>
第二頁

ASP.NET上傳檔案超過4MB的調整方式

"當我們要透過ASP.NET上傳到Server上

預設最大值是4MB

當超過這個大小的時候，就會出現【超出最大的要求長度 】的訊息

此時可以在Web.Config裏<system.web></system.web>之間加上以下的設定

<httpruntime maxrequestlength="8192">

數值的單位是KB，8192=1024*8代表8MB
請大家依據自己的需求調整數值。"

IE7無法使用getElementByName 替代方案

function getElementsByModifiedId(baseIdentifier) {//計算file數量
var allWantedElements = [];
var idMod = 0;
while(document.getElementById(baseIdentifier + idMod)) { // will stop when it can't find any more
allWantedElements.push(document.getElementById(baseIdentifier + idMod++));
}
return allWantedElements;
}

append and prepend 插入元素必知

function prependElement(parentID,child)//插入元素
{
var parent=document.getElementById(parentID);
parent.insertBefore(child,parent.childNodes[0]);
}

CSS選擇器

Pattern	Meaning	Described in section
*	任何標籤	Universal selector
E	元素E的標籤	Type selectors
E F	選擇E的後代標籤F	Descendant selectors
E > F	選擇E的子標籤F(白話:選擇E的孩子，向下一代)	Child selectors
E:first-child	選擇E的第一個孩子	The :first-child pseudo-class
E:link E:visited	:link連結前，:visited連結後	The link pseudo-classes
E:active E:hover E:focus	動態標籤	The dynamic pseudo-classes
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-class
E + F	E的相鄰標籤F(等級為兄弟姊妹)	Adjacent selectors
E[foo]	標籤屬性有foo	Attribute selectors
E[foo="warning"]	標籤屬性foo的value=warning	Attribute selectors
E[foo~="warning"]	標籤屬性foo的value=有warning類似的值	Attribute selectors
E[lang|="en"]	Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en".	Attribute selectors
DIV.warning	class=warning	Class selectors
E#myid	id=myid	ID selectors

瀏覽器支援jQuery程度

	IE8	FF3.*	Google7.*	Opera10.*
leadingWhitespace	false	true	true	true
tbody	false	true	true	true
htmlSerialize	false	true	true	true
style	false	true	true	true
hrefNormalized	false	true	true	true
opacity	false	true	true	true
cssFloat	false	true	true	true
checkOn	true	true	false	true
optSelected	false	true	true	true
optDisabled	true	true	true	true
checkClone	true	true	true	true
scriptEval	false	true	true	true
noCloneEvent	false	true	true	true
boxModel	true	true	true	true
inlineBlockNeedsLayout	true	false	false	false
shrinkWrapBlocks	false	false	false	false
reliableHiddenOffsets	false	true	true	true
submitBubbles	false	true	true	true
changeBubbles	false	true	true	true
ajax	true	true	true	true
資料取得於jQuery2010.10.27日

	true	false	Ex.
leadingWhitespace
tbody	當Talbe缺少tbody時自動補上	缺就給他缺完全不理會
htmlSerialize
style	getAttribute("style");可以完全取出物件的css屬性	不支援
hrefNormalized	當使用getAttribute（）取出href的Value時只會回傳屬性值，而不是回傳完整URL	會取出完整URL	請點button
opacity	可以直接使用css透明屬性opacity	IE替代方式filter:alpha(opacity=透明值(Number));
cssFloat	支援CSS的float屬性	不支援
checkOn
optSelected
optDisabled
checkClone
scriptEval
noCloneEvent
boxModel	完全支援W3C的CSS盒模型	不支援
inlineBlockNeedsLayout
inlineBlockNeedsLayout
shrinkWrapBlocks
reliableHiddenOffsets
submitBubbles
changeBubbles
ajax
資料取得於jQuery2010.10.27日

CSS透明

原圖

IE專用.....style="alpha(opacity=50");"

FF,GOOGLE適用style="opacity: 0.5;"

Response And Request

成員名稱	說明與用法
Request	request("欄位名稱")，這個很方便可以取得任何表單傳送過來的(不論是Get或是Post)，例如<%=request("欄位名稱")%>會顯示出該欄位中的資料。
Request.form	request.form("欄位名稱")，例如<%=request.form("欄位名稱")%>會顯示出該欄位中的資料，當然，您可以利用這個來做布林邏輯判斷或是指定數值給其他變數，這個只能用來取得利用POST METHOD傳送的表單。
Request.Cookies	request.cookies("Cookie名稱")("項目名稱")，詳細的使用方法我們會在之後的Response與Request教學中給予更詳細的講解。
Request.QueryString	request.QueryString("Query名稱")，這個Request語法可以取得網址"?"之後的Query字串(包含利用Get產生的Query字串)，如果網址是./xxx.asp?happy=coobila而您用 Request.QueryString("happy")的話就會顯示coobila，因為happy這個Query的數值是coobila
Request.ServerVariables	request.ServerVariables("名稱")，這種Request物件是用來取得各種伺服器相關的資料，如request.ServerVariables("Local_Addr")就是取得主機的IP位置。

成員名稱	說明與用法
Response.Write	Response.Write("字串")，這段語法會告訴伺服器在網頁的這個地方顯示該字串。
Response.End	Response.End，這個語法會停止伺服器的處理並且將處理完畢的內容傳回使用者端。
Response.Redirect	Response.Redirect("網址")，這個語法會將網頁轉址到指定的網址。
Response.Cookies	Response.Cookies("名稱")，這個地方是告訴伺服器在這裡回應給使用者一個寫入Cookie的指令。
Response.Buffer	Response.Buffer=True|False，這個語法是告訴伺服器在處理這份網頁的時候可以使用緩衝功能，也就是當網頁在處理的時候，會將處理完畢的一些資料存在IIS的緩衝區。
Response.CacheControl	Response.CacheControl=Private|Public，Cache就是快取的意思，如果您的網路提供者有Proxy Server的話，這個語法會告訴伺服器是否要將這個網頁存在Proxy Sserver，Private是關閉Proxy Server的快取功能，Public的話是開啟，預設值是Private。
Response.ContentType	Response.ContentType="MIME-type"，這個用來指定檔案的閱讀方式，如text/html就是以HTML的方式，預設值是text/html，這個設定很少使用。
Response.AddHeader	Response.AddHeader("名稱","內容")，這個語法是增加該網頁中的META標頭，如果您寫Response.AddHeader("Refresh","10")就是增加一個META標頭，而這個META標頭的內容就是每10秒刷新，在使用這個語法前您必須知道有哪些META標頭可以使用。這個功能也必須在任何HTML的META標籤產生前使用
Response.Charset	Response.Charset=編碼名稱(如Big5)，這個語法的功能和HTML的META標籤一樣可以設定網頁的編碼，這個語法必須要在任何HTTP的META標題產生前使用，這個設定很少使用。

原來下載類型這麼簡單[Response.ContentType]

近日接到，是有關報表下載，沒想到asp直接有這麼完美指令，害我思考半天，看來我進步空間，還很寬裕。
Response.ContentType = "application/vnd.ms-excel"
Response.AddHeader "Content-Disposition","attachment;filename=要下載的文件名.xml"
↑↑短短兩行決定了他的出生
↓↓底下為網路尋找類型
'ez' => 'application/andrew-inset',
'hqx' => 'application/mac-binhex40',
'cpt' => 'application/mac-compactpro',
'doc' => 'application/msword',
'bin' => 'application/octet-stream',
'dms' => 'application/octet-stream',
'lha' => 'application/octet-stream',
'lzh' => 'application/octet-stream',
'exe' => 'application/octet-stream',
'class' => 'application/octet-stream',
'so' => 'application/octet-stream',
'dll' => 'application/octet-stream',
'oda' => 'application/oda',
'pdf' => 'application/pdf',
'ai' => 'application/postscript',
'eps' => 'application/postscript',
'ps' => 'application/postscript',
'smi' => 'application/smil',
'smil' => 'application/smil',
'mif' => 'application/vnd.mif',
'xls' => 'application/vnd.ms-excel',
'ppt' => 'application/vnd.ms-powerpoint',
'wbxml' => 'application/vnd.wap.wbxml',
'wmlc' => 'application/vnd.wap.wmlc',
'wmlsc' => 'application/vnd.wap.wmlscriptc',
'bcpio' => 'application/x-bcpio',
'vcd' => 'application/x-cdlink',
'pgn' => 'application/x-chess-pgn',
'cpio' => 'application/x-cpio',
'csh' => 'application/x-csh',
'dcr' => 'application/x-director',
'dir' => 'application/x-director',
'dxr' => 'application/x-director',
'dvi' => 'application/x-dvi',
'spl' => 'application/x-futuresplash',
'gtar' => 'application/x-gtar',
'hdf' => 'application/x-hdf',
'js' => 'application/x-javascript',
'skp' => 'application/x-koan',
'skd' => 'application/x-koan',
'skt' => 'application/x-koan',
'skm' => 'application/x-koan',
'latex' => 'application/x-latex',
'nc' => 'application/x-netcdf',
'cdf' => 'application/x-netcdf',
'sh' => 'application/x-sh',
'shar' => 'application/x-shar',
'swf' => 'application/x-shockwave-flash',
'sit' => 'application/x-stuffit',
'sv4cpio' => 'application/x-sv4cpio',
'sv4crc' => 'application/x-sv4crc',
'tar' => 'application/x-tar',
'tcl' => 'application/x-tcl',
'tex' => 'application/x-tex',
'texinfo' => 'application/x-texinfo',
'texi' => 'application/x-texinfo',
't' => 'application/x-troff',
'tr' => 'application/x-troff',
'roff' => 'application/x-troff',
'man' => 'application/x-troff-man',
'me' => 'application/x-troff-me',
'ms' => 'application/x-troff-ms',
'ustar' => 'application/x-ustar',
'src' => 'application/x-wais-source',
'xhtml' => 'application/xhtml+xml',
'xht' => 'application/xhtml+xml',
'zip' => 'application/zip',
'au' => 'audio/basic',
'snd' => 'audio/basic',
'mid' => 'audio/midi',
'midi' => 'audio/midi',
'kar' => 'audio/midi',
'mpga' => 'audio/mpeg',
'mp2' => 'audio/mpeg',
'mp3' => 'audio/mpeg',
'aif' => 'audio/x-aiff',
'aiff' => 'audio/x-aiff',
'aifc' => 'audio/x-aiff',
'm3u' => 'audio/x-mpegurl',
'ram' => 'audio/x-pn-realaudio',
'rm' => 'audio/x-pn-realaudio',
'rpm' => 'audio/x-pn-realaudio-plugin',
'ra' => 'audio/x-realaudio',
'wav' => 'audio/x-wav',
'pdb' => 'chemical/x-pdb',
'xyz' => 'chemical/x-xyz',
'bmp' => 'image/bmp',
'gif' => 'image/gif',
'ief' => 'image/ief',
'jpeg' => 'image/jpeg',
'jpg' => 'image/jpeg',
'jpe' => 'image/jpeg',
'png' => 'image/png',
'tiff' => 'image/tiff',
'tif' => 'image/tiff',
'djvu' => 'image/vnd.djvu',
'djv' => 'image/vnd.djvu',
'wbmp' => 'image/vnd.wap.wbmp',
'ras' => 'image/x-cmu-raster',
'pnm' => 'image/x-portable-anymap',
'pbm' => 'image/x-portable-bitmap',
'pgm' => 'image/x-portable-graymap',
'ppm' => 'image/x-portable-pixmap',
'rgb' => 'image/x-rgb',
'xbm' => 'image/x-xbitmap',
'xpm' => 'image/x-xpixmap',
'xwd' => 'image/x-xwindowdump',
'igs' => 'model/iges',
'iges' => 'model/iges',
'msh' => 'model/mesh',
'mesh' => 'model/mesh',
'silo' => 'model/mesh',
'wrl' => 'model/vrml',
'vrml' => 'model/vrml',
'css' => 'text/css',
'html' => 'text/html',
'htm' => 'text/html',
'asc' => 'text/plain',
'txt' => 'text/plain',
'rtx' => 'text/richtext',
'rtf' => 'text/rtf',
'sgml' => 'text/sgml',
'sgm' => 'text/sgml',
'tsv' => 'text/tab-separated-values',
'wml' => 'text/vnd.wap.wml',
'wmls' => 'text/vnd.wap.wmlscript',
'etx' => 'text/x-setext',
'xsl' => 'text/xml',
'xml' => 'text/xml',
'mpeg' => 'video/mpeg',
'mpg' => 'video/mpeg',
'mpe' => 'video/mpeg',
'qt' => 'video/quicktime',
'mov' => 'video/quicktime',
'mxu' => 'video/vnd.mpegurl',
'avi' => 'video/x-msvideo',
'movie' => 'video/x-sgi-movie',
'ice' => 'x-conference/x-cooltalk'

RegExp規則

RegExp規則

RegExp位置符號: ^=強制由自首開始 $=強制到字尾結束 \b=代表單字第一個字 \B=代表單字中含檢測內容 RegExp符號語法: {n}=n代表字數 {n,}=代表n個以上字元 {n,m}=代表n到m字元 ? =代表問號前字元有出現即可 * = 代表幾個字元都可以有出現即可 + = 代表至少一個字元 | = 代表或 RegExp方法: text(Str)=搜尋Str字串,回傳Booln exec(Str)=搜尋Str字串,回傳找到字串,找不到回傳null

[]=框框內文字代表可輸入文字 [^]=代表框框內字元為不允許 .=代表enter以外所有字元 \w=代表[0-9A-Za-z] \W=代表[^0-9A-Za-z] \d=代表[0-9] \D=代表[^0-9] \s=代表空白鍵 \S=代表非空白鍵 \n=代表插入一行符號 \f=代表換行 \r=代表游標移到第一位置 \t=代表Tab鍵 比對方式: g=代表全部比對 i=不分大小 m=多行模式

輸入數字

輸入文字

Autocomplete and ashx

Autocomplete.js

$(function(){
      var path = "Autocomplete.ashx";//連接位置       
      $( "#tags" ).autocomplete({
          source:function(request,response){
              $.ajax({
                  type:"POST",
                  url:path,
                  dataType:"text",
                  timeout:3000,//over 3000s exit
                  data:{"value":request.term,"type":"id"},
                  success:function(data, textStatus){
                      if(data == "")return response([]);
                      var aTemp = data.split(",");
                      response($.map(aTemp,function(n){
                          return{value:n}
                      }));
                  }
              });
          },
          delay:500,//輸入完畢延遲0.5秒
          minLength:1//最少輸入1字元
      });
});

Autocomplete.html

<div >
   <input type="text" id="tags" />
</div>

Autocomplete.ashx

Dim db As New intra.intraConn
Dim dt As DataTable
Dim SQL10, strID As String
Dim rows As DataRow
SQL10 = "Select top 10 id from StaffData WHERE " & context.Request("type") & " LIKE '" & context.Request("value") & "%'"
dt = db.GetDataTable(SQL10) ''連接資料庫取得dataTable
strID = ""
If Not dt.Rows.Count = 0 Then '檢查資料是否為null
    For Each rows In dt.Rows '一一取出
        If strID = "" Then
            strID = rows.Item("id").ToString
        Else
            strID = Trim(strID) & "," & rows.Item("id").ToString
        End If
    Next
End If
db.Close()
If Trim(strID) = "" Then
    context.Response.End()
End If
context.Response.ContentType = "text/plain"
context.Response.Write(Trim(strID)) '傳回字串

這是小弟的設計，大家參考看看，有感想歡迎提出

jQueryUI Autocomplete

jQueryUI真是太方便了，像這種欄位自動輸入，其實asp.net 的Ajax Tools其實也有，小弟也小玩過，但感覺想跳來jQuery原因就是~~，他實在方便又美觀，不廢話，小說明一下:

屬性:

soucer	來源
minLength	當輸入第幾字元時開始搜尋
delay	當資料較龐大時使用，其實設定0也可以，只是效果，自己判斷摟
Disables	(true)禁用(false)啟用 不設定也可以因為預設:false

事件:

select	選擇完畢觸發
open	選擇窗開啟時觸發
close	選擇窗關閉時觸發
focus	當focus在選擇欄位時觸發
change	輸入欄位值改變時觸發
search	搜尋之前觸發

方法:

.autocomplete( "destroy" )	直接移除掉自動搜尋功能
.autocomplete( "disable" )	自動輸入"禁用"
.autocomplete( "enable" )	自動輸入"啟用"
.autocomplete( "option" , optionName , [value] )	設定與獲得，無value時，就是獲得
.autocomplete( "option" , options )	options物件 一次設定多個指令
.autocomplete( "widget" )
.autocomplete( "search" , [value] )
.autocomplete( "close" )

javascript

$(function() {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});

html

<label for="tags">Tags:</label>
<input id="tags">

CSS3 漸層功能

CSS漸層功能太方便拉 對我這種不愛用圖檔的人來說真是一大樂事阿

CSS語法:

-moz-linear-gradient(顏色漸成開始位置,開始顏色,結束顏色) /*Firefox Linear gradients*/
-webkit-gradient(linear,開始位置,結束位置,from(開始顏色),to(結束顏色)) /*Safari, Chrome Linear gradients*/
個人比較喜歡FF的寫法精簡，但其實兩者都挺容易上手。

趕快來看看效果如何:

左to右
background:-moz-linear-gradient(left, #003300, #66CC66) ;/*FF3.0*/
background: -webkit-gradient(linear, left center, right center, from(#003300), to(#66CC66)); /*Google*/

上to下
background:-moz-linear-gradient(top, #003300, #66CC66) ;/*FF3.0*/
background: -webkit-gradient(linear,center top,center bottom, from(#003300), to(#66CC66)); /*Google*/

左斜to右斜
background:-moz-linear-gradient(left top 300deg, #003300, #66CC66) ;/*FF3.0*/
background:-webkit-gradient(linear, left top, right bottom, from(#003300), to(#66CC66)); /*Google*/

CSS3圓角 陰影 功能

CSS圓弧設計對我來說真是太方便了，本人由於太懶，都不太愛做圖片，廢話不多說來已場示範八

-moz-border-radius: 10px;/*Firefox使用*/
-webkit-border-radius: 10px;/*Google使用*/

-moz-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-webkit-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/

再加上陰影 感覺更有質感

-moz-border-radius: 10px;/*Firefox 圓角*/
-moz-box-shadow: 5px 5px #818181;/*Firefox 陰影*/
-webkit-border-radius: 10px;/*Google 圓角*/
-webkit-box-shadow: 5px 5px #818181;/*Google 陰影*/

-moz-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-moz-box-shadow: 5px 5px #818181;/*Firefox 陰影 直 橫 模糊 顏色*/
-webkit-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-webkit-box-shadow: 5px 5px #818181;/*Google 陰影 陰影 直 橫 模糊 顏色*/

陰影方向可以自由調整

-moz-border-radius: 10px;/*Firefox 圓角*/
-moz-box-shadow: 5px 5px #818181;/*Firefox 陰影*/
-webkit-border-radius: 10px;/*Google 圓角*/
-webkit-box-shadow: 5px 5px #818181;/*Google 陰影*/

-moz-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-moz-box-shadow: 5px -5px 7px #818181;/*Firefox 陰影 直 橫 模糊 顏色*/
-webkit-border-radius:10px 3px 10px 3px;/*左上 右上 右下 左下*/
-webkit-box-shadow: 5px -5px 7px #818181;/*Google 陰影 陰影 直 橫 模糊 顏色*/

目前很遺憾IE 並未支援，大家只好忍耐，但聽說IE9會全面支援W3C希望可以統一，對開發者而言可是一大福音。
以上參考圓角範例:CSS Library