2013年4月30日 星期二

jQuery 分頁 plugin- simplePagination.js

simplePagination.js

再來一個分頁的plugin

外掛網址
simplePagination.js

使用起來很簡單,引進plugin後,像這樣使用就好了
  1. $(function() {   
  2.     $(selector).pagination({   
  3.         items: 100,   
  4.         itemsOnPage: 10,   
  5.         cssStyle: 'light-theme'  
  6.     });   
  7. });  

然後再根據你點哪個分頁,去讀取內容就可以了。

一些可以設定的項目
items: Integer Default: 1 Total number of items that will be used to calculate the pages.
itemsOnPage: Integer Default: 1 Number of items displayed on each page.
pages: Integer Optional If specified, items and itemsOnPage will not be used to calculate the number of pages.
displayedPages: Integer Default: 5 How many page numbers should be visible while navigating.
Minimum allowed: 3 (previous, current & next)
edges: Integer Default: 2 How many page numbers are visible at the beginning/ending of the pagination.
currentPage: Integer Default: 1 Which page will be selected immediately after init.
hrefTextPrefix: String Default: "#page-" A string used to build the href attribute, added before the page number.
hrefTextSuffix: String Default: empty string Another string used to build the href attribute, added after the page number.
prevText: String Default: "Prev" Text to be display on the previous button.
nextText: String Default: "Next" Text to be display on the next button.
cssStyle: String Default: "light-theme" The class of the CSS theme.
selectOnClick: Boolean Default: true Set to false if you don't want to select the page immediately after click.
onPageClick(pageNumber, event): Function Optional Function to call when a page is clicked.
Page number and event are optional parameters.
onInit: Function Optional Function to call when the pagination is initialized.

Demo

Read more

Google Maps- 使用圖層資料

weathermap
最近因為專案需求需要玩一下google maps的API,看到google maps有提供weather layer可以用,於是就拿來試一下。

沒用過的話先到 google maps api 申請一個 API Key。

因為 weather 的 library 不會一開始就引入,所以要在include的時候要指定要引入 weather layer 的 library。
程式庫
其他提供的圖層資源

include 的 code會像這樣
  1. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUT_API_KEY&libraries=weather&sensor=true">  
  2. </script>  

然後修改一下範例的code就可以使用了。
  1. function initialize() {   
  2.   var mapOptions = {   
  3.     zoom: 8,   
  4.     center: new google.maps.LatLng(24,121.15),   
  5.     mapTypeId: google.maps.MapTypeId.ROADMAP   
  6.   };   
  7.   
  8.   var map = new google.maps.Map(document.getElementById('map_canvas'),   
  9.       mapOptions);   
  10.   
  11.   var weatherLayer = new google.maps.weather.WeatherLayer({   
  12.     temperatureUnits: google.maps.weather.TemperatureUnit.CELSIUS   
  13.   });   
  14.   weatherLayer.setMap(map);   
  15.   
  16.   var cloudLayer = new google.maps.weather.CloudLayer();   
  17.   cloudLayer.setMap(map);   
  18. }   
  19.   
  20. google.maps.event.addDomListener(window, 'load', initialize);  

Demo

Read more

jQuery- TinyMap 路線導航及繪製圖形

最近要來玩google map api,所以先來用tinymap熱身一下。

plugin網址
TinyMap

tinyMap
導航
  1. $('#map').tinyMap({   
  2.         center: '台北市松山區健康路146號',   
  3.         zoom: 13,   
  4.         direction: [{   
  5.         from: '台北市松山區健康路146號',   
  6.         waypoint: ['台北市八德路3段105號'],   
  7.         to: '台北市信義區市府路1號',   
  8.         travel: 'driving'  
  9.         }]   
  10.     });   

Demo
Read more

2013年4月29日 星期一

2013年4月28日 星期日

FlickrLinkr php版改版- 不使用 ajax 抓取相片集

FlickrLinkr
花了一點時間改版一下,因為一次把所有相片集撈回來也不會太慢,所以就改成把所有的相片集都列出來,而不用ajax的方式,所以原本ajax送的get,就直接顯示在網址了,這樣只要記住網址就不用每次都要重新搜尋了。

