jQuery Prettydate插件

jQuery Prettydate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應用程序各種需求。該插件捆綁了一套有用的驗證方法，包括 URL 和電子郵件驗證，同時提供了一個用來編寫用戶自定義方法的 API。所有的捆綁方法默認使用英語作為錯誤信息，且已翻譯成其他 37 種語言。

該插件目前版本是 1.1.0。

下載 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(
                  $('<li>', {
                       addClass: 'entry',
                      html: '<a href="#' + zulu + '">Blah blah blah</a>' +
                            ' <small class="extra"><span class="time" title="' +                            zulu + '">' + new Date($.prettyDate.parse(zulu)).toDateString() + '</span>' +
                           ' &nbsp;&bull;&nbsp; ' + '<a class="author" href="#/author/john/">John Resig</a></small>'
                   })
                );

          });


           $langs = $.map([
              'cn',
               'da',
               'de',
               'es',
               'fr',
               'id',
               'lv',
               'nl',
               'pl',
               'pt-BR',
                'sv',
               'th',
               'tr'
            ], function (lang) {
              return $('<option>').text(lang).prop('value', lang);
            });
           $langs.unshift(
               $('<option>').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('<fieldset>')
                   .parent()
                 .prependTo('.entries');

           // 獨立于當前日期的固定日期
           // （防止變成“5 years ago...”）
         $.prettyDate.now = function () {
              return new Date(1201559100000);
           }

           $('<p>').text('Local time: ' + $.prettyDate.now()).prependTo('.entries');

           doPretty();
       });
   </script>
</head>
<body>
  <a class="fork"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  title="Fork jquery.prettydate on GitHub!"></a>
   <h1>jQuery Prettydate 插件演示</h1>
   <div class="entries">
     <ul><em>加載...</em></ul>
       <hr>
        <p><a  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank" >源代碼：github.com/jzaefferer/jquery-prettydate</a></p>
    </div>
</body>
</html>

jQuery密碼驗證插件 jQuery Tooltip插件

全部教程

黄色网址大全免费-黄色网址你懂得-黄色网址你懂的-黄色网址有那些-免费超爽视频-免费大片黄国产在线观看

jQuery Prettydate插件

使用方式

視頻課程

2020Java零基礎教程

JQuery零基礎入門視頻

AJAX視頻教程全集

linux基礎視頻教程