<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
	<channel>
		<title><![CDATA[安道生練功房 - Latest posts for "bious3927"]]></title>
		<link>https://forum.andowson.com/posts/listByUser/99</link>
		<description><![CDATA[Latest posts for "bious3927"]]></description>
		<generator>JForum - http://www.jforum.net</generator>
			<item>
				<title>[網頁程式設計 Web Development] jQuery圖形動態鍵盤使用範例</title>
				<description><![CDATA[ 下面介紹jQuery Keypad的使用 (網站：http://keith-wood.name/keypad.html)，範例畫面如附件圖1 
<br>
<br>
【範例】 
<br>
Step 1：至http://keith-wood.name/keypad.html下載整包套件，主要使用到的檔案有以下幾個： 
<br>
<pre class="line-numbers"><code class="language-java match-braces">jquery.plugin.js<br>jquery.keypad.js<br>jquery.keypad.alt.css<br>keypad.png</code></pre>
<br>
<br>
Step2：編輯html，新增二個文字輸入方塊，帳號及密碼 
<br>
<pre class="line-numbers"><code class="language-java match-braces">&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;body&gt;<br>&lt;p&gt;&lt;input type="text" id="accKeypad"&gt;&lt;/p&gt;<br>&lt;p&gt;&lt;input type="password" id="pwdKeypad"&gt;&lt;/p&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;</code></pre>
<br>
<br>
Step 3：將jquery.keypad.alt.css、jquery.plugin.js、jquery.keypad.js加入至html中，另外需加入google api提供的jquery.min.js。(PS.如果網站為https，則需將google api網址也改為https) 
<br>
<pre class="line-numbers"><code class="language-java match-braces">&lt;link rel="stylesheet" href="jquery.keypad.alt.css"&gt;<br>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;<br>&lt;script src="jquery.plugin.js"&gt;&lt;/script&gt;<br>&lt;script src="jquery.keypad.js"&gt;&lt;/script&gt;</code></pre>
<br>
<br>
Step 4：在html中編輯javascript 
<br>
<pre class="line-numbers"><code class="language-java match-braces">&lt;script&gt;<br>$(function () {<br>  $('#accKeypad,#pwdKeypad').keypad({keypadOnly: false, <br>    randomiseOther: true, randomiseNumeric: true, randomiseAlphabetic: true, randomiseOther: true,<br>    showOn: 'button', buttonImageOnly: true, buttonImage: 'keypad.png', showAnim: '',<br>    layout: $.keypad.qwertyLayout});           <br>});<br>&lt;/script&gt;</code></pre>
<br>
註1：如果想要使每次鍵盤上的文字位置不同，除上述方式外(randomiseOther: true, randomiseNumeric: true, randomiseAlphabetic: true, randomiseOther: true)，也可改用 randomiseAll: true，但數字鍵就不會固定在右方區塊。 
<br>
註2：「showOn: 'button', buttonImageOnly: true, buttonImage: 'keypad.png'」：點選鍵盤圖示才顯示動態鍵盤，若想改為當游標出現在輸入框時也顯示，則改成「showOn: 'both', buttonImage: 'keypad.png'」。 
<br>
註3：「showAnim: ''」：指鍵盤顯示時不使用特效。 
<br>
<br>
<br>
Step 5：如想更換鍵盤外觀，可使用google api提供的主題，先加入以下css，以smoothness為例 
<br>
<pre class="line-numbers"><code class="language-java match-braces">&lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css"&gt;</code></pre>
<br>
<br>
其他主題可參考jQuery keypad網站之Styling頁籤中，「ThemeRoller styling:」的地方，將上面css網址改為其他名稱即可，例如欲改為blitzer，則修改成下面的路徑： 
<br>
<pre class="line-numbers"><code class="language-java match-braces">http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/blitzer/jquery-ui.css</code></pre>
<br>
<br>
 再加入以下參數至.keypad()中，結果如附件圖2 
<br>
<pre class="line-numbers"><code class="language-java match-braces">useThemeRoller: true</code></pre>
<br>
<br>
完整html如下： 
<br>
<pre class="line-numbers"><code class="language-java match-braces">&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&lt;head&gt;<br>&lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt;<br>&lt;title&gt;jQuery Keypad&lt;/title&gt;<br>&lt;link rel="stylesheet" href="jquery.keypad.alt.css"&gt;<br>&lt;link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css"&gt;<br><br>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;<br>&lt;script src="jquery.plugin.js"&gt;&lt;/script&gt;<br>&lt;script src="jquery.keypad.js"&gt;&lt;/script&gt;<br>&lt;script&gt;<br>$(function () {<br>  $('#accKeypad,#pwdKeypad').keypad({useThemeRoller: true, keypadOnly: false, <br>    randomiseOther: true, randomiseNumeric: true, randomiseAlphabetic: true, randomiseOther: true,<br>    showOn: 'button', buttonImageOnly: true, buttonImage: 'keypad.png', showAnim: '',<br>    layout: $.keypad.qwertyLayout});           <br>});<br>&lt;/script&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>&lt;p&gt;&lt;input type="text" id="accKeypad"&gt;&lt;/p&gt;<br>&lt;p&gt;&lt;input type="password" id="pwdKeypad"&gt;&lt;/p&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;</code></pre>
<br>
<br>]]></description>
				<guid isPermaLink="true">https://forum.andowson.com/posts/preList/642/1341</guid>
				<link>https://forum.andowson.com/posts/preList/642/1341</link>
				<pubDate><![CDATA[Wed, 14 Sep 2016 16:12:22]]> GMT</pubDate>
				<author><![CDATA[ bious3927]]></author>
			</item>
			<item>
				<title>[新技術新發現 New Technology] Google docs 排程使用分享</title>
				<description><![CDATA[ Google 文件真是越來越強悍了, 
<br>
<br>
除了能像Microsoft Offiec那樣寫VBA的指令碼外,還可以加入排程做週期性的工作 
<br>
<br>
<br>
事情是這樣的... 
<br>
<br>
使用了半年左右的Google 試算表,協作的功能是挺方便的, 
<br>
<br>
可以隨時看到大家編輯的結果, 
<br>
<br>
但因為試算表每週都要自己手動去更新日期及清空某些儲存格的舊資料,就有些不方便了 <img src="https://forum.andowson.com/images/smilies/9d71f0541cff0a302a0309c5079e8dee.gif" alt="smilie">
<br>
<br>
果然不負眾望的Google,這次也不辜負大家的期許, 
<br>
<br>
工具可真是包山包海 
<br>
(按people moutain people sea的邏輯,大概也可以翻作 package moutain package sea吧~~XDD, 雖然這個"包"字是動詞,這裡變為名詞的包也蠻適合的...真是太自我感覺良好了 <img src="https://forum.andowson.com/images/smilies/69934afc394145350659cd7add244ca9.gif" alt="smilie"> ) 
<br>
<br>
Google提供了 Google Apps Script <a class="snap_shots" href="https://developers.google.com/apps-script/" target="_new" rel="nofollow">https://developers.google.com/apps-script/</a>
<br>
<br>
裡面的指令碼編輯器還有提供排程可以使用~~真是太讚拉 <img src="https://forum.andowson.com/images/smilies/e8a506dc4ad763aca51bec4ca7dc8560.gif" alt="smilie">
<br>
<br>
以下就來說明一下如何使用 
<br>
<br>
--------------------------------------------------------------------------------------------------------------- 
<br>
情境：使用排程去修改Google 試算表中特定欄位的值 
<br>
<br>
<br>
1. 先建立一份Google試算表,然後我想將A1儲存格寫入一些文字,如"你們要將一切的憂慮卸給神，因為祂顧念你們。" <img src="https://forum.andowson.com/images/smilies/3b63d1616c5dfcf29f8a7a031aaa7cad.gif" alt="smilie">
<br>
<br>
2. 點選 工具 &gt; 指令碼編輯器 &gt; 在編輯窗格中輸入如下函式,長的有點像 JavaScript 
<br>
<pre class="line-numbers"><code class="language-java match-braces"><br>function test() {<br>    SpreadsheetApp.getActiveSheet().getRange("a1").setValue("你們要將一切的憂慮卸給神，因為祂顧念你們。"); <br>    //getRange()裡面的a1也可寫A1,大小寫不限; 如果要取合併儲存格的話,如a1~b2四格併一格,getRange可輸入getRange("a1:b2")<br>}<br></code></pre>
<br>
3. 再來檢查一下有無bug: 點選 選取函式(下拉選單) &gt; 選test(即剛才打的函數名稱) &gt; 點選左邊那隻蟲(除錯) &gt; 沒問題後再按蟲左邊的執行鈕 &gt; 回到剛建立的試算表頁籤觀看結果 
<br>
<br>
4. 若想產生如JavaScript alert 的訊息視窗,可用以下的method 
<br>
<pre class="line-numbers"><code class="language-java match-braces"><br>function test() {<br>    Browser.msgBox(SpreadsheetApp.getActiveSheet().getRange("a1").getValue());<br>}<br></code></pre>
<br>
想抓出今天的日期的話也OK 
<br>
<pre class="line-numbers"><code class="language-java match-braces"><br>function test() {<br>    SpreadsheetApp.getActiveSheet().getRange("a1").setValue(Utilities.formatDate(new Date(), "GMT+8", "yyyy-MM-dd")); //GMT+8是台北時間<br>}<br></code></pre>
<br>
PS.要產生上面的日期,也可用下面的方法 
<br>
<pre class="line-numbers"><code class="language-java match-braces"><br>new Date().getFullYear()+"-"+new Date().getMonth()+"-"+new Date().getDate()<br></code></pre>
<br>
但這個方法很詭異,月份會少一個月,但用new Date()去看時,日期月份卻是正確的,如果大家知道原因的話再分享一下吧~ 
<br>
<br>
5.加入排程：回到指令碼編輯器 &gt; 點選 您所有的觸發程序... &gt; 點選 加入新的觸發器 &gt; 在 執行 欄中,選擇test函數 &gt; 活動 欄中,選 時間導向 &gt; 選擇自己要的週期,可先選每分鐘,才不會等那麼久就可看執行結果 &gt; 最右邊的 通知 ,是執行出錯時寄mail通知你錯誤訊息, 一樣可選週期,若不想收報錯的mail就先跳過 &gt; 最後記得按左下角的 儲存 
<br>
<br>
6.回到指令碼編輯器 &gt; 一樣要 儲存(左上的那個磁片icon) 
<br>
<br>
7.最後,因為是排程,還會牽涉到時區問題： 點選左上角 檔案 &gt; 選擇 專案屬性... &gt; 資訊 (第一個頁籤) &gt; 時區 選(GMT+08:00)台北 &gt; 儲存 
<br>
<br>
<br>
PS.打這一篇還蠻花時間的..不過一想到也從別人分享的資源獲益,所以也就不吝分享給出來囉~ 大家也多多分享吧! : )]]></description>
				<guid isPermaLink="true">https://forum.andowson.com/posts/preList/596/1263</guid>
				<link>https://forum.andowson.com/posts/preList/596/1263</link>
				<pubDate><![CDATA[Thu, 27 Dec 2012 16:01:51]]> GMT</pubDate>
				<author><![CDATA[ bious3927]]></author>
			</item>
			<item>
				<title>[網頁程式設計 Web Development] 回覆:Help me level menu ...</title>
				<description><![CDATA[ An idea is to declare another sub arraylist for storing menu items, and then put the sub arraylist into the your sac list. 
<br>
Add something in the following 
<br>
<br>
<pre class="line-numbers"><code class="language-java match-braces"><br>//line 41<br>List sublist = new ArrayList();<br><br>//line 48<br>sublist.add(m);<br><br>//line 53<br>sac.add(sublist);<br></code></pre>]]></description>
				<guid isPermaLink="true">https://forum.andowson.com/posts/preList/574/1209</guid>
				<link>https://forum.andowson.com/posts/preList/574/1209</link>
				<pubDate><![CDATA[Sat, 3 Mar 2012 11:45:07]]> GMT</pubDate>
				<author><![CDATA[ bious3927]]></author>
			</item>
			<item>
				<title>[網頁程式設計 Web Development] 回覆:如何用程式寫出一個文字檔案，編碼為Big-5</title>
				<description><![CDATA[ <pre class="line-numbers"><code class="language-java match-braces">Signal += "年度號：" + node.getChildText("年度號")+lineSep+ "分類號：" + node.getChildText("分類號")+lineSep+ "案次號：" + node.getChildText("案次號")+lineSep;</code></pre>
<br>
<br>
區域變數 node 已超出使用範圍拉, 只能用在for回圈中!! 
<br>
<br>]]></description>
				<guid isPermaLink="true">https://forum.andowson.com/posts/preList/572/1206</guid>
				<link>https://forum.andowson.com/posts/preList/572/1206</link>
				<pubDate><![CDATA[Thu, 2 Feb 2012 11:25:57]]> GMT</pubDate>
				<author><![CDATA[ bious3927]]></author>
			</item>
			<item>
				<title>[網頁程式設計 Web Development] 回覆:如何用httpclient4去存取SSL的網頁資料?</title>
				<description><![CDATA[ 如果要輸出檔案的話,也非常簡便,可以使用HttpEntity 提供的方法: writeTo() 
<br>
<br>
比以下常用的寫法節省不少程式, 也避免了特殊字無法正常輸出的情況: 
<br>
<pre class="line-numbers"><code class="language-java match-braces"><br>FileOutputStream fos = new FileOutputStream(request.getParameter("path"));<br>ByteArrayInputStream bais = new ByteArrayInputStream(httpclient.execute(httpget, responseHandler).getBytes());<br><br>byte[] bytes = new byte[1024]; <br>int count = 0; <br><br>while (bais!=null &amp;&amp; (count = bais.read(bytes))!=-1) { <br>    fos.write(bytes, 0, count); <br>}<br></code></pre>
<br>
<br>
可於版主提供的程式105行中,加入以下程式 
<br>
<br>
<pre class="line-numbers"><code class="language-java match-braces"><br>entity.writeTo(new FileOutputStream(request.getParameter("path")));<br></code></pre>]]></description>
				<guid isPermaLink="true">https://forum.andowson.com/posts/preList/484/1018</guid>
				<link>https://forum.andowson.com/posts/preList/484/1018</link>
				<pubDate><![CDATA[Thu, 2 Jun 2011 15:01:07]]> GMT</pubDate>
				<author><![CDATA[ bious3927]]></author>
			</item>
	</channel>
</rss>