另外相片集的頁面則是多了clear all- 清除之前選取的功能,之後可能會加上可以shift選取的功能,總之想弄再來弄了。

因為flickr規定外連的相片要有原本的url,所以這編寫一下怎麼連回原本的url
  1. $photos = $f->photosets_getPhotos($id);   
  2. $owner=$photos['photoset']["owner"];   
  3. //取得相片頁面網址   
  4. "http://www.flickr.com/photos/".$owner."/".$photo['id'];   

FlickrLinkr php版
Read more

2013年4月27日 星期六

PF18 Day1

不知道是不是昨晚跟早上下雨的關係,今天人不是很多。

鷹眼鷹眼
鷹眼的男子

初音
初音

P1140623Rockman XRockman X
洛克人X
Read more

CSS 橢圓陰影效果: 使用 after 和 z-index

eclipse shadow

今天學到一招覺得很好用,就記錄一下。可以看上圖是最後效果,在css3的box-shadow很方便,可是要做成像上面那樣陰影是有弧度的就沒辦法直接做,不過可以用一些小技巧就可以達成。

首先準備一個div,class取成box。

box可以改成你要的樣式,然後用:after在box後面生成一個新的物件,再加一些效果就好了。

  1. .box::after{   
  2.     content" ";   
  3.     display:block;   
  4.     width:100%;   
  5.     position:absolute;   
  6.     border-radius:50%;   
  7.     box-shadow:0 10px 5px #ccc;   
  8.     z-index:-1;   
  9. }  

這個效果很方便,有興趣可以試試看。

Demo
Read more

2013年4月26日 星期五

GFF (Gundam Fix Figuration)

GFF (Gundam Fix Figuration)剛出的時候我覺得這種全部上好色的模型很棒,可是買回來後才發現他的可動性很差,料又太軟,零件很容易掉,加上單價算高,買了這三隻後就沒再收了。

FA GundamFA Gundam
#0001 FA-78-1 "Full Armor Gundam"
值得紀念的第一彈全裝甲鋼彈,到目前為止也還沒出HGUC版本。

FA GundamFA Gundam
Read more

FlickrLinkr- php版

因為之前的FilckrLinkr主機掛了,所以他離開了好一陣子,最近因為寫lab的網站,有用到flickr api,乾脆再練習用php寫一個,花了兩天完成,不過後來朋友說他要再搬到新主機了,所以目前可能很多不好使用的部分,我就不管他啦。

FlickrLinkr
因為要撈封面圖片很花時間,所以這次我就重新排了一下版,不show封面照片了,速度快很多,反正要看封面,可以在flickr看就很漂亮了。

FlickrLinkr
進去的頁面目前是這樣,這樣我就可以再用來搭配寫網誌啦。

FlickrLinkr- php版
目前還只能用flickr id找相簿,不知道自己flickr id的可以用這個服務idGettr來查id。

Read more

ACE op

ACE


ACE 2


ACE 3


ACE R


