• <nav id="wkkge"><strong id="wkkge"></strong></nav>
  • <menu id="wkkge"></menu>
  • jQuery教程
    jQuery選擇器
    jQuery動畫效果
    jQuery節點操作
    jQuery事件
    jQuery HTML
    jQuery遍歷
    jQuery其他
    jQuery Ajax
    jQuery參考手冊
    jQuery實例
    jQuery插件

    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>

     

    全部教程
  • <nav id="wkkge"><strong id="wkkge"></strong></nav>
  • <menu id="wkkge"></menu>
  • 面对面棋牌游戏