jQuery Prettydate 友好日期插件

jQuery Prettydate 是一款美化日期的插件,主要功能就是将日期格式化为 “just now”, “5 minutes ago”, “yesterday”, “2 weeks ago”

效果图示

官网地址

jQuery Prettydate

引入 JavaScript 脚本

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="/static/lib/jquery/prettydate/jquery.prettydate.js"></script>

HTML 代码

使用 Prettydate 插件,需要在 title 中带有 ISO8601 日期

<p class="date" title="2017-01-28T20:24:17Z">January 28th, 2017</p> 
<p class="date" title="2016-01-27T22:24:17Z">January 27th, 2016</p> 
<p class="date" title="2015-01-26T22:24:17Z">January 26th, 2015</p>

JavaScript 代码

$(function() { $("p.date").prettyDate(); });

运行范例 »

本地化

如需本地化该插件,可以引入 i18n 目录下响应的脚本,

在这里,我们以中文的简体中文为例

这个中文插件有一个小 BUG ... 如果你的显示不正确,可以使用我修改的版本

<script src="/static/lib/jquery/prettydate/i18n/jquery.prettydate-zh-CN.js"></script>

运行范例 »

该插件每隔 10 秒中更新一次每个被选中的元素。这样子 "just now" 会变为 "1 minute ago" 再变为 "x minutes ago" 再变为 "1 hour ago" 等等。

您可以通过指定 interval 选项为 "false" 来禁用间隔更新:

$(function() { $("a").prettyDate({ interval: false }); });

或者设置一个不同的时间间隔,例如:interval: 1000,每隔一秒更新一次每个被选中的元素

$(function() { $("a").prettyDate({ interval: 1000 }); });

value 选项默认读取 title 属性中的 ISO8601 日期字符串

重载该选项来使用其他属性,例如,一个自定义的 "isodate" 属性

$(function() { 
    $("a").prettyDate({
        function() { // "this" 是 DOM 元素
            return $(this).attr("isodate");
        } 
    }); 
});
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.