jQuery Prettydate

jQuery Prettydate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

该插件目前版本是 1.1.0。

访问 jQuery Prettydate 官网，下载 jQuery Prettydate Validation（密码验证）插件。

使用方式

如需使用 Prettydate 插件，您需要在 title 中带有 ISO8601 日期：

  1. <a title="2008-01-28T20:24:17Z">January 28th, 2008</a> 
  2. <a title="2008-01-27T22:24:17Z">January 27th, 2008</a> 
  3. <a title="2008-01-26T22:24:17Z">January 26th, 2008</a>

然后对它们应用 prettyDate 方法：

  1. $(function() { $("a").prettyDate(); });

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

  1. $.prettyDate.messages = { 
  2. now: "gerade eben", 
  3. minute: "vor einer Minute", 
  4. minutes: $.prettyDate.template("vor {0} Minuten"), 
  5. hour: "vor einer Stunde", 
  6. hours: $.prettyDate.template("vor {0} Stunden"), 
  7. yesterday: "Gestern", 
  8. days: $.prettyDate.template("vor {0} Tagen"), 
  9. weeks: $.prettyDate.template("vor {0} Wochen") 
  10. }

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

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

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

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

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

value 选项默认读取 title 属性中的 ISO8601 日期字符串。重载该选项来使用其他属性，例如，一个自定义的 "isodate" 属性：

  1. $(function() { $("a").prettyDate({ function() { // "this" is the DOM element return $(this).attr("isodate"); } }); });

实例演示

jQuery Prettydate 插件演示。本实例使用了一个固定的日期，因为该插件不会格式化一个月之前的日期。实例不使用类似 "6 months ago" 这种模糊的表达，而是保持原有的日期字符串。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>jQuery Prettydate 插件</title>
  6.  <script src="http://jquery.bassistance.de/prettydate/libs/jquery.js"></script>
  7.   <script src="http://jquery.bassistance.de/prettydate/jquery.prettydate.js"></script>
  8.     <style>
  9.  * {
  10.        margin: 0;
  11.         padding: 0;
  12.    }
  13.  body {
  14.         background: #eee;
  15.      font: 14px/21px sans-serif;
  16.        color: #333;
  17.       position: relative;
  18.    }
  19.  h1 {
  20.       text-align: center;
  21.        padding: 1em 0;
  22.    }
  23.  a {
  24.        text-decoration: none;
  25.         color: #0645ad;
  26.    }
  27.  a:hover {
  28.      text-decoration: underline;
  29.    }
  30.  fieldset, p {
  31.      margin: 0.5em 0;
  32.   }
  33.  .fork {
  34.        position: fixed;
  35.       top: 0; right: 0;
  36.      background: url(https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67) no-repeat 100% 0;
  37.         width: 150px;
  38.      height: 150px;
  39.         float: right;
  40.  }
  41.  .entries {
  42.         margin: 0 auto 3em;
  43.        padding: 0.5em 0.5em 0;
  44.        background: #fff;
  45.      width: 500px;
  46.      overflow: hidden;
  47.  }
  48.  fieldset, .entry {
  49.         background: #f2f2f2;
  50.       border: 1px solid #ddd;
  51.        padding: 0.25em 0.5em;
  52.         margin-bottom: 0.5em;
  53.      list-style: none;
  54.      overflow: hidden;
  55.  }
  56.  .entry .extra {
  57.        float: right;
  58.  }
  59.  </style>
  60.     <script>
  61.         jQuery(function ($) {
  62.          // 通过 javascript 生成演示，确保 HTML 不重复
  63.          var zulus, $langs,
  64.                 msgsEn = $.extend({}, $.prettyDate.messages),
  65.              $langMenu = $('<select>'),
  66.                 $entries = $('.entries ul').empty();
  69.             function doPretty() {
  70.              $('.time').prettyDate({
  71.                  // 由于时间是固定的，不需要更新
  72.                  interval: false
  73.                });
  74.            }
  76.            zulus = [
  77.              '2012-01-01T00:00:00Z',
  78.              '2008-01-28T22:24:30Z',
  79.              '2008-01-28T22:23:05Z',
  80.              '2008-01-28T22:20:05Z',
  81.              '2008-01-28T20:24:17Z',
  82.              '2008-01-27T08:00:00Z',
  83.              '2008-01-26T08:00:00Z',
  84.              '2008-01-21T08:00:00Z',
  85.              '2008-01-14T08:00:00Z',
  86.              '2007-12-28T08:00:00Z',
  87.              '2007-12-15T08:00:00Z',
  88.              '2007-01-14T08:00:00Z',
  89.              '2006-03-07T08:00:00Z'
  90.           ];
  91.             $.each(zulus, function (i, zulu) {
  92.                 $entries.append(
  93.                   $('<li>', {
  94.                        addClass: 'entry',
  95.                       html: '<a href="#' + zulu + '">Blah blah blah</a>' +
  96.                             ' <small class="extra"><span class="time" title="' +                            zulu + '">' + new Date($.prettyDate.parse(zulu)).toDateString() + '</span>' +
  97.                            ' &nbsp;&bull;&nbsp; ' + '<a class="author" href="#/author/john/">John Resig</a></small>'
  98.                    })
  99.                 );
  101.           });
  104.            $langs = $.map([
  105.               'cn',
  106.                'da',
  107.                'de',
  108.                'es',
  109.                'fr',
  110.                'id',
  111.                'lv',
  112.                'nl',
  113.                'pl',
  114.                'pt-BR',
  115.                 'sv',
  116.                'th',
  117.                'tr'
  118.             ], function (lang) {
  119.               return $('<option>').text(lang).prop('value', lang);
  120.             });
  121.            $langs.unshift(
  122.                $('<option>').text('en').prop({
  123.                  value: '',
  124.                   selected: true
  125.                 })
  126.             );
  128.           $langMenu
  129.              .prop('id', 'lang-menu')
  130.               .append($langs)
  131.                .on('change', function () {
  132.                  if (this.value !== '') {
  133.                         // $.getScript，但带有缓存
  134.                       $.ajax({
  135.                           url: 'http://jquery.bassistance.de/prettydate/i18n/jquery.prettydate-' +  this.value + '.js',
  136.                          dateType: 'script',
  137.                          cache: true
  138.                        }).done(doPretty);
  139.                     } else {
  140.                       $.prettyDate.messages = msgsEn;
  141.                        doPretty();
  142.                    }
  143.              })
  144.                 .wrap('<fieldset>')
  145.                    .parent()
  146.                  .prependTo('.entries');
  148.            // 独立于当前日期的固定日期
  149.            // （防止变成“5 years ago...”）
  150.          $.prettyDate.now = function () {
  151.               return new Date(1201559100000);
  152.            }
  154.            $('<p>').text('Local time: ' + $.prettyDate.now()).prependTo('.entries');
  156.            doPretty();
  157.        });
  158.    </script>
  159. </head>
  160. <body>
  161.   <a class="fork" href="https://github.com/jzaefferer/jquery-prettydate" title="Fork jquery.prettydate on GitHub!"></a>
  162.    <h1>jQuery Prettydate 插件演示</h1>
  163.    <div class="entries">
  164.      <ul><em>加载...</em></ul>
  165.        <hr>
  166.         <p><a href="https://github.com/jzaefferer/jquery-prettydate">源代码：github.com/jzaefferer/jquery-prettydate</a></p>
  167.     </div>
  168. </body>
  169. </html>