BlogJava-笨小孩...................................................................................-随笔分类-Jquery

contentSlider DEMO

fl1429 — Mon, 01 Mar 2010 11:32:00 GMT

Wholesale – Buy China Wholesale Products from Chinese Wholesalers and Factories on BeeBuyer.com

原文： http://www.wxianfeng.cn/2010/03/01/jquery-div-slider-plugin-contentslider1-0/ 真郁闷，我在wordpress中发表了 demo 会影响整个主题的样式，所以只有放这了

fl1429 2010-03-01 19:32 发表评论

Jquery pagination like twitter more button

fl1429 — Fri, 25 Sep 2009 08:50:00 GMT

环境：ruby 1.8.7 + rails 2.1.0 + jquery + ubuntu 8.10

效果和xiaonei的更多新鲜事一样：

前面有篇文章也介绍了一个像 twitter more 的方式分页的方法，不过那个是用 protorype 做的。。那个做起来简单一点，因为rails给我们封装了 insert_html 和 link_to_remote 等方法，这样更加便捷，但是解决jquery 和 prototype的confilct是一件很让人头疼的事，索性今天又实现了一个基于 jquery 的方法,环境是在rails中，需要使用 will_paginate 插件：
Demo:

view:

<%= render :partial => 'activity' , :collection => @all_feed %>

          <%= will_paginate @all_feed ,
            :class => 'pagination',
            :previous_label => '« Previous',
            :next_label     => 'Next »',
            :renderer => 'WillPaginate::LinkRenderer' %>

Action:
def index

    if request.xhr?
        sleep(1) # make request a little bit slower to see loader :-)
          render :partial => 'activity' , :collection => @all_feed
end

partial:_activity.html.erb
partial 里输出数据即可

主要的注意点就是注意对应class 不要写错了，同样，你也可以把class 换位id做，jquery取id就这样： $("#ID")

上面js文件下载：
http://www.dbank.com/download.action?k=3094283bf64e445f9530ac0554ebc9ce

ref:
http://github.com/davidwparker/jquery-bottomless-pagination

fl1429 2009-09-25 16:50 发表评论

Rails Jquery scrolling pagenation

fl1429 — Tue, 08 Sep 2009 06:29:00 GMT

环境：
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

    <%- unless @client_info.comments.empty? -%>
      <%= render :partial => 'comment', :collection => @comments %>
    <%- end -%>
    <%= will_paginate @comments ,
      :class => 'pagination',
      :previous_label => '« Previous',
      :next_label     => 'Next »',
      :renderer => 'WillPaginate::LinkRenderer' %> <%#= pageless must use will_paginate default style %>
    <%= pageless(@comments.total_pages, client_info_path(@client_info)) %>

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

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

fl1429 2009-09-08 14:29 发表评论

rails jquery autocomplete

fl1429 — Fri, 04 Sep 2009 06:40:00 GMT

效果：

记得以前文章写过 rails autocomplete 插件的使用方法，那个是基于 prototype 的，平时Jquery用的最多。。所以必须用jquery 实现，这样的 demo 网上太多。。。。下面介绍在rails 中的一种solution

需要的：
jquery.js
jquery.complete.js
jquery.autocomplete.css

demo :

View:

<%= text_field_tag :recipient, :id => 'recipient' %>

解释：
#recipient 是对应的 id
/myaccount/res_message 对应请求的 url
item是参数
name 和 show 是返回的变量

action:
def res_message

    key = params[:q] if params[:q]
    @result = ClientInfo.get_login_name(key, '' , 'key')

    respond_to do |format|
      format.js # default : res_message.js.erb
    end
end

解释 params[:q] q 是默认向后台发送的关键字查询参数，并且默认的limit 是10 条数据

view:res_message.js.erb

<% if @result -%>
<% i=0 %>[
<% for result in @result %>
     <% if i==0 %>
    {name:"<%= result.login_name %>",show:"<%= result.login_name + " " %>" + "<%= result.sure_name.nil? ? " " : result.sure_name + " " %>"}
    <% else %>
      ,{name:"<%= result.login_name %>",show:"<%= result.login_name + " " %>" + "<%= result.sure_name.nil? ? " " : result.sure_name + " " %>"}
    <% end %>
      <% i+=1 -%>
<% end -%>]
<% end -%>

