好用的jQuery表格工具- datatable

為了讓大家使用方便(也可以說現在人都被寵壞了)，我們在網站製作表格的時候，大部分使用者都會預期可以根據不同狀況排列表格內容，還好有jQuery幫我們很快處理這方面的需求。

使用jQuery Datatable Plugin

只要照範例把table畫出來，之後再使用plugin就可以了。

Read more

jQuery的繪製圖表plugin- flot

jQuery用來畫圖表的plugin雖然不少，但要找到好用又免費授權的倒是花了不少時間，後來找到的這個pluginjQuery Flot就蠻符合我們的需求。

照他的範例去套就可以了，有很多種可以選，還有不少地方可以設定，研究一下文件就知道該怎麼用了，看不懂的話直接看source code就很清楚了。

jQuery Flot API文件

Read more

PSP與第二次機器人大戰Z2 再世篇

最近買了人生的第一台掌機PSP，為了玩機器人大戰買的，不買PSV當然有些原因啦，不過又可以玩機器人大戰真的很開心，而且這款裡面又一堆我已經看過的作品。


一些有參戰的作品家裡有的模型，收藏機器人大戰模型最討厭的就是尺寸跟規格都不一樣.. 感覺還是自己畫比較實際 XD


目前第一輪都走鋼彈線，傻子那的00很強，第二輪再來走魯魯修線。

Read more

勇者聖戰 GREAT BANNGANN

勇者聖戰是90年代Sunrise勇者系列的完結篇，不過也一樣沒有TV動畫，只有遊戲裡補完劇情，這架也是因緣際會下買到的，可動性不好，不過造型跟塗裝都處理的很漂亮。



正面反面。

Read more

CSS上解決文字超過div寬度的方法-text-overflow

在hmtl裡，文字如果超過div的寬度，可能會破壞掉原本的排版，可以用overflow跟text-overflow搭配來解決，之前有提過這點，沒想到純css就可以讓超過長度的文字變成...了，很方便，搭配的效果如下，可以試試。

style="text-overflow : clip; overflow : hidden"

Adobe helps businesses thrive in a world where digital media is pervasive

style="text-overflow : ellipsis; overflow : hidden"

Adobe helps businesses thrive in a world where digital media is pervasive

style="text-overflow : ellipsis; overflow : visible"

Adobe helps businesses thrive in a world where digital media is pervasive

W3C上的說明

Read more

jquery翻頁效果- turn.js

以前在flash要寫一個翻書的效果，要花好多力氣才可以完成，而現在想用jQuery來寫一樣的效果就簡單到不行，別人都把外掛寫好了，套一下就可以弄成翻頁效果了。

使用的是這個turn.js plugin

然後照plugin介紹網頁一樣，準備一樣結構的html，再去使用外掛就可以了。

<div id='magazine'>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
</div>


Read more

GleeFB iOS版上架囉

噹噹，喜歡分享的朋友有福啦，GleeFB iOS版也正式在App Store上架囉，如果你有iOS的裝置，像是iPhone, iPad, iPod Touch，都可以掃描下面的QR Code


或是前往iTunes下載喔。


使用方法都一樣，你可以前往GleeFB官網觀看使用說明。


目前廠商也逐漸增加中，當然如果使用者越多，就會有越多廠商願意加入提供優惠的行列喔，如果你也喜歡這個服務的話，也請多多跟你的朋友宣傳吧。


紅利點數也即將在5/1就可以在ibon兌換了，這個可是比其他服務都方便許多喔。



如果對我們的服務有任何意見，可以寫信給我們，或是到FB的粉絲團留言，我們都會盡快給您答覆，最後就歡迎大家一起跟我們來GleeFB一下吧。

Read more

元氣小子 グレートガンバルガー

在晴朗的日子下，霧隱大空（藤兵衛）訓練霧隱小虎（虎太郎）忍術，但小虎（虎太郎）不願意學習，而藉口逃跑，使得大空（藤兵衛）氣憤不已，於是借丟出彈藥，想要教訓小虎（虎太郎），不料被小虎（虎太郎）用木棒反擊，而使彈藥飛到附近的廟宇的巨大岩石上，造成不小的爆炸......只不過這一爆，卻引出了惡魔，雖然後來被正義使者鎮壓回去，但惡魔仍不死心，便命令部下到人間作亂，於是正義使者便派出了三架機體一路追逐...這時霧隱小虎（虎太郎）、風祭英傑（鷹介）與流崎力哲（力哉）三人相互來到公園，一個驚險的相遇，便開始了他們保護這個城鎮的任務......



