滚动公告功能的实现
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 + a)}
?
afterEnd ? ?func ? 滚动结束时回调的函数,使用方法同上
?