2013年11月30日 星期六

jQuery 自動跳到下一個 input 欄位

要做信用卡或序號輸入的話會用到。

用法很單純,首先 input 上都要給 maxlength ,然後偵測輸入的長度等於 maxlength 就自動跳下一個就好了。

  1. $('input').keyup(function(e){   
  2.     if($(this).val().length==$(this).attr('maxlength'))   
  3.     $(this).next(':input').focus();   
  4. });  
Read more

2013年11月29日 星期五

AngularJS 製作頁籤

頁籤也是在一般網頁很常用到的 UI ,不過 Angular 實作起來跟 jQuery 差好多阿..

首先準備 html
  1. <div ng-controller="tabController" class="wrapper">  
  2.     <ul class="clearfix">  
  3.                 <li ng-repeat="tab in tabs"    
  4.                 ng-class="{active:isActiveTab(tab.url)}"    
  5.                 ng-click="onClickTab(tab)">{{tab.title}}</li>  
  6.     </ul>  
  7.     <div id="mainView">  
  8.         <div ng-include="currentTab"></div>  
  9.     </div>  
  10.     <script type="text/ng-template" id="one.tpl.html">  
  11.         <a href="http://www.flickr.com/photos/deathhell/6861320435/" title="Flickr 上 紅色死神 的 Cutman"><img src="http://farm8.staticflickr.com/7205/6861320435_87faa1786a.jpg" width="500" height="500" alt="Cutman"></a>  
  12.     </script>  
  13.     <script type="text/ng-template" id="two.tpl.html">  
  14.         <a href="http://www.flickr.com/photos/deathhell/6861320497/" title="Flickr 上 紅色死神 的 Gutsman"><img src="http://farm8.staticflickr.com/7193/6861320497_f9b2492d24.jpg" width="500" height="500" alt="Gutsman"></a>  
  15.     </script>  
  16.     <script type="text/ng-template" id="three.tpl.html">  
  17.         <a href="http://www.flickr.com/photos/deathhell/6861320569/" title="Flickr 上 紅色死神 的 Iceman"><img src="http://farm8.staticflickr.com/7038/6861320569_36165752d5.jpg" width="500" height="500" alt="Iceman"></a>  
  18.     </script>  
  19.     <script type="text/ng-template" id="four.tpl.html">  
  20.         <a href="http://www.flickr.com/photos/deathhell/6861320811/" title="Flickr 上 紅色死神 的 Fireman"><img src="http://farm8.staticflickr.com/7064/6861320811_c9343a33e2.jpg" width="500" height="500" alt="Fireman"></a>  
  21.     </script>  
  22. </div>  

簡單說就是用 text/ng-template 來依各分頁做樣板,然後在點 tab 的時候各別去顯示該顯示的內容。

javascript 部分
  1. function tabController($scope){   
  2.     $scope.tabs = [{   
  3.         title: 'Cutman',   
  4.         url: 'one.tpl.html'  
  5.     }, {   
  6.         title: 'Gutsman',   
  7.         url: 'two.tpl.html'  
  8.     }, {   
  9.         title: 'Iceman',   
  10.         url: 'three.tpl.html'  
  11.     }, {   
  12.         title: 'Fireman',   
  13.         url: 'four.tpl.html'  
  14.     }];   
  15.            
  16.     $scope.currentTab = 'one.tpl.html';   
  17.   
  18.     $scope.onClickTab = function (tab) {   
  19.             $scope.currentTab = tab.url;   
  20.     }   
  21.            
  22.     $scope.isActiveTab = function(tabUrl) {   
  23.             return tabUrl == $scope.currentTab;   
  24.     }   
  25. }  

Demo

參考
AngularJS: Simple Tabs

Read more

2013年11月28日 星期四

AngularUI 日期選取器- 選取時間區間

最近在練習 Angular 跟 AngularUI ,其實手邊同時在進行新玩的東西好多..

有一個需求是使用 Angular 來做 DatePicker ,因為有一個結合 Bootstrap 的 AngularUI 有這個功能,於是就參考他的寫法改了一個可以選取時間區間的 UI。

首先設好 AngularUI 的環境,他方便的是都有 cdn 可以用,複製一下就可以在本機端直接實作了。

