亚洲熟妇AV一区二区三区浪潮 ,亚洲免费日韩无码系列,亚洲国产精品日韩

contentSlider DEMO

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

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

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 發表評論