收集一下ACE(Another Century's Episode)的開場動畫,算是射擊版的機器人大戰。

Read more

2013年4月24日 星期三

初音電腦戰機

電脳戦機バーチャロン シリーズ フェイ・イェンHD

看到Bandai推出這隻,當下還滿囧的,不過看到初音要在機戰UX 登場,就趕快跑去買回收藏了,因為覺得這種沒有動畫作品的模型,是不大可能會出太多版本的模型的。

電脳戦機バーチャロン シリーズ フェイ・イェンHD
電脳戦機バーチャロン シリーズ フェイ・イェンHD
其實把初音跟電腦戰機結合在一起還滿屌的,這樣讓這個人氣(?)角色也可以在機戰登場了。
Read more

Flash AS3 光暈濾鏡

因為設計師設計在點了某一個物件要有發光的效果,就去找AS3的filter,把樣都設定好再套到想要套的物件上就好了。

  1. import flash.display.Sprite;    
  2. import flash.filters.BitmapFilterQuality;    
  3. import flash.filters.GlowFilter;    
  4.   
  5. var glow:GlowFilter = new GlowFilter();    
  6. glow.color = 0x009922;    
  7. glow.alpha = 1;    
  8. glow.blurX = 25;    
  9. glow.blurY = 25;    
  10. glow.quality = BitmapFilterQuality.MEDIUM;    
  11.     
  12. mc.filters = [glow]; //加到要套的mc上  

ActionScript 3.0 光暈濾鏡
Read more

2013年4月23日 星期二

Flash AS3 延遲執行

最近要寫一個flash的選擇題,因為這次要求是選完後,會給正確答案,延遲幾秒後再跳到下一題,所以需要這樣的效果。

  1. var delayStart:Timer = new Timer(3000, 1);   
  2.   
  3. delayStart.addEventListener(TimerEvent.TIMER_COMPLETE, goPlay);   
  4. delayStart.start();   
  5. function goPlay(e:TimerEvent):void{   
  6.     //do something   
  7. }   

Read more

jQuery 製作分頁 Plugin

pagination

資料量一大,就不能避免做分頁,做分頁的方法很多種,可以一開始就把資料都讀入,然後再選擇是否出現,或是點了分頁之後,再去讀取資料都可以,server端的好解決,前端的就要花一些功夫,還好也滿多plugin可以用的,這個則是最近使用的plugin。

Plugin位置
jQuery Pagination Plugin

下載後可以參考他的sourecode,簡單的說要有一個地方放頁碼,一個地方放資訊內容,plugin幫你處理頁碼的分頁,然後經由callback再去處理要呈現的內容。

我用一個id="list"來放資訊內容,用id="pagination"來放頁碼。

先把頁面讀入
  1. $("#list").load("group_member.html"null, initPagination);   

初始化
  1. var initPagination = function() {   
  2. $("#pagination").pagination(30 //資料數目, {   
  3.     num_edge_entries: 2, //兩側頁碼數目   
  4.     num_display_entries: 3, //中間顯示的頁碼數目   
  5.     current_page:0, //目前頁, 預設是0   
  6.     ellipse_text:"..."//省略的頁碼用什麼表現, 預設是"..."   
  7.     callback: pageselectCallback, //回傳資料   
  8.     items_per_page: 10, //每頁呈現筆數   
  9.     prev_show_always: true//是否顯示上一頁按鈕   
  10.     next_show_always: true//是否顯示下一頁按鈕   
  11.     prev_text: "prev"//上一頁呈現文字   
  12.     next_text: "next" //下一頁呈現文字   
  13. });   
  14. };   

最後處理callback要呈現的資料
  1. function pageselectCallback(page_index, jq){   
  2.     page_end=page_index+10;   
  3.     $("#list li").hide();   
  4.     for($i=page_index; $i<page_end; $i++){   
  5.         $("#list li").eq($i).show();   
  6.     }      
  7.     return false;   
  8. }  

Demo

Read more

2013年4月22日 星期一

css 取消選取時的 highlight 效果

之前用::selection去改變選取後的顏色失敗,原因不明,今天又找到另一種方法,至少目前測試是成功的。

  1. .unselectable {   
  2.    -moz-user-select: -moz-none;   
  3.    -khtml-user-select: none;   
  4.    -webkit-user-select: none;   
  5.    -ms-user-select: none;   
  6.    user-select: none;   
  7. }  

這個也是要慎用,是因為要改變原本browser的行為,讓他操作起來像windows,所以才需要把一些browser預設的行為改掉,才會去用這個CSS的。
Read more

jquery 網頁黑白效果

black-white

今天因為看到有人在討論中國大陸網站為了弔念川震死傷的人,很多網站都變成黑白,才知道有這麼一個方便的jquery plugin可以直接把頁面變成黑白的。

Plugin下載
jQuery.BlackAndWhite

引入plugin後直接照範例使用就好了。
  1. $(window).load(function(){   
  2.     $('.bwWrapper').BlackAndWhite({   
  3.         hoverEffect : true// default true   
  4.         // set the path to BnWWorker.js for a superfast implementation   
  5.         webworkerPath : false,   
  6.         // for the images with a fluid width and height    
  7.         responsive:true,   
  8.         // to invert the hover effect   
  9.         invertHoverEffect: false,   
  10.         speed: { //this property could also be just speed: value for both fadeIn and fadeOut   
  11.             fadeIn: 200, // 200ms for fadeIn animations   
  12.             fadeOut: 800 // 800ms for fadeOut animations   
  13.         }   
  14.     });   
  15. });  

