javascript | 聰明的生活

HTML5簽名Signature並輸出圖片範例

2015-11-122015-11-12 yku Leave a comment

改寫這個網站的範例
http://www.jq22.com/jquery-info1057
原本範例在手機及平板事件touchstart及touchmove使用e.pageX及e.pageY，因為行動狀置不一定只有單點觸控，所以事件應該要改用e.touches[0].pageX來取得。
範例網址
Demo

程式碼如下：
Read More

網頁圖片Image FadeIn淡入FadeOut淡出效果

2015-09-232015-09-23 yku Leave a comment

html Image FadeIn跟FadeOut淡出淡入效果，可以使用jquery的function來完成，可以參考範例，或是直接使用CSS3也可以，底下是一個範例。

[Android]Cordova使用Sqlite資料庫

2014-11-072014-11-07 yku Leave a comment

什麼是SQLite?

SQLite是一個軟體資料庫，不需要架設在伺服端的自主資料庫，用來存放數據資料。

行動裝置上對於資料的存取需求相對比少，不太需要大量的記憶體及cpu，對於行動裝置是個很好的選擇。

當我們利用Cordova/PhoneGap開發行動裝置時，可以增加plugin來支援Sqlite的使用，再結合html 5、CSS、Javascript就可以存取資料並顯示其結果。

Cordova plugin SQLite

https://github.com/brodysoft/Cordova-SQLitePlugin

A Cordova/PhoneGap plugin to open and use sqlite databases on Android/iOS/WP(8) with HTML5 Web SQL API

Native interface to sqlite in a Cordova/PhoneGap plugin for Android/iOS/WP(8), with HTML5 Web SQL API

License for Android & WP(8) versions: MIT or Apache 2.0

License for iOS version: MIT only

舊的專案網址

https://github.com/lite4cordova/Cordova-SQLitePlugin

[android]抽籤程式V0.0.7版本原始程式碼

2014-10-242014-10-24 yku Leave a comment

Google play程式: https://play.google.com/store/apps/details?id=com.yslifes.sample.ballot

這裡先簡單的交待程式碼開發的環境及source

程式是由Apache Cordova建立的，如何安裝可以參考Commaond line install的方式，Apahce Cordova其實就是phonegap，phonegap一開始是adobe創建的，不過後來捐給了apache基金會。

此專案有安裝之plugin

org.apache.cordova.devicemotion.AccelListener 用來監控搖動行動裝置的(Android手機或平版)

org.apache.cordova.splashscreen.SplashScreen　一開始的載入畫面SplashScreen

org.apache.cordova.inappbrowser.InAppBrowser　用來另開連接到系統預設的browser的，不過目前沒有使用

com.phonegap.plugins.barcodescanner.BarcodeScanner　條碼QRCode掃描，使用zxing framework

使用的javascript framework

JQuery、JQuery Mobile、htmll10n、jquery.tmp等

其中htmll10n是為了多國語系的支援

[ExtJS]常用一般function

2013-01-152013-01-17 yku Leave a comment

Ajax範例

//啟動時遮照
Ext.Ajax.on('beforerequest', function () {
    Ext.getBody().mask(&quot;Loading&quot;);
}, this);
//結束時移除遮照
Ext.Ajax.on('requestcomplete', function () {
    Ext.getBody().unmask();
}, this);
var paramObj = new Object();
paramObj.id = &quot;123&quot;;
//Ext.getBody().mask(&quot;Loading2&quot;);
Ext.Ajax.request({
    url: &quot;MyAjax.jsp&quot;,
    scope: this,
    method: &quot;post&quot;,
    success: function (
    response) {
        Ext.getBody()
            .unmask();
        var json = Ext.decode(response.responseText);
        //{success:false|true,msg:'訊息'}
        if (json.success) {
            //回傳success要做的事
        } else {
            //錯誤時alert
            alert(json.msg);

        }

    }, // .createDelegate(this),
    failure: function () {
        if (action.response.status == 200) {

            var json = Ext.decode(action.response.responseText);
            Ext.MessageBox.alert(json.msg);
        } else Ext.MessageBox.alert(&quot;Save Error~&quot;);
    },

    params: paramObj
});

//啟動時遮照

Ext.Ajax.on('beforerequest', function () {

Ext.getBody().mask("Loading");

}, this);

//結束時移除遮照

Ext.Ajax.on('requestcomplete', function () {

Ext.getBody().unmask();

}, this);

var paramObj = new Object();

paramObj.id = "123";

//Ext.getBody().mask("Loading2");

Ext.Ajax.request({

url: "MyAjax.jsp",

scope: this,

method: "post",

success: function (

response) {

Ext.getBody()

.unmask();

var json = Ext.decode(response.responseText);

//{success:false|true,msg:'訊息'}

if (json.success) {

//回傳success要做的事

} else {

//錯誤時alert

alert(json.msg);

}

}, // .createDelegate(this),

failure: function () {

if (action.response.status == 200) {

var json = Ext.decode(action.response.responseText);

Ext.MessageBox.alert(json.msg);

} else Ext.MessageBox.alert("Save Error~");

params: paramObj

});