当前位置:首页 > 开发 > 互联网 > 正文

滚动公告功能的实现

发表于: 2012-06-26   作者:clark1231   来源:转载   浏览次数:
摘要: 1.新建一个表 create_table "notices", :force => true do |t| t.string "title" t.text "content" t.integer "user_id" t.date "e

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

 

滚动公告功能的实现

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
对于Windows系统中各种控件换肤功能,要数滚动条的换肤最难实现了,尤其是控件自带的系统滚动条,如
今天要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果
今天要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果
效果: 代码: 1 <head runat="server"> 2 <title></title> 3 <style type="t
各位尊敬的CSDN用户: 你们好! 为了更好的服务于用户,CSDN博客最新推出如下功能: 1.取消开通博客
添加好友近期博客 进入博客管理页面的好友管理: 点击“所有好友近期博客”,进入可以看到好友们近期
经过一段时间的试运行,“什么值得买”网站的Gtalk实时推送功能正式启用。推送支持各种桌面平台和主
作为员工,你是不是有的时候漏看了重要的邮件?作为企业管理者,你有没有遇到提前发送了会议通知但
前台: <div class="block"> <div class="title"> <strong>服务展示 </strong
前台: <div class="block"> <div class="title"> <strong>服务展示 </strong
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号