準備 html:
  1. <div class="wrapper" ng-controller="Datepicker1" >  
  2.     <div class="form-horizontal">  
  3.         <p>  
  4.             <input type="text" datepicker-popup="{{format}}" ng-change="toggleMin()" ng-model="dt" is-open="opened"  datepicker-options="dateOptions" max="maxDate" ng-required="true" close-text="Close" />  
  5.         </p>  
  6.         <p>  
  7.             <input type="text" datepicker-popup="{{format}}" ng-model="dt2" is-open="opened2"  datepicker-options="dateOptions" ng-required="true" min="minDate" ng-change="toggleMax()"  close-text="Close" />  
  8.         </p>  
  9.     </div>  
  10. </div>  

因為要選擇一個區間,所以除了兩個顯示選取時間的 input 欄位要各自的 model 外,我還各自放了 ng-change="toggleMin()", max="maxDate" 和 min="minDate" ng-change="toggleMax()" ,用以偵測在一邊改變後,是另一個欄位的最大(小)值。

  1. angular.module('plunker', ['ui.bootstrap']);   
  2. var Datepicker1 = function ($scope, $timeout) {   
  3.   $scope.today = function() {   
  4.     $scope.dt = new Date();   
  5.     $scope.dt2 = new Date();   
  6.   };   
  7.   $scope.today();   
  8.   
  9.   $scope.toggleMin = function() {   
  10.     $scope.minDate = $scope.dt;    
  11.   };   
  12.   $scope.toggleMin();   
  13.   $scope.toggleMax = function() {   
  14.     $scope.maxDate = $scope.dt2;   
  15.   };   
  16.   $scope.toggleMax();   
  17.   
  18.   $scope.open = function() {   
  19.     $timeout(function() {   
  20.       $scope.opened = true;   
  21.     });   
  22.   };   
  23.   $scope.open2 = function() {   
  24.     $timeout(function() {   
  25.       $scope.opened2 = true;   
  26.     });   
  27.   };   
  28.   
  29.   $scope.dateOptions = {   
  30.     'year-format'"'yy'"  
  31.   };   
  32.   
  33.   $scope.formats = ['dd-MMMM-yyyy''yyyy/MM/dd''shortDate'];   
  34.   $scope.format = $scope.formats[0];   
  35. };  

Demo

Read more

2013年11月26日 星期二

全日本動畫機器人大全集

動畫機器人大全集

目前有三本,70~80年代、90年代和2000年代篇,介紹機器人動畫作品的概述,和機體還有一些作品相關的關鍵字和專有名詞,喜歡機器人作品的很值得買回來收藏,這個也會是我未來繼續製作 RoboInfo 很重要的參考書。

Read more

2013年11月23日 星期六

LBB 武者頑駄無

武者頑駄無

最經典的武者頑駄無,在這幾年 BANDAI 技術進步後,以 LBB(Legend BB)的系列重新出了。LBB 兼顧可動性及 SD 的造型,加上友善的分件,讓系列的表現好的沒話說。

武者頑駄無武者頑駄無
Read more

2013年11月21日 星期四

Flash 的 Map Editor

年初幫一間公司做的地圖編輯器,主要是用陣列分別儲存地形跟建築物,點了左邊的項目再到右邊去更換,換右邊 UI 的同時儲存陣列就好了。

Map Editor
Map Editor

對方找的美工超強,聽他說已經接案十幾年了,給我看的作品也是各種風格都有,台灣也有很多功力超強的人呢。

Read more

jQuery 限制數字輸入

