2013年10月31日 星期四

無名備份

無名前幾天正式進入唯讀狀態,再來就是等這無名小站從地球上消失了,真的是很感傷阿..

雖然裡面許多內容我有整理過後放到 blogger 這邊,但有更多內容是沒有整理過散在那邊的回憶,所以就把他備份到 XuitePixnet 兩個地方。

Pixnet
pixnet 紅色死神
Xuite
xuite 紅色死神
Read more

2013年10月28日 星期一

Sublime Text 資源及外掛

Sublime Text
最近在從 DW 的懷抱轉到 sublime text 的陣營中,紀錄些資源。

下載 Sublime Text

Sublime Text 手冊

Sublime 外掛排行榜

安裝的外掛
JsFormat- 格式化 javascript
Sublime ColorPicker- 顏色選擇器
EMMET- 前端神器
JsMinifier- js 壓縮
HTML5
SublimeLinter
PHPTidy及htmlTidy:整理排版html及php編碼
git
jQuery
ColorHighlighter- 當游標移至文字中如"#FFFFFF","rgb(255,255,255)","white"會自動顯示對應的顏色。
ColorPicker- 呼叫調色盤,讓你直接用選的來選顏色。Ctrl+Shift+C


持續增加中..


Read more

2013年10月27日 星期日

2013年10月24日 星期四

Koobii 高校誌

koobii

最近花了一點時間用 Wordpress 弄了Kooboo 高校誌出來,因為有要求所以摸了不少架構跟外掛,感想是用 Wordpress 真的是好選擇,一些基本的功能 Wordpress 大多都可以幫忙完成,額外的功能可以自己寫,只要 UI 看起來一樣,就是一個很有整體感的網站了。

制服地圖是邊寫邊玩,所以都是東一塊西一塊的湊,其實把論壇跟購物車都從 Wordpress 整進去也不錯,之後就一邊實驗一邊加新功能囉。

Uniform Map 文章

額外也在 Uniform Map 制服地圖上把他們的文章給接進來,下面那塊則是一個喜歡寫制服介紹的網友的網誌,有興趣也可以去看看他的文章,這樣制服地圖上就多一些會自己生產的內容了。

另外最近又多一個攝影師提供給我他拍得很多制服的照片,之後再慢慢加到網站上。
Read more

2013年10月23日 星期三

jQuery 右鍵選單- jQuery contextMenu

contextmenu

最近在做網站上的右鍵選單,找了一個方便的外掛。

外掛網址
jQuery-contextMenu

下載後引用這兩隻
  1. <link href="src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />  
  2. <script src="src/jquery.contextMenu.js" type="text/javascript"></script>  

除了 js 外,也要使用 css ,樣式才會出來,之後再依自己需求改樣式就好了。

使用 plugin 也是參考他的範例就好
  1. $.contextMenu({   
  2.         selector: '.context-menu-one',    
  3.         callback: function(key, options) {   
  4.             var m = "clicked: " + key;   
  5.             window.console && console.log(m) || alert(m);    
  6.         },   
  7.         items: {   
  8.             "edit": {name: "Edit", icon: "edit"},   
  9.             "cut": {name: "Cut", icon: "cut"},   
  10.             "copy": {name: "Copy", icon: "copy"},   
  11.             "paste": {name: "Paste", icon: "paste"},   
  12.             "delete": {name: "Delete", icon: "delete"},   
  13.             "sep1""---------",   
  14.             "quit": {name: "Quit", icon: "quit"}   
  15.         }   
  16.     });   
  17.        
  18.     $('.context-menu-one').on('click'function(e){   
  19.         console.log('clicked'this);   
  20.     })  

如果要在選單裡面加動作,可以 callback

  1. items: {   
  2.     "cut": {name: "Cut", icon: "cut", callback: function(key, opt){    
  3.         opt.$trigger.addClass("cut");   
  4.         $group_name=opt.$trigger.text();           
  5.     }},             
  6. }  

opt.$trigger 就是 trigger 事件的那個 DOM ,除了可以寫 event 外,也可以對那個 DOM 做操作,像這邊就是附上一個剪下的 UI 的效果。
Read more

2013年10月21日 星期一

[HG] Gundam Astray Red Frame (異端鋼彈紅色機)

Gundam Astray Red Frame

異端鋼彈是我非常喜歡的機體之一,雖然紅色機駕駛員的設定是一個非常罕見的廢物商,在 SEED 中又是量產機(只不過量產機的造型沒有這幾台原型機好看),加上又沒有完整的動畫只有在漫畫活躍,但機體好看就好,其他都不是很重要了。

