Skip to content
Browse files

Site updated at 2013-05-16 09:37:03 UTC

  • Loading branch information...
1 parent feb0972 commit 36d9067448ce4856fd0ecda35819e1f9d1616a24 unknown committed May 16, 2013
Showing with 1,759 additions and 1,024 deletions.
  1. +5 −5 about/index.html
  2. +187 −64 atom.xml
  3. +5 −5 blog/2-vmware-windows-8/index.html
  4. +5 −5 blog/5-css-properties/index.html
  5. +5 −5 blog/5-html5-api-you-did-not-know/index.html
  6. +5 −5 blog/alert-confirm-prompt/index.html
  7. +5 −5 blog/android-facebook-key-hashes/index.html
  8. +5 −5 blog/android-phonegap-usb-develop/index.html
  9. +25 −11 blog/archives/index.html
  10. +5 −5 blog/book-review-1/index.html
  11. +5 −5 blog/book-review-2/index.html
  12. +5 −5 blog/book-review-3/index.html
  13. +5 −5 blog/book-review-4/index.html
  14. +5 −5 blog/book-review-5/index.html
  15. +5 −5 blog/book-review-6/index.html
  16. +1 −1 blog/categories/css/atom.xml
  17. +5 −5 blog/categories/css/index.html
  18. +1 −1 blog/categories/facebook/atom.xml
  19. +5 −5 blog/categories/facebook/index.html
  20. +1 −1 blog/categories/html5/atom.xml
  21. +5 −5 blog/categories/html5/index.html
  22. +1 −1 blog/categories/javascript/atom.xml
  23. +5 −5 blog/categories/javascript/index.html
  24. +187 −122 blog/categories/jq-plugin/atom.xml
  25. +19 −5 blog/categories/jq-plugin/index.html
  26. +1 −1 blog/categories/jquery/atom.xml
  27. +5 −5 blog/categories/jquery/index.html
  28. +1 −1 blog/categories/octopress/atom.xml
  29. +5 −5 blog/categories/octopress/index.html
  30. +1 −1 blog/categories/phonegap/atom.xml
  31. +5 −5 blog/categories/phonegap/index.html
  32. +1 −1 blog/categories/win8/atom.xml
  33. +5 −5 blog/categories/win8/index.html
  34. +1 −1 blog/categories/好書分享/atom.xml
  35. +5 −5 blog/categories/好書分享/index.html
  36. +1 −1 blog/categories/學習筆記/atom.xml
  37. +5 −5 blog/categories/學習筆記/index.html
  38. +5 −5 blog/create-lazy-loading/index.html
  39. +5 −5 blog/css-cursor-rule/index.html
  40. +5 −5 blog/css-oocss/index.html
  41. +5 −5 blog/css-positioning/index.html
  42. +5 −5 blog/css-styling-scrollbars/index.html
  43. +5 −5 blog/css3-checkboxes-radiobuttons/index.html
  44. +5 −5 blog/css3-real-beauty-box-shadows/index.html
  45. +5 −5 blog/css3-scrolling-effect/index.html
  46. +5 −5 blog/css3-transitions-guide/index.html
  47. +5 −5 blog/data-uri-web-desing/index.html
  48. +5 −5 blog/design-thinking/index.html
  49. +5 −5 blog/facebook-app-create-getfbid/index.html
  50. +5 −5 blog/facebook-expired-access-tokens/index.html
  51. +5 −5 blog/facebook-page-tab-scroll/index.html
  52. +5 −5 blog/facebook-world-hack/index.html
  53. +5 −5 blog/first-amazon-web-services/index.html
  54. +5 −5 blog/first-octopress/index.html
  55. +5 −5 blog/first-win8-app/index.html
  56. +5 −5 blog/friendly-tooltip-responsive/index.html
  57. +5 −5 blog/hpx-life-23/index.html
  58. +5 −5 blog/inline-block-display-product-grid-view/index.html
  59. +5 −5 blog/introduce-compass/index.html
  60. +5 −5 blog/introduce-ted/index.html
  61. +5 −5 blog/javascript-currying/index.html
  62. +5 −5 blog/javascript-custom-function/index.html
  63. +5 −5 blog/javascript-documentframent/index.html
  64. +5 −5 blog/javascript-namespace/index.html
  65. +5 −5 blog/javascript-patterns-1/index.html
  66. +5 −5 blog/javascript-prototype/index.html
  67. +5 −5 blog/javascript-simple-object/index.html
  68. +5 −5 blog/javascript-xmlhttprequest-level-2/index.html
  69. +5 −5 blog/jquery-8-skill/index.html
  70. +5 −5 blog/jquery-accordion-plugin-kwicks/index.html
  71. +5 −5 blog/jquery-ajax-cache/index.html
  72. +5 −5 blog/jquery-ajax-loader/index.html
  73. +5 −5 blog/jquery-countdown-plugins/index.html
  74. +5 −5 blog/jquery-css3-flip-plugin/index.html
  75. +5 −5 blog/jquery-data-cache/index.html
  76. +5 −5 blog/jquery-drop-down-lists/index.html
  77. +5 −5 blog/jquery-happyjs/index.html
  78. +5 −5 blog/jquery-hoverpulse/index.html
  79. +5 −5 blog/jquery-html-forms/index.html
  80. +5 −5 blog/jquery-jscrollpane-display/index.html
  81. +5 −5 blog/jquery-not-initialize-all-things/index.html
  82. +5 −5 blog/jquery-notes-1/index.html
  83. +5 −5 blog/jquery-notes-2/index.html
  84. +468 −0 blog/jquery-plugin-for-pinterest/index.html
  85. +5 −5 blog/jquery-plugin-format-number/index.html
  86. +5 −5 blog/jquery-plugin-timeago/index.html
  87. +5 −5 blog/jquery-slice-images-into-tiles/index.html
  88. +7 −5 blog/jquery-sprite/index.html
  89. +5 −5 blog/jquery-star-box/index.html
  90. +5 −5 blog/jquery-tags-manager/index.html
  91. +5 −5 blog/jquery-waterfall-infinitescroll/index.html
  92. +5 −5 blog/mailcheck-jquery-plugin/index.html
  93. +5 −5 blog/note-marketing/index.html
  94. +5 −5 blog/octopress-notes-1/index.html
  95. +5 −5 blog/octopress-notes-2/index.html
  96. +52 −52 blog/page/2/index.html
  97. +52 −50 blog/page/3/index.html
  98. +50 −50 blog/page/4/index.html
  99. +50 −50 blog/page/5/index.html
  100. +50 −50 blog/page/6/index.html
  101. +50 −54 blog/page/7/index.html
  102. +54 −7 blog/page/8/index.html
  103. +5 −5 blog/parallax-scrolling/index.html
  104. +5 −5 blog/phonegap-first/index.html
  105. +5 −5 blog/responsive-tables/index.html
  106. +5 −5 blog/sticky-object/index.html
  107. +5 −5 blog/stop-wasting-time-for-ie/index.html
  108. +5 −5 blog/twitter-bootstrap/index.html
  109. +5 −5 blog/vmware-windows-8/index.html
  110. +5 −5 blog/windows8-notifications/index.html
  111. +5 −5 blog/work-1/index.html
  112. +52 −52 index.html
  113. +6 −2 sitemap.xml