之前找的 plugin 有點雞婆,還會處理掉數字開頭的 0 ,所以再找一個不去判斷要把前面給去的 plugin ,整段 code 在下。

  1. (function($){    
  2.     $.fn.decimalOnly = function() {   
  3.        $(this).keydown(function(event) {   
  4.             // Allow: backspace, delete, tab, escape, and enter   
  5.             if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||    
  6.                  // Allow: Ctrl+A   
  7.                 (event.keyCode == 65 && event.ctrlKey === true) ||    
  8.                  // Allow: home, end, left, right   
  9.                 (event.keyCode >= 35 && event.keyCode <= 39)   
  10.                ) {   
  11.                      // let it happen, don't do anything   
  12.                      return;   
  13.             } else    
  14.             if (event.keyCode == 190) {  // period   
  15.                 if ($(this).val().indexOf('.') !== -1) // period already exists   
  16.                     event.preventDefault();   
  17.                 else  
  18.                     return;   
  19.             } else {   
  20.                 // Ensure that it is a number and stop the keypress   
  21.                 if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {   
  22.                     event.preventDefault();    
  23.                 }      
  24.             }   
  25.         });   
  26.     }   
  27.     
  28.     $.fn.numericOnly = function() {   
  29.         $(this).keydown(function(event) {   
  30.              // Allow: backspace, delete, tab, escape, and enter   
  31.              if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 ||    
  32.                   // Allow: Ctrl+A   
  33.                  (event.keyCode == 65 && event.ctrlKey === true) ||    
  34.                   // Allow: home, end, left, right   
  35.                  (event.keyCode >= 35 && event.keyCode <= 39)   
  36.                 ) {   
  37.                       // let it happen, don't do anything   
  38.                       return;   
  39.              } else {   
  40.                  // Ensure that it is a number and stop the keypress   
  41.                  if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {   
  42.                      event.preventDefault();    
  43.                  }      
  44.              }   
  45.          });   
  46.      }   
  47. })(jQuery);  

引入後再去使用就好了,除了整數外也可以限制輸入的格式為帶小數點的數字。
  1. $("#age").numericOnly();   
  2. $("#weight").decimalOnly();  

原文連結:
Writing a jQuery plugin to allow only numeric or decimal input
Read more

2013年11月18日 星期一

Bootstrap, jQuery 樣式化 select 外掛

本來 html 的 select 就不大能樣式化,本來只是改變 select 的高度,後來發現 Mac 的 chorme 跟 safari 都不支援,我想有需求還是用 plugin 好了。

網路上有很多,我這邊找了兩個來用。

Bootstrap-select
這個是 bootstrap 的,引入該引入的。
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>   
  2. <script type="text/javascript" src="bootstrap-select.js"></script>   
  3. <link rel="stylesheet" type="text/css" href="bootstrap-select.css">   
  4.   
  5. <!-- 3.0 -->   
  6. <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">   
  7. <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>  

html的結構就照舊就好了, plugin 會自動把 html 變成可以樣式化的 tag,然後使用 plugin。

  1. $('select').selectpicker();  

不過如果一開始沒用 bootstrap ,回頭要改樣式就很痛苦,於是另一個是用純 jQuery 的 jquery-selectbox

同樣引入該引入的(js 跟 css),就可以用了。
  1. $('select').selectBox();  

Read more

2013年11月16日 星期六

Facebook dialog

最近的 case 要用到發布訊息到 facebook 的功能,因為簡單的 social plugin 只能按讚,需要加上一些特定的訊息就會需要用到 fb 的 api 了。


官方文件:Facebook Dialog

首先到 Facebook developers到新增一個 app ,並且記下APP ID。
Facebook 設定

APP 的這邊要設定要使用 API 的網址。
Facebook 設定

再來是照官方的文件貼上這段。
  1. <div id="fb-root"></div>   
  2. <script>   
  3.   window.fbAsyncInit = function() {   
  4.     // init the FB JS SDK   
  5.     FB.init({   
  6.       appId      : 'YOUR_APP_ID',                        // App ID from the app dashboard   
  7.       channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel file for x-domain comms   
  8.       status     : true,                                 // Check Facebook Login status   
  9.       xfbml      : true                                  // Look for social plugins on the page   
  10.     });   
  11.   
  12.     // Additional initialization code such as adding Event Listeners goes here   
  13.   };   
  14.   
  15.   // Load the SDK asynchronously   
  16.   (function(d, s, id){   
  17.      var js, fjs = d.getElementsByTagName(s)[0];   
  18.      if (d.getElementById(id)) {return;}   
  19.      js = d.createElement(s); js.id = id;   
  20.      js.src = "//connect.facebook.net/en_US/all.js";   
  21.      fjs.parentNode.insertBefore(js, fjs);   
  22.    }(document, 'script''facebook-jssdk'));   
  23. </script>  

