tag:blogger.com,1999:blog-59465307047421309702024-03-06T16:20:07.273+08:00Jax 的工作紀錄除了在整理學習上的經驗,同時也能幫助其他需要的人Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.comBlogger4125tag:blogger.com,1999:blog-5946530704742130970.post-35096141882974949232009-04-13T17:05:00.001+08:002011-07-11T15:17:16.321+08:00網頁常用編碼轉換 (iGoogle)小工具將一些 JavaScript 中常用的 escape, unescapek, encodeURI, decodeURI, encodeURIComponent, decodeURIComponent 及 HTML 跳脫與反跳脫製作成小工具。<br /><script src="http://www.gmodules.com/ig/ifr?url=http://weskerjax.googlepages.com/transform.xml&synd=open&w=500&h=320&title=%E7%B6%B2%E9%A0%81%E5%B8%B8%E7%94%A8%E7%B7%A8%E7%A2%BC%E8%BD%89%E6%8F%9B&border=%23ffffff%7C0px%2C1px+solid+%23595959%7C0px%2C1px+solid+%23797979%7C0px%2C2px+solid+%23898989&output=js"></script>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com1tag:blogger.com,1999:blog-5946530704742130970.post-8279857905236027052009-03-29T08:09:00.012+08:002012-03-16T22:58:01.076+08:00iGoogle 小工具製作心得iGoogle 小工具主要是以 XML 為主體,再加上 HTML、CSS 及 JavaScript 所組成的,基本上只要會後面三種語言,要開發 iGoogle 小工具是非常快樂的一件事。<br /><br />在這裡我只做一些的教學及心得分享,詳細的規範及 API 說明,請察看官方網站 <a href="http://www.google.com.tw/intl/zh-TW/apis/gadgets/docs-home.html">Google 小工具 API 開發人員指南</a>,開發指南裡面寫的很清楚,還有很多的範例可以參考。<br /><br />心得建議:<br /><ul><li>再<span style="color: rgb(255, 0, 0); font-weight: bold;">開發時</span>建議 XML 的<span style="color: rgb(255, 0, 0); font-weight: bold;">檔名不要太正式</span>,iGoogle 的平台會 cache XML,造成檢視上會出現不一致情況,等到要發佈時再取一個正式的檔名,避免不必要的問題發生。</li><li>如果要使用 session 和 cookie 做登入驗證的話,最好使用 <span style="color: rgb(255, 0, 0); font-weight: bold;"><iframe></span> 去處理,會比較容易達成且安全問題也比較少。</li><li>在 ModulePrefs 中的 category 屬性也記得加上去,在官方的開發人員指南中並沒有說明,共有:<br /><ul><li>politics</li></ul><ul><li>tools</li></ul><ul><li>funandgames</li></ul><ul><li>lifestyle</li></ul><ul><li>finance</li></ul><ul><li>communication<br /></li></ul><ul><li>等...。</li></ul></li><br /><li>多利用[<a href="http://www.google.com.tw/intl/zh-TW/apis/gadgets/gs.html#Scratchpad">便條簿</a>]做測試可以減少不少時間。<br /></li><li>在<span style="color: rgb(255, 0, 0); font-weight: bold;">測試時</span>最好在 iGoogle 上另開一個[<span style="color: rgb(255, 0, 0); font-weight: bold;">分頁</span>],免得自己原本常用的小工具被打亂。<br /></li><li>在測試的[分頁]中最好加上[<a href="http://fusion.google.com/add?moduleurl=developer.xml">開發人員小工具</a>]這個小工具去管理 cache 問題。<br /></li></ul><br />小工具範例:<br /><pre class="xml" name="code"><br /><?xml version="1.0" encoding="UTF-8" ?><br /><Module><br /> <ModulePrefs<br /> title="單位換算"<br /> description="更方便的介面處理單位制度上的換算"<br /> directory_title="單位換算"<br /> author="Jax"<br /> author_email="weskerjax+feed@gmail.com"<br /> thumbnail=<br /> "http://weskerjax.googlepages.com/unit_converter_thumbnail.png"<br /> screenshot=<br /> "http://weskerjax.googlepages.com/unit_converter_screenshot.png"<br /> title_url="http://jax-work-archive.blogspot.com/"<br /> category="tools"<br /> height="300"><br /> <Locale lang="zh-tw" country="TW"/><br /> <Require feature="tabs"/><br /> <Require feature="dynamic-height"/><br /> </ModulePrefs><br /> <UserPref<br /> name="type"<br /> display_name="預設開啟的頁籤"<br /> default_value="長度"<br /> datatype="enum"><br /> <EnumValue value="長度"/><br /> <EnumValue value="重量"/><br /> <EnumValue value="面積"/><br /> <EnumValue value="體積"/><br /> </UserPref><br /> <Content type="html"><br /> <![CDATA[<br /><style type="text/css"><br />.JContent table{<br /> margin-top:5px;<br /> width:100%;<br />}<br />.JContent th{<br /> background-color:#99CCFF;<br /> padding-top:5px;<br />}<br />.JContent label{<br /> text-align:center;<br /> padding:3px;<br /> display:block;<br /> font-size:12px;<br />}<br />.JContent label input{<br /> display:block;<br /> text-align:left;<br /> line-height:1.1em;<br /> font-size:11px;<br /> width:95%;<br />}<br /></style><br /><script type="text/javascript"><br />var prefs = new _IG_Prefs(__MODULE_ID__);<br />function set_event__MODULE_ID__(tabId){<br /> var inputs=_gel(tabId).getElementsByTagName('input');<br /> for (var i=0, j=inputs.length; i<j; i++){<br /> el=inputs[i];<br /> /*設定 onkeyup 時處理單位換算*/<br /> el.onkeyup=function(){<br /> this.value=this.value.match(/[0-9]+[\.]?[0-9]*/);<br /> var rate=this.getAttribute('rate');<br /> var value=parseFloat(this.value)/parseFloat(rate);<br /><br /> var table=this;<br /> while(table.tagName!="TABLE"){table=table.parentNode;}<br /><br /> var inputs=table.getElementsByTagName('input');<br /> for (var i=0, j=inputs.length; i<j; i++){<br /> chg=inputs[i];<br /> r=chg.getAttribute('rate');<br /> if(r==rate){continue;}<br /><br /> if(this.value){chg.value=value*parseFloat(r);}<br /> else{chg.value='';}<br /> };<br /> };<br /> /*設定 onfocus 選取所有文字*/<br /> el.onfocus=function(){this.select()};<br /> };<br /> /*讓小工具能夠自行調整大小*/<br /> _IG_AdjustIFrameHeight();<br />}<br />function init() {<br /> /*建立頁籤並選定預選頁籤*/<br /> var tabs = new _IG_Tabs(__MODULE_ID__,prefs.getString("type"));<br /> tabs.addTab("長度","J_length",set_event__MODULE_ID__);<br /> tabs.addTab("重量","J_weight",set_event__MODULE_ID__);<br /> tabs.addTab("面積","J_area",set_event__MODULE_ID__);<br /> tabs.addTab("體積","J_volume",set_event__MODULE_ID__);<br />}<br />_IG_RegisterOnloadHandler(init);/*載入時呼叫的事件處理常式*/<br /></script><br /><div class="JContent" id="J_length"><br /> <table border="1" cellspacing="0" cellpadding="0"><br /> <tr><br /> <td><label>公尺<input rate="1" type="text" /></label></td><br /> <td><label>公里<input rate="0.001" type="text" /></label></td><br /> <td><label>海里<input rate="0.00053996" type="text" /></label></td><br /> <tr><br /> <td><label>英吋<input rate="39.370" type="text" /></label></td><br /> <td><label>英呎<input rate="3.2808" type="text" /></label></td><br /> <td><label>英碼<input rate="1.0936" type="text" /></label></td><br /> </tr><br /> <td><label>台尺<input rate="3.3003" type="text" /></label></td><br /> <td><label>市里<input rate="2e-3" type="text" /></label></td><br /> <td><label>市引<input rate="0.03" type="text" /></label></td><br /> </tr><br /> </table><br /></div><br /><div class="JContent" id="J_weight"><br /> <table border="1" cellspacing="0" cellpadding="0"><br /> <tr><br /> <td><label>公斤<input rate="1" type="text" /></label></td><br /> <td><label>公克<input rate="1e+3" type="text" /></label></td><br /> <td><label>公噸<input rate="1e-3" type="text" /></label></td><br /> </tr><br /> <tr><br /> <td><label>英磅<input rate="2.2046" type="text" /></label></td><br /> <td><label>盎司<input rate="35.273" type="text" /></label></td><br /> <td><label>英噸<input rate="9.8421e-4" type="text" /></label></td><br /> </tr><br /> <tr><br /> <td><label>美噸<input rate="0.0011023" type="text" /></label></td><br /> <td><label>格令<input rate="15432" type="text" /></label></td><br /> <td><label>克拉<input rate="5000" type="text" /></label></td><br /> </tr><br /> <tr><br /> <td><label>台斤<input rate="1.6667" type="text" /></label></td><br /> <td><label>台兩<input rate="26.667" type="text" /></label></td><br /> <td><label>市擔<input rate="0.02" type="text" /></label></td><br /> </tr><br /> </table><br /></div><br /><div class="JContent" id="J_area"><br /> <table border="1" cellspacing="0" cellpadding="0"><br /> <tr><br /> <td><label>公畝<input rate="100.00" type="text" /></label></td><br /> <td><label>公頃<input rate="1" type="text" /></label></td><br /> <td><label>平方公里<input rate="0.01" type="text" /></label></td><br /> </tr><br /> <tr><br /> <td><label>平方英寸<input rate="155e+5" type="text" /></label></td><br /> <td><label>平方英尺<input rate="107640" type="text" /></label></td><br /> <td><label>平方碼<input rate="11960" type="text" /></label></td><br /> </tr><br /> <tr><br /> <td><label>英畝<input rate="2.4711" type="text" /></label></td><br /> <td><label>平方英里<input rate="0.003861" type="text" /></label></td><br /> <td> </td><br /> </tr><br /> </table><br /></div><br /><div class="JContent" id="J_volume"><br /> <table border="1" cellspacing="0" cellpadding="0"><br /> <tr><br /> <td><label>立方公尺<input rate="1" type="text" /></label></td><br /> <td><label>公升<input rate="1e+3" type="text" /></label></td><br /> <td><label>毫升<input rate="1e+6" type="text" /></label></td><br /> </tr><br /> <tr><br /> <td><label>英國加侖<input rate="219.97" type="text" /></label></td><br /> <td><label>液體加侖<input rate="264.17" type="text" /></label></td><br /> <td><label>固體加侖<input rate="227.02" type="text" /></label></td><br /> </tr><br /> </table><br /></div><br /> ]]><br /> </Content><br /></Module><br /></pre><br /><br />範例預覽:<br /><script src="http://www.gmodules.com/ig/ifr?url=http://weskerjax.googlepages.com/unit_converter.xml&up_type=%E9%87%8D%E9%87%8F&synd=open&w=420&h=410&title=%E5%96%AE%E4%BD%8D%E6%8F%9B%E7%AE%97&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script><br />範例原始檔:<a target="_blank" href="http://weskerjax.googlepages.com/unit_converter.xml">unit_converter.xml</a><br /><br /><br />第一個開發的小工具:<br /><script src="http://www.gmodules.com/ig/ifr?url=http://www.wacanai.com/google_tool/wacanai_mini_0902.xml&up_list_row=5&synd=open&w=420&h=300&title=Wacanai+Mini+v0.5+for+iGoogle&lang=zh-TW&country=TW&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-6640785687768301032008-04-17T00:29:00.004+08:002013-06-11T20:56:10.960+08:00iGoogle 上的日曆小工具將日曆加入 iGoogle 分頁,這個小工具還可以置換成其他網頁<br />
介紹網站:<a target="_blank" href="http://www.bolinfest.com/changeblog/2007/05/03/your-page-here-an-igoogle-gadget/" rel="bookmark" title="Permanent Link: Your Page Here (an iGoogle gadget)">Your Page Here (an iGoogle gadget)</a><br />
<a target="_blank" href="http://www.google.com/ig/adde?moduleurl=bolinfest.com/ig/your_page_here.xml">工具連結</a><br />
<br />
利用 HTML/Javascript 小工具將 Google 日曆的 iframe 加入 iGoogle<br />
介紹網站:<a target="_blank" href="http://googlesystem.blogspot.com/2008/02/add-full-web-pages-to-igoogle.html">Add Full Web Pages to iGoogle</a><br />
<a target="_blank" href="http://www.google.com/ig/adde?moduleurl=chw2054.googlecode.com/svn/trunk/htmljs/htmljs.xml">工具連結</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0tag:blogger.com,1999:blog-5946530704742130970.post-86848146024454687172007-10-16T23:09:00.002+08:002013-06-11T20:48:47.507+08:00好用的 iGoogle今天看<a target="_blank" href="http://soft4fun.net/article.asp?id=294">硬是要學</a>中寫了一篇有關 iGoogle 的介紹,心血來潮也將我的 iGoogle 分類了一下,而且發現到原來之前掛的書籤工具Google Bookmarks蠻人性化的,除了高度不能變長,且最多只顯示四個,也沒有捲軸,真是缺失阿!!<br />
<br />
不過呢!在新增和修改的操作上很人性化,還具有分類的功能,你只要貼上網址,他自動會去抓那個網頁的標題,真的很方便的說,不知道以後會不會修得更好,期待一下吧!要是沒有的話,只好自己寫一個。<br />
<br />
iGoogle 可以自訂喜歡的樣式,還可以增加頁籤,不用將一推工具都放在一起了,可以看起來更簡潔,Google 有很多服務都很好用,有興趣的人可以多嘗試一些沒用過的服務,或者去看看相關的介紹文章,別錯失了這些好用的工具。<br />
<br />
教學連結:<a target="_blank" href="http://soft4fun.net/article.asp?id=294">硬是要學</a>Jax Huhttp://www.blogger.com/profile/01953021685585893658noreply@blogger.com0