Gundam Astray Red FrameGundam Astray Red Frame
Read more

2013年10月18日 星期五

Angular ng-class 製作動畫 DOM 的出現/消失效果

最近在研究用 Angular 做動畫,看了一下就是搭配 CSS 的 transition ,這樣只要換 css 就會有動畫了。

HTML 類似這樣
  1. <a ng-click="showDetails = ! showDetails">{{procedure.definition}}</a>   
  2. <div class="procedure-details" ng-class="{ 'hidden': ! showDetails }">   
  3.     <p>content</p>   
  4. </div>  

主要是在 ng-click="showDetails = ! showDetails" 的時候切換 class ,要切換的 class 類似 ng-class="{ 'hidden': ! showDetails }" 放在DOM裡。

CSS 就是這次的重點了。
  1. a{   
  2.     displayblock;   
  3.     width:100px;   
  4.     color:#fff;   
  5.     background:#d41b3a;   
  6.     border-radius:4px;   
  7.     text-align:center;   
  8.     text-decoration:none;   
  9.     padding:4px 10px;   
  10. }   
  11. li {       
  12.     list-stylenone;   
  13.     padding10px;   
  14. }   
  15. .procedure-details {   
  16.     max-height100px;   
  17.     transition: .8s;   
  18.     overflowhidden;   
  19. }   
  20. .procedure-details.hidden {   
  21.     max-height0;   
  22. }  

要注意的是因為是做垂直的切換,所以控制 height 就可以了,但有遇到問題是只用 height 的話不會有動畫效果,要在前後都使用 max-height 設定高度,隱藏的時候設 0 ,要展現的時候只要設定 max-height 比展開後的 height 還高就可以了,這樣動畫效果就會正常了。

Demo
Read more

2013年10月16日 星期三

Uniform Map 制服地圖- 微調部落格版面

Uniform Map 部落格

目前沒什麼時間開發新功能(快忙到爆炸了),所以上禮拜心血來潮才調了一下制服地圖部落格的版面,最近對 Wordpress 有熟了一點,所以簡單的在部落格加了 Facebook 的留言板,大家可以加入 RSS 來追蹤更新阿,在我還沒時間寫新功能前,都還是會繼續更新部落格的喔。
Read more

2013年10月14日 星期一

高校誌 X 制服地圖

高校誌

最近在試著用 WP 幫高校誌弄官網,過程中學到不少,也跟他交換了一些內容,大概也是不到一個禮拜的時間就弄好了,比之前寫的任何網站都快。

感想是其實我會寫一些程式跟會畫圖,有一個主題想做的話,搭配著 WP 是一個很好的 solution ,之後的網站應該都會用這個模式做看看,另外就請大家期待高校誌 X 制服地圖囉。
Read more

2013年10月11日 星期五

Uniform Map 制服地圖- 更新學校頁相片排列方式 加入文字及影片達人

Uniform Map 制服地圖

Uniform Map 制服地圖在學校分頁的呈現有做一些改變,其實就是變成瀑布流可以看到整張照片。

另外宅宅的一萬個為什麼萌太奇映像的作者也加入內容提供的行列,之後會在裡面增加達人專區,大家敬請期待(其實應該先花時間弄攝影達人專區的)

最後要提的一點是有女小編加入,她的目的是收集男生的制服照,歡迎提供給我們 XD,我應該會寫出功能後就不會再去看那頁了
Read more

2013年10月10日 星期四

[Robot魂] 龍星丸

龍星丸

剛出龍神丸的時候就期待 BANDAI 會出龍星丸,當然更希望可以出完,龍星丸是 R 魂系列的第三隻主角機,因為知道主角的機體就很多,所以其他像邪虎丸或最近要出的戰王丸就不在收的範圍內了。

龍星丸龍星丸
Read more

2013年10月8日 星期二

html 的 a 和 button

html 裡每個 tag 都有他的意義存在,所以連結用 a,按鈕用 button 或 input[type="button"] 都是方法,可是經驗就是 button 的樣式做起來比較不聽話,然後有時候可能本來只是一個 button 去執行一個動作,卻有可能變成要導到別頁的連結,所以後來只要是可以執行動作的 button ,我都會用 a 去當 button,再給他統一的 class="btn" 來樣式化。

可是這樣一來 a 不是原本的 button tag,語意就會有一些問題,還好 html 很貼心,可以用 role=button 來表示他是一個 button,這也就是我後來習慣的用法。

  1. <a class="btn" role="button">button</a>  
Read more

2013年10月7日 星期一

Related Posts Plugin for WordPress, Blogger...