1.新建一個表

  create_table "notices", :force => true do |t| 
    t.string   "title"
    t.text     "content"
    t.integer  "user_id"
    t.date     "expiration"
    t.datetime "created_at", :null => false
    t.datetime "updated_at", :null => false
  end 

2.將jcarousellite_1.0.1c4.js檔案放置在/vendor/assets/javascripts路徑下

3.在application.js中

//= require jcarousellite_1.0.1c4


$(function(){  
  /* notice */                 
  $("#notice").jCarouselLite({ 
    vertical: true,            
    hoverPause: true,          
    visible: 1,
    auto: 2000,
    speed: 1000
  });
});

4.在layout.css.scss中

#notice {                      
  border: 1px solid #eee;      
  text-align: center;          
  font-size: 16px;             
  
  a {
    color: green;              
    text-decoration: none;     
  
    &:hover {                  
      background: #fff;
    }
  }                                                                                                                                          
} 
 

5.在notice.rb中

  def self.recent
    Notice.limit(10)
  end 
        
  def self.avialable
    Notice.where('expiration >= ?', Date.today)
  end 
        
  def expired?
    created_at < 7.days.ago.to_date
  end 

6.在application.html.haml中

      - if Notice.avialable.size > 0                                                                                                         
        #notice                
          %ul
            - Notice.avialable.each do |n|  
              %li= link_to "[ #{n.created_at.strftime('%m-%d')} ] #{n.title}", n
 

備註：

jcarousellite是一款jquery外掛，可以控制文件元素滾動，豐富的引數設定可以控制滾動的更多細節，是一款不可多得的滾動外掛。

使用方法：

頁頭呼叫：

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js/jcarousellite_1.0.1.min.js"></script>

$(document).ready(function(){

    $(".類名").jCarouselLite({

        btnNext: ".next",

        btnPrev: ".prev"

    });

});

html：

<div class="類名">

  <ul>

    <li></li>

  </ul>

</div>

引數說明：

btnPrev     string 上一個按鈕的class名, 比如  btnPrev: ".prev"

btnNext     string 下一個按鈕的class名, 比如  btnPrev: ".prev"

btnGo       array  自定義滾動位置,類似幻燈片效果置,有選項卡,按照陣列順序,依次為按鈕1按鈕2按鈕N,如以下,class名為1的按鈕是第一個按鈕：[".1", ".2"]

mouseWheel  bool   滑鼠滑是否可以輪控制上下滾動,可選：false,true,預設false

auto        int    指定多少秒內容定期自動滾動。預設為空(null),是不滾動,如果設定的,單位為毫秒,如1秒為1000

speed       int    滑動的速度,可以嘗試800 1000 1500,設定成0將刪除效果

easing      string 緩衝效果名稱,如：easing: "bounceout",需要jquery中的easing pluin（緩衝外掛實現）,只適用於jq1.2

vertical    bool   是否垂直滾動,可選：false,true,預設false

circular    bool   是否迴圈滾動,預設為true,如果為false,滾動到最後一個將停止滾動

visible     int    可見數量,可以為小數，如2.5為2.5個li

start       int    開始的地方,預設是0

scroll      int    每次滾動的li數量

beforeStart func   滾動開始時回撥的函式,可以傳入物件引數 beforeStart: function(a) { alert("開始的物件是:" + a)}

afterEnd    func   滾動結束時回撥的函式,使用方法同上