tag:blogger.com,1999:blog-59465307047421309702024-03-06T16:20:07.273+08:00Jax 的工作紀錄除了在整理學習上的經驗,同時也能幫助其他需要的人Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.comBlogger11125tag:blogger.com,1999:blog-5946530704742130970.post-8991216962887549852014-11-10T11:45:00.000+08:002014-11-10T11:52:14.724+08:00[轉載] Javascript Char Codes (Key Codes)轉載自:<a href="http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes" target="_blank">Javascript Char Codes (Key Codes)</a><br />
<br />
<table class="table_list" cellspacing="0" cellpadding="4" border="1" style="width:150px; float:left; margin-right:10px;"><tr class="header"><th>Key</th><th>Code</th></tr>
<tr><td>backspace</td><td>8</td></tr>
<tr><td>tab</td><td>9</td></tr>
<tr><td>enter</td><td>13</td></tr>
<tr><td>shift</td><td>16</td></tr>
<tr><td>ctrl</td><td>17</td></tr>
<tr><td>alt</td><td>18</td></tr>
<tr><td>pause/break</td><td>19</td></tr>
<tr><td>caps lock</td><td>20</td></tr>
<tr><td>escape</td><td>27</td></tr>
<tr><td>page up</td><td>33</td></tr>
<tr><td>page down</td><td>34</td></tr>
<tr><td>end</td><td>35</td></tr>
<tr><td>home</td><td>36</td></tr>
<tr><td>left arrow</td><td>37</td></tr>
<tr><td>up arrow</td><td>38</td></tr>
<tr><td>right arrow</td><td>39</td></tr>
<tr><td>down arrow</td><td>40</td></tr>
<tr><td>insert</td><td>45</td></tr>
<tr><td>delete</td><td>46</td></tr>
<tr><td>0</td><td>48</td></tr>
<tr><td>1</td><td>49</td></tr>
<tr><td>2</td><td>50</td></tr>
<tr><td>3</td><td>51</td></tr>
<tr><td>4</td><td>52</td></tr>
<tr><td>5</td><td>53</td></tr>
<tr><td>6</td><td>54</td></tr>
<tr><td>7</td><td>55</td></tr>
<tr><td>8</td><td>56</td></tr>
<tr><td>9</td><td>57</td></tr>
<tr><td>a</td><td>65</td></tr>
<tr><td>b</td><td>66</td></tr>
<tr><td>c</td><td>67</td></tr>
<tr><td>d</td><td>68</td></tr>
</table><table class="table_list" cellspacing="0" cellpadding="4" border="1" style="width:150px; float:left; margin-right:10px;"><tr class="header"><th>Key</th><th>Code</th></tr>
<tr><td>e</td><td>69</td></tr>
<tr><td>f</td><td>70</td></tr>
<tr><td>g</td><td>71</td></tr>
<tr><td>h</td><td>72</td></tr>
<tr><td>i</td><td>73</td></tr>
<tr><td>j</td><td>74</td></tr>
<tr><td>k</td><td>75</td></tr>
<tr><td>l</td><td>76</td></tr>
<tr><td>m</td><td>77</td></tr>
<tr><td>n</td><td>78</td></tr>
<tr><td>o</td><td>79</td></tr>
<tr><td>p</td><td>80</td></tr>
<tr><td>q</td><td>81</td></tr>
<tr><td>r</td><td>82</td></tr>
<tr><td>s</td><td>83</td></tr>
<tr><td>t</td><td>84</td></tr>
<tr><td>u</td><td>85</td></tr>
<tr><td>v</td><td>86</td></tr>
<tr><td>w</td><td>87</td></tr>
<tr><td>x</td><td>88</td></tr>
<tr><td>y</td><td>89</td></tr>
<tr><td>z</td><td>90</td></tr>
<tr><td>left window key</td><td>91</td></tr>
<tr><td>right window key</td><td>92</td></tr>
<tr><td>select key</td><td>93</td></tr>
<tr><td>numpad 0</td><td>96</td></tr>
<tr><td>numpad 1</td><td>97</td></tr>
<tr><td>numpad 2</td><td>98</td></tr>
<tr><td>numpad 3</td><td>99</td></tr>
<tr><td>numpad 4</td><td>100</td></tr>
<tr><td>numpad 5</td><td>101</td></tr>
<tr><td>numpad 6</td><td>102</td></tr>
<tr><td>numpad 7</td><td>103</td></tr>
</table><table class="table_list" cellspacing="0" cellpadding="4" border="1" style="width:150px; float:left; margin-right:10px;"><tr class="header"><th>Key</th><th>Code</th></tr>
<tr><td>numpad 8</td><td>104</td></tr>
<tr><td>numpad 9</td><td>105</td></tr>
<tr><td>multiply</td><td>106</td></tr>
<tr><td>add</td><td>107</td></tr>
<tr><td>subtract</td><td>109</td></tr>
<tr><td>decimal point</td><td>110</td></tr>
<tr><td>divide</td><td>111</td></tr>
<tr><td>f1</td><td>112</td></tr>
<tr><td>f2</td><td>113</td></tr>
<tr><td>f3</td><td>114</td></tr>
<tr><td>f4</td><td>115</td></tr>
<tr><td>f5</td><td>116</td></tr>
<tr><td>f6</td><td>117</td></tr>
<tr><td>f7</td><td>118</td></tr>
<tr><td>f8</td><td>119</td></tr>
<tr><td>f9</td><td>120</td></tr>
<tr><td>f10</td><td>121</td></tr>
<tr><td>f11</td><td>122</td></tr>
<tr><td>f12</td><td>123</td></tr>
<tr><td>num lock</td><td>144</td></tr>
<tr><td>scroll lock</td><td>145</td></tr>
<tr><td>semi-colon</td><td>186</td></tr>
<tr><td>equal sign</td><td>187</td></tr>
<tr><td>comma</td><td>188</td></tr>
<tr><td>dash</td><td>189</td></tr>
<tr><td>period</td><td>190</td></tr>
<tr><td>forward slash</td><td>191</td></tr>
<tr><td>grave accent</td><td>192</td></tr>
<tr><td>open bracket</td><td>219</td></tr>
<tr><td>back slash</td><td>220</td></tr>
<tr><td>close braket</td><td>221</td></tr>
<tr><td>single quote</td><td>222</td></tr>
<tr><td> </td><td> </td></tr>
</table>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-57148724996672835022014-05-08T02:58:00.000+08:002014-05-08T02:58:09.841+08:00[AngularJS] 製作 jQuery UI Sortable directiveHtml<br />
<pre class="xml" name="code"><div jq-sortable="selectedList">
<div ng-repeat="item in selectedList">
<img ng-src="{{item.src}}" />
</div>
</div>
</pre><br />
<br />
JavaScript<br />
<pre class="js" name="code">app.directive('jqSortable', ['$parse', function($parse) {
return function(scope, element, attrs) {
/*解析並取得表達式*/
var expr = $parse(attrs['jqSortable']);
var $oldChildren;
element.sortable({
opacity: 0.7,
scroll: false,
tolerance: "pointer",
start: function() {
/*紀錄移動前的 children 順序*/
$oldChildren = element.children('[ng-repeat]');
},
update: function(){
var newList = [];
var oldList = expr(scope);
var $children = element.children('[ng-repeat]');
/*產生新順序的陣列*/
$oldChildren.each(function(i){
var index = $children.index(this);
if(index == -1){ return; }
newList[index] = oldList[i];
});
/*將新順序的陣列寫回 scope 變數*/
expr.assign(scope, newList);
/*通知 scope 有異動發生*/
scope.$digest();
}
});
/*在 destroy 時解除 Sortable*/
scope.$on('$destroy', function(){
element.sortable('destroy');
});
};
}]);
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-82000849991912917322014-05-08T02:56:00.000+08:002014-05-08T02:58:56.043+08:00[AngularJS] 製作 Mouse Drag Event directiveHtml<br />
<pre class="xml" name="code"><div ng-style="{'top': itemTop, 'left': itemLeft}"
my-mousedrag="itemTop = itemTop - $deltaY; itemLeft = itemLeft - $deltaX"
></div>
</pre><br />
JavaScript<br />
<pre class="js" name="code">app.directive('myMousedrag', function() {
return function(scope, element, attrs) {
var prevEvent;
element.mousedown(function(event){
prevEvent = event;
}).mouseup(function(event){
prevEvent = null;
}).mousemove(function(event){
if(!prevEvent){ return; }
/*將 element 拖移事件傳遞到 scope 上*/
scope.$eval(attrs['myMousedrag'], {
$event: event,
$deltaX: event.clientX - prevEvent.clientX,
$deltaY: event.clientY - prevEvent.clientY
});
/*通知 scope 有異動發生*/
scope.$digest();
prevEvent = event;
});
/*在 destroy 時清除事件註冊*/
scope.$on('$destroy', function(){
element.off('mousedown mouseup mousemove');
});
};
});
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-14100384141966647202014-05-08T02:54:00.000+08:002014-05-08T02:54:14.702+08:00[AngularJS] 製作 jQuery MouseWheel directive相依套件:<a href="https://github.com/brandonaaron/jquery-mousewheel" target="_blank">jquery-mousewheel</a><br />
<br />
Html<br />
<pre class="xml" name="code"><div jq-mousewheel="changeSize($event, $delta, $deltaX, $deltaY)"></div>
</pre><br />
JavaScript<br />
<pre class="js" name="code">app.directive('jqMousewheel', function(){
return function(scope, element, attrs) {
/*將 element 滾輪事件傳遞到 scope 上*/
element.on('mousewheel', function (event) {
scope.$eval(attrs['jqMousewheel'], {
$event: event,
$delta: event.delta,
$deltaX: event.deltaX,
$deltaY: event.deltaY
});
/*通知 scope 有異動發生*/
scope.$digest();
});
/*在 destroy 時清除事件註冊*/
scope.$on('$destroy', function(){
element.off('mousewheel');
});
};
});
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-26510350574789047362014-05-08T02:52:00.000+08:002014-05-08T03:00:03.540+08:00[AngularJS] 製作 jQuery scrollTop scrollLeft directiveHtml<br />
<pre class="xml" name="code"><div jq-scroll-top="viewerScrollTop"
jq-scroll-left="viewerScrollLeft"
></div>
</pre><br />
JavaScript<br />
<pre class="js" name="code">app.directive('jqScrollTop', ['$parse', function($parse){
return function(scope, element, attrs) {
/*解析並取得表達式*/
var expr = $parse(attrs['jqScrollTop']);
/*監聽變數異動,並更新到 element 上*/
scope.$watch(attrs['jqScrollTop'], function(value) {
element.scrollTop(value);
});
/*當 element 捲動時更新到變數上*/
element.on('scroll', function() {
expr.assign(scope, element.scrollTop());
});
/*在 destroy 時清除事件註冊*/
scope.$on('$destroy', function(){
element.off('scroll');
});
};
}]);
app.directive('jqScrollLeft', ['$parse', function($parse){
return function(scope, element, attrs) {
/*解析並取得表達式*/
var expr = $parse(attrs['jqScrollLeft']);
/*監聽變數異動,並更新到 element 上*/
scope.$watch(attrs['jqScrollLeft'], function(value) {
element.scrollLeft(value);
});
/*當 element 捲動時更新到變數上*/
element.on('scroll', function() {
expr.assign(scope, element.scrollLeft());
});
/*在 destroy 時清除事件註冊*/
scope.$on('$destroy', function(){
element.off('scroll');
});
};
}]);
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-33163877699696296622014-03-05T23:38:00.001+08:002023-02-25T21:32:20.715+08:00利用 HTTP Status Codes 傳遞 Ajax 成功失敗的狀態一般處理 Ajax 回應時會傳送的資訊種類有:資料、成功訊息、錯誤訊息、失敗訊息以及處理狀態,傳遞的資訊種類並不一致,再加上除了資料之外,通常還希望能傳遞處理狀態,這種情況大部分會選擇是以 JSON 的方式傳遞這兩個訊息,以下是常見的幾種格式:<br />
<br />
<pre class="js" name="code">{ code: 1, msg: "OK" }
{ success: true, result: "data", errorMsg: "" }
{ status: 'success', result: [], errorMsg: "" }
//...
</pre><br />
但以執行狀態跟操作行為作一個歸納,可以區分以下幾種回傳結果:<br />
<table class="table_list" cellspacing="0" cellpadding="4" border="1"> <tr class="header">
<th>資料操作</th>
<th>HTTP Method</th>
<th>成功</th>
<th>錯誤/失敗</th>
</tr>
<tr>
<td>檢視(Read)</td>
<td>GET</td>
<td>資料</td>
<td>錯誤/失敗訊息</td>
</tr>
<tr>
<td>新增(Create)<br />
修改(Update)<br />
刪除(Delete)</td>
<td>POST</td>
<td>成功訊息</td>
<td>錯誤/失敗訊息</td>
</tr>
</table><br />
從上面的歸納可以看出規律性,接著只要有方法可以傳送處理的狀態,以及能夠區分資料的種類,其實就單純很多,而 HTTP Status Codes 就是用來傳遞 HTTP 的處理狀態,如果利用這個方式來傳遞自訂的處理狀態,這樣 HTTP Content 就可以很單純傳遞資料,讓資料格式不受限於 JSON,還可以使用其他格式(text, xml, html),而且 XMLHttpRequest 本身就有處理 HTTP Status Codes 的能力,而 jQuery.ajax 也有提供 error status 的處理,所以可以利用這個來定義狀態的處理,在 HTTP Status Codes 有幾個已經定義狀態,很適合用來回傳處理狀態的資訊:<br />
<br />
<table class="table_list" cellspacing="0" cellpadding="4" border="1"> <tr>
<th>400</th>
<td>Bad Request</td>
<td>錯誤的請求</td>
<td>適用在表單內容的錯誤,如必填欄位未填、Email 格式錯誤</td>
</tr>
<tr>
<th>403</th>
<td>Forbidden</td>
<td>沒有權限,被禁止的</td>
<td>適用在沒有登入或權限不足</td>
</tr>
<tr>
<th>500</th>
<td>Internal Server Error</td>
<td>內部服務器錯誤</td>
<td>適用在程式的錯誤</td>
</tr>
</table><br />
<br />
jQuery 接收資訊的範例<br />
<pre class="js" name="code">$.ajax({
type: "POST",
url: document.location,
success: function (data, textStatus, jqXHR) {
alert(data);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
}
});
</pre> <br />
<br />
PHP 傳遞錯誤訊息的範例 <br />
<pre class="php" name="code">if (php_sapi_name() == 'cgi'){
header("Status: 400 Bad Request");
}else{
header("HTTP/1.0 400 Bad Request");
}
exit("儲存失敗!!");
</pre><br />
<br />
C# MVC 傳遞錯誤訊息的範例 <br />
<pre class="cs" name="code">Response.TrySkipIisCustomErrors = true;
Response.StatusCode = 400;
return Content("儲存失敗!!");
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-54119043130692298212014-02-18T22:46:00.000+08:002014-02-19T13:43:23.716+08:00[jQuery] $.log 與 $.fn.dump記錄一下,偷懶的 console.log<br />
<pre class="js" name="code">if ($ && $.fn) {
$.log = (window['console'] && typeof(console.log)=='function') ?
function () { console.log.apply(console, arguments); } :
$.noop;
$.fn.dump = function (tag) {
var args = Array.prototype.slice.call(arguments);
args.push(this);
$.log.apply($, args);
return this;
}
}
// use
$.log('ok');
$('img').dump();
$('div').dump('my tag');
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-36055306698634161272014-02-18T22:26:00.000+08:002014-02-19T01:34:55.349+08:00[jQuery] 製作 $.fn.delayAll<a href="http://jquery.com/" target="_blank">jQuery</a> 有提供 <a href="http://api.jquery.com/delay/" target="_blank">delay</a> 這個方法,可惜只能用在動畫操作上,想要做到下面的事情就只能用 setTimeout 了。<br />
<pre class="js" name="code">// not working
$('div').css('color','red').delay(200).css('color','blue');
// use setTimeout
$('div').css('color','red');
setTimeout(function(){
$('div').css('color','blue');
}, 200);
</pre><br />
<br />
稍微研究了一下,發現 <a href="http://jquery.com/" target="_blank">jQuery</a> 本身有製作 <a href="http://api.jquery.com/queue/" target="_blank">queue</a> 的功能,這個用來存放 delay 後要執行動作的紀錄器,最後只要對 jQuery Object 作一個代理器的包裝,就可以達到想要的目的了。<br />
<pre class="js" name="code">var queueName = 'delayAll';
/*定義 jQuery Delay 代理類別*/
function jQueryDelay(jqObject, duration){
/*將缺少的成員屬性補上*/
for(var member in jqObject){
if(!$.isFunction(jqObject[member]) || !this[member]){
this[member] = jqObject[member];
}
}
/*新增 delay 時間並啟動 queue*/
jqObject
.delay(duration, queueName)
.dequeue(queueName);
/*紀錄 jQuery 物件*/
this._jqObject = jqObject;
};
/*為所有的 jQuery 方法製作 proxy*/
for(var member in $.fn){
if(!$.isFunction($.fn[member])){ continue; }
jQueryDelay.prototype[member] = function(){
var jqObject = this._jqObject;
var args = Array.prototype.slice.call(arguments);
var mothed = arguments.callee.methodName;
/*將需要執行動作加入 queue*/
jqObject.queue(queueName, function(next) {
jqObject[mothed].apply(jqObject, args);
next();
});
return this;
};
/*紀錄方法名稱,在 proxy 時會需要參考到*/
jQueryDelay.prototype[member].methodName = member;
}
/*允許多次串接的可能*/
jQueryDelay.prototype.delayAll = function(duration){
this._jqObject.delay(duration, queueName);
return this;
};
/*用 jQueryDelay 將原本的 jQuery Object 包裝起來*/
$.fn.delayAll = function(duration){
return new jQueryDelay(this ,duration);
};
</pre><br />
<br />
使用範例:<br />
<pre class="js" name="code">$('div').css('color','#f00')
.delayAll(2000).css('color','#0f0')
.delayAll(2000).css('color','#00f');
</pre><br />
<br />
檔案下載:<a href="https://dl.dropboxusercontent.com/u/16784943/code-demo/jquery.delayAll.js" target="_blank">jquery.delayAll.js</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-47266195500155535732011-09-09T10:15:00.000+08:002013-06-10T22:52:24.299+08:00[jQuery] 等待多個 Ajax 請求完成最近在找等待多個 Ajax 完成的方法,找到 <a target="_blank" href="http://cmc3.cn/n/249.html">jQuery.when函数分析</a>這篇文章中有處理多個 Ajax 的方法,但對於數量不固定的狀況,jQuery.when 輸入參數的方式實在有點討厭,必須要指定 Ajax 的數量,還好想起有 <a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/function/apply">apply</a> 這個方法可以用,可以將 array 轉換成呼叫 function 的參數,這樣不管有多少數量,都可以很輕鬆的帶入到 jQuery.when 中。<br />
<br />
<pre class="js" name="code">/*將多個 Ajax 加到 array 中*/
var ajaxRequest=[];
for (var i=0; i<10; i++){
ajaxRequest.push(
$.ajax({
data: {'a':i},
success: function(data) {
console.log(data);
}
})
);
};
/*利用 apply 將 ajaxRequest 帶入 jQuery.when*/
var der=$.when.apply( $, ajaxRequest )
der.always(function() {
console.log(arguments);
alert('全部結束');
});
der.done(function() {
console.log(arguments);
alert('全部成功');
});
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-86956516928763696962011-09-05T14:10:00.004+08:002011-09-08T16:46:41.330+08:00[jQuery] textarea 自動高度很簡單上網找了一些文章來看後,自己又再改了一改,發現很簡單就可以達到自動高度的功能,真是給他快樂的說。<br />
<br />
<pre class="xml" name="code"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文字區塊自動高度</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($) {
$("textarea.AutoHeight").css("overflow","hidden").bind("keydown keyup", function(){
$(this).height('0px').height($(this).prop("scrollHeight")+"px");
}).keydown();
});
</script>
</head>
<body>
<textarea class="AutoHeight"></textarea>
<textarea class="AutoHeight"></textarea>
<textarea class="AutoHeight"></textarea>
</body>
</html>
</pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com5tag:blogger.com,1999:blog-5946530704742130970.post-64578714668888091462009-12-18T16:50:00.008+08:002011-05-06T18:13:43.456+08:00[HTML] 規劃延生屬性之前在玩 Firefox 的外掛時,在 <a href="https://developer.mozilla.org/zh_tw/XUL">XUL</a> 的定義中學到其他屬性設定,當中有些定義還蠻常用到的<br />如:empty, emptytext, max, min...等<br /><br />這裡我只是要說明一個簡化開發的 solution,並沒有完整的應用規劃,為了瞭解這個 solution 可以先看看一個簡單的<a target="_blank" href="http://sites.google.com/site/weskerjax/code-demo/html_extension.zip">範例 html_extension.zip</a>。<br /><br />其實最近看到 <a href="http://dev.w3.org/html5/spec/Overview.html">HTML5</a> 已經將很多常見的介面應用加入定義中,但還是可以將系統架構中常用的功能做成延伸屬性,在 <a href="http://dev.w3.org/html5/spec/Overview.html">HTML5</a> 普及之前這是一個很好的 solution。<br /><br /><br />在之前的專案中,我做了一下的規劃:<br /><dl><dt>element [延伸屬性]{所有元素共用}<br /></dt><dd>removeDelay="sec" {設定幾秒鐘後自動[移除]此元素}<br />pulsate="sec" {設定幾秒鐘後自動結束元素[閃爍]}<br /><br /></dd><dt>input,textarea [延伸屬性]<br /></dt><dd>emptyText="為空預設提示" {設定當輸入匡為空時的文字提示}<br /><br /></dd><dt>form > tr [延伸樣式]<br /></dt><dd>class="NotNull" {檢查區塊內的元素是否有選項值}<br /><br /></dd><dt>form > input [延伸屬性]<br /></dt><dd>format="" {表單送出前的格式檢查,但不會檢查是否為空} <br /><ul><li>'tel':電話</li><li>'mobile':行動電話</li><li>'email':電子信箱</li><li>'url':網路連結<br /></li></ul></dd><dd>jtype="" {資料輸入時的輔助}<br />(基本格式輸入)<br /><ul><li>'uint':無符號整數</li><li>'int':整數</li><li>'float':浮點數</li><li>'id':帳號格式</li><li>'alnum':保留字母和数字及底線<br /></li></ul><br />(輔助日期輸入)<br /><ul><li>'date':選擇日期</li><li>'start_date':選擇起始日期</li><li>'end_date':選擇結束日期<br /></li></ul> <br />(輔助時間輸入)<br /><ul><li>'time':選擇時間</li><li>'start_time':選擇起始時間</li><li>'end_time':選擇結束時間<br /></li></ul></dd></dl><br /> <br />在下面的 HTML 中可以看到程式碼都便得很簡單<br /><pre class="xml" name="code"><br /><!--動態效果--><br /><div pulsate="4">4秒閃爍</div><br /><div removeDelay="10">10秒後消失</div><br /><div pulsate="5" removeDelay="8">5秒閃爍&8秒後消失</div><br /><br /><br /><!--表單--><br /><form class="FormWidget" method="post" action=""><br /><table class="FormList" border="0"><br /> <caption>輸入限制</caption><br /><br /> <tr class="NotNull"><br /> <th><label for="data_1">無符號整數 :</label></th><br /> <td><input type="text" jtype="uint" value="" class="Int" id="data_1" name="data_1"/></td><br /> </tr><br /><br /> <tr class="NotNull"><br /> <th><label for="data_2">整數 :</label></th><br /> <td><input type="text" jtype="int" value="" class="Int" id="data_2" name="data_2"/></td><br /> </tr><br /><br /> <tr class="NotNull"><br /> <th><label for="data_3">浮點數 :</label></th><br /> <td><input type="text" jtype="float" value="" class="Int" id="data_3" name="data_3"/></td><br /> </tr><br /> <br /> <tr><br /> <th><label for="data_4">帳號格式 :</label></th><br /> <td><input type="text" jtype="id" value="" class="Text" id="data_4" name="data_4" emptyText="請輸入帳號"/></td><br /> </tr><br /><br /> <tr class="NotNull"><br /> <th><label for="data_5">英數及底線 :</label></th><br /> <td><input type="text" jtype="" value="" class="Text" id="data_5" name="data_5"/></td><br /> </tr><br /></table><br /><br /><br /><table class="FormList" border="0"><br /> <caption>時間 & 日期</caption><br /><br /> <tr><br /> <th><label for="data_6">日期 :</label></th><br /> <td><input type="text" jtype="date" value="" id="data_6" name="data_6"/></td><br /> </tr><br /><br /> <tr><br /> <th><label>日期區間 :</label></th><br /> <td><br /> <div class="OptionBar"><br /> <label>起始<input type="text" jtype="start_date" value="" class="Text" name="start_date"/></label><br /> -<br /> <label>結束<input type="text" jtype="end_date" value="" class="Text" name="end_date"/></label><br /> </div><br /> </td><br /> </tr><br /> <br /> <tr><br /> <th><label for="data_7">時間 :</label></th><br /> <td><input type="text" jtype="time" value="" id="data_7" name="data_7"/></td><br /> </tr><br /> <br /> <tr><br /> <th><label>時間區間 :</label></th><br /> <td><br /> <div class="OptionBar"><br /> <label>起始<input type="text" jtype="start_time" value="" name="start_time"/></label><br /> -<br /> <label>結束<input type="text" jtype="end_time" value="sdsfsdf" name="end_time"/></label><br /> </div><br /> </td><br /> </tr><br /></table><br /><br /><br /><table class="FormList" border="0"><br /> <caption>格式檢查</caption><br /><br /> <tr><br /> <th><label for="data_8">電話格式 :</label></th><br /> <td><input type="text" format="tel" value="" class="Text" id="data_8" name="data_8"/></td><br /> </tr><br /> <br /> <tr class="NotNull"><br /> <th><label for="data_9">行動電話格式 :</label></th><br /> <td><input type="text" format="mobile" value="0912345678" class="Text" id="data_9" name="data_9"/></td><br /> </tr><br /> <br /> <tr class="NotNull"><br /> <th><label for="data_10">E-mail 格式 :</label></th><br /> <td><input type="text" format="email" value="" class="Text" id="data_10" name="data_10"/></td><br /> </tr><br /> <br /> <tr><br /> <th><label for="data_11">連結格式 :</label></th><br /> <td><input type="text" format="url" value="" class="Text" id="data_11" name="data_11"/></td><br /> </tr><br /></table><br /><br /><div class="Buttons"><br /> <input type="submit" class="Button" value="儲存"/><br /></div><br /></form><br /></pre>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0