pCloud Partner Program

TableTools2-好用的Firefox網頁表格plugin

好用軟體 2013/07/26 15:01
views: 179829 times
在瀏覽網頁時, 有時想針對一些輸出的表格做些進階的分析及處理, 往往會將資料先存出來, 轉到 excel 中進行.

現在有個好用的 plugin 可以供在網頁上應用, 而且直接操作, 不需要離開現有的畫面, 馬上就可以進行表格(TABLE)的排序, 多欄排序, 繪製圖表等功能, 另外像是在 excel 中才有的篩選, 複製欄, 隱藏欄等功能, 也都一應俱全, 實在是非常好用, 值得推薦大家來使用看看.

TableTools2 plugin 下載網址: https://addons.mozilla.org/zh-tw/firefox/addon/tabletools2/

安裝好後, 找個網頁有表格的, 按下右鍵, 就可以玩囉, 快來試看看吧.

裝好之後, 想玩看看, 可以到作者網站提供的表格區來試看看:
1. 基本表格 http://mingyi.org/TableTools2/demo.html
2. 進階表格 http://mingyi.org/TableTools2/advanced-demo.html
3. 繪製圖表用的表格 http://mingyi.org/TableTools2/chart-demo.html
4. 用來測試效率的表格 http://mingyi.org/TableTools2/large-table.html (可以生出大量資料)

另外這裡是官方 demo 影片, 也可以參考看看: http://mingyi.org/TableTools2/video.html

很不錯的工具.
top

好用的HostAdmin插件-Firefox

好用軟體 2013/01/26 23:58
views: 272839 times
在開發網站的過程中, 往往會需要快速地切換主機標題(即網址中的主機)對應開發環境或是測試環境的IP, 一般來說都是利用修改 %windir%/system32/drivers/etc/hosts 這個檔案內容, 並重新起動瀏覽器才能生效, 尤其像是在還未生效的 DNS 或是 SSL 等狀況下, 就顯得十分麻煩.

現在有個好用的工具 HostAdmin (link) for Firefox, 這個工具的工作原理一樣是修改 hosts 檔案, 不過在修改後, 會自動 refresh 本機 DNS, 瀏覽器也不用重新起動就馬上生效了, 而且是在狀態列就可以直接操作設定, 十分方便, 畫面如下:
用戶插入圖片

可以在自行訪問的網域主機上去設定指向的 IP, 便可以快速地達到切換的目的, 而最上面的 Hosts Editor, 會叫出內建的編輯器, 直接修改 hosts 內容, 也十分方便. 多重 IP 選擇的原理就是利用 hosts 中的 # 號, 也就是註解符號, 以上圖為例, 就是在 hosts 有如下設置:

192.168.12.21 www.test.com
#192.168.12.31 www.test.com

當你訪問 www.test.com 時, 點一下右下角的 HostAdmin 插件功能, 就會出現上圖畫面, 方便你直接作切換.

另外有需要注意一點, 在 windows vista/7 時, hosts 檔案的權限修改時會失敗, 是因為權限有調整為管理員才能修改, 可以參考該插件的官方資料來調整該檔案的權限, 如下:

http://code.google.com/p/fire-hostadmin/wiki/GAIN_HOSTS_WRITE_PERM

建議的兩種方式都必須由本機管理員下達修改檔案權限的指令, 一為調整為 user group 有寫入權限, 指令如下:
cacls %windir%/system32/drivers/etc/hosts /E /G Users:W

一為調整為某單一USER帳號有寫入權限, 指令如下:
cacls %windir%/system32/drivers/etc/hosts /E /G "User Account Name":W

記得都要以管理員來執行, 若不會操作, 簡單說明如下:
1. 點下[開始] [所有程式] [附屬應用程式]
2. 看到[命令提示字元] 對該項目按下右鍵, 選取[以系統管理員身份執行]
3. 出現一個 console 畫面, 並有輸入提示符號, 鍵如上面兩個指令其中一項皆可, 記得第二項的 User Account Name 是指某單一 user 的帳號, 通常是目前自己這個帳號.
4. 系統會回應已處理檔案 C:\Windows\system32\drivers\etc\hosts 這樣就成功了.