解释：该view 是返回的数据，返回的是一个JSON数组

具体详细的可以参考：
http://docs.jquery.com/Plugins/Autocomplete
http://view.jquery.com/trunk/plugins/autocomplete/demo/

fl1429 2009-09-04 14:40 发表评论

Rails will_paginate ajax pagination with jquery

fl1429 — Tue, 25 Aug 2009 07:28:00 GMT

环境: ruby 1.8.7 + rails 2.1.0 + > = jquery 1.3.2

效果预览：

一般我们在rails 中分页 will_paginate 是必不可少的插件，但是一般都是基于 prototype 的，例如 ajax 式的分页，通过 RemoteLinkRenderer改变 css 样式等等，都是基于prototype 的，但是 prototype 和 Jquery 在项目中经常遇到conflict ，这个很让人头疼，rails 封装好的ajax方法，好多都因为 jquery 不能用，jquery 那么好前端用户体验，又因为 prototype 出现 conflict ，哎为什么相互残杀呢。。。。。

上面实现的核心思想是前端通过 jquery的异步调用数据，后台 rails 通过 respond_to fotmat.js 的方式给予返回数据。。。

Demo:

layout 中导入：
    <%= stylesheet_link_tag 'pagination' -%>
    <%= javascript_include_tag 'jquery' %>
pagination 是改变分页的样式

Action:

def index
    @products = Product.paginate(:per_page => 10, :page => params[:page])
    respond_to do |format|
      format.html                        #default : index.html.erb
      format.js {:layout => false} # default : index.js.erb
    end
end

View:

index.html.erb

<%= render :partial => 'products' %>

index.js.erb

$("#product").html("<%= escape_javascript(render :partial => "products") %>");

escape_javascript 是转义的意思和 <%=h %> 这里的 h 差不多

partial :
_products.html.erb

<%= will_paginate @products , :class => 'apple_pagination' ,:previous_label => '<<上一页', :next_label => '下一页>>' :renderer => 'WillPaginate::LinkRenderer' %>

<% for product in @products %>

      <%= link_to h(product.name), product %>
      <%= number_to_currency(product.price) %>

<% end %>

上面的 $(".apple_pagination a") 即是 will_paginate 的 :class ，：renderer 使用的是will_paginate 的default 的，如果 enviroment.rb 中配置了will_paginate的样式，这里不写 :renderer 会出错！，具体默认的参数可以查看 will_paginate 下的 view_helpers.rb

全部源码下载：
http://www.uushare.com/user/fl1429/file/1941241

配置方法：
1，进入工程， rake setup
2,ruby script/server
3,okay 成功了。。。。

补充：如果一个页面有两处需要分页，那么 will_paginate 默认情况下是同时翻页的。。那么如何避免呢。。只需要给各自的 will_paginate 指定不同的 class 即可例如

will_paginate :

<%= will_paginate collection ,
:class => "apple_paginate my_paginate",
:previous_label => '<<上一页',
:next_label => '下一页>>' ,
:renderer => 'WillPaginate::LinkRenderer' %>

apple_paginate 是分页的真正的 css，my_paginate 是为了区别不同区的分页而加的

jquery script :
jQuery(function() {
    jQuery(".my_paginate a").live("click", function() {
      jQuery(".my_paginate").html("正在加载...");
      jQuery.get(this.href, {flag : "my" }, null, 'script');
      return false;
    });
});

注意 jquery get 方法的四个参数的意义

ref:
http://railscasts.com/episodes/174-pagination-with-ajax
http://soylentfoo.jnewland.com/articles/2007/09/17/resource_this-dry-rails-resource-controllers
http://book.csdn.net/bookfiles/375/10037514155.shtml
http://stackoverflow.com/questions/1268383/format-js-with-rails

fl1429 2009-08-25 15:28 发表评论