Permalink
Browse files

Site updated at 2013-01-29 06:34:36 UTC

  • Loading branch information...
1 parent 780794f commit 6b6b3d7927cb6374707b472f398777b5e8307716 unknown committed Jan 29, 2013
Showing with 1,444 additions and 1,160 deletions.
  1. +5 −5 about/index.html
  2. +88 −201 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. +7 −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. +88 −139 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. +5 −5 blog/jquery-plugin-format-number/index.html
  85. +5 −5 blog/jquery-plugin-timeago/index.html
  86. +5 −5 blog/jquery-slice-images-into-tiles/index.html
  87. +369 −0 blog/jquery-star-box/index.html
  88. +5 −5 blog/jquery-tags-manager/index.html
  89. +5 −5 blog/jquery-waterfall-infinitescroll/index.html
  90. +5 −5 blog/mailcheck-jquery-plugin/index.html
  91. +5 −5 blog/note-marketing/index.html
  92. +5 −5 blog/octopress-notes-1/index.html
  93. +5 −5 blog/octopress-notes-2/index.html
  94. +50 −50 blog/page/2/index.html
  95. +50 −50 blog/page/3/index.html
  96. +50 −50 blog/page/4/index.html
  97. +50 −50 blog/page/5/index.html
  98. +50 −50 blog/page/6/index.html
  99. +50 −50 blog/page/7/index.html
  100. +50 −7 blog/page/8/index.html
  101. +5 −5 blog/parallax-scrolling/index.html
  102. +5 −5 blog/phonegap-first/index.html
  103. +5 −5 blog/responsive-tables/index.html
  104. +5 −5 blog/sticky-object/index.html
  105. +5 −5 blog/stop-wasting-time-for-ie/index.html
  106. +5 −5 blog/twitter-bootstrap/index.html
  107. +5 −5 blog/vmware-windows-8/index.html
  108. +5 −5 blog/windows8-notifications/index.html
  109. +5 −5 blog/work-1/index.html
  110. +52 −50 index.html
  111. +6 −2 sitemap.xml
