随笔-167  评论-65  文章-0  trackbacks-0
环境 :
ruby 1.8.7 + Rails 2.1.0 + ubuntu 8.1.0

效果:
http://www.dzone.com/links/index.html
http://flexidev.co.za/projects/jqpageflow/
http://paperc.de/documents

像上面的三个网站 的分页效果 就是 scrolling pagination , 或者 叫 pageless pagination , endless pagination 用这些作为关键字, 都会搜到很多的demo, 这里我介绍 一种 demo,开发 环境 是 rails ,of course , 你也可以在其他的平台使用。。

最用 一直在用各种 分页的效果,一般都是 ajax的, 例如前面 有介绍了 prototype pagenation like twitter more button, 还有 jquery ajax pagenation,这里又是 jquery scrolling pagination.....

Demo:

依赖库:
will_paginate 插件
jquery.js
jquery.pageless.js

请到 下面的 那个 ref link 里下

Action:

 def show
    @client_info = ClientInfo.find(params[:id])
    @comments = @client_info.comments.paginate(:per_page => 5 , :page => params[:page])

    if request.xhr?
      sleep(2) # make request a little bit slower to see loader :-)
      render :partial => 'comment' , :collection => @comments #返回 数据的partial
    end
end


解释 : server 端

helper method :

  # scrolling paginate like greader
  def pageless(total_pages, url=nil)
    opts = {
      :totalPages => total_pages,
      :url        => url
      #:loaderMsg  => '加载中...'
    }
    javascript_tag("$('#ajaxcomments').pageless(#{opts.to_json});")
  end


解释; 封装了一个 pageless 方法,即实现 scrolling load 的的方法

view: show.html.erb

..............
 <%= render :partial => 'wall' %>
.........................


解释 : 前端 view


partial : _wall.html.erb

  <div class="wall" id ="ajaxcomments">
    <%- unless @client_info.comments.empty? -%>
      <%= render :partial => 'comment', :collection => @comments %>
    <%- end -%>
    <%= will_paginate @comments  ,
      :class => 'pagination',
      :previous_label => '&laquo; Previous',
      :next_label     => 'Next &raquo;',
      :renderer => 'WillPaginate::LinkRenderer' %> <%#= pageless must use will_paginate default style %>
    <%= pageless(@comments.total_pages, client_info_path(@client_info))  %>
  </div>

解释 : 注意这里需要 定义 一个 id, 还有 就是 will_paginate 里的那些 参数 可以 不要 的,这里我加的,是因为 我的 enviroment.rb 中 加了 will_paginate 的 配置,如果 你没有的话, 可以去掉的
partial : _comment.html.erb
..............
<%= display comment.body %>
.........................

解释 : 显示的 内容

ref :
http://github.com/jney/jquery.pageless/tree/master




write by feng
posted on 2009-09-08 14:29 fl1429 阅读(770) 评论(1)  编辑  收藏 所属分类: RailsJquery

评论:
# re: Rails Jquery scrolling pagenation 2010-08-23 15:07 | cosplay
,发现技术的更新真是给我莫大的惊喜!  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
 
已访问数:
free counters