Find file
Fetching contributors…
Cannot retrieve contributors at this time
2391 lines (1652 sloc) 104 KB
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title><![CDATA[apa]]></title>
<link href="http://blog.rx836.tw/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
<updated>2013-06-13T18:53:28+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
</author>
<generator uri="http://octopress.org/">Octopress</generator>
<entry>
<title type="html"><![CDATA[[jQ-Plugin] 如何減少User密碼輸入錯誤?]]></title>
<link href="http://blog.rx836.tw/blog/hide-show-passwords/"/>
<updated>2013-06-13T18:35:00+08:00</updated>
<id>http://blog.rx836.tw/blog/hide-show-passwords</id>
<content type="html"><![CDATA[<p><img src="http://farm8.staticflickr.com/7394/9032388794_c9ce2d4e25_o.jpg" /></p>
<p>&#8220;Becaues life&#8217;s too short waste time re-typing passwords&#8221;</p>
<p>生命短暫,別浪費時間重新輸入你的密碼</p>
<!--more-->
<p>在製作登入頁面時,常會使用到 &lt;input type=&#8221;password&#8221; &gt; 這個輸入密碼的 HTML 控制項,預
設的情況下,當你在密碼輸入框輸入密碼時,都會出現‧‧‧這樣的小黑點</p>
<p>好處是可以防止旁人知道你輸入的密碼是什麼,但好意有時候會讓人覺得不方便,尤其這個狀況發生在
移動裝置時</p>
<p>怎麼說呢?原因出在於移動裝置設備通常因為螢幕尺寸大小的關係,鍵盤通常不好點擊,以 IPHONE 為
例,當我想點 G 的時候,可能因為我的手指肥大,而點到旁邊的H,雖然每次點擊時,輸入框上面會秀
出當下所按的字母,但總是有時候會忽略的時候,如果突然手一個不順,自己到底有沒有輸入正確,恐
怕很難曉得,所以如果能讓使用者選擇切換,是否可以看的到密碼,或許是個不錯的使用者體驗</p>
<h2>Start</h2>
<p>詳細的範例可以從 github</p>
<p><a href="https://github.com/cloudfour/hideShowPassword#hideshow-password-plugin-for-jqueryzepto" target="_balnk">Download</a></p>
<p>這裡做個簡單的範例</p>
<p>HTML部份</p>
<pre><code>&lt;div class='bogus-wrapper'&gt;&lt;notextile&gt;&lt;figure&gt;
&lt;div class="login"&gt;
&lt;input type="text" placeholder="Username" &gt;
&lt;input id="password-1" type="password" placeholder="Password"&gt;
&lt;/div&gt;
&lt;figcaption&gt;Inner toggle styled as icon.&lt;/figcaption&gt;
&lt;/figure&gt;&lt;/notextile&gt;&lt;/div&gt;
</code></pre>
<p>CSS部份</p>
<pre><code>.hideShowPassword-toggle {
background-image: url(img/wink.svg);
background-position: 0 center;
background-repeat: no-repeat;
cursor: pointer;
height: 100%;
overflow: hidden;
text-indent: -9999em;
width: 44px;
}
</code></pre>
<p>這裡最主要是幫切換的按鈕做修飾,如同github裡面的範例一樣加上圖片</p>
<p>js部份</p>
<pre><code>&lt;script type="text/javascript" src="vendor/jquery.js"&gt;&lt;/script&gt;
&lt;script src="hideShowPassword.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
// Example 1
$('#password-1').hideShowPassword({
// Creates a wrapper and toggle element with minimal styles.
innerToggle: true
});
&lt;/script&gt;
</code></pre>
<p>以上是簡單的實做範例,會出現一個眼睛讓你做切換是否顯示密碼</p>
<p><img src="http://farm6.staticflickr.com/5451/9032954004_208664f24e_o.jpg" /></p>
<p>還有其他 methods 可以應用</p>
<pre><code>$('#password').showPassword(); // Reveal
$('#password').hidePassword(); // Hide
$('#password').togglePassword(); // Toggle
</code></pre>
<p>或是</p>
<pre><code>$('#password').hideShowPassword(true); // Reveal
$('#password').hideShowPassword(false); // Hide
$('#password').hideShowPassword('toggle'); // Toggle
</code></pre>
<p>利用這些可以自己用 checkbox 來切換,做出一樣的效果</p>
<p>這裡有 <a href="http://cloudfour.github.io/hideShowPassword/" target="_blank">完整的範例</a> 可以看</p>
<h2>參考資料:</h2>
<p><a href="http://blog.cloudfour.com/hide-show-passwords-plugin/" target="_blank">Hide/Show Passwords: The Missing Plugin</a></p>
<p><a href="http://www.lukew.com/ff/entry.asp?1653" target="_blank">Mobile Design Details: Hide/Show Passwords</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[CSS3] 利用transform替網頁做小巧思]]></title>
<link href="http://blog.rx836.tw/blog/css3-transform/"/>
<updated>2013-06-11T17:37:00+08:00</updated>
<id>http://blog.rx836.tw/blog/css3-transform</id>
<content type="html"><![CDATA[<p><img src="http://farm4.staticflickr.com/3748/9013398826_44a5b35f7e_o.jpg" /></p>
<p>最近看到一個<a href="http://www.jiawin.com/demos/530/index.html" target="_blank">網站</a>,很酷的將許多CSS3給呈現出來,讓我開始思考怎麼運用在實做的網站上面</p>
<!--more-->
<p>但其實在這之前就做過類似的 CSS3 動畫學習筆記 - <a href="http://blog.rx836.tw/blog/css3-transitions-guide/" target="_blank">[CSS3] 認識CSS3 Transitions</a>,原理其實相差不
遠,不過那時並不知道可以運用在什麼地方,而這次發現可以將轉動的效果,運用在一些點擊的icon上面,讓網站較為活潑,而不再單調,當然,以下的動畫運用Flash也可以簡單的做到,但這
就不在這裡的討論範圍裡面,畢竟條條大路通羅馬</p>
<h2>Start</h2>
<p>我這裡運用的實例是,所謂的 lightbox(燈箱) 上面,常常可以看到在一些活動網站,點擊像活動辦法這種連結,就會有可能出現這樣的呈現方式</p>
<p><img src="http://farm4.staticflickr.com/3748/9013398826_44a5b35f7e_o.jpg" /></p>
<p>而這時候右上角通常都會有可以關閉的X按鈕,點擊後整個視窗就會消失,但為了讓這個 lightbox 不至於太過呆版,可以在關閉X按鈕上面加點巧思</p>
<p>首先是HTML部份</p>
<pre><code>&lt;div id="pop"&gt;
&lt;a id="close"&gt;&lt;/a&gt;
我是一個pop視窗我是一個pop視窗我是一個pop視窗我是一個pop視窗我是一個pop視窗
我是一個pop視窗我是一個pop視窗我是一個pop視窗我是一個pop視窗我是一個pop視窗
我是一個pop視窗我是一個pop視窗我是一個pop視窗我是一個pop視窗我是一個pop視窗
&lt;/div&gt;
</code></pre>
<p>這是一個常見的 lightbox 結構,當然不一定會長這樣</p>
<p>CSS部份</p>
<pre><code>#close {
background: url("http://farm8.staticflickr.com/7282/9011998137_f2d70ac0f8_o.png") no-repeat scroll 0 0 transparent;
height: 32px;
position: absolute;
right: 1px;
top: 1px;
width: 32px;
}
#pop {
background-color: #C5FF40;
height: 150px;
padding: 40px 0 0;
position: relative;
width: 500px;
}
</code></pre>
<p>簡單的用一個 &lt;div&gt; 包住內容和x關閉按鈕,關閉按鈕是用 &lt;a&gt; 來做,加上背景圖案,接著就是整個動畫的重點所在</p>
<pre><code>a#close:hover {
-webkit-animation:example 1s ease 0s alternate none infinite;
-moz-animation:example 1s ease 0s alternate none infinite;
animation:example 1s ease 0s alternate none infinite;
}
@-webkit-keyframes example { from{-webkit-transform:rotate(0deg); } to{-webkit-transform:rotate(360deg); } }
@-moz-keyframes example { from{-moz-transform:rotate(0deg); } to{-moz-transform:rotate(360deg); } }
@keyframes example { from{transform:rotate(0deg); } to{transform:rotate(360deg); } }
</code></pre>
<p>關鍵在於做 hover 時,觸發 animation,至於裡面的屬性可以參考我之前寫的 <a href="http://blog.rx836.tw/blog/css3-transitions-guide/" target="_blank">文章</a> 或是參考
<a href="http://www.w3schools.com/css3/" target="_bank">w3schools.com</a>,這裡不多加說明</p>
<p>可以發現當滑鼠移到x關閉按鈕時,會有旋轉的效果</p>
<p><a href="http://jsfiddle.net/sWUVv/" target="_blank">範例</a></p>
<p>這樣不僅可以提升使用者經驗,也可以讓網頁不在單調</p>
<p>當然我相信一定還有許多CSS3應用,等待著你我發掘:)</p>
<h2>參考資料:</h2>
<p><a href="http://www.w3schools.com/css3/" target="_blank">CSS3 教程</a></p>
<p><a href="http://www.jiawin.com/demos/530/index.html" target="_blank">http://www.jiawin.com/demos/530/index.html</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[jQ-Plugin] 自製 Pinterest 分享圖片 plugin ]]></title>
<link href="http://blog.rx836.tw/blog/jquery-plugin-for-pinterest/"/>
<updated>2013-05-16T12:13:00+08:00</updated>
<id>http://blog.rx836.tw/blog/jquery-plugin-for-pinterest</id>
<content type="html"><![CDATA[<p><img src="https://si0.twimg.com/profile_images/2725838700/32f4e2dce13c0b983003eaa10efea6a5.png" /></p>
<p>大部分的網站要與社群做結合,多以FB、G+、Twitter、或是微博等為主,但這幾天看到一篇文章,是連結 <a href="http://pinterest.com/" target="_blank">Pinterest</a> 來做為分享圖片的對象,在此特別紀錄</p>
<!--more-->
<p>為了以後重複使用,我們可以將這部份的需求寫成一個plugin,至於要做甚麼呢?其實很簡單,就是當滑鼠移到圖片時,右下角浮現出 Pinterest 分享圖片的小icon</p>
<p><img src="https://lh6.googleusercontent.com/-3uQelUPbt2g/UZSmojbUPxI/AAAAAAAACcA/uPWSGQBZYoQ/w170-h167-no/2013-05-16_162143.jpg" /></p>
<p>按下以後,就會跳出 Pinterest 的登入畫面(假如沒登入的話),接著就是看要將圖片 pin 到哪個Board</p>
<p><img src="https://lh6.googleusercontent.com/-XgxZfhKtXHg/UZSmpJlu9TI/AAAAAAAACcI/hrXNi19FHlc/w856-h463-no/2013-05-16_162258.jpg" /></p>
<h2>Start</h2>
<p>首先我們需要知道製作 jQuery plugin 的基本樣板</p>
<pre><code>(function( $ ) {
$.fn.pinterest = function(options) {
var settings = $.extend( {
}, options);
return this.each(function() {
$.fn.pinterest
});
};
})( jQuery );
</code></pre>
<p><strong>$.fn.pinterest</strong>就是呼叫這個 plugin 的名稱,所以也可以取自己喜歡的名稱,接著是準備『分享』的小icon</p>
<p><img src="http://business.pinterest.com/assets/img/builder/builder_opt_1.png" /></p>
<p>不過為了可以方便以後替換,我們可以寫成這樣</p>
<pre><code>(function( $ ) {
$.fn.pinterest = function(options) {
var settings = $.extend( {
//做為參數設定
'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
}, options);
return this.each(function() {
});
};
})( jQuery );
</code></pre>
<p>接著我們需要添加一些 html 元素到圖片上面,包括分享的小圖片</p>
<pre><code>(function( $ ) {
$.fn.pinterest = function(options) {
var settings = $.extend( {
'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
}, options);
return this.each(function() {
img = $(this);
img.wrap('&lt;span class="pin-it" style="position: relative;" /&gt;');
img.parent('span.pin-it').append('&lt;img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" /&gt;');
});
};
})( jQuery );
</code></pre>
<p>以上的code主要是替 img 用一個 span 包起來,再將分享小圖片放置在圖片右下角</p>
<p>接著加上 on_click 和 on_hover_in 事件</p>
<pre><code>(function( $ ) {
$.fn.pinterest = function(options) {
var settings = $.extend( {
'button' : 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'
}, options);
function on_click () {
};
function on_hover_in() {
$(this).siblings('img:first').show(500);
};
return this.each(function() {
img = $(this);
img.wrap('&lt;span class="pin-it" style="position: relative;" /&gt;');
img.parent('span.pin-it').append('&lt;img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" /&gt;');
img.hover(on_hover_in);
img.siblings('img:first').on('click', on_click);
});
};
})( jQuery );
</code></pre>
<p>on_hover_in是讓滑鼠移到圖片時,可以秀出右下角的分享圖片,當然效果可以依照自己喜歡去做修改</p>
<p>至於 on_click 部份,就是將圖片分享至 Pinterest</p>
<pre><code>function on_click () {
img = $(this).siblings('img:first');
description = img.attr('title');
url = document.location;
media = img.attr('src');
var pin_url = 'http://pinterest.com/pin/create/button/?url=' + encodeURIComponent( url ) +
'&amp;media=' + encodeURIComponent( media ) +
'&amp;description=' + encodeURIComponent( description );
window.open(pin_url, 'Pin - ' + description, 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
$(this).hide(1000);
};
</code></pre>
<p>利用 window.open 開啟一個分享視窗,pin_url 裡面的網址搭配參數,分別是</p>
<p>url:<strong>從哪個 url 分享而來,利用 document.location 語法取得</strong></p>
<p>media:<strong>利用 .attr() 取得該 img 的 src</strong></p>
<p>description:<strong>利用 .attr() 取得該 img 的 title</strong></p>
<p>當然,記得使用 encodeURIComponent 做編碼</p>
<p>最後,為了方便 img 的 src 不管是絕對路徑還是相對路徑都可以讓 pinterest 可以使用,要自動加上主機的網址路徑,例如: http://xxx.xxx.com/abc.jpg</p>
<pre><code>function getUrl(src){
var url = document.location.toString();
var http = /^https?:\/\//i;
if (!http.test(src)) {
if(src[0] == '/'){
url = url.substring(0, url.lastIndexOf('/')) + src;
} else {
url = url.substring(0, url.lastIndexOf('/')) + '/' + src;
}
} else {
url = src;
}
return url;
};
</code></pre>
<p>這樣只要將 media 那邊的程式碼改成</p>
<pre><code>media = getUrl( img.attr('src') );
</code></pre>
<p>就大功告成了,要使用時</p>
<pre><code>$(document).on('ready', function(){
//不喜歡預設圖可以直接這樣替換
$('img#share').pinterest({ button: 'pinterest-alt.png'});
});
</code></pre>
<p><a href="http://developerdrive.developerdrive.netdna-cdn.com/wp-content/uploads/2013/05/jquery-pinterest1.zip" target=""_blank>完整範例程式碼</a></p>
<h2>參考資料:</h2>
<p><a href="http://www.developerdrive.com/2013/05/creating-a-simple-jquery-plugin-for-pinterest/" target="_blank">Creating a simple jQuery plugin for Pinterest</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[jQ-Plugin] 利用jQuery做CSS Sprite效果]]></title>
<link href="http://blog.rx836.tw/blog/jquery-sprite/"/>
<updated>2013-02-28T20:53:00+08:00</updated>
<id>http://blog.rx836.tw/blog/jquery-sprite</id>
<content type="html"><![CDATA[<p><img src="https://lh5.googleusercontent.com/-NrgYmV2EGjs/US9R96MMebI/AAAAAAAACSw/nQUtJ_0HHqc/s372/css-sprite.gif" /></p>
<p>為了讓網站對Server的請求次數減少,有些人會運用到 <strong>CSS Sprite</strong> 的技巧,將所有的小圖合併成一張大圖,再利用 <strong>background-position</strong> 來進行定位,但事先的圖片合併規劃,為了算那些位置,不免覺得稍嫌麻煩,但其實有快速合併成大圖的方法,之前曾經寫過一篇<a href="http://blog.rx836.tw/blog/introduce-compass/" target="_blank">[CSS] 用了就無法回頭的Compass</a>,有興趣的人可以參考</p>
<!--more-->
<p>要運用 CSS Sprite 的技巧,要自己撰寫其實也不難,不過善用 <a href="http://yangkun.github.com/jquery-sprite/#usage" target="_blank">Jquery-sprite</a>,可以更容易來做到這件事情</p>
<h2>Start</h2>
<p>首先可以從 github 下載 js 檔</p>
<p><a href="https://github.com/yangkun/jquery-sprite" target="_blank">DOWNLOAD</a></p>
<p>html部份</p>
<pre><code>&lt;div id="swap"&gt;
&lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;a href="#"&gt;&lt;span class="google-sprite"&gt;&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>
<p>js部份</p>
<pre><code>$('#swap span.google-sprite').each(function(i) {
var sprite = $(this).sprite(googleOpts).hover(function() {
sprite.col(6);
},function() {
sprite.col(0);
});
sprite.row(i);
});
</code></pre>
<p>這邊利用 <strong>.each()</strong> 是因為範例有好幾張圖做變化,在每個圖上加上 <strong>.hover()</strong></p>
<h3>當滑鼠移入時</h3>
<p>就會變化到 <strong>sprite.col(6)</strong>,這個指定的位置</p>
<h3>當滑鼠移出時</h3>
<p>就會回到 <strong>sprite.col(0)</strong>,這個指定的位置</p>
<p>原理其實就是在大圖上面將每個小圖畫分位置,利用 row 和 col 的概念來變換相對的位置</p>
<p>想看更多的範例可以參考 <a href="http://yangkun.github.com/jquery-sprite/" target="_blank">這裡</a></p>
<h2>參考資料:</h2>
<p><a href="http://yangkun.github.com/jquery-sprite/" target="_blank">Jquery-sprite</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[jQ-Plugin] 在網站中加入星星評分效果]]></title>
<link href="http://blog.rx836.tw/blog/jquery-star-box/"/>
<updated>2013-01-29T11:46:00+08:00</updated>
<id>http://blog.rx836.tw/blog/jquery-star-box</id>
<content type="html"><![CDATA[<p><img src="https://lh4.googleusercontent.com/-p5vCtEt386M/UQdsNizReKI/AAAAAAAACQs/tylpU5zwd60/s188/2013-01-29_114734.jpg" /></p>
<p>評分功能常出現在一些商品陳列網站,像這種透過選幾顆星星來做評價,在許多網站都看的到,例如 <a href="http://tw.movie.yahoo.com/" target="_blank">YAHOO! 奇摩電影</a> 就有類似的功能,而這篇就是來介紹如何用 jQuery plugin- jStarbox 來實現這項應用</p>
<!--more-->
<h2>Start</h2>
<p>jStarbox檔案不到6k,算是相檔的輕巧,css樣式也不多,不會有那種讓人不知道如何修改起的煩惱,source code 可以直接去 github 下載回來</p>
<p><a href="https://github.com/sabberworm/jStarbox#getvalue" target="_blank">DOWNLOAD SOURCE</a></p>
<p>裡面有兩個資料夾分別是 images 和 css,還有一個 jstarbox.js 檔案,直接載入 css 和 js 檔到專案裡面,當然 jQuery 也不要忘了</p>
<pre><code>&lt;link href="css/jstarbox.css" rel="stylesheet"&gt;&lt;/link&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"&gt;&lt;/script&gt;
&lt;script src="jstarbox.js"&gt;&lt;/script&gt;
</code></pre>
<p>接下來是 html 部份</p>
<pre><code>&lt;div class="starbox"&gt;
&lt;/div&gt;
</code></pre>
<p>沒看錯,只要放個空元素在 html 上即可,並且給他一個 class 名稱方便等下操作,最後是 js 部份</p>
<pre><code>$('.starbox').starbox({
average: 0.5,
changeable: 'once',
autoUpdateAverage: true,
ghosting: true
});
</code></pre>
<p>這樣就大功告成囉</p>
<h3>參數設定</h3>
<p>以下是一些參數的講解,但有些小弟才疏,也不太懂他的意思就不寫出來誤導大家Orz,有興趣的各位再請去 github 上面看</p>
<p><strong>average</strong>:可以預設一開始顯示幾顆星星,也可以使用小數點,例如0.4,預設值則是0.5</p>
<p><strong>stars</strong>:設定有幾顆星星可以選擇,預設值是5</p>
<p><strong>buttons</strong>:設定星星可以切割成多少區塊可以選擇,假設有5顆星星,buttons設10,每顆星星就可以選擇半顆或整顆</p>
<p><strong>changeable</strong>:設定選擇以後是否還可以改變</p>
<p>也有一些方法可以呼叫,例如要得知 User 選了幾顆星星,就可以這樣寫</p>
<pre><code>$('.btn').click(function(){
alert($('.starbox').starbox("getValue"));
});
</code></pre>
<p>可以把事件寫在某個按鈕裡面,當按下按鈕就秀出值是多少,關鍵在這句</p>
<pre><code>$('.starbox').starbox("getValue")
</code></pre>
<h2>小小總結</h2>
<p>如果用 firebug 看套用效果後的 html 結構,不難發現只是在空元素裡面增加幾個&lt;div&gt;,並且設定背景圖做為星星,所以要修改的話只要改範例裡面的圖,和 css 裡面的樣式即可</p>
<pre><code>.starbox .stars .star_holder .star {
background-image: url('../images/5-large.png');
width: 33px;
height: 33px;
}
</code></pre>
<p>記得如果星星的大小有改變,width和 height 也要跟著調整</p>
<h2>參考資料:</h2>
<p><a href="https://github.com/sabberworm/jStarbox#getvalue" target="_blank">jStarbox</a></p>
<p><a href="http://sabberworm.github.com/jStarbox/" target="_blank">Examples</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[jQ-Plugin] 用jQuery打造alert、confirm和prompt dialogs]]></title>
<link href="http://blog.rx836.tw/blog/alert-confirm-prompt/"/>
<updated>2013-01-24T11:21:00+08:00</updated>
<id>http://blog.rx836.tw/blog/alert-confirm-prompt</id>
<content type="html"><![CDATA[<p><img src="https://lh3.googleusercontent.com/-Zmc0Ts3xud4/UQDnKqQMtiI/AAAAAAAACPg/x2E0ljNmpOM/s387/2013-01-24_115500.jpg" /></p>
<p>知名的網路趨勢觀察 Inside 有一篇文章 <a href="http://www.inside.com.tw/2013/01/23/app-dialog-button-design-should-yes-be-right-or-left" target="_blank">App 的 「確定」按鈕應該放在左邊還是右邊?</a>,裡面寫到關於使用者設計,iOS與 Android 的不同,我對這方面不是研究者,所以就不針對文章內容做討論,但同樣的事情回到 Web 部分,如果能將我們常看到的 alert 視窗做客製化,引導 User 做點擊,或許可以減少使用者誤按的情形發生</p>
<!--more-->
<h2>原生的彈跳視窗</h2>
<p>一般我們常見的內建 confirm 和 alert,因為是原生的視窗元素,有時候難免會跟網站整體的視覺設計很不搭嘎,按鈕文字也無法修改,跟使用者間的互動就不是那麼的直覺,例如下面的範例圖</p>
<p><img src="https://lh6.googleusercontent.com/-iYqFTOzua-4/UQDnKscNRXI/AAAAAAAACPc/lRsW6cDln3Q/s389/2013-01-24_121937.jpg" /></p>
<p>在填寫完表單以後,跳出了一個提醒視窗告知『獎品將在三天後寄出』,但當你按下『確定』時,心中難免會覺得<strong>要確定的是甚麼</strong>?但如果像下面這張圖一樣,做客製化文字</p>
<p><img src="https://lh6.googleusercontent.com/-ygbraRujwkg/UQDnKjkwBnI/AAAAAAAACPk/mggASJ-uJxM/s582/2013-01-24_122158.jpg" /></p>
<p>User在使用時就不會有那些疑惑存在,整個視窗還可以搭配網站做設計,至於要怎麼客製化呢?下面是我的使用筆記</p>
<h2>Start</h2>
<p>這裡我使用的是 Alertify 這款jQuery plugin ,可以到 github 下載source code</p>
<p><a href="https://github.com/fabien-d/alertify.js/" target="_blank">DOWNLOAD SOURCE</a></p>
<p>接著在 lib 資料夾裡面有兩個檔案,分別是 alertify.js 和 alertify.min.js,因為我們要做範例,所以使用方便 Debug 的 alertify.js</p>
<pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/alertify.js"&gt;&lt;/script&gt;
</code></pre>
<p>接著是css部份</p>
<pre><code>&lt;link rel="stylesheet" href="themes/alertify.core.css" /&gt;
&lt;link rel="stylesheet" href="themes/alertify.default.css" /&gt;
</code></pre>
<p>如果要符合自己網站的設計,就修改 alertify.default.css 這支檔案即可</p>
<p>最後是js部份</p>
<pre><code>alertify.alert("獎品將在三天後寄出");
</code></pre>
<p>結果圖</p>
<p><img src="https://lh6.googleusercontent.com/-NhnuNSV7ipE/UQDnLpYsIlI/AAAAAAAACPo/ZmiAC0GeGAA/s582/2013-01-24_153113.jpg" /></p>
<p>如果要修改文字的話,在前面加上 alertify.set() 的設定</p>
<pre><code>alertify.set({ labels : { ok: "了解", cancel: "取消" } });
alertify.alert("獎品將在三天後寄出");
</code></pre>
<p>要做 confirm 視窗的話</p>
<pre><code>alertify.confirm("確定儲存嗎?", function (e) {
if (e) {
// user clicked "ok"
} else {
// user clicked "cancel"
}
});
</code></pre>
<p>結果圖</p>
<p><img src="https://lh3.googleusercontent.com/-pQSeUPBhHZs/UQDnLnRK3yI/AAAAAAAACPs/mR20IrnuxJ4/s589/2013-01-24_153412.jpg" /></p>
<p>比較特別是還可以設置notifications</p>
<pre><code>alertify.success("Success notification");
</code></pre>
<p>在瀏覽器視窗的右下角就會出現notifications,並且會在幾秒後自動消失</p>
<p><img src="https://lh3.googleusercontent.com/-x42wvO7nDIg/UQDnL_RqoFI/AAAAAAAACPw/N26mQw_xs5w/s607/2013-01-24_153713.jpg" /></p>
<h2>結論</h2>
<p>這支 plugin 在使用上相當容易,而且還會在按鈕上加上光暈,引導使用者按下按鈕,樣式不喜歡的話,直接修改css檔案即可,有興趣的朋友可以下載回來試試</p>
<h2>參考資料:</h2>
<p><a href="http://fabien-d.github.com/alertify.js/" target="_blank">alertify.js</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[jQ-Plugin] 用jQuery客製化下拉選單]]></title>
<link href="http://blog.rx836.tw/blog/jquery-drop-down-lists/"/>
<updated>2013-01-23T17:16:00+08:00</updated>
<id>http://blog.rx836.tw/blog/jquery-drop-down-lists</id>
<content type="html"><![CDATA[<p>下拉式選單(DropDownList)在表單填寫裡面,是很常用到的網頁元素,但原生的下拉式選單看久了,難免會覺得太過單調,有時為了配合整體網站的設計,會有客製化的需求,而這篇文章主要是介紹如何用 jQuery plugin 客製化下拉選單</p>
<!--more-->
<p>另外對客製化 CheckBox 有興趣的朋友,也可以參考 <a href="http://blog.rx836.tw/blog/css3-checkboxes-radiobuttons/" target="_blank">[CSS] 拋棄原生checkbox用CSS3自己簡單動手做</a> 這篇文章</p>
<h2>Start</h2>
<p>這裡我主要用的是 jquery.dropdown.js 這支plugin,首先要先下載js和css回來</p>
<p><a href="http://tympanus.net/Development/SimpleDropDownEffects/SimpleDropDownEffects.zip?84cd58" target="_blank">DOWNLOAD SOURCE</a></p>
<p>在js的資料夾裡面有兩個檔案,分別是</p>
<p>jquery.dropdown.js</p>
<p>modernizr.custom.63321.js</p>
<p>連同 jQuery 載入到網頁裡面</p>
<pre><code>&lt;script src="js/modernizr.custom.63321.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.dropdown.js"&gt;&lt;/script&gt;
</code></pre>
<p>會用到 modernizr 是因為在 jquery.dropdown.js 這支檔案裡面有用到判斷是否支援transition,稍後會提到</p>
<p>接著是html部份</p>
<pre><code>&lt;select id="cd-dropdown" class="cd-select"&gt;
&lt;option value="-1" selected&gt;請選擇一種動物&lt;/option&gt;
&lt;option value="1" class="icon-monkey"&gt;猴子&lt;/option&gt;
&lt;option value="2" class="icon-bear"&gt;熊&lt;/option&gt;
&lt;option value="3" class="icon-squirrel"&gt;松鼠&lt;/option&gt;
&lt;option value="4" class="icon-elephant"&gt;大象&lt;/option&gt;
&lt;/select&gt;
</code></pre>
<p>js部份,一行程式碼很簡單明瞭</p>
<pre><code>$( function() {
$( '#cd-dropdown' ).dropdown();
});
</code></pre>
<p>css部份</p>
<p>利用 plugin 做客製化下拉選單,關鍵就在於將原生的&lt;select&gt;用jQuery替換掉,仔細看替換掉後的html結構,會發現其實長的像這樣</p>
<pre><code>&lt;div class="cd-dropdown"&gt;
&lt;span&gt;請選擇一種動物&lt;/span&gt;
&lt;input type="hidden" name="cd-dropdown"&gt;
&lt;ul&gt;
&lt;li data-value="1"&gt;&lt;span class="icon-monkey"&gt;猴子&lt;/span&gt;&lt;/li&gt;
&lt;li data-value="2"&gt;&lt;span class="icon-bear"&gt;熊&lt;/span&gt;&lt;/li&gt;
&lt;li data-value="3"&gt;&lt;span class="icon-squirrel"&gt;松鼠&lt;/span&gt;&lt;/li&gt;
&lt;li data-value="4"&gt;&lt;span class="icon-elephant"&gt;大象&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>
<p>利用新的html結構就可以藉由CSS來自行裝飾,就像下面結果圖一樣,這邊我是直接用範例所附的css檔</p>
<p><img src="https://lh5.googleusercontent.com/-evzDeROGJXM/UP_5cKXoSNI/AAAAAAAACOc/GgnPHX_BsjQ/s328/2013-01-23_220729.jpg" /></p>
<p><img src="https://lh5.googleusercontent.com/-jM7YmJVygBs/UP_5cFenQ8I/AAAAAAAACOY/PzAILoleuwo/s345/2013-01-23_220659.jpg" /></p>
<h3>modernizr</h3>
<p>前面有提到使用 modernizr 的關係是因為有些瀏覽器不支援transition,但自己要寫那些判斷程式又稍嫌麻煩,而 modernizr 正是解決這方面需求的js函式庫,藉由函式庫我們可以透過 class 的名稱來做判斷,例如 firefox 有支援 transition 的話,在html上會看到 class 名稱為 csstransitions</p>
<p><img src="https://lh4.googleusercontent.com/-7d8Z_8f3zqI/UP_5cDplfCI/AAAAAAAACOU/FuEhK0BRsd4/s452/2013-01-23_221311.jpg" /></p>
<p>IE9沒支援 class 名稱就是 no-csstransitions</p>
<p><img src="https://lh3.googleusercontent.com/-G-9zngyNiH4/UP_5dLraQhI/AAAAAAAACOk/foYV278aKs0/s401/2013-01-23_221500.jpg" /></p>
<p>所以剛提到主程式裡面,判斷的程式碼就像這樣</p>
<pre><code>if( Modernizr.csstransitions ) {
setTimeout( function() { self.opts.css( 'transition', 'all ' + self.options.speed + 'ms ' + self.options.easing ); }, 25 );
}
</code></pre>
<h3>更不一樣的下拉選單</h3>
<p>這款 plugin 還有提供一些參數做變化,例如給予的參數值像下面這樣</p>
<pre><code>$( '#cd-dropdown' ).dropdown( {
gutter : 5,
delay : 40,
rotated : 'left'
} );
</code></pre>
<p>其中 rotated 就是旋轉的方向,再搭配css就可以做出更有特色的下拉選單</p>
<p><img src="https://lh6.googleusercontent.com/-McvNbs1qkQs/UP_5daenx8I/AAAAAAAACOo/pfBHIHJWFyQ/s471/2013-01-23_223858.jpg" /></p>
<h2>總結</h2>
<p>在使用上會發現一個問題就是,每當網頁載入時,<strong>因為要透過js來做替換html結構</strong>,所以會先看到原生的下拉選單元素,然後瞬間才會換成客製化元素,難免會覺得不夠細膩,但假如了解他運作的方式,直接自己製作html而不用經過 jQuery plugin 更換,會是更好的方法</p>
<h2>參考資料:</h2>
<p><a href="http://tympanus.net/codrops/2012/11/29/simple-effects-for-drop-down-lists/" target="_blank">SIMPLE EFFECTS FOR DROP-DOWN LISTS</a></p>
<p><a href="http://modernizr.com/" target="_blank">modernizr</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[jQ-Plugin] 輕鬆幫表格做responsive]]></title>
<link href="http://blog.rx836.tw/blog/responsive-tables/"/>
<updated>2013-01-21T12:28:00+08:00</updated>
<id>http://blog.rx836.tw/blog/responsive-tables</id>
<content type="html"><![CDATA[<p>因為移動設備的成長,RWD(Responsive web design)這個應用已經在許多網頁上都看的到,除了做一個專屬於 mobile 的網站設計以外,也可以讓一個網站來符合許多螢幕解析度大小,而這兩個方法的優與劣,如何選擇,就看專案當下的情況來做決定</p>
<!--more-->
<p>例如以文字為主的部落格或是簡單的頁面就很適合做RWD,但介面太複雜或是功能太多,建議還是另外開發專屬的獨立網站,有興趣的人可以參考這篇的 <a href="http://cssindesign.tumblr.com/post/40513264330/responsive-web" target="_blank">實作心得</a>,這邊就不討論太多</p>
<p>今天這篇主要介紹一個jQuery plugin,叫FooTable,利用簡單的幾行程式,就可以將網頁裡面的 table 擁有 RWD 的效果</p>
<h2>Start</h2>
<p>首先要先下載 js 和 css,可以到 github 下載</p>
<p><a href="https://github.com/bradvin/FooTable" target="_blank">DOWNLOAD</a></p>
<p>載回來後會發現裡面有一些 js 和 css檔,還有幾個 demo 範例,但有一些檔案是看情形選擇載入,其中最主要的只有兩個檔案,分別是</p>
<p>footable-0.1.js 和 footable-0.1.css</p>
<p>在網頁裡面載入這兩支檔案和jQuery以後,接下來就來做簡單的範例</p>
<h3>phone和tablet</h3>
<p>FooTable最主要會判斷三種情形,除了一般的 Desktop 以外,還分成 phone 和 tablet,開發人員可以在每個欄位中,選擇要在什麼情況底下做縮排,以下是基本的HTML</p>
<p>HTML部份</p>
<pre><code>&lt;table class="footable"&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th data-class="expand"&gt;
姓名
&lt;/th&gt;
&lt;th&gt;
職業
&lt;/th&gt;
&lt;th data-hide="phone"&gt;
年齡
&lt;/th&gt;
&lt;th data-hide="phone,tablet"&gt;
性別
&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;td&gt;小馬&lt;/td&gt;&lt;td&gt;司機&lt;/td&gt;&lt;td&gt;59&lt;/td&gt;&lt;td&gt;男&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;小陳&lt;/td&gt;&lt;td&gt;保全&lt;/td&gt;&lt;td&gt;42&lt;/td&gt;&lt;td&gt;男&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;小英&lt;/td&gt;&lt;td&gt;行政&lt;/td&gt;&lt;td&gt;27&lt;/td&gt;&lt;td&gt;女&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
<p>js部份</p>
<pre><code>$(function() {
$('table').footable();
});
</code></pre>
<p>可以看到在&lt;thead&gt;底下會有 data-class 和 data-hide 兩個 HTML5 的自訂屬性,如果 data-class=&#8221;expand&#8221; 設在『姓名』那個欄位,<strong>代表的意思是會在此欄位建立 icon 圖案 『+』 和 『-』</strong>,而 data-hide 指的是<strong>該欄位在什麼情況下會隱藏縮排</strong>,例如在上面範例中的年齡設為 data-hide=&#8221;phone&#8221;,表示在 phone 的寬度下會觸發此事件</p>
<p>那或許會有人疑問,phone和 tablet 的寬度判斷依據是什麼呢?這邊可以直接打開 footable-0.1.js 這支檔案,搜尋底下這行原始碼</p>
<pre><code>options: {
delay: 100, // The number of millseconds to wait before triggering the react event
breakpoints: { // The different screen resolution breakpoints
phone: 480,
tablet: 1024
},
...
...
}
</code></pre>
<p>會發現原來 FooTable 預設屬性 phone 的寬度為480px,而 tablet 是1024,所以假設現在 Table 寬度只有 780,那擁有tablet 這個值的欄位就會做隱藏縮排,這些值都可以依照個人需求做修改,說了那麼多怕大家看不懂,那就直接來看結果圖吧</p>
<p>table寬度大於1024px</p>
<p><img src="https://lh6.googleusercontent.com/-SenmhgVS_s4/UPz2ku3YqeI/AAAAAAAACNc/vpvMWrwVeFk/s1077/2013-01-21_152914.jpg" /></p>
<p>table寬度小於1024px,大於480px,<strong>性別被縮排,姓名多了展開的圖案『+』</strong></p>
<p><img src="https://lh6.googleusercontent.com/-AZyIxH4mZgY/UPz2kr5W8CI/AAAAAAAACNU/wDNk3hkqDNc/s823/2013-01-21_153046.jpg" /></p>
<p>table寬度小於480px,性別和年齡都被縮排</p>
<p><img src="https://lh4.googleusercontent.com/-taApAI4ZcRk/UPz2ks5zlpI/AAAAAAAACNY/JM2RGkX-BPU/s219/2013-01-21_153224.jpg" /></p>
<p>點擊每一列即可展開看被隱藏的資訊</p>
<p><img src="https://lh3.googleusercontent.com/-PNOSlcS6mhU/UPz2lfqAOvI/AAAAAAAACNg/jhzxH6Y5l_M/s227/2013-01-21_153321.jpg" /></p>
<p>是不是很方便呢?</p>
<h3>搜尋與排序</h3>
<p>除了一般的 table 以外,常用到的『搜尋』和『排序』當然也不可少,FooTable貼心的地方在於已經幫你處理好這方面的需求,只要載入相關的 js 和加上自訂的 data- 屬性就可以完成所要的功能</p>
<p><a href="http://themergency.com/footable-demo/demo-sorting.htm" target="_blank">Sorting demo</a></p>
<p><a href="http://themergency.com/footable-demo/demo-filtering.htm" target="_blank">Filtering demo</a></p>
<p>但比較可惜的地方在於沒有實做分頁這塊,所以如果有這方面需求的朋友,可能要自己另外加上</p>
<h2>總結</h2>
<p>個人覺得這款jQuery plugin做的相當簡單,使用上也十分容易,主要就是在欄位方面加上 data- 屬性,可擴展性也高,可以依照『搜尋』和『排序』的邏輯模式新增自己的功能,在縮排與顯示方面的UI設計也讓人感到實用方便,有興趣的朋友可以參考看看</p>
<h3>參考資料:</h3>
<p><a href="http://themergency.com/footable/" target="_blank">FooTable</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[jQ-Plugin] 做出磁磚效果變化的圖片轉換]]></title>
<link href="http://blog.rx836.tw/blog/jquery-slice-images-into-tiles/"/>
<updated>2013-01-18T16:36:00+08:00</updated>
<id>http://blog.rx836.tw/blog/jquery-slice-images-into-tiles</id>
<content type="html"><![CDATA[<p><img src="https://lh4.googleusercontent.com/-WH3Ni1ou3Ww/UPkk71vSTvI/AAAAAAAACMk/hcFofq9eTuU/s641/2013-01-18_164425.jpg" /></p>
<p>不知道大家有沒有看過這種切成一塊一塊的轉換圖片,類似磁磚拼貼的效果,最近看到一篇講解教學的文章,自己消化了一下,來分享並且紀錄下來</p>
<!--more-->
<h2>Start</h2>
<p>首先是HTML部份</p>
<pre><code>&lt;div class="sliced"&gt;
&lt;img src="pic.jpg"/&gt;
&lt;/div&gt;
</code></pre>
<p>只用一個&lt;div&gt;包住一個&lt;img&gt;</p>
<p>接著是CSS</p>
<pre><code>.sliced {
position: relative;
width: 640px;
height: 400px;
}
</code></pre>
<p>因為我們要將效果自製成一個jQuery plugin,方便以後可以重複使用,所以這邊要先建立一個基本的 jQuery plugin 樣板</p>
<pre><code>;(function( $, window ) {
//預設值
var _defaults = {
x : 2, // 預設對圖片x軸要切幾塊
y : 2, // 預設對圖片y軸要切幾塊
random : true, // 磚塊是否要按照順序切換
speed : 2000 // 效果的速度
};
$.fn.sliced = function( options ) {
var o = $.extend( {}, _defaults, options );
return this.each(function() {
var $container = $(this); // cache selector for best performance
// 主要程式碼從這裡開始寫
});
};
}( jQuery, window ));
</code></pre>
<p>當然如果想要寫其他 Plugin 的人,也可以使用這個樣板去做修改</p>
<h3>原理</h3>
<p>做好基本的準備工作以後,我們要來開始撰寫主程式部分,但在撰寫之前,先來說明一下這個效果是如何產生,其實原理很簡單,在效果執行時,會先將原圖的屬性設為 <strong>display: none</strong>,接著加上&lt;div&gt;並且設定背景圖片,類似拼圖一樣一塊一塊拼出原圖,如果覺得我描述的不清楚的話,下面有範例可以參考XD</p>
<p><a href="http://jsfiddle.net/rx836/sbBeA/" target="_blank">範例</a></p>
<p>這邊的重點在於 <strong>background-position</strong> 這個屬性,利用這個屬性做背景圖片的位移,每一個&lt;div&gt;代表著圖片的一個區塊,也許有些人看到這邊已經知道端倪,因為只要把圖片轉換成一個一個的&lt;div&gt;,透過操作每個&lt;div&gt;,就可以做出特效</p>
<p>接著我們把程式碼寫完,先建立一些變數</p>
<pre><code>var width = $container.width(),
height = $container.height(),
$img = $container.find('img'),
n_tiles = o.x * o.y,
tiles = [], $tiles;
</code></pre>
<p>接著是建立一塊一塊的磁磚,並且把原圖隱藏,最後加上剛建立好的磁磚,至於要建立多少個就看當初給予的值</p>
<pre><code>for ( var i = 0; i &lt; n_tiles; i++ ) {
tiles.push('&lt;div class="tile"/&gt;');
}
$tiles = $( tiles.join('') );
//將原圖隱藏並加上磁磚
$img.hide().after( $tiles );
</code></pre>
<p>接著利用原始圖檔當作每個磁磚的背景圖,在將背景圖做適當的位移,至於要位移多少,就看每個&lt;div&gt;(也就是每個磁磚)所代表的區塊</p>
<pre><code>//利用原始圖檔當作磁磚背景圖
$tiles.css({
width: width / o.x,
height: height / o.y,
backgroundImage: 'url('+ $img.attr('src') +')'
});
//替背景圖調整位置
$tiles.each(function() {
var pos = $(this).position();
console.log(pos);
$(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
});
</code></pre>
<p>因為要拼成一塊圖片的關係,所以也要利用 float這個屬性,直接在CSS加上即可</p>
<pre><code>.tile { float: left; }
</code></pre>
<p>到這邊為止,你可以加上下面這段程式碼,看看效果如何</p>
<pre><code>$('.sliced').sliced({ x:4, y:4 }); // 將圖片切成4x4
</code></pre>
<p>看圖片好像沒什麼改變,但打開firebug看看HTML部份,有發現到不一樣了嗎?</p>
<p><img src="https://lh5.googleusercontent.com/-t0N7b55zbPE/UPkk8Kc6OaI/AAAAAAAACMo/1L6StJdwJ3s/s1026/2013-01-18_180320.jpg" /></p>
<p>就如剛剛所敘述的,<strong>原始圖片已經隱藏,並且用&lt;div&gt;拼湊而出</strong></p>
<h3>製作效果</h3>
<p>知道了原理以後,接著讓我們繼續把程式碼繼續寫完,接下來是隨機變換的部份</p>
<pre><code>function range( min, max, rand ) {
var arr = ( new Array( ++max - min ) )
.join('.').split('.')
.map(function( v,i ){ return min + i });
return rand
? arr.map(function( v ) { return [ Math.random(), v ] })
.sort().map(function( v ) { return v[ 1 ] })
: arr;
}
</code></pre>
<p>這部份的 code 可以參考 <a href="http://stackoverflow.com/questions/12528886/random-but-just-in-chrome" target="_blank">stackoverflow</a>,簡單來說就是一個產生<strong>特定範圍的隨機排列的數字</strong>,但因為是函式的關係我們要把他跟一開始<strong>建立預設值 var _defaults 放在一起</strong>,剩下的 code 就是處理切換效果的部份</p>
<pre><code>var tilesArr = range( 0, n_tiles, o.random ),
tileSpeed = o.speed / n_tiles;
$container.on( 'animate', function() {
tilesArr.forEach(function( tile, i ) {
setTimeout(function(){
$tiles.eq( tile ).toggleClass( 'tile-animated' );
}, i * tileSpeed );
});
});
</code></pre>
<p>我們將每個磁磚加上animate,在特定時間內做 opacity 屬性的變化,最後加上一個按鈕做觸發,和套用plugin,看看效果如何</p>
<p>html</p>
<pre><code>&lt;button&gt;Toggle&lt;/button&gt;
</code></pre>
<p>js</p>
<pre><code>$('button').click(function() {
$('.sliced').trigger('animate');
});
</code></pre>
<p><a href="http://jsfiddle.net/rx836/jQaJh/2/" target="_blank">完整的範例</a></p>
<h2>結論</h2>
<p>只要知道是拼圖的概念,就可以知道其實不是針對原圖去做變化,巧妙的利用&lt;div&gt;也可以做出類似flash的效果</p>
<h3>參考資料:</h3>
<p><a href="http://www.onextrapixel.com/2012/11/23/how-to-slice-images-into-tiles-with-jquery-and-css3-transitions/" target="_blank">How to Slice Images into Tiles with jQuery and CSS3 Transitions</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[CSS] 認識OOCSS]]></title>
<link href="http://blog.rx836.tw/blog/css-oocss/"/>
<updated>2013-01-16T16:15:00+08:00</updated>
<id>http://blog.rx836.tw/blog/css-oocss</id>
<content type="html"><![CDATA[<p>最近在一些國外文章常看到『OOCSS』,另外也在 <a href="http://www.webconf.tw/" target="_blank">WebConf Taiwan 2013</a> 聽到許多講者分享中提到,所以藉此花了一些時間來認識一下OOCSS,並且紀錄在這裡供大家參考參考</p>
<!--more-->
<p>OOCSS其實就是 Object Oriented CSS,照字面來看就是物件導向的CSS,『物件導向』我想對於程式開發人員來說並不陌生,許多程式語言都有存在這個概念,但對於設計師來說可能就會覺得很陌生,不過要我來解釋的話可能會解釋的不清楚,因為自己都學的不好了&#8230;XD,所以決定把wiki大神搬出來給大家參考</p>
<p><a href="http://zh.wikipedia.org/wiki/%E7%89%A9%E4%BB%B6%E5%B0%8E%E5%90%91" target="_blank">關於物件導向程式設計(OOP)</a></p>
<p>為了怕設計師們直接把這篇文章關掉,我還是要自己解釋一下,其實重點在於&#8221;重用&#8221;這件事上面,他並不是一個新的語言或是框架,而就只是一個撰寫CSS的方法,讓CSS可以減少代碼,達到優化效能的作用</p>
<h2>OOCSS的兩大原則</h2>
<h3>Separate structure and skin</h3>
<p>結構(Structure)和樣式(skin)的分離,我們可以嘗試著將共用的屬性部分拉出來獨立一個類別(class),例如原本的CSS可能長這樣</p>
<pre><code>#button{
width:250px;
height:100px;
border: solid 2px #ccc;
background: red;
}
#box{
width:400x;
height:200px;
border: solid 2px #ccc;
background: red;
}
</code></pre>
<p>我們發現 button 和 box 都有共同的 border 和 background,所以將它獨立拉出來</p>
<pre><code>.button{
width:250px;
height:100px;
}
.box{
width:400x;
height:200px;
}
.skin{
border: solid 2px #ccc;
background: red;
}
</code></pre>
<p>將所有的元素都用類別(class)設計,重複出現的樣式就獨立到 skin 的類別,這樣就可以減少CSS的代碼,還可以使CSS更加靈活,另外不要直接在例如&lt;img&gt;這樣的tag上直接加樣式</p>
<h3>Separate container and content</h3>
<p>將容器(container)和內容(content)分離的好處是,可以把內容放在任何容器裡面都可以,而不會被擺放的位置給拘束,例如像下面的例子</p>
<p>HTML部份</p>
<pre><code>&lt;div class="head"&gt;
&lt;p&gt;
內容內容內容
&lt;/p&gt;
&lt;/div&gt;
&lt;div class="foot"&gt;
&lt;p&gt;
內容內容內容
&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>css部份</p>
<pre><code>.head p {css code}
.foot p {css code}
</code></pre>
<p>不過 OOCSS 不建議這麼做,他希望的是建立更多的類別獨立出來</p>
<pre><code>.head {css code}
.foot {css code}
.mydata {css code}
</code></pre>
<p>這樣就可以直接在html上添加這些類別</p>
<pre><code>&lt;div class="head"&gt;
&lt;p class="mydata"&gt;
內容內容內容
&lt;/p&gt;
&lt;/div&gt;
&lt;div class="foot"&gt;
&lt;p class="mydata"&gt;
內容內容內容
&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>另外一樣將把重複的獨立出來,將樣式模組化,這樣不僅不會被局限在某個位置底下(剛剛的 .head p ),也可以達到CSS重複使用</p>
<h2>結論</h2>
<p>我想這不是甚麼新的觀念,或許有人已經使用自己可能都不知道,OOCSS的優點就是讓網站效能變好(減少程式碼),而且易於維護(模組化),但缺點在撰寫之前需要花點時間規劃模組化,對於小型網站來說成本可能比較高,對於大型網站的優勢反而比較明顯</p>
<p>另外也可以參考這個 <a href="https://github.com/stubbornella/oocss" target="_blank">Object Oriented CSS Framework</a></p>
<h3>參考資料:</h3>
<p><a href="http://www.w3cplus.com/css/oocss-concept" target="_blank">OOCSS——概念篇</a></p>
<p><a href="https://github.com/stubbornella/oocss/wiki" target="_blank">Object Oriented CSS</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[學習筆記] 十年長路- 旅遊社群網站的幻夢與真實 - 工頭堅]]></title>
<link href="http://blog.rx836.tw/blog/hpx-life-23/"/>
<updated>2013-01-09T17:27:00+08:00</updated>
<id>http://blog.rx836.tw/blog/hpx-life-23</id>
<content type="html"><![CDATA[<p>第一次聽到工頭堅這個名字,很直覺的聯想到跟工地應該有什麼過往或是經驗,但後來發現一點邊都沾不上,從這就可以知道我其實對這個人完全不認識,但在聽過 <a href="http://www.hpx-party.com/archives/8759" target="_blank">HPX Life23: 十年長路- 旅遊社群網站的幻夢與真實</a> 這場講座以後,我才知道原來這是個人生歷練相當精彩的一位大人物!</p>
<!--more-->
<p>工頭堅在旅遊界算是一個大人物,但他其實一開始也並不是從旅遊出身,前面曾經做過美術設計、廣告拍攝、甚至是網路趨勢觀察者、夜店經理(!?)、最後在30幾歲以後才踏入旅遊,開始帶團,直到現在成了旅遊社群總監,聽他講他的人生經歷,感覺每一個都扯不上關係,但後來仔細在回想,其實也因為有前面那些歷練,才會造就今天的他</p>
<h2>網路趨勢觀察者</h2>
<p>工頭堅說他曾經經歷過網路泡沫化的那個時代,而且體驗過因為網路而覺得興奮,他說當他第一次打開瀏覽器上網時,那種感覺真是讓人難忘,雖然自己小時候也有撥接上網過,但都是玩遊戲為主,相對於工頭堅的感動和驚訝,我想我可能都無法體會,這也是出生在網路世代的年輕人所無法感受的,就如同工頭堅所說的,每當他去大學演講時,當他講到這滔滔不絕時,台下真的是一點反應都沒有(笑)</p>
<h2>人生的低潮</h2>
<p>因為算命的關係,再加上人生的一些低潮,促使他離鄉背井到了溫哥華居住,在那除了第一次體驗天體海灘以外,還思考了自己的未來,讓我坐在台下一直想,到底是不是因為天體海灘的關係讓他擺脫了人生低潮(誤),也讓他在這段時間定下了往旅遊界發展的目標,而當領隊帶團是他回國要做的事情</p>
<h2>踏遍全世界</h2>
<p>回國之後開始從國內旅遊開始帶起,做了兩年之後,開始帶起國外團,去過雅典奧運幫中華隊加油,也帶過過WBC的經典賽的加油團,豐富的帶團經驗,再加上他深耕Blog的關係,懂得經營網友,加強了他個人品牌的專業形象,讓他自己成了很受歡迎的帶團達人,也因為有了這些經驗(一部分跟以前當過網路趨勢觀察者有關),熟知如何操作網路社群,利用這方面的專長與旅遊做了最好的結合</p>
<h2>你不可能有先見之明&#8230;</h2>
<p>賈伯斯(Steve Jobs)曾經說一句話,讓我思考蠻久的</p>
<p>『you can’t connect the dots looking forward; you can only connect them looking backwards』</p>
<p>『你無法預先把點點滴滴串連起來;只有在未來回顧時,你才會明白那些點點滴滴是如何串在一起。』</p>
<p>這句話在工頭堅身上驗證了,我沒在座談會結束後問他(該死的,應該要問),但我想他在人生低潮時,又或是在當網路趨勢觀察者時,從沒想過自己未來會成為一個旅遊達人部落客,也不知道接下來社群的發展可以跟旅遊這樣結合,但他之前的人生歷練,卻這麼恰好的做了連結,我一直對他所說的一句話感到有意思,就是他說要不是他不會寫一行程式,Facebook的馬克算的了什麼&#8230;.XD,意思是說他對於心中的社群網站一直有夢想</p>
<p>我在這場工頭堅的人生10年經驗分享中,收穫許多,對於我這個寫部落格不到一年的小伙子來說,充滿了啟發性的思考</p>
<p>附上用唉鳳拍的模糊照片一張,天體海灘&#8230;XD</p>
<p><img src="https://lh3.googleusercontent.com/-9NZ0qC8c_Zw/UO02qcXHm_I/AAAAAAAACLU/ulyHEktaVAs/s571/IMG_3748.JPG" /></p>
<h3>參考資料:</h3>
<p><a href="http://www.hpx-party.com/archives/8759" target="_blank">HPX Life23: 十年長路- 旅遊社群網站的幻夢與真實 / 工頭堅</a></p>
<p><a href="https://www.facebook.com/fansofworker?ref=ts&fref=ts" target="_blank">工頭堅 Facebook粉絲團</a></p>
<p><a href="http://worker.bluecircus.net/" target="_blank">工頭堅 Blog</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[jQ-Plugin] 跟著Pinterest將menu固定起來 - Sticky]]></title>
<link href="http://blog.rx836.tw/blog/sticky-object/"/>
<updated>2013-01-08T11:11:00+08:00</updated>
<id>http://blog.rx836.tw/blog/sticky-object</id>
<content type="html"><![CDATA[<p>pinterest的網站設計影響了許多人,之前也曾經寫過實做的文章 - <a href="http://blog.rx836.tw/blog/jquery-waterfall-infinitescroll/" target="_blank">做出Pinterest效果的介面 用jQuery Masonry + Infinite Scroll</a>,但其實在這種被稱為 Waterfall 的網頁設計底下,還有許多小技巧和應用需要學習</p>
<!--more-->
<p>其中一個就是將上方的 menu 固定在整個視窗的某個地方,因為像這種無限延伸的設計,不知道整個網頁會長到多長,在User瀏覽網頁時,如果想要中途切換其他頁面,沒有將 menu 固定在視窗的某個區塊,會發現拉回最上方非常的不方便,所以一般來說都會設計成跟著頁面做移動,如下圖</p>
<p>一開始menu固定在上方的某個區塊</p>
<p><img src="https://lh3.googleusercontent.com/-QU3DxU6ccVg/UOu9t-bGOmI/AAAAAAAACKY/y8rQuxSivyA/s671/2013-01-08_114010.jpg" /></p>
<p>當頁面往下拉時,會跟著移動</p>
<p><img src="https://lh5.googleusercontent.com/-A57qEkc8I7s/UOu9tzDm2FI/AAAAAAAACKc/ALiiUe-IdrQ/s589/2013-01-08_114044.jpg" /></p>
<p>要實現這樣的設計並不困難,今天就來介紹一款方便的jQuery plugin - Sticky</p>
<h2>Start</h2>
<p>首先先從github下載js檔回來</p>
<p><a href="https://github.com/garand/sticky" target="_blank">DOWNLOAD PLUGIN</a></p>
<p>裡面有個檔名為jquery.sticky.js,將他載入到網頁裡面</p>
<p>接著html部份</p>
<pre><code>&lt;p&gt;上方元素&lt;/p&gt;
&lt;div id="sticker"&gt;
&lt;p&gt;我是menu&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;下方元素&lt;/p&gt;
</code></pre>
<p>id為 sticker 的&lt;div&gt;就是要被固定在上方的元素,為了方便demo,可以給他一些css樣式</p>
<pre><code>body {
height: 10000px;
padding: 0;
margin: 0;
}
#sticker {
background: #bada55;
color: white;
width: 300px;
font-family: Droid Sans;
font-size: 40px;
line-height: 1.6em;
font-weight: bold;
text-align: center;
padding: 20px;
margin: 0 auto;
text-shadow: 0 1px 1px rgba(0,0,0,.2);
border-radius: 50px;
}
</code></pre>
<p>這邊注意到 body 的 height 為1000px是為了讓網頁可以一直往下拉</p>
<p>接著是js部份</p>
<pre><code>$("#sticker").sticky({ topSpacing: 0, center:true, className:"hey" });
</code></pre>
<p>最後來看展示結果</p>
<p>捲動網頁前</p>
<p><img src="https://lh3.googleusercontent.com/-xma-MsT9Zww/UOu9t_QwQGI/AAAAAAAACKU/cdJD0qMOFNM/s1023/2013-01-08_124326.jpg" /></p>
<p>捲動網頁後</p>
<p><img src="https://lh4.googleusercontent.com/-NJLAKGJfXP0/UOu9u6udgXI/AAAAAAAACKg/VISQuhKeefM/s1003/2013-01-08_124342.jpg" /></p>
<p>會發現 &#8220;我是menu&#8221; 這個區塊會一直固定在網頁上方,達到我們想要的效果,如果圖片說明不清,建議還是實做 Demo 比較清楚XD</p>
<h2>參數部份</h2>
<p>topSpacing: 元素與頁面頂端有多少固定距離</p>
<p>bottomSpacing: 元素與頁面底端有多少固定距離</p>
<p>className: 當觸發事件時增加的 CSS class, 預設是is-sticky</p>
<p>wrapperClassName: 自訂 wrapper CSS class, 預設是sticky-wrapper</p>
<p>getWidthFrom: 選擇一個元素做為參考值設定為固定寬度</p>
<h2>想要自己實做的話..</h2>
<p>如果試著去看 source code 的話,會發現實做並不困難,主要就是計算 <strong>scrollTop()</strong> 目前的位置,如果大於某個值就觸發事件,將要固定的元素添加 position:fixed,接著在看要距離上方多少空間就設定多少 top 值,主要的判斷程式碼部分如下,有興趣的人可以再自行參考</p>
<pre><code>if (scrollTop &lt;= etse) {
if (s.currentTop !== null) {
s.stickyElement
.css('position', '')
.css('top', '');
s.stickyElement.parent().removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.stickyElement.outerHeight()
- s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop &lt; 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement
.css('position', 'fixed')
.css('top', newTop);
if (typeof s.getWidthFrom !== 'undefined') {
s.stickyElement.css('width', $(s.getWidthFrom).width());
}
s.stickyElement.parent().addClass(s.className);
s.currentTop = newTop;
}
}
</code></pre>
<h3>參考資料:</h3>
<p><a href="http://stickyjs.com/" target="_blank">Sticky</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[CSS] 用CSS改變scrollbar]]></title>
<link href="http://blog.rx836.tw/blog/css-styling-scrollbars/"/>
<updated>2013-01-04T11:03:00+08:00</updated>
<id>http://blog.rx836.tw/blog/css-styling-scrollbars</id>
<content type="html"><![CDATA[<p><img src="https://lh6.googleusercontent.com/-STc4lvK5aJw/UOZ8yP4FfFI/AAAAAAAACIo/oscopBlrZ7k/s202/2013-01-04_110558.jpg" /></p>
<p>scrollbar在網頁裡面算是相當常見的元素,因為資訊爆炸,每個網頁都有許多豐富的內容,為了減少分頁,往往會進而拉長整個網頁的長度,這時候就會產生scrollbar,但原生的 scrollbar 有時候跟網頁的整體UI設計並不符合,看起來就很突兀,為了讓網站整體的UI設計一致,我們可以嘗試改變一下 scrollbar 的樣式</p>
<!--more-->
<h2>準備一個簡單的 scrollbar 頁面</h2>
<p>首先在開始改變 scrollbar 之前,我們必須先知道哪些情境之下會出現scrollbar</p>
<p>1.當網頁內容長度超過瀏覽器視窗的可視範圍時,會在右側出現scrollbar</p>
<p>2.當 textarea 包含足夠的文字時</p>
<p>3.利用 iframe 顯示不同頁面時</p>
<p>4.&lt;div&gt;或其他 block element 有設置 overflow 屬性時</p>
<p>現在我們選擇用第四種設置&lt;div&gt;的屬性 overflow 來當作 demo 練習</p>
<p>html</p>
<pre><code>&lt;div class="container"&gt;
&lt;p&gt;這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文&lt;/p&gt;
&lt;p&gt;這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文&lt;/p&gt;
&lt;p&gt;這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文&lt;/p&gt;
&lt;p&gt;這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文&lt;/p&gt;dit. In ultrices vehicula pretium.&lt;/p&gt;
&lt;p&gt;這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文&lt;/p&gt;
&lt;p&gt;這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文這是一段假文&lt;/p&gt;
&lt;/div&gt;
</code></pre>
<p>css</p>
<pre><code>.container {
width: 400px;
height: 300px;
background-color: #DCDCDC;
overflow: scroll; /* showing scrollbars */
}
</code></pre>
<p>CSS部份我們替&lt;div&gt;設置了 width 和 height,目的是為了讓內容限制一個範圍,那當超出範圍的部份,我們就設置了另一個屬性 <strong>overflow:scroll</strong>,告訴瀏覽器做 scrollbar 的處理,所以設置完的顯示結果如下</p>
<p><img src="https://lh4.googleusercontent.com/-yinWVlS8WjI/UOZ8yc9bwmI/AAAAAAAACIs/axfVRTRAXK0/s418/2013-01-04_115358.jpg" /></p>
<h2>Webkit瀏覽器的scrollbar</h2>
<p>假設是 Webkit 的瀏覽器(例如: Google Chrome、Apple Safari),我們可以使用 ::-webkit-scrollbar 這個 pseudo-elements 來做改變</p>
<pre><code>::-webkit-scrollbar {
width: 50px;
}
::-webkit-scrollbar-track {
background-color: red;
}
::-webkit-scrollbar-thumb {
background-color: blue
}
::-webkit-scrollbar-button {
background-color: yellow
}
::-webkit-scrollbar-corner {
background-color: black;
}
</code></pre>
<p>顯示效果如下</p>
<p><img src="https://lh4.googleusercontent.com/-GjRmeALubYA/UOZ8yfCuvaI/AAAAAAAACIw/XuFAQAPU8AM/s419/2013-01-04_122330.jpg" /></p>
<p>很醜,但為了讓大家知道每個屬性的效果,所以特地用顏色做區別,還把寬度設為50px,但現實的專案中千萬別這樣做,還是要像前面所說的,要符合整體的網站UI設計才行</p>
<p>不過以上的寫法只適用於 Webkit browsers</p>
<h2>IE呢?</h2>
<p>其實沒查可能還不知道,IE是第一個支援用CSS來改變 scrollbar 樣式的瀏覽器,早在IE5.5就可以實做,不過僅限於顏色的改變</p>
<p>用我們剛剛的範例當例子,我們可以這樣寫</p>
<pre><code>body {
scrollbar-face-color: #b46868;
}
</code></pre>
<p>結果如下</p>
<p><img src="https://lh6.googleusercontent.com/-Rqkd_jSbObM/UOZ8y042JnI/AAAAAAAACI0/SHLaovEZDS8/s420/2013-01-04_123209.jpg" /></p>
<h2>jScrollPane</h2>
<p>剛剛只談到 Webkit 的瀏覽器還有IE的寫法,那Firefox怎麼辦呢?有沒有比較方便的方法可以適用於大多數的瀏覽器,其實是有的,可以嘗試 <a href="http://jscrollpane.kelvinluck.com/" target="_blank">jScrollPane</a> 這個jQuery plugin</p>
<p>基本的使用方式如下,在網頁裡面載入jQuery和jquery.jscrollpane.min.js還有jquery.jscrollpane.css</p>
<pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="jquery.jscrollpane.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" /&gt;
</code></pre>
<p>接著是js部份</p>
<pre><code>$('.container').jScrollPane();
</code></pre>
<p>效果如下</p>
<p><img src="https://lh5.googleusercontent.com/-LkkEeHILftE/UOZ8zOOTPII/AAAAAAAACI8/B4y_gaz4-Dw/s414/2013-01-04_124917.jpg" /></p>
<p>如果要修改樣式的話,可以直接修改jquery.jscrollpane.css這支檔案裡面的幾個類別屬性</p>
<pre><code>.jspTrack
{
background: #dde; //可以更改顏色
position: relative;
}
.jspDrag
{
background: #bbd; //可以更改顏色
position: relative;
top: 0;
left: 0;
cursor: pointer;
}
</code></pre>
<p>或許會有疑問,為什麼用 jScrollPane 可以支援不同的瀏覽器?其實只要打開 firebug 看看HTML的部份就可以知道</p>
<p><img src="https://lh4.googleusercontent.com/-UNhAOrBS60U/UOZ80MiprjI/AAAAAAAACJM/ClXt8YzMY-Q/s420/2013-01-04_144723.jpg" /></p>
<p>原來 jScrollPane 是用&lt;div&gt;做出假的 scrollbar,至於位移的效果就是改變CSS屬性top的值</p>
<h2>結論</h2>
<p>修改 scrollbar 在許多Web Apps都可以看的到實做,像微軟的 Outlook 信箱服務</p>
<p><img src="https://lh5.googleusercontent.com/-PAU7cSx0tIQ/UOZ8zRWFhII/AAAAAAAACJI/PDzHVetCHv0/s486/2013-01-04_144215.jpg" /></p>
<p>又或是Google的雲端硬碟服務</p>
<p><img src="https://lh4.googleusercontent.com/-OHN4PIVruTQ/UOZ8zg-ErCI/AAAAAAAACJA/Q8WkMSdEt0o/s454/2013-01-04_144319.jpg" /></p>
<p>都有畫龍點睛的效果,善用這方面的方法,可以讓網站的UI看起來更一致,也不必局限於原生HTML元素的呈現,網頁也可以更加活潑</p>
<h3>參考資料:</h3>
<p><a href="phttp://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-styling-scrollbars-to-match-your-ui-design/?utm_source=CSS+Weekly&utm_campaign=CSS_Weekly_Issue_34&utm_medium=web" target="_blank">Quick Tip: Styling Scrollbars to Match Your UI Design</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[CSS] 關於CSS Cursor]]></title>
<link href="http://blog.rx836.tw/blog/css-cursor-rule/"/>
<updated>2012-12-27T15:09:00+08:00</updated>
<id>http://blog.rx836.tw/blog/css-cursor-rule</id>
<content type="html"><![CDATA[<p><img src="https://lh5.googleusercontent.com/-OVdRqH4Q_sA/UNwXOft01eI/AAAAAAAACH4/Kg-eysHdgc8/s461/2012-12-27_152249.jpg" /></p>
<p>在提到CSS Cursor之前,要先說一下我跟CSS Cursor的第一次的認識,在我剛出社會時,做活動網站,常常會使用&lt;div&gt;來當作button來使用,有一天,PM跑過來跟我說,要把那個按鈕的鼠標從箭頭改成指頭,我才了解到鼠標對User的影響</p>
<!--more-->
<h2>Cursor</h2>
<p>先來簡單的介紹鼠標的作用,鼠標其實就是輔助你讓你知道現在可以做些甚麼事情,例如當你將滑鼠移到視窗邊緣時,會出現可以<strong>縮放的標誌</strong>,又或是將鼠標移到文字框時,會出現類似「工」型的圖案,意思是你可以在這邊輸入文字</p>
<p><img src="https://lh5.googleusercontent.com/-RdOW3VCBij4/UNwXOavbpLI/AAAAAAAACH8/JaDJMEYNyzM/s600/cursor_inputs.png" /></p>
<p>這在不管是系統的應用程式上,或是網頁瀏覽時,都是很常看到的輔助標誌,但我們今天主要講的是網頁瀏覽時的鼠標應用,在CSS裡面,如果要更改預設的鼠標,語法會是這樣寫</p>
<pre><code>div{
cursor:move;
}
</code></pre>
<p><strong>cursor</strong> 是屬性名稱,而 <strong>move</strong> 是屬性值,當然,屬性值不只有move可以使用,更多的屬性值可以參考下面那個網站,也是我本人相當推薦的參考網站</p>
<p><a href="http://webdesigntutsplus.s3.amazonaws.com/tuts/405_cursors/table/table.html" target="_blank">CSS Cursor Values Across Browsers and Platforms</a></p>
<p>看過上面那個網站,會發現到,除了瀏覽器的不同以外,就連User所使用的系統不同,也會有不同的結果</p>
<p>那假如不想使用上面那些預設的圖案呢?我有沒有辦法使用自訂的鼠標?答案是有的,語法如下</p>
<pre><code>div{
cursor: url('cursor.png'), default;
}
</code></pre>
<p>它跟 <strong>font-family</strong> 一樣,都需要有備用的鼠標,假如第一個鼠標不存在或不支援時,還能使用其它鼠標</p>
<p>也可以加上自訂圖案的位移座標</p>
<pre><code>cursor: url('cursor.png') 10 5, default;
</code></pre>
<p>分別代表x和y,用原始鼠標為起點(0,0),往左位移10px,往上位移5px</p>
<h2>Cross Browser Cursor Rule</h2>
<p>不過要做到跨瀏覽器有幾點要特別注意的是,IE7、8只支援 <strong>.CUR</strong> 的檔案,所以一般我們都會這樣寫</p>
<pre><code>div{
cursor: url('/cursors/cursor.png'),
url('/cursors/cursor.cur'),
default;
}
</code></pre>
<p>讓非IE的瀏覽器使用第一個.png圖檔,假如是IE就使用.cur圖檔,都無法讀取時就使用default</p>
<p>特別注意的是,假如你的cursor圖檔與css檔是放在不同資料夾的話,IE的CSS Cursor<strong>並不支援相對路徑</strong>,只支援<strong>相對根路徑</strong>或是<strong>絕對路徑</strong>,所以像下面的寫法IE是不支援的</p>
<pre><code>cursor: url(../cursors/cursor.cur);
</code></pre>
<h2>結論</h2>
<p>現在利用移動設備瀏覽網頁的使用程度上越來越高,觸控式的螢幕輸入占了絕大多數,可能會覺得鼠標的影響已經越來越不重要,但不管如何,除非傳統的web網頁消失,不然建議大家還是要照著Progressive Enhancement(漸進式增強)的原則來設計網頁,達到良好的互動式設計</p>
<h3>參考資料:</h3>
<p><a href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/everything-you-need-to-know-about-the-css-cursor-rule/?utm_source=CSS+Weekly&utm_campaign=CSS_Weekly_Issue_34&utm_medium=web" target="_blank">Everything You Need to Know About the CSS Cursor Rule</a></p>
<p><a href="http://abgne.tw/css/css-mouse-cursor.html" target="_blank">男丁格爾-自訂網頁中的滑鼠游標</a></p>
<p><a href="http://hi.baidu.com/guohuihot/item/c88f6af387dcaec2a835a223" target="_blank">IE不支持CSS相对路径的自定义cursor</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[CSS] CSS position 觀念筆記心得]]></title>
<link href="http://blog.rx836.tw/blog/css-positioning/"/>
<updated>2012-12-22T11:30:00+08:00</updated>
<id>http://blog.rx836.tw/blog/css-positioning</id>
<content type="html"><![CDATA[<p><strong>css position</strong> 對於初學者來說觀念很容易混淆,我在剛學習時也很常搞不清楚relative和absolute之間的關係,但只要抓到幾個訣竅重點,其實可以很輕鬆的掌握它,這篇是紀錄我自己學習css position的心得,搭配幾個簡單易懂的範例,讓大家一起成長</p>
<!--more-->
<h2>Start</h2>
<p>首先,css position 屬性共有四個值,分別為 <strong>static</strong>、<strong>relative</strong>、<strong>absolute</strong>、<strong>fixed</strong>,其中,當你沒有設定position時,預設為static,下面就來介紹這四個值的差別</p>
<h3>static</h3>
<p>就如剛剛所提到的,static是預設值,意思是說,就算你沒宣告position這個屬性,默認還是為static,而通常這時候會影響到元素的位置,就是看它本身是 <strong>block</strong> 或是 <strong>inline</strong>,例如兩個&lt;div&gt;因為是block的關係,所以會上下各占據一行,那如果是兩個&lt;span&gt;,因為是inline,所以會在同一行裡面呈現</p>
<p>css</p>
<pre><code>#d1{
width: 100px;
height: 100px;
background: blue;
}
#d2{
width: 100px;
height: 100px;
background: red;
}
#s1{
background: blue;
}
#s2{
background: red;
}
</code></pre>
<p>html</p>
<pre><code>&lt;div id="d1"&gt;
div1
&lt;/div&gt;
&lt;div id="d2"&gt;
div2
&lt;/div&gt;
&lt;span id="s1"&gt;span1&lt;/span&gt;&lt;span id="s2"&gt;span2&lt;/span&gt;
</code></pre>
<p><img src="https://lh6.googleusercontent.com/-k8UTysRkMoQ/UNVYRo_fstI/AAAAAAAACGc/4eVneQSvhDg/s214/2012-12-22_120559.jpg" /></p>
<p><img src="https://lh6.googleusercontent.com/-h58i2I7P0Fg/UNVYRt_asJI/AAAAAAAACGk/BkPXYijQpG0/s99/2012-12-22_120617.jpg" /></p>
<p>特別注意的是,static並不會受 <strong>top</strong>、<strong>bottom</strong>、<strong>left</strong> 和 <strong>right</strong> 這些屬性值影響</p>
<h3>relative</h3>
<p>假如元素的position屬性值設為relative,就會受到 <strong>top</strong>、<strong>bottom</strong>、<strong>left</strong> 和 <strong>right</strong> 這些值影響所在位置,利用剛剛的範例,我們增加position屬性值和一些位移看看結果</p>
<p>css</p>
<pre><code>#d1{
width: 100px;
height: 100px;
background: blue;
position: relative;
top: 20px;
left: 20px;
}
#d2{
width: 100px;
height: 100px;
background: red;
}
</code></pre>
<p>我們在id為d1的&lt;div&gt;裡面加上了 <strong>position: relative</strong> 和 <strong>top:20px</strong> 還有 <strong>left:20px</strong>,會看到下面如圖的結果</p>
<p><img src="https://lh5.googleusercontent.com/-brly4x9g8ck/UNVYRm2M0kI/AAAAAAAACGg/MZagmsZ8e4U/s201/2012-12-22_121717.jpg" /></p>
<p>藍色的div從<strong>原本的位置</strong>往右下角位移了,從原始位置的左上角為起點,遠離左邊(left)20px的差距,遠離上面(top)也是20px的差距,但還是保留<strong>原本位置的空間</strong>,並且覆蓋到d2,注意我這邊特別註明是原本的位置,因為這會跟等下介紹的 <strong>absolute</strong> 有所不同,那有些人或許會有疑問,可以用 <strong>margin</strong> 取代嗎?我們來實驗一下</p>
<pre><code>#d1{
width: 100px;
height: 100px;
background: blue;
margin-top: 20px;
margin-left: 20px;
}
#d2{
width: 100px;
height: 100px;
background: red;
}
</code></pre>
<p><img src="https://lh5.googleusercontent.com/-mWSgkOP_EZ4/UNVYSFL7X9I/AAAAAAAACGs/jU3lCto1jGM/s217/2012-12-22_122152.jpg" /></p>
<p>有明顯的發現,利用屬性margin做位移,元素並沒有覆蓋堆疊的問題,但會<strong>影響到其它的元素位置</strong>,這是要特別注意小心的地方,不可不慎</p>
<h3>absolute</h3>
<p><strong>absolute</strong> 跟relative很像,差別在於位移時是從哪個起始點開始算起,剛剛的relative是從原本的位置開始算,而<STRIKE>absolute是從<strong>整個頁面的視窗</strong>開始算起</STRIKE>(感謝網友底下留言補充,這邊應該講從最近一個有 &#8220;position: relative&#8221; 的 parent node 開始算),並且並不會保留它原本的<strong>空間</strong>,範例如下</p>
<pre><code>#d1{
width: 100px;
height: 100px;
background: blue;
position: absolute;;
top: 20px;
left: 20px;
}
#d2{
width: 100px;
height: 100px;
background: red;
}
</code></pre>
<p><img src="https://lh5.googleusercontent.com/-gGhHTnjvx2M/UNVYSRKJwcI/AAAAAAAACGo/bqLVeZYOBok/s128/2012-12-22_123254.jpg" /></p>
<p>有發現藍色的&lt;div&gt;完全無視其它的元素存在,也不會干擾到其它的元素,因為它的原始空間也消失了,自己獨立起來自成一格,看起來還蠻容易了解的,不過有一個地方是初學者很容易混淆的,就是當relative和absolute一起使用時,那情形就會跟我們設想的不太一樣,範例如下</p>
<p>css</p>
<pre><code>#d1{
width: 100px;
height: 100px;
background: blue;
position: absolute;;
top: 20px;
left: 20px;
}
#d2{
width: 100px;
height: 100px;
background: red;
}
#d3{
position: relative;
width: 300px;
height: 300px;
border: solid 1px orange;
}
</code></pre>
<p>html</p>
<pre><code>&lt;div id="d3"&gt;
&lt;div id="d1"&gt;
div1
&lt;/div&gt;
&lt;div id="d2"&gt;
div2
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>這裡多用一個id為d3的&lt;div&gt;包住兩個&lt;div&gt;,d3的position屬性值為relative,此時會看到藍色的&lt;div&gt;屬性值position雖然一樣是absolute,但會看到位移不太一樣了</p>
<p><img src="https://lh6.googleusercontent.com/-pxPW5Q1Kocc/UNVYSScFsqI/AAAAAAAACGw/quewGWodrDc/s330/2012-12-22_124729.jpg" /></p>
<p>會發現藍色的&lt;div&gt;是<strong>從id為d3的&lt;div&gt;左上角開始定位</strong>,這代表是說,如果屬性值為absolute的&lt;div&gt;,上面還有被其它元素包住,就要注意位移計算的起始值會有所不同,那如果將relative移除的話呢?</p>
<p><img src="https://lh5.googleusercontent.com/-L0jg9uoCRoI/UNVYS-iDosI/AAAAAAAACG8/_2MhBfq6cA0/s326/2012-12-22_124746.jpg" /></p>
<p>嗯!定位又從頁面視窗的左上角當作起始點囉,如果覺得範例感覺不到效果,可以將top和left的值加大,會更明顯</p>
<h3>fixed</h3>
<p>最後講到的是fixed,它常被用於在Menu bar,位置也是受到 <strong>top</strong>、<strong>bottom</strong>、<strong>left</strong> 和 <strong>right</strong> 這些值影響,跟absolute類似,但有兩個不一樣的地方</p>
<p>1.它的位移起始的依據永遠都是<strong>視窗頁面</strong>,也就是說就算它有relative的父元素,並不會受到影響</p>
<p>2.它會跟著scroll移動,也就是說當畫面被往下拉時,該元素會跟隨著移到相對的位置</p>
<p>基於以上兩點的特色,我們就可以做出永遠固定在視窗某個地方的元素</p>
<p><img src="https://lh3.googleusercontent.com/-S6zIGb8HXio/UNVYTBy6PLI/AAAAAAAACHA/y94BoXH5TO8/s1075/2012-12-22_143751.jpg" /></p>
<p>像是 <a href="http://pinterest.com/" target="_blank">pinterest</a> 就有用到類似的效果,不過記得要搭配 <strong> z-index</strong> 來做元素堆疊</p>
<h2>結論</h2>
<p>其實網路上有很多很好的文章在討論關於css position的用法和觀念,也有很多很漂亮的排版,但只要掌握好基本觀念,我相信對於那些複雜的layout也可以輕鬆的理解</p>
<p>另外除了上面討論的四個屬性值以外,CSS3其實還有新增另外兩個,分別叫做 <a href="http://www.w3.org/TR/css3-positioning/#center-positioning" target="_blank">position: center</a> 和 <a href="http://www.w3.org/TR/css3-positioning/#page-positioning" target="_blank">position: page</a>,不過因為非主流且各瀏覽器支援程度很低,有興趣的人在自行研究即可</p>
<h3>參考資料:</h3>
<p><a href="http://blog.teamtreehouse.com/css-positioning?utm_source=CSS+Weekly&utm_campaign=CSS_Weekly_Issue_34&utm_medium=web" target="_blank">CSS Positioning: A Comprehensive Look</a></p>
<p><a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/" target="_blank">Learn CSS Positioning in Ten Steps(10個步驟學習CSS Position)</a></p>
<p><a href="http://css.1keydata.com/tw/position.php" target="_blank">CSS Position 位置</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[jQ-Plugin] 輕鬆加入Tag標籤功能的plugin-Tags Manager]]></title>
<link href="http://blog.rx836.tw/blog/jquery-tags-manager/"/>
<updated>2012-12-20T11:11:00+08:00</updated>
<id>http://blog.rx836.tw/blog/jquery-tags-manager</id>
<content type="html"><![CDATA[<p><img src="https://lh5.googleusercontent.com/-gxsgoBxzDI8/UNKSYvcQnPI/AAAAAAAACFc/7PiDy2u-3KA/s745/2012-12-20_111514.jpg" /></p>
<p>如果有在 <a href="http://stackoverflow.com/" target="_blank">stackoverflow</a> 上找過答案的朋友,應該對於他們的tag並不陌生,類似這樣的功能在許多blog或是論壇都有,但光是只有Tag這個功能已經不是重點所在,如何讓User有良好的Tag經驗是現今大家所追求的,簡單的說就是使用者經驗(UX),今天就來介紹一款我個人覺得不錯的jQuery plugin - Tags Manager</p>
<!--more-->
<h2>Start</h2>
<p><a href="https://github.com/max-favilli/tagmanager" target="_blank">Download from Github</a></p>
<p>使用方式相當相當的簡單,從github載下來後,將Tags Manager和所需要的css檔案掛載到網頁裡面,接下來只有兩個步驟</p>
<p>第一步驟就是在html裡面加上一個&lt;input&gt;</p>
<pre><code>&lt;input type="text" name="tags" placeholder="Tags" class="tagManager"/&gt;
</code></pre>
<p>第二個步驟就是在js加上一段程式碼</p>
<pre><code>jQuery(".tagManager").tagsManager();
</code></pre>
<p>完成,本篇介紹到此結束</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>好啦,真的就只有這兩行,打開網頁後你可以看到會有一個input,裡面有個預設文字Tags</p>
<p><img src="https://lh5.googleusercontent.com/-OR2B3B8UzXs/UNKSYj723cI/AAAAAAAACFg/Pz1flQNbeKg/s149/2012-12-20_113137.jpg" /></p>
<p>接著你在裡面輸入文字,只要<strong>你的焦點離開input</strong>、<strong>按下Enter</strong>或是<strong>加上逗號</strong>,都會自動幫你生成一個Tag</p>
<p><img src="https://lh5.googleusercontent.com/-Rq7wFJw2IH4/UNKSYmV6tWI/AAAAAAAACFk/k9e3c11qyZg/s202/2012-12-20_113346.jpg" /></p>
<p>而假如要刪除呢?只要對著Tag裡面的小x按下即可,這對於使用者來說非常的方便使用,那對於開發者來說要如何操作呢?</p>
<p>也許會有人問那我要怎麼取得那些Tag的值,如果你有用firebug或是google Chrome(按下F12呼叫開發者環境),可以看到Tags Manager會在增加Tag的同時,默默的在背後新增一個hidden,並且把值丟到裡面做暫存,所以當開發者想要將Tag的值送到Server端時,可以從這裡取出</p>
<p><img src="https://lh4.googleusercontent.com/-hfXPhL3aF1g/UNKSZaCL9fI/AAAAAAAACFo/aKDNo-6VMj8/s658/2012-12-20_113905.jpg" /></p>
<p>當然,Tag裡面還有很重要的一個功能就是智能輸入,會出現關鍵字的提示,但因為Tags Manager是利用 <a href="http://twitter.github.com/bootstrap/index.html" target="_blank">Bootstrap</a> 裡面的 <a href="http://twitter.github.com/bootstrap/javascript.html#typeahead" target="_blank">typeahead</a> ,所以要用到關鍵字的提示要載入Bootstrap才可以使用,以下就是範例</p>
<pre><code>jQuery(".tagManager").tagsManager({
prefilled: ["Pisa", "Rome"],
typeahead: true,
typeaheadSource: funSource
});
function funSource(){
var ret = ["Manchester", "Astonvilla", "Real Madrid", "Barcelona", "Milan AC", "Internazionale", "Roma AC", "Chelsea"];
return ret;
}
</code></pre>
<p>你可以將需要提示的tag寫成一個陣列,將值塞入參數 <strong>typeaheadSource</strong></p>
<p>其他的參數分別為</p>
<ul>
<li>prefilled:預先給予的Tag</li>
<li>CapitalizeFirstLetter:如果為true,會將Tag第一個字轉為大寫,其他為小寫</li>
<li>preventSubmitOnEnter:如果為true,假設&lt;input&gt;在&lt;form&gt;裡面,按下Enter將不會觸發Sibmit</li>
<li>typeahead:如果為true,就會有關鍵字的提示選擇</li>
<li>typeaheadAjaxSource:可以從Server端接收JSON格式的關鍵字提示選擇</li>
<li>typeaheadSource:可以接收陣列或funtion回傳陣列的關鍵字提示選擇</li>
</ul>
<p>這邊只介紹幾個主要的參數,其他還有許多不錯的參數應用可以直接參考 <a href="http://welldonethings.com/tags/manager" target="_blank">Tags Manager</a></p>
<h2>總結</h2>
<p>這是一套蠻方便的plugin,對於他的樣式如果不太喜歡還可以自己進行修改,另外對Tag還想要有更多的其他選擇,也可以參考 <a href="http://ioncache.github.com/Tag-Handler/" target="_blank">Tag Handler</a>、<a href="http://xoxco.com/projects/code/tagsinput/" target="_blank">jQuery Tags Input Plugin</a> 這些參考文章</p>
<h3>參考資料:</h3>
<p><a href="http://welldonethings.com/tags/manager" target="_blank">Tags Manager (a jQuery plugin)</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[JavaScript] DocumentFragments-JS加快效能的好物]]></title>
<link href="http://blog.rx836.tw/blog/javascript-documentframent/"/>
<updated>2012-12-18T14:38:00+08:00</updated>
<id>http://blog.rx836.tw/blog/javascript-documentframent</id>
<content type="html"><![CDATA[<p>JavaScript裡面有個物件叫DocumentFragments,它不算是新的觀念或新的技術,但我則是最近才認識到他,會想筆記這篇是因為他在操作DOM這方面的效能頗為出色,不過真的實驗下來好像只有某幾個瀏覽器或是版本才有明顯的效果,User的環境不同好像也會有些許的差異,下面就來看看用法和實際測試的結果</p>
<!--more-->
<h2>實驗開始</h2>
<p>假設一個情況,我們有時候可能要大量的動態增加元素,例如很多很多的&lt;div&gt;,我們會這樣寫</p>
<pre><code>function CreateNodes(){
for( var i=0; i&lt;10000; i++ ) {
var item = document.createElement('div');
$(item).text('div-'+i);
$(item).css({
background: 'blue',
padding: 5,
margin: 5,
float: 'left'
});
$('body').append(item);
}
}
</code></pre>
<p>這裡我們利用for迴圈增加了10000個div,不過這裡有個缺點,就是每一次新增一個div,都會對browser做一次『更新頁面』這個動作,所以如果新增10000個&lt;div&gt;,就會有一萬次的更新</p>
<p>再來我們看看DocumentFragment的寫法</p>
<pre><code>function CreateFragments(){
var fragment = document.createDocumentFragment();
for( var i=0; i&lt;10000; i++ ) {
var item = document.createElement('div');
$(item).text('div-'+i);
$(item).css({
background: 'blue',
padding: 5,
margin: 5,
float: 'left'
});
fragment.appendChild(item);
}
$('body').append(fragment);
}
</code></pre>
<p>關鍵點在於多了一個 <strong>document.createDocumentFragment()</strong> 這個物件,這個物件是一個虛擬的DOM節點,它可以增加元素在這個虛擬節點上面,就跟正常DOM差不多,但因為他是虛擬的,所以browser並不會做更新這個動作,而最後再把DocumentFragment裡面的元素一次加到body裡面,這有點像是buffer(緩衝區)的效果</p>
<p>最後我用了手邊的瀏覽器測了一下結果</p>
<p><strong>Firefox 17.0.1:</strong></p>
<p>用DocumentFragment反而慢了0.6~0.8秒左右</p>
<p><strong>Google Chrome 23.0.1271.97:</strong></p>
<p>沒有明顯的差別</p>
<p><strong>IE9:</strong></p>
<p>用了DocumentFragment大概10秒左右就可以載完畫面,沒用大概要花上20幾秒&#8230;</p>
<h2>結論</h2>
<p>這裡有個 <a href="http://jsperf.com/out-of-dom-vs-documentfragment/3" target="_blank">網站</a> 裡面有各個瀏覽器版本的測試報告,有興趣的可以參考看看,整體看下來DocumentFragment的確可以有效改善操作DOM的效能,我的想法是,其實現在的瀏覽器速度越來越快,有時候真的很難感受的到那幾毫秒的差距,但如果要顧慮到支援舊有的瀏覽器,那效能部分可能就要注意一下,不過適時的提醒用戶,想要有順暢的體驗,還是擺上Chrome或Firefox的下載連結其實也是不錯的</p>
<h3>參考資料:</h3>
<p><a href="http://davidwalsh.name/documentfragment" target="_blank">JavaScript DocumentFragment</a></p>
<p><a href="http://jsperf.com/out-of-dom-vs-documentfragment/3" target="_blank">out of dom vs documentfragment</a></p>
<p><a href="http://www.hujuntao.com/archives/using-documentfragment-speed-up-dom-rendering.html" target="_blank">利用DocumentFragment加快DOM渲染速度</a></p>
<p><a href="http://fstoke.me/blog/?p=2487" target="_blank">使用DocumentFragment來加快DOM操作速度</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[jQuery] 自製jQuery Ajax Loader]]></title>
<link href="http://blog.rx836.tw/blog/jquery-ajax-loader/"/>
<updated>2012-12-13T07:01:00+08:00</updated>
<id>http://blog.rx836.tw/blog/jquery-ajax-loader</id>
<content type="html"><![CDATA[<p>現代的網頁技術越來越重視Ajax(Asynchronous JavaScript and XML),很多地方都可以看的到他的身影,最為人所知的就是Google有很多服務都有運用此技術,例如Gmail、Google Map等,在使用Ajax時因為是 <strong>非同步傳輸</strong> 的關係,所以User在傳送資料過程中,可以繼續做其他事情,不過有時候怕User以為按了沒反應認為網頁掛掉,會加上一些Ajax loading來提示網頁還在運作</p>
<!--more-->
<p>以前我最常用到的是 <a href="http://www.malsup.com/jquery/block/#overview" target="_blank">jQuery BlockUI Plugin</a>,但畢竟是別人寫的plugin,總是覺得有些功能有點多餘,雖然jQuery BlockUI大小大概只有18kb左右,但還是總會想要更精簡,做更符合自己想要的plugin出來,找了一些資料以後,大概知道一些運作的原理,下面就來筆記</p>
<h2>Start</h2>
<p>首先是html部份</p>
<pre><code>&lt;div&gt;
內容
&lt;/div&gt;
</code></pre>
<p>對..,沒錯,html部份這樣就可以了,其實自製的好處在於是,你不用為了做Ajax loading的效果而特地在HTML上增加額外的元素,所有需要用到的元素都是利用jQuery動態加入,所以保持原本的頁面即可</p>
<p>不過為了展現Demo效果,還是要加上一些css才行</p>
<pre><code>div{
background-color: blue;
height: 800px;
position: relative;
width: 100%;
}
</code></pre>
<p>接著是js主程式部份</p>
<pre><code>function ajaxLoader (el, options) {
// Becomes this.options
var defaults = {
bgColor : '#fff',
duration : 800,
opacity : 0.7,
classOveride : false
}
this.options = jQuery.extend(defaults, options);
this.container = $(el);
this.init = function() {
var container = this.container;
// Delete any other loaders
this.remove();
// Create the overlay
var overlay = $('&lt;div&gt;&lt;/div&gt;').css({
'background-color': this.options.bgColor,
'opacity':this.options.opacity,
'width':container.width(),
'height':container.height(),
'position':'absolute',
'top':'0px',
'left':'0px',
'z-index':99999
}).addClass('ajax_overlay');
// add an overiding class name to set new loader style
if (this.options.classOveride) {
overlay.addClass(this.options.classOveride);
}
// insert overlay and loader into DOM
container.append(
overlay.append($('&lt;div&gt;&lt;/div&gt;').addClass('ajax_loader')).fadeIn(this.options.duration)
);
};
this.remove = function(){
var overlay = this.container.children(".ajax_overlay");
if (overlay.length) {
overlay.fadeOut(this.options.classOveride, function() {
overlay.remove();
});
}
}
this.init();
}
</code></pre>
<p>大概50行不到的程式碼,這裡說明一下整個運作過程</p>
<p>因為JavaScript並沒有類別,所以這邊用的是建構式函式,之前曾經寫過關於 <a href="http://blog.rx836.tw/blog/javascript-custom-function/">建構式函式</a> 的文章,有興趣的人可以參考看看,我們命名了一個function <strong>ajaxLoader</strong>,裡面有預設值 <strong>defaults</strong>,是在沒有給予 <strong>options</strong> 時會用到的</p>
<p>而 <strong>this.container</strong> 就是要被block的元素,<strong>this.init</strong> 裡面包含的是動態加入Ajax loading的效果,可以看到最主要加了一個&lt;div&gt;進去,給予他透明度(opacity)、背景顏色(background-color),最最最最最最重要的是把 <strong>z-index</strong> 設成99999,這樣才能讓被block的元素確實達到無法操控,在這個&lt;div&gt;裡面還包了一層&lt;div&gt;是放置載入中的轉圈圈圖片</p>
<p><img src="https://lh4.googleusercontent.com/-7nndaD_jRSg/UMlDmhEwXEI/AAAAAAAACE0/Jp_u5yf9blY/s31/spinner_squares_circle.gif" /></p>
<p>另外 <strong>this.remove</strong> 就是移除效果,所以整個程式碼其實不難,也沒有其他多餘的阿雜,要使用的時候可以這樣寫</p>
<p>css部份</p>
<pre><code>.ajax_loader {background: url("spinner_squares_circle.gif") no-repeat center center transparent;width:100%;height:100%;}
</code></pre>
<p>預設的轉圈圈圖片</p>
<p>js部份</p>
<pre><code>var options = {
bgColor : '#fff',
duration : 800,
opacity : 0.7,
classOveride : false
}
var block;
$("div").live('click', function(){
block = new ajaxLoader(this, options);
});
</code></pre>
<p><strong>ajaxLoader</strong> 第一個參數可以丟入其他想要被block的元素,第二個就是自訂參數,自訂參數說明如下</p>
<ul>
<li>bgColor: string – 覆蓋的背景顏色</li>
<li>duration: number – fadeIn和fadeOut效果延遲時間</li>
<li>opacity: number – 背景透明度</li>
<li>classOveride: string – 如果想要別的Ajax loading圖片效果,可以加上自訂的class,然後在css自訂樣式即可</li>
</ul>
<p>假如想要移除的話</p>
<pre><code>block.remove();
</code></pre>
<p>想要看更多用法的話可以看這個 <a href="http://www.aplusdesign.com.au/demos/ajax-loader/index.html" target="_blank">Demo</a></p>
<p>有了這個基本的架構和觀念以後,就可以自己客製化屬於自己的Ajax loading效果,而不必再拘束別人的plugin之下,整個js也輕量許多</p>
<h3>參考資料:</h3>
<p><a href="http://www.aplusdesign.com.au/blog/jquery-ajax-loader-spinner/" target="_blank">jQuery Ajax Loader &amp; Spinner</a></p>
<p><a href="http://www.ajaxload.info/" target="_blank">推薦製作gif圖檔的工具-ajaxload.info</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[HTML5] 5個你可能不知道的HTML5 API]]></title>
<link href="http://blog.rx836.tw/blog/5-html5-api-you-did-not-know/"/>
<updated>2012-12-12T06:46:00+08:00</updated>
<id>http://blog.rx836.tw/blog/5-html5-api-you-did-not-know</id>
<content type="html"><![CDATA[<p>HTML5已經火紅了一陣子,姑且不論他到底能不能主宰未來的網頁技術,達到一統江山,天下太平(?)的目的,至少現在已經越來越多人開始將HTML5應用在實際的專案上,小弟雖然目前還沒大量使用到新技術,但今天還是來分享五個可能比較少人知道的,HTML和JavaScript API,希望讓大家多了解HTML5還有哪些新玩意</p>
<!--more-->
<h2>Fullscreen API</h2>
<p>最近或許在網路上看過一些可以做全螢幕效果的jQuery plugin,實現這個效果用到的就是 <strong>Fullscreen API</strong>,範例如下</p>
<pre><code>function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element
</code></pre>
<p>你可以給予整個HTML做整頁的全螢幕,也可以單獨給某個ID的元素,但有一點要注意的是,我在寫範例時需加上一些動作去 <strong>啟動</strong> 全螢幕,例如點擊某個button之類的,而不能在一進入頁面就啟用全螢幕模式,這點跟 <strong>另開啟視窗</strong> 有點像,另外在啟用前瀏覽器會詢問你是否允許全螢幕,如下圖</p>
<p><img src="https://lh6.googleusercontent.com/--HepWolPOjY/UMe36hSpsNI/AAAAAAAACEA/mMSMIKo40F8/s692/aaa.jpg" /></p>
<p>這效果經常用在一些遊戲上面,例如擁有第一人稱視角的射擊遊戲 - <a href="https://developer.mozilla.org/en-US/demos/detail/bananabread" target="_blank">BananaBread</a></p>
<h2>Page Visibility API</h2>
<p><img src="https://lh4.googleusercontent.com/-IDcX0ql8dOs/UMe36kP6YKI/AAAAAAAACD8/Jg5gmM5w4OI/s370/a2.jpg" /></p>
<p>老實說第一次Demo這個API的效果覺得還蠻好笑的&#8230;,就如同範例一樣,他可以讓開發者監控User是不是在此頁籤,可以從範例效果得知,當我離開此頁籤時,HTML Title就會改成 &#8220;我又跳出去了&#8221;,如果回到此頁籤當中,就會改回 &#8220;我又跳進來了&#8221;,其實還蠻欠打的&#8230;,阿不是,是蠻實用的XD</p>
<pre><code>// Adapted slightly from Sam Dutton
// Set name of hidden property and visibility change event
// since some browsers only offer vendor-prefixed support
var hidden, state, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
// Add a listener that constantly changes the title
document.addEventListener(visibilityChange, function() {
if(document[state]=='visible'){
document.title = '我又跳進來了';
}else if(document[state]=='hidden'){
document.title = '我又跳出去了';
}
}, false);
// Set the initial value
document.title = '我又跳進來了';
</code></pre>
<h2>getUserMedia API</h2>
<p>這個API很酷的地方在於可以利用一些電腦的視訊媒體做互動!例如像是操作筆電的webcam,搭配&lt;canvas&gt;可以做到拍攝照片的效果</p>
<pre><code>// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
}, false);
</code></pre>
<p>可以直接看很強大的 <a href="http://davidwalsh.name/demo/camera.php" target="_blank">Demo</a> 部份(記得使用Google Chrome效果較佳)</p>
<h2>Battery API</h2>
<p>我想這個應該不難理解,可以直接取得你目前設備的電池使用狀況,雖然目前還不普及,但至少已經證明了未來用HTML5技術是有可能對硬體底層做操作:)</p>
<pre><code>// Get the battery!
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
// A few useful battery properties
console.warn("Battery charging: ", battery.charging); // true
console.warn("Battery level: ", battery.level); // 0.58
console.warn("Battery discharging time: ", battery.dischargingTime);
// Add a few event listeners
battery.addEventListener("chargingchange", function(e) {
console.warn("Battery charge change: ", battery.charging);
}, false);
</code></pre>
<p>一樣可以直接看 <a href="http://davidwalsh.name/demo/battery-api.php" target="_blank">Demo</a>,我用筆電開啟Firefox測試果然還蠻準的,真的就是98%</p>
<p><img src="https://lh4.googleusercontent.com/-ZCusQMl_zlw/UMe36s4-QnI/AAAAAAAACEE/Rih2Tvfj3os/s323/a3.jpg" /></p>
<h2>Link Prefetching</h2>
<p>這個API特別的地方在於,假如你先在HTML裡面加上下面這些Tag,瀏覽器就會在背後偷偷的預先載入這些資源,讓你在連結這些link的時候可以有更順暢的體驗</p>
<pre><code>&lt;!-- full page --&gt;
&lt;link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /&gt;
&lt;!-- just an image --&gt;
&lt;link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" /&gt;
</code></pre>
<p>以上五個是比較少見的HTML5 API,有些雖然瀏覽器的支援普及度不高,但整體來說都是對User好的使用者體驗,提早先熟悉對開發者來說是件好事,希望以後可以真的大量運用在Web應用程式當中</p>
<h3>參考資料:</h3>
<p><a href="http://davidwalsh.name/more-html5-apis" target="_blank">5 More HTML5 APIs You Didn’t Know Existed</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
<entry>
<title type="html"><![CDATA[[CSS] 利用CSS3做scrolling effect]]></title>
<link href="http://blog.rx836.tw/blog/css3-scrolling-effect/"/>
<updated>2012-12-11T07:05:00+08:00</updated>
<id>http://blog.rx836.tw/blog/css3-scrolling-effect</id>
<content type="html"><![CDATA[<p><img src="https://lh6.googleusercontent.com/-URpPFCw8GZY/UMZ5NsXYJuI/AAAAAAAACC4/Bjab2PYz86w/s1077/2012-12-11_071208.jpg" /></p>
<p>今天看到一篇文章介紹美國 <a href="http://www.ebay.com/new" target="_blank">ebay</a> 網站的scrolling effect,觀念其實蠻簡單的,重點是我原本以為需要用到js才能達到,但後來發現根本連一行js都不用寫,只需要用到CSS3即可,這邊就來筆記一下過程</p>
<!--more-->
<h2>Start</h2>
<p>一開始先準備三張可以延伸到整個螢幕大小的照片,如果手邊沒有,可以直接使用文章裡面的<a href="pepsized.com/wp-content/uploads/2012/11/lavender.zip" target="_blank">Demo</a>,就有現成的圖片可以練習,另外下面都是用Demo裡面的檔案做講解</p>
<p>HTML部份</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html class="no-js" lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;title&gt;From love for lavender&lt;/title&gt;
&lt;!-- 略... --&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;header class=" content"&gt;
&lt;div class="wrapper"&gt;
&lt;h1&gt;From love for lavender&lt;/h1&gt;
&lt;p&gt;&lt;span&gt;Lavender&lt;/span&gt; (botanic name Lavandula) is a ....
&lt;/p&gt;
&lt;/div&gt;
&lt;/header&gt;
&lt;section class="content" id="oil"&gt;
&lt;div class="wrapper"&gt;
&lt;p&gt;&lt;span&gt;Lavender oil&lt;/span&gt; is an ... &lt;/p&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;!-- 略... --&gt;
&lt;footer&gt;
&lt;div class=wrapper&gt;
"From love for lavender" has been built ...
&lt;/div&gt;
&lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p>HTML部份就是常見的HTML5的架構,有&lt;header&gt;、&lt;section&gt;和&lt;footer&gt;,每個裡面都包含有一個class為 &#8220;wrapper&#8221; 的&lt;div&gt;</p>
<p>再來是基本的CSS部份</p>
<pre><code>.wrapper {
width: 100%;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</code></pre>
<p>會看到有一個比較少見的屬性叫 <strong>box-sizing</strong>,他是CSS3的屬性,如果我們設box-sizing為 <strong>border-box</strong>,意思就是指width和height的部份都包含了 <strong>padding</strong> 和 <strong>border</strong>,詳細的屬性說明可以參考 <a href="http://www.w3cplus.com/content/css3-box-sizing" target="_blank">這篇</a></p>
<p>接著是scrolling effect部份</p>
<pre><code>section:after, header:after {
content: "";
display: block;
height: 400px;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}
header:after {
background-image: url(../images/lavenderbg1.jpg); }
#oil:after {
background-image: url(../images/lavenderbg2.jpg); }
#culinary:after {
background-image: url(../images/lavenderbg3.jpg); }
#dried:after {
background-image: url(../images/lavenderbg4.jpg); }
</code></pre>
<p>因為沒有用到js的關係,但我們又想在HTML上新增元素,所以我們可以利用CSS的pseudo-elements <strong>:after</strong>,他會幫我們在元素後面加上新的元素上去,並且擁有 <strong>background</strong>,另外,我們將屬性 <strong>background-attachment</strong> 設定為fixed,這也是scrolling effect的重點所在,意思就是指<strong>當頁面滾動時,背景圖並不會跟著移動</strong></p>
<p>這樣就大功告成囉,有沒有覺得效果很不錯呢?</p>
<h3>參考資料:</h3>
<p><a href="http://pepsized.com/how-to-recreate-the-new-e-bay-site-scrolling-effect/?utm_source=CSS+Weekly&utm_campaign=CSS_Weekly_Issue_33&utm_medium=web" target="_blank">How to recreate the new e-bay site scrolling effect</a></p>
<p><a href="http://www.w3cplus.com/content/css3-box-sizing" target="_blank">CSS3 Box-sizing </a></p>
<p><a href="http://www.w3school.com.cn/css/pr_background-attachment.asp" target="_blank">CSS background-attachment 属性</a></p>
<p>內容如有錯誤,歡迎指正</p>
]]></content>
</entry>
</feed>