文档章节

timeago jquery 几小时前 插件

大灰狼wow
 大灰狼wow
发布于 2014/06/14 09:47
字数 559
阅读 200
收藏 1

What?

Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago"). Download, view the examples, and enjoy.

You opened this page about a minute ago. (This will update every minute. Wait for it.)

This page was last modified about a month ago.

Ryan was born 36 years ago.

Why?

Timeago was originally built for use with Yarp.com to timestamp comments.

  • Avoid timestamps dated "1 minute ago" even though the page was opened 10 minutes ago;timeago refreshes automatically.

  • You can take full advantage of page caching in your web applications, because the timestamps aren't calculated on the server.

  • You get to use microformats like the cool kids.

How?

First, load jQuery and the plugin:

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

Now, let's attach it to your timestamps on DOM ready:

jQuery(document).ready(function() {
  jQuery("abbr.timeago").timeago();
});

This will turn all abbr elements with a class of timeago and an ISO 8601 timestamp in the title:

<abbr class="timeago" title="2008-07-17T09:24:17Z">July 17, 2008</abbr>

into something like this:

<abbr class="timeago" title="July 17, 2008">6 years ago</abbr>

which yields: 6 years ago. As time passes, the timestamps will automatically update.

You can also use it programmatically:

jQuery.timeago(new Date());             //=> "less than a minute ago"
jQuery.timeago("2008-07-17");           //=> "6 years ago"
jQuery.timeago(jQuery("abbr#some_id")); //=> "6 years ago"     // [title="2008-07-20"]

To support timestamps in the future, use the allowFuture setting:

jQuery.timeago.settings.allowFuture = true;

To disable timestamps in the past, use the allowPast setting. This setting is set to true by default. When set to false, if the time is in the past then instead of displaying a message like "5 minutes ago" a static message will be displayed. The staic message displayed can be configured with thestrings.inPast setting:

jQuery.timeago.settings.strings.inPast = "time has elapsed";
jQuery.timeago.settings.allowPast = false;

Excusez-moi?

Yes, timeago has locale/i18n/language support. Here are some configuration examples. Please submit a GitHub pull request for corrections or additional languages.

Where?

Download the "stable" release.

The code is hosted on GitHub: http://github.com/rmm5t/jquery-timeago. Go on, live on the edge.

Who?

Timeago was built by Ryan McGeary (@rmm5t) while standing on the shoulders of giants. John Resig wrote about a similar approach. The verbiage was based on the distance_of_time_in_wordsActionView helper in Ruby on Rails.

When?

Timeago was conceived 6 years ago. (Yup, that's powered by timeago too)

What else?

HTML5 has a new time tag and timeago supports it too.

<time class="timeago" datetime="2008-07-17T09:24:17Z">July 17, 2008</time>

Attach timeago like so:

jQuery(document).ready(function() {
  jQuery("time.timeago").timeago();
});

Are you concerned about time zone support? Don't be. Timeago handles this too. As long as your timestamps are in ISO 8601 format and include a full time zone designator (&plusmn;hhmm), everything should work out of the box regardless of the time zone that your visitors live in.

Huh?

Need a Rails helper to make those fancy microformat abbr tags? Fine, here ya go:

def timeago(time, options = {})
  options[:class] ||= "timeago"
  content_tag(:abbr, time.to_s, options.merge(:title => time.getutc.iso8601)) if time
end

Do you use Timeago?

Great! Please add your site to the list of Sites that use Timeago.

本文转载自:http://timeago.yarp.com/

共有 人打赏支持
大灰狼wow
粉丝 41
博文 336
码字总数 39609
作品 1
嘉兴
程序员
Pinterest.com界面风格的社交展示web应用:Infinite-social-wall

日期:2012-7-30 来源:GBin1.com 在线演示 Infinite-Social-Wall是一个基于PHP和Mysql的开源应用,主要用来帮助你使用pinterest.com的界面风格来展示各类社交网站的事件信息。 这个应用通过...

gbin1
2012/07/30
0
0
10个帮助你创建超棒jQuery插件的小技巧

10个帮助你创建超棒jQuery插件的小技巧 日期:2012/02/29 来源:GBin1.com 这篇文章我们将分享10个技巧帮助你将一个不错的jQuery插件改造成一 个超棒的jQuery插件,很多开发人员都开发了很多...

gbin1
2012/02/29
0
0
从零玩转jQuery-初识jQuery

课前须知: 学习jQuery前必须先掌握JavaScript jQuery虽然属于前端技术, 但是对于后端人员(诸如Java、PHP等,也需要掌握) jQuery是什么? jQuery是一款优秀的JavaScript库,从命名可以看出jQu...

极客江南
04/20
0
0
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部