安道生練功房 - 分享經驗，累積智慧

下面介紹jQuery Keypad的使用 (網站：http://keith-wood.name/keypad.html)，範例畫面如附件圖1

【範例】
Step 1：至http://keith-wood.name/keypad.html下載整包套件，主要使用到的檔案有以下幾個：

jquery.plugin.js

jquery.keypad.js

jquery.keypad.alt.css

keypad.png

Step2：編輯html，新增二個文字輸入方塊，帳號及密碼

<!DOCTYPE html>

<html>

<body>

<p><input type="text" id="accKeypad"></p>

<p><input type="password" id="pwdKeypad"></p>

</body>

</html>

Step 3：將jquery.keypad.alt.css、jquery.plugin.js、jquery.keypad.js加入至html中，另外需加入google api提供的jquery.min.js。(PS.如果網站為https，則需將google api網址也改為https)

<link rel="stylesheet" href="jquery.keypad.alt.css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="jquery.plugin.js"></script>

<script src="jquery.keypad.js"></script>

Step 4：在html中編輯javascript

<script>

$(function () {

  $('#accKeypad,#pwdKeypad').keypad({keypadOnly: false, 

    randomiseOther: true, randomiseNumeric: true, randomiseAlphabetic: true, randomiseOther: true,

    showOn: 'button', buttonImageOnly: true, buttonImage: 'keypad.png', showAnim: '',

    layout: $.keypad.qwertyLayout});           

});

</script>

註1：如果想要使每次鍵盤上的文字位置不同，除上述方式外(randomiseOther: true, randomiseNumeric: true, randomiseAlphabetic: true, randomiseOther: true)，也可改用 randomiseAll: true，但數字鍵就不會固定在右方區塊。
註2：「showOn: 'button', buttonImageOnly: true, buttonImage: 'keypad.png'」：點選鍵盤圖示才顯示動態鍵盤，若想改為當游標出現在輸入框時也顯示，則改成「showOn: 'both', buttonImage: 'keypad.png'」。
註3：「showAnim: ''」：指鍵盤顯示時不使用特效。

Step 5：如想更換鍵盤外觀，可使用google api提供的主題，先加入以下css，以smoothness為例

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">

其他主題可參考jQuery keypad網站之Styling頁籤中，「ThemeRoller styling:」的地方，將上面css網址改為其他名稱即可，例如欲改為blitzer，則修改成下面的路徑：

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/blitzer/jquery-ui.css

再加入以下參數至.keypad()中，結果如附件圖2

useThemeRoller: true

完整html如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<title>jQuery Keypad</title>

<link rel="stylesheet" href="jquery.keypad.alt.css">

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css">



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="jquery.plugin.js"></script>

<script src="jquery.keypad.js"></script>

<script>

$(function () {

  $('#accKeypad,#pwdKeypad').keypad({useThemeRoller: true, keypadOnly: false, 

    randomiseOther: true, randomiseNumeric: true, randomiseAlphabetic: true, randomiseOther: true,

    showOn: 'button', buttonImageOnly: true, buttonImage: 'keypad.png', showAnim: '',

    layout: $.keypad.qwertyLayout});           

});

</script>

</head>

<body>

<p><input type="text" id="accKeypad"></p>

<p><input type="password" id="pwdKeypad"></p>

</body>

</html>

Google 文件真是越來越強悍了,

除了能像Microsoft Offiec那樣寫VBA的指令碼外,還可以加入排程做週期性的工作

事情是這樣的...

使用了半年左右的Google 試算表,協作的功能是挺方便的,

可以隨時看到大家編輯的結果,

但因為試算表每週都要自己手動去更新日期及清空某些儲存格的舊資料,就有些不方便了 smilie

果然不負眾望的Google,這次也不辜負大家的期許,

工具可真是包山包海
(按people moutain people sea的邏輯,大概也可以翻作 package moutain package sea吧~~XDD, 雖然這個"包"字是動詞,這裡變為名詞的包也蠻適合的...真是太自我感覺良好了 smilie

)

Google提供了 Google Apps Script https://developers.google.com/apps-script/

裡面的指令碼編輯器還有提供排程可以使用~~真是太讚拉 smilie

以下就來說明一下如何使用

---------------------------------------------------------------------------------------------------------------
情境：使用排程去修改Google 試算表中特定欄位的值

1. 先建立一份Google試算表,然後我想將A1儲存格寫入一些文字,如"你們要將一切的憂慮卸給神，因為祂顧念你們。" smilie

2. 點選工具 > 指令碼編輯器 > 在編輯窗格中輸入如下函式,長的有點像 JavaScript


function test() {

    SpreadsheetApp.getActiveSheet().getRange("a1").setValue("你們要將一切的憂慮卸給神，因為祂顧念你們。"); 

    //getRange()裡面的a1也可寫A1,大小寫不限; 如果要取合併儲存格的話,如a1~b2四格併一格,getRange可輸入getRange("a1:b2")

}

3. 再來檢查一下有無bug: 點選選取函式(下拉選單) > 選test(即剛才打的函數名稱) > 點選左邊那隻蟲(除錯) > 沒問題後再按蟲左邊的執行鈕 > 回到剛建立的試算表頁籤觀看結果

4. 若想產生如JavaScript alert 的訊息視窗,可用以下的method


function test() {

    Browser.msgBox(SpreadsheetApp.getActiveSheet().getRange("a1").getValue());

}

想抓出今天的日期的話也OK


function test() {

    SpreadsheetApp.getActiveSheet().getRange("a1").setValue(Utilities.formatDate(new Date(), "GMT+8", "yyyy-MM-dd")); //GMT+8是台北時間

}

PS.要產生上面的日期,也可用下面的方法


new Date().getFullYear()+"-"+new Date().getMonth()+"-"+new Date().getDate()

但這個方法很詭異,月份會少一個月,但用new Date()去看時,日期月份卻是正確的,如果大家知道原因的話再分享一下吧~

5.加入排程：回到指令碼編輯器 > 點選您所有的觸發程序... > 點選加入新的觸發器 > 在執行欄中,選擇test函數 > 活動欄中,選時間導向 > 選擇自己要的週期,可先選每分鐘,才不會等那麼久就可看執行結果 > 最右邊的通知 ,是執行出錯時寄mail通知你錯誤訊息, 一樣可選週期,若不想收報錯的mail就先跳過 > 最後記得按左下角的儲存

6.回到指令碼編輯器 > 一樣要儲存(左上的那個磁片icon)

7.最後,因為是排程,還會牽涉到時區問題：點選左上角檔案 > 選擇專案屬性... > 資訊 (第一個頁籤) > 時區選(GMT+08:00)台北 > 儲存

PS.打這一篇還蠻花時間的..不過一想到也從別人分享的資源獲益,所以也就不吝分享給出來囉~ 大家也多多分享吧! : )

An idea is to declare another sub arraylist for storing menu items, and then put the sub arraylist into the your sac list.
Add something in the following


//line 41

List sublist = new ArrayList();



//line 48

sublist.add(m);



//line 53

sac.add(sublist);

Signal += "年度號：" + node.getChildText("年度號")+lineSep+ "分類號：" + node.getChildText("分類號")+lineSep+ "案次號：" + node.getChildText("案次號")+lineSep;

區域變數 node 已超出使用範圍拉, 只能用在for回圈中!!

如果要輸出檔案的話,也非常簡便,可以使用HttpEntity 提供的方法: writeTo()

比以下常用的寫法節省不少程式, 也避免了特殊字無法正常輸出的情況:


FileOutputStream fos = new FileOutputStream(request.getParameter("path"));

ByteArrayInputStream bais = new ByteArrayInputStream(httpclient.execute(httpget, responseHandler).getBytes());



byte[] bytes = new byte[1024]; 

int count = 0; 



while (bais!=null && (count = bais.read(bytes))!=-1) { 

    fos.write(bytes, 0, count); 

}

可於版主提供的程式105行中,加入以下程式


entity.writeTo(new FileOutputStream(request.getParameter("path")));

安道生練功房 - 分享經驗，累積智慧

練功房推薦書單