元気爆発ガンバルガー，在台灣播放的時候叫做元氣小子，是藍光人三部曲的第二部，其他還有絕對無敵跟熱血最強，不過熱血最強在台灣就沒有播放了，可能是元氣小子的收視率不理想吧，相對來說元氣小子應該就是因為絕對無敵的收視好所以才有機會在台灣播放的。

Read more

Keroro軍曹

一樣是很久以前練習AI的作品。

Read more

php記錄寫入時間

view plaincopy to clipboardprint?

1. date_default_timezone_set('Asia/Taipei');   
2. $date_time = date("Y-m-d H:i:s");  

使用php在存入資料時記錄寫入時間，先把時區修正後在用date讀取目前時間，在輸入資料庫就可以了。

Read more

css強制文字斷行

在網頁上，如果我們遇到一長串英文字，最常見的是一個很長的檔名，如果我們是在一個div內，而那個div又有指定寬度的話，則文字會超過那個div的寬度，而div本身的寬度不變，但如果再table的td內，則會把td給撐開，這樣版面就會變得很醜，一般我們在處理的時候是建議用程式去判斷字元的長度再作是否要將自元給截斷，想單純用css解掉也可以，不過這樣可能文字的意思就會跑掉了。

中文基本上不會有這樣的問題，因為中文一個字就是一個意思，而英文則需要幾個字母以上組合起來才有意義，所以網頁並不會自動將英文字給斷行，而如果想強制將英文字斷行，只要使用下列的css即可。

view plaincopy to clipboardprint?

1. word-wrap: break-word;   
2. word-break: break-all;  

當然這是我盡量不會去使用的方法。

Read more

茶犬

Read more

黏‧輕‧點 親子溫馨留言便利貼

黏‧輕‧點 親子溫馨留言便利貼

最近上線的活動，主要的功能就是使用瀑布流的方式，結合FB留言板完成的網頁，這次就從頭到尾都自己完成，一個禮拜的時間。

Read more

武者烈傳

大概快五、六年前的作品了.. 練習PS的東西，最近想要再畫，就沒什麼時間了。


烈火武者頑駄無


疾風劍豪精太

Read more

GleeFB官網

GleeFB是最近跟朋友合作完成的服務，主要是提供使用者，只要分享資訊，就可以獲得紅利，並提供直接在7-11 ibon兌換的服務，而官網就是由我操刀啦。

可以看的出來官網的風格是黑板風，把資訊都釘在黑板上，其實本來是想做科技風的，只是到後來變成了這個風格，不過我也蠻喜歡的就試了。


使用步驟，可以一步一步的看教學，這邊的jquery我是完全自己寫的，沒有用到外掛，因為一次要控制兩個區塊的換頁，懶得去找這樣的外掛就自己寫了，搭配css的觀念
，要作出換頁的效果並不會很難的。

Read more

用jQuery製作瀑布流網頁

因為Pintrest紅的關係，所以像這樣的網站便開始流行，瀏覽起來真的很方便，最近因為一個專案的需求，所以用自己的想法搞了一個出來，照著自己的理論是完成了，不過應該還可以在程式上更加優化，這邊提一下簡單的概念。

我想可以直接理解的就是他是卷軸拉到最下面會讀取剩下的內容，所以關鍵就在於是否可以知道捲軸到底部，然後偵測捲到底部後再使用AJAX去將資料append到DOM裡。

view plaincopy to clipboardprint?

1. $(window).bind("scroll",function() {   
2.     //偵測網頁目前卷軸位置   
3.     var topHeight=$(document).scrollTop();   
4.     //偵測視窗高度   
5.     var winHeight = $(window).height();   
6.     //偵測網頁高度   
7.     var docHeight = $(document).height();   
8.     //如果捲軸位置加視窗高度比網頁總高等於網頁總高度, 代表到最下面了, 稍微-10是讓使用者不用捲到最底   
9.     if (topHeight+winHeight > docHeight-10){   
10.                 //這邊執行ajax   
11.     }   
12.  });  

jquery的ajax方法，我這次是把從php讀取的資料轉成json格式，再由jquery append到DOM內，然後可以用迴圈去限制每次讀取的筆數，這樣就可以完成了。

最近的專案上線就可以看到成果了。

Read more