相信對於常在修改調整 hosts 的開發者朋友們會有很大的幫助!

該插件的官方網址: https://addons.mozilla.org/zh-tw/firefox/addon/hostadmin/


top

Youtube下載影片插件-Firefox

好用軟體 2013/01/12 22:48
views: 226301 times
這個工具是Firefox 的插件, 可以方便地下載 youtube 上的影片, 而且會列出所有可供下載的解析度及格式, 插件名稱為 Easy YouTube Downloader

英文安裝下載頁: https://addons.mozilla.org/en-us/firefox/addon/easy-youtube-video-downl-10137/
中文安裝下載頁: https://addons.mozilla.org/zh-tw/firefox/addon/easy-youtube-video-downl-10137/

安裝好之後, 在瀏覽 youtube 的影片時, 會在下方多出現一個下載, 點擊後會出現所有可用的下載點, 以這頁為例: http://www.youtube.com/watch?v=tub3x22YNbk

下方下載點擷圖如下:
用戶插入圖片

就有純音樂的 M4A, AAC, MP3-128k, MP3-64k, 影片的 MP4 1080p, 720p, 360p, FLV的 480p, 360p, 240p 還有一個預覽圖及說明連結, 點擊後即可下載影片, 方便使用, 真是一個好用工具啊!
top

Masonry自動排版介面與InfiniteScroll無限捲動介面

程式技術/Javascript 2012/05/09 15:57
views: 223969 times
Masonry 和 InfiniteScroll 都是 jQuery 上的 plugin!

Masonry 是利用 css 方式, 將介面重新排版, 使得畫面不會因為不規則區塊排起來而不好看, 可以看一下 Masonry 官網上的說一看就知道這樣的排版方式的感覺:

http://masonry.desandro.com/

而 InfiniteScroll 則是利用 jQuery 背後 ajax 方式, 將一頁一頁的網頁, 透過不換頁, 直接 append 到目前的頁面上, 達成向下捲動而看更多內容的功能. 像是 facebook 動態牆, 就是這樣的應用情境. 官方網站:

http://www.infinite-scroll.com/

這兩個功能結合就變成了這樣: http://sample.diary.tw/flickrsearch/?q=rainbow (利用了 flickr api 與 Masonry 和 InfiniteScroll 做出的效果. (記得要向下捲動, 才會出現看完了繼續產出內容的效果), 其中後面的 q 可以自行替代其他的英文單字, 因為對該文字沒有特別處理, 所以只能使用一個英文單字.

來看看怎麼做這個效果吧.

InfiniteScroll 是利用了 jQuery 在背景取出下一頁的內容, 並將指定的 selector 資料 append 到目前的網頁上, 所以最小的程式碼是這樣:



就是將本頁的容器, 利用 infinitescroll 函式呼叫, 並傳入 3個重要參數, 分別為 navSelector, 這個是指當 page 瀏覽到這個 selector 指定物件時, 進行 load 下一頁內容, 而要 load 的內容, 就是 nextSelector 的物件中的 url, 至於第三個參數 itemSelector 則是 load 到網頁後, 要帶出來放到目前頁面上的內容項目.

以上面的例子來看, 網頁的介面會是如下:


這樣一來, 當本頁被瀏覽最下面的 <div class='navigation'> 時, 就會被觸發去 load page-2.htm 中的內容,並找出 <div class='post'>...</div> 將內容放到 <div id='content'>..</div> 中最後一個 post, 如此重覆下去, 就會有往下捲而一直往後看的內容, 記得每頁下面都要放對應的下一頁, 就會被 infinitescroll 偵測到, 並往下疊代下去.

再來看看 Masonry 的效果, 用法也很單純, 最小程式碼如下:


只需要指定要排版的容器 container, 呼叫 masonry 傳入 itemSelector 就是內容元素, 就可以自動排版, 多種效果可以參考官方網站的 demo.

比較特別的是兩者結合的這個 demo: http://masonry.desandro.com/demos/infinite-scroll.html , 參考這個 demo 可以做出又達成自動排版, 又達成無限捲動的功能, 效果就參考上面的 sample: http://sample.diary.tw/flickrsearch/?q=rainbow