注意他的寫法,要使用的元素要把position設為relative
  1. .bwWrapper {   
  2.     position:relative;   
  3.     display:block;   
  4. }  

Demo

Read more

用 photoshop 製作 ico 檔

在公司因為作windows/mac agent,需要製作.ico格式的圖片,查了一下發現photoshop裝個plig-in就可以了。

首先下載plig-in: http://www.telegraphics.com.au/sw/

下載一個符合你的OS跟photoshop版本的plug-in,放到電腦裡的photoshop資料夾下的plug-in底下,然後重新開啟photoshop,另存新檔時就可以存成ico檔了。

Read more

2013年4月21日 星期日

[轉輪科技] Super Valkyrie VF-1J

Super Valkyrie VF-1J

老實說初代超時空要塞的女武神我到現在都還分不大清楚,這隻也是轉輪比較早期的套件,轉輪在超時空要塞其實表現的還不錯,只是看起來滯銷的還滿嚴重的。

Super Valkyrie VF-1J
Super Valkyrie VF-1J
VF-1J:火力加強型,換裝九星重工製新型頭部莢艙,原先裝置於頭部的ROV-20雷射砲增為兩門,其他與VF-1A大致相同。由於這批飛機全在日本工廠製造,故付與「J」之型號。
Read more

2013年4月20日 星期六

互動科技創意設計實驗室(ITCD) 活動集錦- 使用flickr api

互動科技創意設計實驗室

想說相簿就上傳到filckr,之後再去用他的api把照片讀回網站就好,昨天就實作出來了。

互動科技創意設計實驗室 活動集錦

不過phpFlickr我都找不到他的文件在哪,查了好久,總覺得繞好大一圈才找到抓封面照片的方法,不知道有沒有更方便的api可以用就是了。
  1. $flickr_set="photo set id";   
  2. $photosSetInfo = $f->photosets_getInfo($flickr_set);   
  3. $primPhoto=$photosSetInfo['primary']; //取得photo set 封面   
  4. $primPhoto = $f->photos_getInfo($primPhoto);     
  5. $photo_url=$f->buildPhotoURL($primPhoto["photo"], "Square");  

Read more

2013年4月19日 星期五

使用 flickr API (phpFlickr) 抓取相簿相片

最近有需要所以也看了一下 Flickr 的 API,找了一下資料,想用的話應該很方便,這邊做一下筆記。

首先到 Flickr 申請一個 api key

因為我是用php寫的,有人寫好一個很方便的套件,到 phpFilckr 去下載就可以了。

下載後引入php,因為我要抓一整本相簿的相片,所以像這樣去寫
  1. require_once('phpFlickr.php');   
  2. $key="你的 api key";    
  3. $f = new phpFlickr($key);   
  4. $photoset_id = '你的相簿id';   
就可以抓回一整本相簿。
Read more

2013年4月18日 星期四

模擬 windows 操作的 ctrl 跟 shift 選取

select

最近因為有需求,所以自己寫了一個模擬windows操作的行為,一般web的操作行為大概就是click, hover那些比較單純的行為,而這次是要做類似windows可以用ctrl跟shift選取的行為。

首先準備簡單的ul, li結構的列表,並寫簡單的css樣式。

  1. li{   
  2.     padding:10px;   
  3.     cursor:pointer;   
  4.     border-bottom:1px solid #7ebade;   
  5. }   
  6. li:hover{   
  7.     background:#e3f5ff;   
  8. }   
  9. li.selected{   
  10.     background:#c4e9ff;   
  11. }  
Read more

真實風格氣象圖示

多雲 多雲時晴 多雲轉雨
晴轉多雲(夜) 多雲時晴轉雨(夜) 晴時多雲轉雨(夜)
多雲時晴(夜) 晴時多雲(夜)
雨轉多雲 雨轉多雲時晴(夜) 雨轉多雲時晴
雨轉晴(夜) 雨轉多雲時晴(夜) 雨轉晴
雨轉晴時多雲 晴時多雲
晴轉多雲 晴轉雨 晴時多雲轉雨
雷陣雨 晴(夜)
Read more
Related Posts Plugin for WordPress, Blogger...