ajax loader

main.rb

@@ -44,8 +44,8 @@ def partial(page, options={})
 end
 
 get '/' do
-  starts = params[:starts] || 10000000
-  @articles = Article.first(5, :id.lt => starts, :order => :created.desc)
+  from = params[:from] || 10000000
+  @articles = Article.first(5, :id.lt => from, :order => :created.desc)
   myhaml :index 
 end
 

views/_footer.haml

@@ -1,2 +1,2 @@
 %footer
-  %p @2010 linjunhalida, all right reserved
+  %p @2011 linjunhalida, all right reserved

views/article.haml

@@ -1,4 +1,5 @@
 #article
+  %h1= @article.title
   =@article.get_content
 
 = partial :_stamp, :locals => {:article => @article}

views/index.haml

@@ -8,5 +8,14 @@
 
   = partial :_stamp, :locals => {:article => article}
 
-#paginate
-  <a href="?starts=#{@articles[-1].id}" class="js-pjax btn primary">更多</a>
+- if @articles.length > 0
+  #more
+    <img src="/ajax-loader.gif" id="more-display" />
+
+    :javascript
+      var more = function(){
+        $.get(window.location + (/\?/.test(window.location) ? "&" : "?") + "from=#{@articles[-1].id}&_pjax=true", function(data){
+          $('#more').replaceWith(data);
+        });
+      };
+      $('#more').appear(more);

views/main.sass

@@ -94,9 +94,10 @@ body
     float: left
     width: $grid * 8
 
+#more
+  text-align: center
 
 +sticky-footer(72px, "#layout", "#layout_footer", "footer")
-
 footer
   width: $content-width
   margin: 20px auto