超多M$ Framework的精彩範例的open source,
有需要的人可以去看看。
Microsoft All-In-One Code Framework
星期四, 5月 19, 2011
星期日, 5月 15, 2011
[JQuery Plugin] AJAX Form using Jquery
使用jquery達到ajax form submit的需求。
請參考這個元件jQuery Form Plugin
javascript:
請參考這個元件jQuery Form Plugin
javascript:
$(function(){ // bind to the form's submit event $("#formAJAX").ajaxForm({ url: "http://localhost:8080/webproject/yourpage" , beforeSubmit: showRequest, type: "get", dataType: "json", success: showResponse }); }); //pre-submit callback function showRequest(formData, jqForm, options) { var queryString = $.param(formData); alert(queryString); return true; } //post-submit callback function showResponse(responseText, statusText, xhr, $form) { alert(responseText);//單純的Text }//發現用showResposne的時候,responseText才會被直接轉換成JSON Object function showResponse(responseText) html page:
<form id="formAJAX" > <input id="doSubmit" type="submit" name="button" value="submit" /> </form>
[Javascript] 使用javascript取代所有比對的字串
在javascript的replace函式如果不使用正則表示式的格式的話,只能取代第一個符合的字串規則。
請參考以下這篇文章:
The JavaScript function for String Replace replaces the first occurrence in the string. The function is similar to the php function str_replace and takes two simple parameters. The first parameter is the pattern to find and the second parameter is the string to replace the pattern with when found. The javascript function does not Replace All...
To ReplaceAll you have to do it a little differently. To replace all occurrences in the string, use the g modifier like this:
Reference:
JavaScript String Replace All
請參考以下這篇文章:
The JavaScript function for String Replace replaces the first occurrence in the string. The function is similar to the php function str_replace and takes two simple parameters. The first parameter is the pattern to find and the second parameter is the string to replace the pattern with when found. The javascript function does not Replace All...
str = str.replace(”find”,”replace”)
To ReplaceAll you have to do it a little differently. To replace all occurrences in the string, use the g modifier like this:
str = str.replace(/find/g,”replace”)
Reference:
JavaScript String Replace All
星期三, 5月 11, 2011
[JSP] JSP-防止瀏覽器快取網頁
今天工作處理IE8異常cache網頁導致ajax異常,多虧FIDDLER這個好用的http tool。
以下為參考的資料:
JSP技巧篇---防止瀏覽器快取網頁
(資料來源:Java Server Page 學習網 -- http://www.jsp.mlc.edu.tw )
瀏覽器為了加速使用者的瀏覽速度,常會將瀏覽過的網頁快取到硬碟,
下次瀏覽同一頁時,便去硬碟裡面去找,但現在的網頁常是動態的,
為了避免使用者抓到硬碟內過期的資料,JSP可用下面的方式來防止瀏
覽器快取住網頁,此方法便可保證使用者到這個網頁時始終都可看到
1.JSP語法
<%
response.setHeader("Pragma","no-cache");
response.setHeader("Cache-Control","no-cache");
//prevents caching at the proxy server
response.setDateHeader("Expires", 0);
%>
2.也可以用以下的HTML語法,可用在靜態網頁上
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
201203/14更新
今天仔細測了一下,就算加了這些Header可以清Cache,但並非馬上就會更新。
需要多按幾次重新整理才會馬上更新!!
以下為參考的資料:
JSP技巧篇---防止瀏覽器快取網頁
(資料來源:Java Server Page 學習網 -- http://www.jsp.mlc.edu.tw )
瀏覽器為了加速使用者的瀏覽速度,常會將瀏覽過的網頁快取到硬碟,
下次瀏覽同一頁時,便去硬碟裡面去找,但現在的網頁常是動態的,
為了避免使用者抓到硬碟內過期的資料,JSP可用下面的方式來防止瀏
覽器快取住網頁,此方法便可保證使用者到這個網頁時始終都可看到
1.JSP語法
<%
response.setHeader("Pragma","no-cache");
response.setHeader("Cache-Control","no-cache");
//prevents caching at the proxy server
response.setDateHeader("Expires", 0);
%>
2.也可以用以下的HTML語法,可用在靜態網頁上
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
201203/14更新
今天仔細測了一下,就算加了這些Header可以清Cache,但並非馬上就會更新。
需要多按幾次重新整理才會馬上更新!!
星期一, 5月 09, 2011
[JQuery Plugin] Checkbox 按鈕skin
想要在Web上面使用像iphone的enable按鈕嗎?
以下這個外掛可以達到你的需求!!
Jquery check box
Lightweight custom styled checkbox implementaion for jQuery 1.2.x and 1.3.x.
How to use:
增加按鈕是否被按下,請使用bind的方法
adds new checkbox events "check", "uncheck", "disable", "enable", ready to use in jQuery.bind() method
http://widowmaker.kiev.ua/checkbox/
以下這個外掛可以達到你的需求!!
Jquery check box
Lightweight custom styled checkbox implementaion for jQuery 1.2.x and 1.3.x.
How to use:
$("input:checkbox").checkbox({ empty: 'images/empty.png' });PS:支援checkbox的disabled、checked,會讓UI樣式不一樣。
增加按鈕是否被按下,請使用bind的方法
adds new checkbox events "check", "uncheck", "disable", "enable", ready to use in jQuery.bind() method
$("input:checkbox").bind('check',function(){ //被按了 });
http://widowmaker.kiev.ua/checkbox/
星期五, 5月 06, 2011
星期三, 5月 04, 2011
[Javascript] 字串處理 (String Operations)
Javascript 字串處理 (String Operations)
尋找字串(search)
stringObject.search(searchstring)
stringObject.search(尋找的字串)
大小寫必須相符
var str = "test String";
alert(str.search("Str"));
alert(str.search("str"));
輸出結果:5
輸出結果:-1
尋找字串(search)
stringObject.search(searchstring)
stringObject.search(尋找的字串)
大小寫必須相符
var str = "test String";
alert(str.search("Str"));
alert(str.search("str"));
輸出結果:5
輸出結果:-1
[Json] How to decode json
本文記錄json中文編碼/解碼的問題
如果要將編輯過的json中文字串,只要將\取代成%,再使用javascript的unescape function就可以解碼。
輸出:
json decode :蔡大痣
test:蔡大痣
to edcode from test:%u8521%u5927%u75E3
to decode from test:蔡大痣
如果要將編輯過的json中文字串,只要將\取代成%,再使用javascript的unescape function就可以解碼。
var encodejson = "\u8521\u5927\u75E3"; encodejson = encodejson.replace("\\","%"); document.write("json decode :" + unescape(encodejson) + " "); var test = "蔡大痣"; document.write("test:" + test + " "); document.write("to edcode from test:" + escape(test) + " "); document.write("to decode from test:" + unescape(test) + " ");
輸出:
json decode :蔡大痣
test:蔡大痣
to edcode from test:%u8521%u5927%u75E3
to decode from test:蔡大痣
[JQuery Plugin] Apprise 對話視窗
跳出輸入方框視窗
input:true設定是否要顯示輸入框
r:為輸入的值
Apprise
The attractive alert alternative for jQuery
input:true設定是否要顯示輸入框
r:為輸入的值
apprise("Change " + ctlName + " password?", {"verify" : true,"input":true}, function(r) { if (r) { console.log("user clicked Yes"); if(typeof(r) == "string"){ console.log("new password:" + r); $.changePassword({ uid:ctlName, oldPassword:"admin", newPassword:r, callback:changePasswordEventHandler }); } } else { console.log("user clicked No"); } });Reference:
Apprise
The attractive alert alternative for jQuery
星期二, 5月 03, 2011
[jQuery] 快快樂樂jQuery-常用基礎語法篇
本文記錄常用的Jquery語法:
綁定多個id事件
取得select的值:
使用selector eq(index)設定select某一option被選取:
input的disalbed控制:
取得元素 tag name
判斷元素是否存在
display:block or none
偵測鍵盤,keycode請參考這篇
判斷Checkbox是否被選取
取得radio按鈕的值
綁定多個id事件
$("#id1,#id2,#id3").click(function(){..........});
取得select的值:
$("#targetlist option:selected").text();
使用selector eq(index)設定select某一option被選取:
$("#selectElem option:eq(1)").attr("selected","true");
input的disalbed控制:
//disabled $('#target').attr("disabled", true); //enable $('#target').removeAttr("disabled");
取得元素 tag name
var elemName = $("#target").attr("tagName");
判斷元素是否存在
if ( $("#target").length > 0 ) { ... ... }
display:block or none
$("#target").css("display","block"); $("#target").css("display","none");
偵測鍵盤,keycode請參考這篇
$("#target").keydown(function(event){ console.log(event.keyCode); });
判斷Checkbox是否被選取
$("#target").attr("checked");//checked: true, unchecked: false
取得radio按鈕的值
$("input[name=gender]:checked").val()
[Javascript] Math Functions
javascript 數學函式
Math.abs(a) // the absolute value of a Math.acos(a) // arc cosine of a Math.asin(a) // arc sine of a Math.atan(a) // arc tangent of a Math.atan2(a,b) // arc tangent of a/b Math.ceil(a) // integer closest to a and not less than a 無條件進位 Math.cos(a) // cosine of a Math.exp(a) // exponent of a Math.floor(a) // integer closest to a, not greater than a 無條件捨去 Math.log(a) // log of a base e Math.max(a,b) // the maximum of a and b Math.min(a,b) // the minimum of a and b Math.pow(a,b) // a to the power b Math.random() // pseudorandom number 0 to 1 (see random number examples) Math.round(a) // integer closest to a (see rounding examples) 四捨五入 Math.sin(a) // sine of a Math.sqrt(a) // square root of a Math.tan(a) // tangent of a
[JQuery Plugin] Jeditable
本文介紹如何使用Jeditable來實作inline editing。
html source
<div id="talk_sth" >
What's on your mind?
</div>
javascript
Jeditable - Edit In Place Plugin For jQuery
html source
<div id="talk_sth" >
What's on your mind?
</div>
javascript
$(function(){ //在加了event屬性後似乎會跟onblur事件有衝突。 $("#talk_sth").editable( editableEventHandler, { indicator : "", tooltip : "Move mouseover to edit...", placeholder : "What's on your mind?", //event : "mouseover", type : "textarea",//編輯元素的樣式 // submit : "OK",//顯示ok按鈕 // cancel : "Cancel"//顯示cancel按鈕 onblur : "submit" } ); }); //透過editableEventHandler處理post json data function editableEventHandler(value, settings){ console.log("update status:" + value); var endpoint = HOSTNAME + "/alfresco/service/slingshot/profile/userstatus?alf_ticket=" + TICKET; var requestBODY = "{'status':'" + value + "'}"; var result = requestBODY; console.log(requestBODY); $.ajax({ type: "POST", url: endpoint, contentType: "application/json", dataType: "json", processData: false, data: requestBODY, success: function(data){ alert(data); }, error: function(){ } }); //important return value; }Reference:
Jeditable - Edit In Place Plugin For jQuery
[WordPress] query_post methods
query_posts('page_id=179'); //指定單頁 (page) 的文章編號 query_posts($query_string . "&order=ASC"); //用變數帶入並指定排序 query_posts("cat=-3"); // 3 這個類別編號的不顯式 query_posts('p=5'); //指定單篇文章 (post) 編號 query_posts('pagename=about'); //指定單頁 (page) 的文章主題 query_posts('pagename=parent/child'); //傳回單頁 (page) 的子類別 query_posts('cat=1'); //指顯示這個類別編號的文章 query_posts('category_name=product); //用類別名稱去撈出文章 query_posts('tag=cooking'); //用標籤來撈文章 query_posts('tag=bread,baking'); //可以多標籤來撈文章 posts_per_page=10 每個網頁顯示的文章數目; query_posts('showposts=5&offset=1'); //秀出5則 query_posts('cat=3&year=2004'); //參數組合查詢
[Javascript] 正則式驗證圖片
常常會用到的javascript 正則式,以下為驗證上傳圖片格式。
Reference:
JavaScript Regex 的 字串比對(Match) 與 取代(Replace)
Regular Expression (RegExp) in JavaScript
$("#filedata").change(function(){ console.log($("#filedata").val()); var selectFile = $("#filedata").val(); var re = /^.*\.(jpg|png|gif|bmp)/; if(selectFile.match(re) == null){ alert("File format is error."); $("#updateAvatar").attr("disabled", true); }else{ $("#updateAvatar").removeAttr("disabled"); } });
Reference:
JavaScript Regex 的 字串比對(Match) 與 取代(Replace)
Regular Expression (RegExp) in JavaScript
[Json] Convert JSON Object to String javascript
you can user browser native function JSON.stringify to do this
var foo = {};
foo.bar = "new property";
foo.baz = 3;
var jsonString = JSON.stringify(foo);
var foo = {};
foo.bar = "new property";
foo.baz = 3;
var jsonString = JSON.stringify(foo);
訂閱:
文章 (Atom)