文档章节

timeago jquery 几小时前 插件

大灰狼wow
 大灰狼wow
发布于 2014/06/14 09:47
字数 559
阅读 203
收藏 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
粉丝 45
博文 383
码字总数 47341
作品 1
嘉兴
程序员
私信 提问
14 个比较独特的 jQuery 插件

默认情况下,标准的HTML元素是非常恼人的,它很丑陋。经常有人问我如何创建一个漂亮的表单,而不是浏览器默认的外观,网上充斥大量此类的教程和介绍,但很容易让人迷失其中。但如果我们使用一...

oschina
2012/06/10
10.5K
11
Pinterest.com界面风格的社交展示web应用:Infinite-social-wall

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

gbin1
2012/07/30
0
0
12 个必要的 jQuery 表单插件

Web表单是网站中很常见的Web组件,你用它来收集数据,用户的详细信息等。然而,现有的表单限制很多,功能比较简单,尽管有 HTML5 ,不幸的是,并非所有浏览器都支持它,所以现在我们可以使用...

红薯
2012/03/28
5.7K
8
10个帮助你创建超棒jQuery插件的小技巧

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

gbin1
2012/02/29
0
0
15 款基于 jQuery 的 RSS 阅读器插件

想要第一时间获得网站和博客的更新?RSS一直是最佳的选择。RSS提供的更新内容包括博客文章、新闻标题、标准格式的音频或视频等。 本文介绍了15款实用的基于jQuery的RSS阅读器插件,有了它们的...

oschina
2012/08/13
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

开始看《Java学习笔记》

虽然书买了很久,但一直没看。这其中也写过一些Java程序,但都是基于IDE的帮助和对C#的理解来写的,感觉不踏实。 林信良的书写得蛮好的,能够帮助打好基础,看得出作者是比较用心的。 第1章概...

max佩恩
昨天
12
0
Redux 三大原则

1.单一数据源 在传统的MVC架构中,我们可以根据需要创建无数个Model,而Model之间可以互相监听、触发事件甚至循环或嵌套触发事件,这些在Redux中都是不被允许的。 因为在Redux的思想里,一个...

wenxingjun
昨天
8
0
跟我学Spring Cloud(Finchley版)-12-微服务容错三板斧

至此,我们已实现服务发现、负载均衡,同时,使用Feign也实现了良好的远程调用——我们的代码是可读、可维护的。理论上,我们现在已经能构建一个不错的分布式应用了,但微服务之间是通过网络...

周立_ITMuch
昨天
4
0
XML

学习目标  能够说出XML的作用  能够编写XML文档声明  能够编写符合语法的XML  能够通过DTD约束编写XML文档  能够通过Schema约束编写XML文档  能够通过Dom4j解析XML文档 第1章 xm...

stars永恒
昨天
2
0
RabbitMQ学习(2)

1. 生产者客户端 void basicPublish(String exchange, String routingKey, boolean mandatory, boolean immediate, BasicProperties props, byte[] body) 1. 在生产者客户端发送消息时,首先......

江左煤郎
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部