View
10 about/index.html
@@ -111,13 +111,17 @@ <h1 class="entry-title">About</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -133,10 +137,6 @@ <h1 class="entry-title">About</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
251 atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[apa]]></title>
<link href="http://blog.rx836.tw/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-02-28T21:05:23+08:00</updated>
+ <updated>2013-05-16T17:36:13+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -14,6 +14,192 @@
<entry>
+ <title type="html"><![CDATA[jquery-plugin-for-pinterest]]></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://lh6.googleusercontent.com/-3uQelUPbt2g/UZSmojbUPxI/AAAAAAAACcA/uPWSGQBZYoQ/w170-h167-no/2013-05-16_162143.jpg" /></p>
+
+<p>大部分的網站要與社群做結合,多以FB、G+、Twitter、或是微博等為主,但這幾天看到一篇文章,是連結 <strong>pinterest</strong> 來做為分享圖片的對象,在此特別紀錄下來</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 );
+
+$(document).on('ready', function(){
+ //不喜歡預設圖可以直接這樣替換
+ $('img#share').pinterest({ button: 'pinterest-alt.png'});
+});
+</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 );
+
+$(document).on('ready', function(){
+ $('img#share').pinterest({ button: 'pinterest-alt.png'});
+});
+</code></pre>
+
+<p>以上程式內容主要是用一個 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 );
+
+$(document).on('ready', function(){
+ $('img#share').pinterest({ button: 'pinterest-small.png'});
+});
+</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:從哪個 url 分享而來,利用 document.location 語法取得</p>
+
+<p>media:利用 .attr() 取得該 img 的 src</p>
+
+<p>description:利用 .attr() 取得該 img 的 title</p>
+
+<p>當然,記得使用 encodeURIComponent 做編碼</p>
+
+<p>最後,為了方便 img 的 src 不管是絕對路徑還是相對路徑都可以讓 pinterest 可以使用,要自動加上主機的網址路徑 http://xxx.xxx.com/</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>
+
+<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>
@@ -2501,67 +2687,4 @@ function Numeral (number) {
]]></content>
</entry>
- <entry>
- <title type="html"><![CDATA[[jQ-Plugin] 圖片延遲加載-Lazy-Loading]]></title>
- <link href="http://blog.rx836.tw/blog/create-lazy-loading/"/>
- <updated>2012-12-03T15:01:00+08:00</updated>
- <id>http://blog.rx836.tw/blog/create-lazy-loading</id>
- <content type="html"><![CDATA[<p><img src="https://lh4.googleusercontent.com/-9VL-bSTiio8/ULxO_q7aPbI/AAAAAAAACAQ/R6Nns5e2_T0/s551/qwer.jpg" /></p>
-
-<p>延遲加載圖片常用在有大量圖片的網站,在訪客還沒看到的區域先暫停讀取圖片,等到看到特定區域時才將需要的圖片載入,好處是可以減少一開始等待所有圖片載入的時間,避免訪客感到不耐煩而流失,要做到此效果只需要搭配簡單的jQuery plugin,並且在HTML上加點技巧即可,重點是,要加上這個效果對設計師來說並不困難,因為裡面並沒有涉及到太多JavaScript知識</p>
-
-<!--more-->
-
-
-<h2>Start</h2>
-
-<p>首先必須下載jQuery和<a href="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js" target="_blank">minified lazyload script</a>,並且加掛在網頁裡面</p>
-
-<pre><code>&lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt;
-&lt;script src="jquery.lazyload.js" type="text/javascript"&gt;&lt;/script&gt;
-</code></pre>
-
-<p>接著我們需要建立一個 1x1 px的灰色小圖,這將會取代尚未讀取到的圖片,來做為延遲加載的效果</p>
-
-<p><img src="https://lh4.googleusercontent.com/-GynYPKkHJnU/ULxbNG8liyI/AAAAAAAACA0/QMBzvG46740/s530/rtyu.jpg" /></p>
-
-<p>接著是HTML部分</p>
-
-<pre><code>&lt;div class="frame"&gt;&lt;img class="lazy" src="img/g.gif" data-original="img/interior_01.jpg" width="500" height="333" alt="interior shot #1"&gt;&lt;/div&gt;
-</code></pre>
-
-<p>這邊特別的是&lt;img&gt;的屬性 <strong>src</strong> 並不是指向原始圖檔,而是 1x1 px的小圖,而原始圖檔擺放的位置在屬性 <strong>data-original</strong> 裡面,另外要給予原始圖檔的 <strong>width</strong> 和 <strong>height</strong>,避免不必要的錯誤發生</p>
-
-<h3>noscript</h3>
-
-<p>在瀏覽器沒有開啟JavaScript的情況下,我們可能也要做一些預防措施,直接將圖片載入,不然使用者看到的圖片都是一片灰</p>
-
-<pre><code>&lt;div class="frame"&gt;&lt;img class="lazy" src="img/g.gif" data-original="img/interior_01.jpg" width="500" height="333" alt="interior shot #1"&gt;&lt;/div&gt;
-&lt;noscript&gt;&lt;img src="img/interior_01.jpg" width="500" height="333" alt="interior shot #1"&gt;&lt;/noscript&gt;
-</code></pre>
-
-<p>接著是JS部分</p>
-
-<pre><code>$("img.lazy").lazyload();
-</code></pre>
-
-<p>大功告成!很容易吧,假如你不太喜歡這麼呆滯的載入圖片,可以加入一些效果,例如 <strong>fadeIn</strong></p>
-
-<pre><code>$("img.lazy").lazyload({
- effect: "fadeIn"
-});
-</code></pre>
-
-<p>想要看更多運用,可以連到參考資料</p>
-
-<h3>參考資料:</h3>
-
-<p><a href="http://speckyboy.com/2012/10/18/how-to-create-lazy-loading-images-for-your-website/" target="_blank">How to Create Lazy-Loading Images for your Website</a></p>
-
-<p><a href="http://www.appelsiini.net/projects/lazyload" target="_blank">Lazy Load Plugin for jQuery</a></p>
-
-<p>內容如有錯誤,歡迎指正</p>
-]]></content>
- </entry>
-
</feed>
View
10 blog/2-vmware-windows-8/index.html
@@ -276,13 +276,17 @@ <h1 class="entry-title">[學習筆記] 簡單容易,如何在VM裝Windows 8來
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -298,10 +302,6 @@ <h1 class="entry-title">[學習筆記] 簡單容易,如何在VM裝Windows 8來
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
10 blog/5-css-properties/index.html
@@ -516,13 +516,17 @@ <h1 class="entry-title">[CSS] 5個對設計師有幫助的CSS屬性</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -538,10 +542,6 @@ <h1 class="entry-title">[CSS] 5個對設計師有幫助的CSS屬性</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
10 blog/5-html5-api-you-did-not-know/index.html
@@ -336,13 +336,17 @@ <h1 class="entry-title">[HTML5] 5個你可能不知道的HTML5 API</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -358,10 +362,6 @@ <h1 class="entry-title">[HTML5] 5個你可能不知道的HTML5 API</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
10 blog/alert-confirm-prompt/index.html
@@ -281,13 +281,17 @@ <h1 class="entry-title">[jQ-Plugin] 用jQuery打造alert、confirm和prompt Dial
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -303,10 +307,6 @@ <h1 class="entry-title">[jQ-Plugin] 用jQuery打造alert、confirm和prompt Dial
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
10 blog/android-facebook-key-hashes/index.html
@@ -255,13 +255,17 @@ <h1 class="entry-title">[PhoneGap] Android開發Facebook取得Key Hashes</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -277,10 +281,6 @@ <h1 class="entry-title">[PhoneGap] Android開發Facebook取得Key Hashes</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
10 blog/android-phonegap-usb-develop/index.html
@@ -263,13 +263,17 @@ <h1 class="entry-title">[PhoneGap] 如何搭配平板或手機開發Android</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -285,10 +289,6 @@ <h1 class="entry-title">[PhoneGap] 如何搭配平板或手機開發Android</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
36 blog/archives/index.html
@@ -9,9 +9,9 @@
<meta name="author" content="阿帕">
- <meta name="description" content="Blog Archive 2013 [jQ-Plugin] 利用jQuery做CSS Sprite效果
-Feb 28 2013 posted in jQ-Plugin [jQ-Plugin] 在網站中加入星星評分效果
-Jan 29 2013 posted in jQ-Plugin [jQ- &hellip;">
+ <meta name="description" content="Blog Archive 2013 jquery-plugin-for-pinterest
+May 16 2013 posted in jQ-Plugin [jQ-Plugin] 利用jQuery做CSS Sprite效果
+Feb 28 2013 posted in jQ-Plugin [jQ- &hellip;">
<!-- http://t.co/dKP3o1e -->
@@ -35,9 +35,9 @@
<meta property="fb:app_id" content="416172151763823" />
<meta property="og:title" content="Blog Archive - apa" />
-<meta property="og:description" content="Blog Archive 2013 [jQ-Plugin] 利用jQuery做CSS Sprite效果
-Feb 28 2013 posted in jQ-Plugin [jQ-Plugin] 在網站中加入星星評分效果
-Jan 29 2013 posted in jQ-Plugin [jQ- &hellip;" />
+<meta property="og:description" content="Blog Archive 2013 jquery-plugin-for-pinterest
+May 16 2013 posted in jQ-Plugin [jQ-Plugin] 利用jQuery做CSS Sprite效果
+Feb 28 2013 posted in jQ-Plugin [jQ- &hellip;" />
<meta property="og:url" content="http://blog.rx836.tw/blog/archives/" />
@@ -104,6 +104,20 @@ <h1 class="entry-title">Blog Archive</h1>
<article>
+<h1><a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a></h1>
+<time datetime="2013-05-16T12:13:00+08:00" pubdate><span class='month'>May</span> <span class='day'>16</span> <span class='year'>2013</span></time>
+
+<footer>
+ <span class="categories">posted in <a class='category' href='/blog/categories/jq-plugin/'>jQ-Plugin</a></span>
+</footer>
+
+
+</article>
+
+
+
+<article>
+
<h1><a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a></h1>
<time datetime="2013-02-28T20:53:00+08:00" pubdate><span class='month'>Feb</span> <span class='day'>28</span> <span class='year'>2013</span></time>
@@ -1207,13 +1221,17 @@ <h1 class="entry-title">Blog Archive</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -1229,10 +1247,6 @@ <h1 class="entry-title">Blog Archive</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
10 blog/book-review-1/index.html
@@ -234,13 +234,17 @@ <h1 class="entry-title">[好書分享] 只剩下一個角落的繁華</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -256,10 +260,6 @@ <h1 class="entry-title">[好書分享] 只剩下一個角落的繁華</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
10 blog/book-review-2/index.html
@@ -218,13 +218,17 @@ <h1 class="entry-title">[好書分享] 疼痛,才叫青春</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -240,10 +244,6 @@ <h1 class="entry-title">[好書分享] 疼痛,才叫青春</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
10 blog/book-review-3/index.html
@@ -216,13 +216,17 @@ <h1 class="entry-title">[好書分享] 預見未來</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -238,10 +242,6 @@ <h1 class="entry-title">[好書分享] 預見未來</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
10 blog/book-review-4/index.html
@@ -226,13 +226,17 @@ <h1 class="entry-title">[好書分享] 社群效應:小圈圈如何改變世界<
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -248,10 +252,6 @@ <h1 class="entry-title">[好書分享] 社群效應:小圈圈如何改變世界<
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
10 blog/book-review-5/index.html
@@ -224,13 +224,17 @@ <h1 class="entry-title">[好書分享] 為什麼搜尋將被淘汰</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -246,10 +250,6 @@ <h1 class="entry-title">[好書分享] 為什麼搜尋將被淘汰</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
10 blog/book-review-6/index.html
@@ -228,13 +228,17 @@ <h1 class="entry-title">[好書分享] 開放式領導</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -250,10 +254,6 @@ <h1 class="entry-title">[好書分享] 開放式領導</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
2 blog/categories/css/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: CSS | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/css/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-02-28T21:05:23+08:00</updated>
+ <updated>2013-05-16T17:36:13+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/css/index.html
@@ -321,13 +321,17 @@ <h1 class="entry-title">Category: CSS</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -343,10 +347,6 @@ <h1 class="entry-title">Category: CSS</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
2 blog/categories/facebook/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Facebook | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/facebook/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-02-28T21:05:23+08:00</updated>
+ <updated>2013-05-16T17:36:13+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/facebook/index.html
@@ -178,13 +178,17 @@ <h1 class="entry-title">Category: Facebook</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -200,10 +204,6 @@ <h1 class="entry-title">Category: Facebook</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
2 blog/categories/html5/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: HTML5 | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/html5/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-02-28T21:05:23+08:00</updated>
+ <updated>2013-05-16T17:36:13+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/html5/index.html
@@ -136,13 +136,17 @@ <h1 class="entry-title">Category: HTML5</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -158,10 +162,6 @@ <h1 class="entry-title">Category: HTML5</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
2 blog/categories/javascript/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: JavaScript | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/javascript/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-02-28T21:05:23+08:00</updated>
+ <updated>2013-05-16T17:36:13+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/javascript/index.html
@@ -206,13 +206,17 @@ <h1 class="entry-title">Category: JavaScript</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -228,10 +232,6 @@ <h1 class="entry-title">Category: JavaScript</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
309 blog/categories/jq-plugin/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: jQ-Plugin | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/jq-plugin/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-02-28T21:05:23+08:00</updated>
+ <updated>2013-05-16T17:36:13+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -14,6 +14,192 @@
<entry>
+ <title type="html"><![CDATA[jquery-plugin-for-pinterest]]></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://lh6.googleusercontent.com/-3uQelUPbt2g/UZSmojbUPxI/AAAAAAAACcA/uPWSGQBZYoQ/w170-h167-no/2013-05-16_162143.jpg" /></p>
+
+<p>大部分的網站要與社群做結合,多以FB、G+、Twitter、或是微博等為主,但這幾天看到一篇文章,是連結 <strong>pinterest</strong> 來做為分享圖片的對象,在此特別紀錄下來</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 );
+
+$(document).on('ready', function(){
+ //不喜歡預設圖可以直接這樣替換
+ $('img#share').pinterest({ button: 'pinterest-alt.png'});
+});
+</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 );
+
+$(document).on('ready', function(){
+ $('img#share').pinterest({ button: 'pinterest-alt.png'});
+});
+</code></pre>
+
+<p>以上程式內容主要是用一個 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 );
+
+$(document).on('ready', function(){
+ $('img#share').pinterest({ button: 'pinterest-small.png'});
+});
+</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:從哪個 url 分享而來,利用 document.location 語法取得</p>
+
+<p>media:利用 .attr() 取得該 img 的 src</p>
+
+<p>description:利用 .attr() 取得該 img 的 title</p>
+
+<p>當然,記得使用 encodeURIComponent 做編碼</p>
+
+<p>最後,為了方便 img 的 src 不管是絕對路徑還是相對路徑都可以讓 pinterest 可以使用,要自動加上主機的網址路徑 http://xxx.xxx.com/</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>
+
+<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>
@@ -386,125 +572,4 @@ alertify.alert("獎品將在三天後寄出");
]]></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="expand" 設在『姓名』那個欄位,<strong>代表的意思是會在此欄位建立 icon 圖案 『+』 和 『-』</strong>,而 data-hide 指的是<strong>該欄位在什麼情況下會隱藏縮排</strong>,例如在上面範例中的年齡設為 data-hide="phone",表示在 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>
-
</feed>
View
24 blog/categories/jq-plugin/index.html
@@ -100,6 +100,20 @@ <h1 class="entry-title">Category: jQ-Plugin</h1>
<article>
+<h1><a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a></h1>
+<time datetime="2013-05-16T12:13:00+08:00" pubdate><span class='month'>May</span> <span class='day'>16</span> <span class='year'>2013</span></time>
+
+<footer>
+ <span class="categories">posted in <a class='category' href='/blog/categories/jq-plugin/'>jQ-Plugin</a></span>
+</footer>
+
+
+</article>
+
+
+
+<article>
+
<h1><a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a></h1>
<time datetime="2013-02-28T20:53:00+08:00" pubdate><span class='month'>Feb</span> <span class='day'>28</span> <span class='year'>2013</span></time>
@@ -363,13 +377,17 @@ <h1 class="entry-title">Category: jQ-Plugin</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -385,10 +403,6 @@ <h1 class="entry-title">Category: jQ-Plugin</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
2 blog/categories/jquery/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: jQuery | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/jquery/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-02-28T21:05:23+08:00</updated>
+ <updated>2013-05-16T17:36:13+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/jquery/index.html
@@ -374,13 +374,17 @@ <h1 class="entry-title">Category: jQuery</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -396,10 +400,6 @@ <h1 class="entry-title">Category: jQuery</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
2 blog/categories/octopress/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Octopress | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/octopress/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-02-28T21:05:23+08:00</updated>
+ <updated>2013-05-16T17:36:13+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/octopress/index.html
@@ -150,13 +150,17 @@ <h1 class="entry-title">Category: Octopress</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -172,10 +176,6 @@ <h1 class="entry-title">Category: Octopress</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
2 blog/categories/phonegap/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: PhoneGap | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/phonegap/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-02-28T21:05:23+08:00</updated>
+ <updated>2013-05-16T17:36:13+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
View
10 blog/categories/phonegap/index.html
@@ -150,13 +150,17 @@ <h1 class="entry-title">Category: PhoneGap</h1>
<section>
<h1>Categories</h1>
- <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (18)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
+ <ul id="category-list"><li><a href='/blog/categories/css'>CSS (15)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (19)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (9)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/blog/jquery-plugin-for-pinterest/">jquery-plugin-for-pinterest</a>
+ </li>
+
+ <li class="post">
<a href="/blog/jquery-sprite/">[jQ-Plugin] 利用jQuery做CSS Sprite效果</a>
</li>
@@ -172,10 +176,6 @@ <h1 class="entry-title">Category: PhoneGap</h1>
<a href="/blog/jquery-drop-down-lists/">[jQ-Plugin] 用jQuery客製化下拉選單</a>
</li>
- <li class="post">
- <a href="/blog/responsive-tables/">[jQ-Plugin] 輕鬆幫表格做responsive</a>
- </li>
-
</ul>
</section>
View
2 blog/categories/win8/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Win8 | apa]]></title>
<link href="http://blog.rx836.tw/blog/categories/win8/atom.xml" rel="self"/>
<link href="http://blog.rx836.tw/"/>
- <updated>2013-02-28T21:05:23+08:00</updated>
+ <updated>2013-05-16T17:36:13+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>