官方文件是說 channelURL 是用來處理 cache 跟 x-domain 的,可以不填。

  1. FB.ui({   
  2.   method: 'feed',   
  3.   link: 'https://developers.facebook.com/docs/dialogs/',   
  4.   caption: 'An example caption',   
  5.   description: (   
  6.       'description here'  
  7.   ),   
  8.   picture: 'example.jpg'  
  9. }, function(response){});  

之後貼上這段,可以在各個選項填上值,然後再看要在哪個地方呼叫就可以了。
Read more

2013年11月14日 星期四

2013年11月13日 星期三

jQuery 偵測滑鼠捲動與停止滑鼠捲動觸發的效果

最近想嘗試寫一個頁面在捲動的時候,圖片也會有動畫的效果,馬上想到的是原本是靜態的,在頁面捲動的時候變成動畫,不捲動了就恢復成靜態的圖片,於是需要偵測滑鼠滾輪的開始跟結束的事件。

可是因為 browser 有偵測開始的事件,卻沒有偵測結束的事件,查了一下看到有人是使用偵測滑鼠事件後,隔一段時間再把事件給清掉,就可以達成我想要的效果。

  1. $(window).scroll(function(){   
  2.     $("#cat").addClass("walk");   
  3.     timer = setTimeout( refresh , 500 );   
  4. });   
  5. var refresh = function () {    
  6.     $("#cat").removeClass("walk");   
  7. };  

Demo

不過效果沒有很好,之後再看有沒有更好的方法。
Read more

2013年11月10日 星期日

jQuery 產生 json 並使用 cookie 在 web 間傳遞

最近在寫的東西。

  1. $shopping_list=[]; //create object   
  2. $(data).each(function(){   
  3.     $itemId=$(this).attr("iditem");   
  4.     $itemPrice=$(this).attr("$itemPrice");   
  5.     $itemName=$(this).attr("$itemName");   
  6.     $shopping_list.push({   
  7.         idItem: $itemId,   
  8.         itemPrice: $itemPrice,   
  9.         Name: $itemName   
  10.     });   
  11. });   
  12. //轉成字串存入 cookie   
  13. $.cookie("shop-data", JSON.stringify($shopping_list));  

jQuery 存取 cookie 可以使用這隻外掛
jquery-cookie

要讀取的話
  1. $.cookie("shop-data");  

將JSON轉回物件
  1. JSON.parse(JSONString);   


清除的話給 null 值就可以了。

  1. $.cookie("name"null);  


不過如果產生的 cookie 在不同的 path,就會無法清除,這時只要在產生的時候給他 path。

  1. $.cookie('name''value', { path: '/' });  


再像這樣就可以清除了。

  1. $.cookie("name"null, { path: '/' });  


參考
jquery save json data object in cookie
Creating a Json Cookie Array?

Read more

2013年11月8日 星期五

premiere 製作投影片

用 premiere 製作投影片其實很方便,照片拉一拉,轉場調一調就可以直接產出了。

1. 把照片拉到專案內後,選取要匯入的照片,在選擇下面的 Automatic to Sequence
premiere 製作投影片

2. 匯入前可以選擇一些設定,下面的 transitions 可以打勾選擇預設的轉場效果
premiere 製作投影片
Read more

2013年11月6日 星期三

2013年11月2日 星期六

javascript Date 和 timestamp 互轉

最近要比較日期,比較日期的話轉成 timestamp 會比較好比較,記一下兩邊互轉的方法。

  1. /* date to timestamp */  
  2. var myDate="mm-dd-yyyy"//or yyyy-mm-dd   
  3. new Date(myDate).getTime(); //Date 內無值的話為當前時間   
  4.   
  5. /* timestamp to date */  
  6. new Date2=new Date(timestamp);  

這邊 safari 有踩到地雷,日期格式用 yyyy-mm-dd 會有問題,要用 yyyy/mm/dd 或 ('Feb 15, 2012') 或 (2012, 1, 15, 0, 0, 0, 0) 才不會回傳 NaN。

Read more
Related Posts Plugin for WordPress, Blogger...