幾個點要注意:
1. navSelector 一定是要找最下面的物件, 效果才會好, 記得.
2. 若是排版內容有圖, 可以參考 Masonry 的 sample: http://masonry.desandro.com/demos/images.html 將排版呼叫寫在 container 的 imagesLoaded 事件後, 如下:

才不會有位置算不準的狀況.
3. 若要有動畫排版效果, 可以在 Masonry 參數中多加上 isAnimated: true;
4. 排版若要美觀, 要盡量統一內容物寬度, 就不會排得2266 (可以利用 css 自行安排)
5. InfiniteScroll 的 loading 的 css 是 #infscr-loading 這個, 可自行設計.

忘了說, 這次 sample 使用的 flickr api 是 photo search: http://www.flickr.com/services/api/flickr.photos.search.html

這種 layout 流行和 fb 及最近火紅的 pinterest 網站可能有很大的關係呢.
top

切換瀏覽器標頭-User Agent Switcher

好用軟體 2010/01/01 17:27
views: 124600 times
這個是一個 Firefox 的插件, 叫做 User Agent Switcher

現在開發手機上應用的網頁機會比以往多, 但是礙於測試時期, 一般這些網頁程式都會檢查使用者的瀏覽器(User Agent), 所以使用這個插件, 方便使用者在切換自己的瀏覽器的標頭.

安裝好之後, 會在[工具]功能表內, 多出一個切換 User Agent 的功能, 如下所示:

用戶插入圖片