javascript與php互傳變數

在php跟javascript間傳值。

在javascript中使用php變數，簡單的說就是把php的值印出來到html就好了。

view plaincopy to clipboardprint?

1. <?php   
2.     $value="abc";   
3. ?>  

view plaincopy to clipboardprint?

1. <script type="text/javascript">   
2.     var value = "<?echo $value;?>";   
3. </script>  

而要在在php使用javascript變數，就必須要網頁網址傳值。

view plaincopy to clipboardprint?

1. function express(){   
2.     var value="abc";   
3.     location.href="test.php?value=" value;   
4. }  

再用表單的方式取值。
<input type="button" value="button" onclick="express()">

view plaincopy to clipboardprint?

1. <?php   
2.     echo $_GET['value'];   
3. ?>  

Read more

FlickrLinkr改版 2012-04-09

這次改版重點：

1.修正相片分頁連結上下頁錯誤

2.新增URL Rewrite功能：可以把連結加到我的最愛，不用每次都要搜尋了


3.關閉擾人的瀏覽器無法複製的提示訊息，只會秀一次

4.新增多選功能(一次可選擇多張照片，被選擇的會有桃紅色框框)


5.修正照片數量太多時，捲軸無法拉到底的問題

6.新增FB的讚(大家幫忙按一下讚吧)

FlickrLinkr

Read more

[轉輪科技] JEHUTY

這是ZOE的主角機JEHUTY在二代的樣子，說實在我也沒玩過ZOE，會買這架的原因是因為看到魔王機ANUBIS我實在太喜歡了，於是為了ANUBIS我才買了JEHUTY。



正面背面

Read more

jQuery樹狀選取-checkboxtree

最近有需要用到類似圖片上的UI，有人有寫好的外掛用起來就輕鬆了，主要是可以做樹枝裝的展開跟選取功能，如果網站有要用到有子母關係的選單可以使用這個外掛。

首先下載checkboxtree

首先用準備類似這樣的ul跟li組合起來的結構。

<ul>
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
<li></li>
</ul>


然後引入外掛，因為這個外掛是jQuery UI的延伸，記得也要引入jQuery UI，不然會沒辦法使用。

結構都準備好了就直接使用就好了，官網還有其他的使用方式說明，有要使用的可以去研究看看適合自己網站的用法。

view plaincopy to clipboardprint?

1. $('#tree1').checkboxTree();  

Read more

GleeFB 分享得紅利

在社群網站發達的現在，我們每天都可以從FB上獲得許多朋友的訊息，或是一些好文章，及一些特別優惠的消息，而GleeFB就是一個讓你可以在分享的同時，又可以享受紅利回饋的服務。

掃描QR code下載



首先如果你有Android手機，可以先點上面的連結去下載，而iOS的app尚在審核中，審核通過後會再通知大家。

該如何分享得回饋呢? 首先安裝完app，打開後可以看到像下面的畫面。


上面會有廠商提供的優惠訊息，可以選擇想要分享的項目，可能是活動，也可能是商品資訊。

之後可以看到更詳細的訊息。


再點進去可以看到活動的頁面。


這時候再輸入一些想說的話分享到你的FB塗鴉牆。

就可以獲得紅利了，很簡單吧，一起來試試吧，也推薦這個好服務給你的好朋友吧。 :D

當你有紅利點數後，累積到一定程度就可以去兌換。


目前GleeFB提供7-11 ibon點數提領的服務，讓大家都可以很方便的將獲得的紅利點數兌換成好康。



如果對於這個服務還有什麼不清楚的地方，歡迎到GleeFB官網，那邊有更多詳細的說明，對這個服務有任何疑問，上面也有連絡方式，也歡迎大家多給這個服務一些建議，祝福大家都能分享愉快。 :)

Read more

Brave合金-武裝機甲-鉄のラインバレル

這隻也是在機戰登場後我才去追他的動畫，但最近實在是越來越沒有耐心看動畫的心情，跳著看的感想是，這是一部主角非常中二的作品，所以也有人稱他為鐵之中二，不過聽說主角在漫畫中沒有那麼中二就是了。




我蠻喜歡這架的造型，只不過那個腳根本站不注，一定要靠腳架把他撐起來。





這部動畫的機器人也是完全靠3D建模的動畫，漂亮歸漂亮，也沒什麼違和感，但還是像機器人大戰OG2或鋼彈UC那樣，比較讓人感動阿..

Read more