滚动公告功能的实现

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 => falset.datetime "updated_at", :null => falseend 

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.recentNotice.limit(10)end def self.avialableNotice.where('expiration >= ?', Date.today)end def expired?created_at < 7.days.ago.to_dateend 

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插件，可以控制文档元素滚动，丰富的参数设置可以控制滚动的更多细节，是一款不可多得的滚动插件。

使用方法：

页头调用：

$(document).ready(function(){

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

        btnNext: ".next",

        btnPrev: ".prev"

    });

});

html：

参数说明：

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   滚动结束时回调的函数,使用方法同上

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！