jQueryPrettydate

jQuery Prettydate

jQuery Prettydate jQuery Prettydate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。 该插件目前版本是 1.1.0。 访问 jQuery Prettydate 官网,下载 jQuery Prettydate Validation(密码验证)插件。 使用方式 如需使用 Prettydate 插件,您需要在 title 中带有 ISO8601 日期: <a title="2008-01-28T20:24:17Z">January 28th, 2008</a>

<a title="2008-01-27T22:24:17Z">January 27th, 2008</a>

<a title="2008-01-26T22:24:17Z">January 26th, 2008</a>

然后对它们应用 prettyDate 方法: $(function() { $("a").prettyDate(); });

如需本地化该插件,请在 $.prettyDate.messages 中重写属性。在这里,以德国本地化为例:$.prettyDate.messages = {

now: "gerade eben",

minute: "vor einer Minute",

minutes: $.prettyDate.template("vor {0} Minuten"),

hour: "vor einer Stunde",

hours: $.prettyDate.template("vor {0} Stunden"),

yesterday: "Gestern",

days: $.prettyDate.template("vor {0} Tagen"),

weeks: $.prettyDate.template("vor {0} Wochen")

} 该插件每隔 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" is the DOM element return $(this).attr("isodate"); } }); }); 实例演示 jQuery Prettydate 插件演示。本实例使用了一个固定的日期,因为该插件不会格式化一个月之前的日期。实例不使用类似 "6 months ago" 这种模糊的表达,而是保持原有的日期字符串。 <!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery Prettydate 插件</title>

<script src="http://jquery.bassistance.de/prettydate/libs/jquery.js" rel="external nofollow" ></script>

<script src="http://jquery.bassistance.de/prettydate/jquery.prettydate.js" rel="external nofollow" ></script>

<style>

  • {

    margin: 0;

    padding: 0;

    }

    body {

    background: #eee;

    font: 14px/21px sans-serif;

    color: #333;

    position: relative;

    }

    h1 {

    text-align: center;

    padding: 1em 0;

    }

    a {

    text-decoration: none;

    color: #0645ad;

    }

    a:hover {

    text-decoration: underline;

    }

    fieldset, p {

    margin: 0.5em 0;

    }

    .fork {

    position: fixed;

    top: 0; right: 0;

    background: url(https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67) no-repeat 100% 0;

    width: 150px;

    height: 150px;

    float: right;

    }

    .entries {

    margin: 0 auto 3em;

    padding: 0.5em 0.5em 0;

    background: #fff;

    width: 500px;

    overflow: hidden;

    }

    fieldset, .entry {

    background: #f2f2f2;

    border: 1px solid #ddd;

    padding: 0.25em 0.5em;

    margin-bottom: 0.5em;

    list-style: none;

    overflow: hidden;

    }

    .entry .extra {

    float: right;

    }

    </style>

    <script>

    jQuery(function ($) {

    // 通过 javascript 生成演示,确保 HTML 不重复

    var zulus, $langs,

    msgsEn = $.extend({}, $.prettyDate.messages),

    $langMenu = $('<select>'),

    $entries = $('.entries ul').empty();

        function doPretty() {

    $('.time').prettyDate({

    // 由于时间是固定的,不需要更新

    interval: false

    });

    }

    zulus = [

    '2012-01-01T00:00:00Z',

    '2008-01-28T22:24:30Z',

    '2008-01-28T22:23:05Z',

    '2008-01-28T22:20:05Z',

    '2008-01-28T20:24:17Z',

    '2008-01-27T08:00:00Z',

    '2008-01-26T08:00:00Z',

    '2008-01-21T08:00:00Z',

    '2008-01-14T08:00:00Z',

    '2007-12-28T08:00:00Z',

    '2007-12-15T08:00:00Z',

    '2007-01-14T08:00:00Z',

    '2006-03-07T08:00:00Z'

    ];

    $.each(zulus, function (i, zulu) {

    $entries.append(

    $('&lt;li&gt;', {

    addClass: 'entry',

    html: '&lt;a href="#' + zulu + '"&gt;Blah blah blah&lt;/a&gt;' +

    ' &lt;small class="extra"&gt;&lt;span class="time" title="' + zulu + '"&gt;' + new Date($.prettyDate.parse(zulu)).toDateString() + '&lt;/span&gt;' +

    ' &amp;nbsp;&amp;bull;&amp;nbsp; ' + '&lt;a class="author" href="#/author/john/"&gt;John Resig&lt;/a&gt;&lt;/small&gt;'

    })

    );

    });

    $langs = $.map([

    'cn',

    'da',

    'de',

    'es',

    'fr',

    'id',

    'lv',

    'nl',

    'pl',

    'pt-BR',

    'sv',

    'th',

    'tr'

    ], function (lang) {

    return $('&lt;option&gt;').text(lang).prop('value', lang);

    });

    $langs.unshift(

    $('&lt;option&gt;').text('en').prop({

    value: '',

    selected: true

    })

    );

    $langMenu

    .prop('id', 'lang-menu')

    .append($langs)

    .on('change', function () {

    if (this.value !== '') {

    // $.getScript,但带有缓存

    $.ajax({

    url: 'http://jquery.bassistance.de/prettydate/i18n/jquery.prettydate-' + this.value + '.js',

    dateType: 'script',

    cache: true

    }).done(doPretty);

    } else {

    $.prettyDate.messages = msgsEn;

    doPretty();

    }

    })

    .wrap('&lt;fieldset&gt;')

    .parent()

    .prependTo('.entries');

    // 独立于当前日期的固定日期

    // (防止变成“5 years ago...”)

    $.prettyDate.now = function () {

    return new Date(1201559100000);

    }

    $('&lt;p&gt;').text('Local time: ' + $.prettyDate.now()).prependTo('.entries');

    doPretty();

    });

    </script>

    </head>

    <body>

    <a class="fork" href="https://www.w3cschool.cn/targetlink?url=https://github.com/jzaefferer/jquery-prettydate" title="Fork jquery.prettydate on GitHub!"></a>

    <h1>jQuery Prettydate 插件演示</h1>

    <div class="entries">

    <ul><em>加载...</em></ul>

    <hr>

    <p><a href="https://www.w3cschool.cn/targetlink?url=https://github.com/jzaefferer/jquery-prettydate"&gt;源代码:github.com/jzaefferer/jquery-prettydate&lt;/a&gt;&lt;/p&gt;

    </div>

    </body>

    </html>

    尝试一下