(圖片引用自: https://addons.mozilla.org/zh-TW/firefox/addon/59)

如此一來, 便能方便測試網頁程式, 對於不同的 User Agent 的判定, 及行為驗證, 將會有很大的幫助, 而不需要準備太多環境. 當然, 若是要做所謂的 HTML, CSS, JAVASCRIPT 相容性測試, 則這個就比較幫不上忙了, 但對於判定 User Agent 而要重導使用者, 或產生一些不同的功能時, 可以很快速的驗證.

像是 naver.jp 這個網站, 有個 for iphone 的版本 (http://ipn.naver.jp) , 會檢查User Agent來重導使用者到 http://www.naver.jp, 就沒辦法預覽到 iphone 的頁面了. 使用這個 User Agent Switcher 時, 就能"假裝" Firefox 是 iphone 的 browser , 來訪問該網頁囉!


[2010/6/15 0:05]
補充一下相關的 user agent 資料, 可以利用匯入的方式達成, 請如以下操作:
1. Default User Agent, Edit User Agents:
用戶插入圖片

2. 在畫面上選擇下方的 Import:
用戶插入圖片

3. 到這裡下載已整理好的 user agent xml 檔: http://techpatterns.com/forums/about304.html
(或直接對這個連結按右鍵另存新檔: http://techpatterns.com/downloads/firefox/useragentswitcher.xml)
4. 於 import 選擇剛下載的檔案即可, 在 User Agent Switcher 就會有很多的 user agent 出來了, 還包含 iPad 耶!

PS. 請注意只是切換 User Agent 來讓 web server 吐出對應的 html, 並非是將 firefox 模擬出該 user agent 的呈現效果!!

top

重導用戶至手機網址插件

程式技術/TatterTools 2008/05/08 00:13
views: 106070 times
好一陣子沒寫 plugin 了, 用手機瀏覽 tattertools 的網頁, 本來就存在網址 http://diary.tw/tim/m 這個功能, 不過若是直接用手機瀏覽至文章的話, 例如: http://diary.tw/tim/494 , 應該要被 redirect 至 http://diary.tw/tim/m/494 . 這個功能一直很想實作, 卻沒時間也一直沒想法怎麼架構這個插件.

今天用手機上網找資料, 找到自己的網站, 連回來, 連到原來正常的網頁, 但實在太大又不方便, 雖然自己知道可以加上 /m 來改網址達到手機可觀看的版本, 但別人不見得會知道啊, 所以今天就來寫這個小插件.

架構上用了比較簡單的 tagname 方式實作這個插件, 所以要用的使用者, 麻煩就將 [ ##_MobileRedirect_## ] (注意要去除[]間的空白)放在 skin 上, (放在愈前面愈好, 最好是在 < head>之後, 或是 <body>之後, 如此才能快速作用(用javascript重導的).

判定的方式利用了 Russell Beattie’s Weblog (link) 的 Mobile Browser Detection in PHP 這篇文章內的判定手機方式來達成, 一共分為兩個步驟:

先判定 directive ($suri["directive"]) 是 "/", 也就是首頁或是內容頁(用數字版本的), 詳情可以參考: TT的$suri好用資訊 這篇文章.
接下來再判定是否為手機用戶, 這個就用 $isMobile 來判定

一旦兩者皆符合時, 就重導至 /m 的手機版本網頁.

請各位有空試看看, 若有任何問題或建議, 歡迎提出來哦!

插件下載:



top

真方便的CodeHighlight Plug-in

程式技術/TatterTools 2007/04/04 00:06
views: 137319 times
今天瞎逛了一下 tt 的plugin網站:
http://tattertools.com/ko/bbs/zboard.php?id=plugin
結果找到了一個還不錯用的 syntax highlighter plugin, 這個是利用之前介紹的 http://diary.tw/tim/43 這篇內容中的 dp.SyntaxHighlighter 功能整合實作出來的, 效果當然很不錯囉, 給有需要說明講解程式又在寫 tt 的人使用是再適合不過了, 使用方式相當容易, 就是用 [ code ] ~ [ /code ] (注意, 沒有空格) 包起來的 code 就可以被這個 plugin 辨識出來並加上 highlighter, 若要指定語法, 就是 [ code 語法 ] 這樣即可, 例如: [ code php ]~...[ / code ] 這樣子囉. 原始 plugin 網址在這裡: http://gendoh.tistory.com/2510878 給大家參考看看囉!

以下為幾個 sample:

more..


top

完成LoadAddComment插件

程式技術/TatterTools 2007/03/15 00:06
views: 177051 times
在 tattertools 中, 留言或回覆評論時, 有時候會因為網路速度較慢, 而 tt 又是使用 ajax 的方式回應, 而造成似乎沒有反應的狀況, 利用了 dynamic html 中的 div 及一個 loading 的小圖示, 開發了一個插件, 在留言或回覆評論時提示了等待的狀況, 目前尚為一個測試版本, 先給大家測試看看, 下個版本將會加入自訂訊息, 顏色邊框, 等待時間等功能, 敬請期待!

目前功能為出現在畫面正中央會有提示, 畫面如下:

用戶插入圖片

more..

top

MailNotification0.5插件完成囉

程式技術/TatterTools 2007/03/08 03:10
views: 179163 times
網友Chieh需要一個能主動通知有新留言功能的插件, 順便實作一下在 1.1.1 的版本下, 有 configuration 功能的插件, 便著手開發了一個於文章留言及留言版留言的主動通知插件.

本插件利用了 configuration 介面可以進行是要對文章留言有效或是對留言版留言有效, 當然亦可同時設定有效, 介面如下:

用戶插入圖片

只要發生了新的留言, 就會依照設定進行 mail 主動通知, 並會將留言者, 留言類型及是否為秘密留言, ip 等資訊一併寄出, 也將連回查看的網址附上, 功能很單純也十分方便, 歡迎大家多多利用!!

下載:




top

隨機文章列表RandomArticle 0.9

程式技術/TatterTools 2006/11/08 00:00
views: 129032 times
利用了 MySQL 的 rand() 函數, 將文章做出隨機列表, 內容相當簡單明瞭, 可以做為寫 plugin 的入門參考資料. (詳情參考 http://diary.tw/tim/53 這篇隨機資料取得)

由於在 {$database['prefix']}Entries 要選出文章, 得有以下幾個條件:
  1. owner=$owner (使用者blog內的文章)
  2. visibility=2 (公開的)
  3. draft = 0 (非草稿)
  4. category >= 0 (非公告, 寫到這, 想到 TopView 有一些問題, 因為沒區分公告連結)

more..



top




Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...