View
@@ -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 (16)</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 (17)</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-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/alert-confirm-prompt/">[jQ-Plugin] 用jQuery打造alert、confirm和prompt dialogs</a>
</li>
@@ -133,10 +137,6 @@ <h1 class="entry-title">About</h1>
<a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
</li>
- <li class="post">
- <a href="/blog/css-oocss/">[CSS] 認識OOCSS</a>
- </li>
-
</ul>
</section>
View
289 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-01-24T16:07:30+08:00</updated>
+ <updated>2013-01-29T14:32:27+08:00</updated>
<id>http://blog.rx836.tw/</id>
<author>
<name><![CDATA[阿帕]]></name>
@@ -14,6 +14,93 @@
<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>以下是一些參數的講解,但有些不太懂他的意思就不誤導大家,再請有興趣的各位去 github 上面看</p>
+
+<p>average:可以預設一開始顯示幾顆星星,也可以使用小數點,例如0.4,預設值則是0.5</p>
+
+<p>stars:設定有幾顆星星可以選擇,預設值是5</p>
+
+<p>buttons:設定星星可以切割成多少區塊可以選擇,假設有5顆星星,buttons設10,每顆星星就可以選擇半顆或整顆</p>
+
+<p>changeable:設定選擇以後是否還可以改變</p>
+
+<p>也有一些方法可以呼叫,例如如果要得知 User 選了幾顆星星,就可以這樣寫</p>
+
+<pre><code>$('.btn').click(function(){
+ alert($('.starbox').starbox("getValue"));
+});
+</code></pre>
+
+<p>可以把事件寫在某個按鈕裡面,當按下按鈕就秀出值是多少,關鍵在這句 $(&#8216;.starbox&#8217;).starbox(&#8220;getValue&#8221;)</p>
+
+<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>
@@ -2449,204 +2536,4 @@ function Numeral (number) {
]]></content>
</entry>
- <entry>
- <title type="html"><![CDATA[[jQuery] jQuery常用的表單驗證事件]]></title>
- <link href="http://blog.rx836.tw/blog/jquery-html-forms/"/>
- <updated>2012-11-29T15:40:00+08:00</updated>
- <id>http://blog.rx836.tw/blog/jquery-html-forms</id>
- <content type="html"><![CDATA[<p>在動態網頁的世界裡面,最常使用到的大概就非Forms莫屬,填寫完表格以後都會將資料傳送到bcak-end(後端),而在傳送之前,有一些資料的驗證都會交由front-end(前端)來處理,這篇就來紀錄一下對於HTML Forms來說,常用的一些jQuery方法</p>
-
-<!--more-->
-
-
-<h2>.blur()</h2>
-
-<p><strong>Blur</strong> 發生在當一個元素失去焦點時,所觸發的一個事件,在原生的HTML裡面提供了 <strong>onblur</strong> 這個屬性,可以將這個事件附加到HTML元素上,範例如下</p>
-
-<pre><code>&lt;input type = "text" onblur = "doSomething();" /&gt;
-</code></pre>
-
-<p>當光標的焦點在input裡面以後,在點擊input以外的元素就會觸發,不過這是老舊的寫法,因為我們希望能盡量在HTML上保持乾淨,與程式邏輯做分離,所以就會使用jQuery的blur()來達到此任務</p>
-
-<pre><code>$("input").blur(function() { /* Do something... */ } );
-</code></pre>
-
-<p>要特別注意的是 <strong>onblur </strong> 這個事件適用於所有的input元素,也就是說就算是button也適用,因為在鍵盤上有個「Tab鍵」可以在網頁上做焦點的切換,就會觸發 <strong>onblur</strong> 這個事件</p>
-
-<p>不過在1.7以後的jQuery版本裡面建議開始使用 <strong>.on()</strong> 來達到此任務,效能會比較好</p>
-
-<pre><code>$('input').on('blur', function() { /* Do something.... */ });
-$('input').off('blur', function() { /* Do something... */ });
-</code></pre>
-
-<p>相較於 <strong>.on()</strong> , <strong>.off()</strong> 就是停止監聽這個事件,善用 <strong>.off()</strong> 也可以讓效能增加(參考<a href="http://blog.darkthread.net/post-2011-11-07-jquery-1-7-release.aspx" target="_blank">黑暗執行緒 jQuery 1.7筆記</a>),避免過多不必要的事件監聽</p>
-
-<p>如果你只希望監聽「某個類型元素」的事件,可以這樣寫</p>
-
-<pre><code>$("input[type=radio]").on('blur', function() { /* Do something... */ } );
-$("input[type=checkbox]").on('blur', function() { /* Do something... */ } );
-$("input[type=text]").on('blur', function() { /* Do something... */ } );
-</code></pre>
-
-<p>當然,只想要針對單一指定的元素,可以用id值來選取</p>
-
-<pre><code>$("input#Email").on('blur', function() { /* Do something... */ } );
-</code></pre>
-
-<h2>.change()</h2>
-
-<p><strong>change</strong> 事件相當於HTML裡面的 <strong>onchange </strong> 屬性,跟上一個討論 <strong>blur</strong> 事件很像,但不同的地方在於,當焦點離開元素之前,如果元素有改變的話,就會觸發這個事件,寫法如下</p>
-
-<pre><code>$("input#target").change(function() { /* Do something... */ } );
-$("input#target").bind("change", function() { /* Do something... */ } );
-$("input#target").on("change", function() { /* Do something... */ } );
-</code></pre>
-
-<p>一樣建議使用 <strong>on()</strong> 來監聽change這個事件</p>
-
-<p>同時利用 <strong>onChange</strong> 和 <strong>onBlur</strong> 來驗證表單也是很常見的做法</p>
-
-<pre><code>$("input#target").on("change", EmailChecked );
-$("input#target").on("blur", EmailChecked );
-
-function EmailChecked( value )
-{
- //在這邊做驗證...
-
- if (valid)
- {
- // 驗證通過...
- }
- else
- {
- // 驗證不通過...
- }
-}
-</code></pre>
-
-<p>可以讓驗證做的更完善,兩個事件的觸發先後順序為 onChange>onBlur</p>
-
-<h2>.focus()</h2>
-
-<p>相等同於 <strong>onFocus</strong> ,如果 <strong>.blur()</strong> 是失去焦點,那 <strong>.focus()</strong>就是得到焦點,也就是在某個元素被點擊以後所觸發的事件,語法如下</p>
-
-<pre><code>$("input#myInput").focus(function() { /* Do something... */ });
-$("input#myInput").bind("focus", function() { /* Do something... */ });
-$("input#myInput").on("focus", function() { /* Do something... */ });
-</code></pre>
-
-<p>這邊還是建議使用 <strong>.on()</strong></p>
-
-<h2>.select()</h2>
-
-<p>select算是很容易讓人混淆的事件,在text input元素裡面(或textarea),當你將文字反白以後,就會觸發此事件,範例如下</p>
-
-<pre><code>&lt;input type="text" value="Some text" /&gt;
-
-&lt;script&gt;
- $(":input").select( function () {
- alert('文字被反白');
- });
-&lt;/script&gt;
-</code></pre>
-
-<p>但有些人可能會誤用成這樣</p>
-
-<pre><code>$("input[type=checkbox]").select();
-$("input[type=radio]").select();
-</code></pre>
-
-<p><strong>這個方法並不能將checkbox或是radio執行勾選</strong></p>
-
-<p>正確的做法應該是這樣</p>
-
-<pre><code>$("input[type=checkbox]").prop("checked", true); // Check checkbox
-$("input[type=radio]").prop("checked", true); // Check radio button
-</code></pre>
-
-<h2>.val()</h2>
-
-<p>這大概是jQuery最常用到的方法之一, <strong>.val()</strong> 可以取得值</p>
-
-<pre><code>var Email = $("input#Email").val();
-</code></pre>
-
-<p>當是用在&lt;select&gt;元素時,<strong>.val()</strong> 可以將現在選取的項目值取出來</p>
-
-<pre><code>&lt;select id="test1" name="test1" /&gt;
- &lt;option value="1"&gt;select1&lt;/option&gt;
- &lt;option value="2"&gt;select2&lt;/option&gt;
- &lt;option value="3"&gt;select3&lt;/option&gt;
-&lt;/select&gt;
-
-&lt;script&gt;
- $("select").val();
-&lt;/script&gt;
-</code></pre>
-
-<p>不過 <strong>.val()</strong> 只適用在input元素裡面,就算在div裡面自己加上value屬性也取不到值</p>
-
-<pre><code>&lt;div value = "apa"&gt;&lt;/div&gt;
-
-&lt;script&gt;
- $("div").val(); //錯誤的...
-&lt;/script&gt;
-</code></pre>
-
-<p>div應該要用 <strong>.text()</strong> 或是 <strong>.html()</strong> 來修改裡面的內容</p>
-
-<h2>.submit()</h2>
-
-<p>在表單傳送裡面,HTML必須長成這樣</p>
-
-<pre><code>&lt;form id = "myForm"&gt;
- &lt;input type = "submit" value = "Submit"/&gt;
-&lt;/form&gt;
-</code></pre>
-
-<p>submit的button必須一定要包裹在&lt;form&gt;,如果想要藉由&lt;form&gt;以外的元素來觸發呢?可以這樣寫</p>
-
-<pre><code>$("input#myButton").click(function() {
- $("#myForm").submit();
-});
-</code></pre>
-
-<p>這樣就可以不需要透過submit來將資料送出,另外想在送出前做表單驗證的話,也可以用 <strong>.submit()</strong></p>
-
-<pre><code>$("form").submit(function() {
- if ($("input:first").val() == "correct") {
- $("span").text("Validated...").show();
- return true;
- }
- $("span").text("Not valid!").show().fadeOut(1000);
- return false;
-});
-</code></pre>
-
-<p>當按下submit以後,就會進行驗證,假如回傳值是false,表單就不會送出</p>
-
-<p>以上是常用的表單驗證方法,當然網路上也有很多寫好的plugin可以用,因為處理一大堆資料的驗證老實說蠻麻煩的,善用plugin也是個不錯的選擇,但基礎觀念還是要懂才行</p>
-
-<h3>參考資料:</h3>
-
-<p><a href="http://blog.darkthread.net/post-2011-11-07-jquery-1-7-release.aspx" target="_blank">黑暗執行緒 jQuery 1.7筆記</a></p>
-
-<p><a href="http://api.jquery.com/blur/" target="_blank">jQuery API .blur()</a></p>
-
-<p><a href="http://api.jquery.com/change/" target="_blank">jQuery API .change()</a></p>
-
-<p><a href="http://api.jquery.com/on/" target="_blank">jQuery API .on()</a></p>
-
-<p><a href="http://api.jquery.com/focus/" target="_blank">jQuery API .focus()</a></p>
-
-<p><a href="http://api.jquery.com/select/" target="_blank">jQuery API .select()</a></p>
-
-<p><a href="http://api.jquery.com/val/" target="_blank">jQuery API .val()</a></p>
-
-<p><a href="http://api.jquery.com/submit/" target="_blank">jQuery API .submit()</a></p>
-
-<p>內容如有錯誤,歡迎指正</p>
-]]></content>
- </entry>
-
</feed>
@@ -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 (16)</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 (17)</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-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/alert-confirm-prompt/">[jQ-Plugin] 用jQuery打造alert、confirm和prompt dialogs</a>
</li>
@@ -298,10 +302,6 @@ <h1 class="entry-title">[學習筆記] 簡單容易,如何在VM裝Windows 8來
<a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
</li>
- <li class="post">
- <a href="/blog/css-oocss/">[CSS] 認識OOCSS</a>
- </li>
-
</ul>
</section>
@@ -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 (16)</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 (17)</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-star-box/">[jQ-Plugin] 在網站中加入星星評分效果</a>
+ </li>
+
+ <li class="post">
<a href="/blog/alert-confirm-prompt/">[jQ-Plugin] 用jQuery打造alert、confirm和prompt dialogs</a>
</li>
@@ -538,10 +542,6 @@ <h1 class="entry-title">[CSS] 5個對設計師有幫助的CSS屬性</h1>
<a href="/blog/jquery-slice-images-into-tiles/">[jQ-Plugin] 做出磁磚效果變化的圖片轉換</a>
</li>
- <li class="post">
- <a href="/blog/css-oocss/">[CSS] 認識OOCSS</a>
- </li>
-
</ul>
</section>
Oops, something went wrong.

0 comments on commit 6b6b3d7

Please sign in to comment.