超多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);
星期六, 4月 30, 2011
[Java] 快快樂樂安裝Tomcat in Window
本文記錄如果在Window安裝Tomcat伺服器
1.下載tomcat 這裡,下載解壓放在你想放的目錄下
本文是統一放在Apache自動安裝的AppServ目錄下,以方便管理
Tip:現在還有提供Windows Service Installer方便Windows的用戶
2.安裝JAVA JDK 這裡
目前版本為Java 6
3.設定JAVA 環境變數
我的電腦->右鍵->內容-> 進階系統設定(Vista) ->進階 -> 環境變數
在PATH變數里的最後面貼上你JAVA安裝的路徑
;C:\Program Files\Java\jdk1.6.0_19
(注意每個變數前面要用分號隔開)
新增下列所有的環境變數值
變數名稱 變數值
JAVA_HOME C:\Program Files\Java\jdk1.6.0_19\
CLASSPATH C:\Program Files\Java\jdk1.6.0_19\lib
CATALINA_HOME C:\AppServ\apache-tomcat-6.0.32
註:第三個是選擇性設定
4.測試你的java環境
C:\Program Files\apache-tomcat-6.0.32\bin>java -version
java version "1.6.0_19"
Java(TM) SE Runtime Environment (build 1.6.0_19-b04)
Java HotSpot(TM) 64-Bit Server VM (build 16.2-b04, mixed mode)
5.啟動你的Tomcat
C:\Program Files\apache-tomcat-6.0.32\bin>startup.bat
關掉的話就是將命令提示字元(終端機)關掉即可
6.測試Tomcat
瀏覽器開啟http://127.0.0.1:8080/ 測試tomcat是否有啟動,讀到Tomcat首頁你就完成了 :)
1.下載tomcat 這裡,下載解壓放在你想放的目錄下
本文是統一放在Apache自動安裝的AppServ目錄下,以方便管理
Tip:現在還有提供Windows Service Installer方便Windows的用戶
2.安裝JAVA JDK 這裡
目前版本為Java 6
3.設定JAVA 環境變數
我的電腦->右鍵->內容-> 進階系統設定(Vista) ->進階 -> 環境變數
在PATH變數里的最後面貼上你JAVA安裝的路徑
;C:\Program Files\Java\jdk1.6.0_19
(注意每個變數前面要用分號隔開)
新增下列所有的環境變數值
變數名稱 變數值
JAVA_HOME C:\Program Files\Java\jdk1.6.0_19\
CLASSPATH C:\Program Files\Java\jdk1.6.0_19\lib
CATALINA_HOME C:\AppServ\apache-tomcat-6.0.32
註:第三個是選擇性設定
4.測試你的java環境
C:\Program Files\apache-tomcat-6.0.32\bin>java -version
java version "1.6.0_19"
Java(TM) SE Runtime Environment (build 1.6.0_19-b04)
Java HotSpot(TM) 64-Bit Server VM (build 16.2-b04, mixed mode)
5.啟動你的Tomcat
C:\Program Files\apache-tomcat-6.0.32\bin>startup.bat
關掉的話就是將命令提示字元(終端機)關掉即可
6.測試Tomcat
瀏覽器開啟http://127.0.0.1:8080/ 測試tomcat是否有啟動,讀到Tomcat首頁你就完成了 :)
星期六, 4月 23, 2011
[JAVA] 快快樂樂學JAVA JDBC 連接 MySQL
JDBC連接MySQL
使用JDBC連接資料庫存取資料時,必須執行以下三個步驟:
1.用DriverManager載入及註冊適當的JDBC驅動程式
如果發生Driver not found錯誤訊息改改用
2.用JDBC URL定義驅動程式與資料來源之間的連結,並且建立一個連結物
3.建立一個sql陳述句,並利用它來執行SQL語法
執行陳述句有三種方法:
方法一:取回結果集
方法二:新增、更新、刪除等等使用
使用JDBC連接資料庫存取資料時,必須執行以下三個步驟:
1.用DriverManager載入及註冊適當的JDBC驅動程式
Class.forName("com.mysql.jdbc.Driver");
如果發生Driver not found錯誤訊息改改用
Class.forName("com.mysql.jdbc.Driver").newInstance();
2.用JDBC URL定義驅動程式與資料來源之間的連結,並且建立一個連結物
//option1 String jdbcUrl = "jdbc:mysql://[hostname]:[port]/[dbname]?user=[username]&password=[pwd]"; Connection conn = DriverManager.getConnection(jdbcUrl);
//option2 String jdbcUrl = ""jdbc:mysql://[hostname]:[port]/[dbname]"; Connection conn = DriverManager.getConnection(jdbcUrl,"username","password");
3.建立一個sql陳述句,並利用它來執行SQL語法
Statement stmt = conn.createStatement();
執行陳述句有三種方法:
方法一:取回結果集
ResultSet rs = stmt.executeQuery("sql語法")
//取得每一列資訊
while(rs.next()){
//取得這筆資料的結果
rs.getString(1);
rs.getInt(2);
}
方法二:新增、更新、刪除等等使用
//updateRow為執行成功的列數
int updateRow = stmt.excuteUpdate("sql語法");
方法三:單純判斷執行有無成功使用,回傳boolean
bool success = stmt.execute("sql語法");
[JAVA] 快快樂樂學JAVA RESTful Service using Jersey
本文記錄如何在JAVA+TOMCAT下使用Jersey快速建立RESTful WebService :
感謝Owen血尿付出。
第一步:安裝Eclipse跟Tomcat 6.0.32
第二步:下載Jersey Library 1.6。官網http://jersey.java.net/
第三步:將下載的.jar檔放到Tomcat/lib
核心的lib asm-3.1.jar, jersey-core.jar, jersey-server.jar, jsr-311-api-1.0.jar
第四步:開啟Eclipse,新建一個Dynamic Web Project
第五步:修改專案內的YourProjectName/WebContent/WEB-INF/web.xml,新增以下內容
感謝Owen血尿付出。
第一步:安裝Eclipse跟Tomcat 6.0.32
第二步:下載Jersey Library 1.6。官網http://jersey.java.net/
第三步:將下載的.jar檔放到Tomcat/lib
核心的lib asm-3.1.jar, jersey-core.jar, jersey-server.jar, jsr-311-api-1.0.jar
第四步:開啟Eclipse,新建一個Dynamic Web Project
第五步:修改專案內的YourProjectName/WebContent/WEB-INF/web.xml,新增以下內容
<servlet>
<servlet-name>JerseyServlet</servlet-name>
<servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>JerseyServlet</servlet-name>
<url-pattern>/services/*</url-pattern>
</servlet-mapping>
第六步:第一個HelloWorld Restful API (支援GET / POST)星期三, 4月 20, 2011
[Linux] 快快樂樂學Linux指令筆記
如何mount裝置內的共享資料夾
1.設定共用資料夾
裝置->共用資料夾->加入共用資料夾
2.在ubuntu建立一個暫存的目錄
$cd /home
$mkdir temp
3.掛載裝置:D_DRIVE為共用資料夾的名稱
#掛載的共享資料夾目錄名稱 ./要掛載的目錄
$sudo mount -t vboxsf D_DRIVE ./temp
4.卸載所有裝置
$umount -a
=====================================================================
Symbol Link
unlink 其實就跟 rm 一樣罷了,當要移除一個 symbolic link ,有時發現怎樣移不掉,一直說 "unkink: my_symbolic_link/ : is a directory" ,這個訊息就跟使用 rm 去移除一個目錄時的錯誤訊息!原來,在移除一個 symbolic link 時,要留意後面不能加個 "/" !這樣,若 symbolic link 是連到一個目錄時,等同於在對那個目錄做 rm 的動作,才會顯示 "is a directory" 訊息。這時可不能一氣之下用 rm -rf !可會將 link 到的目錄給移除掉的!要額外小心。
#目的地是一個檔案
$ ln -s target_file_path my_file_link
$ unlink my_file_link
目的地是一個目錄
$ln -s target_dir my_dir_link
例如:產生在當前目錄下的symbol link
$sudo ln -s /home/temp/mysite.war
$unlink my_dir_link/
$unlink: my_dir_link/: is a directory
$unlink my_dir_link
Done
=====================================================================
1.設定共用資料夾
裝置->共用資料夾->加入共用資料夾
2.在ubuntu建立一個暫存的目錄
$cd /home
$mkdir temp
3.掛載裝置:D_DRIVE為共用資料夾的名稱
#掛載的共享資料夾目錄名稱 ./要掛載的目錄
$sudo mount -t vboxsf D_DRIVE ./temp
4.卸載所有裝置
$umount -a
=====================================================================
Symbol Link
unlink 其實就跟 rm 一樣罷了,當要移除一個 symbolic link ,有時發現怎樣移不掉,一直說 "unkink: my_symbolic_link/ : is a directory" ,這個訊息就跟使用 rm 去移除一個目錄時的錯誤訊息!原來,在移除一個 symbolic link 時,要留意後面不能加個 "/" !這樣,若 symbolic link 是連到一個目錄時,等同於在對那個目錄做 rm 的動作,才會顯示 "is a directory" 訊息。這時可不能一氣之下用 rm -rf !可會將 link 到的目錄給移除掉的!要額外小心。
#目的地是一個檔案
$ ln -s target_file_path my_file_link
$ unlink my_file_link
目的地是一個目錄
$ln -s target_dir my_dir_link
例如:產生在當前目錄下的symbol link
$sudo ln -s /home/temp/mysite.war
$unlink my_dir_link/
$unlink: my_dir_link/: is a directory
$unlink my_dir_link
Done
=====================================================================
MYSQL
#安裝圖形化介面(ubuntu)
$sudo apt-get install mysql-admin
#連接資料庫
$mysql -u root -p
#離開資料庫
mysql>exit
=====================================================================
RM
#移除整個資料夾
$rm -rf 資料夾名
=====================================================================
ifconfig
#列出網路卡資訊
$ifconfig
#設定網路卡ip
$ifconfig eth10 192.168.0.112
=====================================================================
Apache Web Server
#開啟apcahe
$/etc/init.d/httpd start
#關閉apache
$/etc/init.d/httpd stop
#開機啟動檔路徑,可設定開機執行一些shell script指令
$vim /etc/rc.local
=====================================================================
VI
#搜尋
/ <搜尋的字串>
#強制執行存檔
:w ! tee %
#強制離開
:q!
#刪除一行(離開insert模式)
dd
#全刪除
dG
=====================================================================
RM
#移除整個資料夾
$rm -rf 資料夾名
=====================================================================
ifconfig
#列出網路卡資訊
$ifconfig
#設定網路卡ip
$ifconfig eth10 192.168.0.112
=====================================================================
Apache Web Server
#開啟apcahe
$/etc/init.d/httpd start
#關閉apache
$/etc/init.d/httpd stop
#開機啟動檔路徑,可設定開機執行一些shell script指令
$vim /etc/rc.local
=====================================================================
VI
#搜尋
/ <搜尋的字串>
#強制執行存檔
:w ! tee %
#強制離開
:q!
#刪除一行(離開insert模式)
dd
#全刪除
dG
訂閱:
意見 (Atom)

