jQuery prettyDate插件

最新推荐文章于 2024-03-15 08:00:00 发布

csdn_wpno1

最新推荐文章于 2024-03-15 08:00:00 发布

阅读量336

点赞数

分类专栏： jquery 文章标签： prettyDate

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

赠书 | 异步2周年,技术图书免费选 每周荐书：渗透测试、K8s、架构（评论送书） 项目管理+代码托管+文档协作，开发更流畅

window.quickReplyflag = true; var isBole = false; var fasrc="http://my.csdn.net/my/favorite/miniadd?t=jQuery+Prettydate&u=http://blog.csdn.net/yang5726685/article/details/53934754"

jQuery Prettydate

    <div class="article_manage clearfix">
    <div class="article_l">
        <span class="link_categories">
        标签：
          <a href="http://www.csdn.net/tag/jQuery%20Prettydate" target="_blank" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_tag']);">jQuery Prettydate</a>
        </span>
    </div>
    <div class="article_r">
        <span class="link_postdate">2016-12-30 01:40</span>
        <span class="link_view" title="阅读次数">177人阅读</span>
        <span class="link_comments" title="评论次数"> <a href="#comments" onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_pinglun'])">评论</a>(0)</span>
        <span class="link_collect tracking-ad" data-mod="popu_171"> <a href="javascript:void(0);" onclick="javascript:collectArticle('jQuery+Prettydate','53934754');return false;" title="收藏" target="_blank">收藏</a></span>
         <span class="link_report"> <a href="#report" onclick="javascript:report(53934754,2);return false;" title="举报">举报</a></span>

    </div>
</div>    <style type="text/css">        
        .embody{
            padding:10px 10px 10px;
            margin:0 -20px;
            border-bottom:solid 1px #ededed;                
        }
        .embody_b{
            margin:0 ;
            padding:10px 0;
        }
        .embody .embody_t,.embody .embody_c{
            display: inline-block;
            margin-right:10px;
        }
        .embody_t{
            font-size: 12px;
            color:#999;
        }
        .embody_c{
            font-size: 12px;
        }
        .embody_c img,.embody_c em{
            display: inline-block;
            vertical-align: middle;               
        }
         .embody_c img{               
            width:30px;
            height:30px;
        }
        .embody_c em{
            margin: 0 20px 0 10px;
            color:#333;
            font-style: normal;
        }
</style>
<script type="text/javascript">
    $(function () {
        try
        {
            var lib = eval("("+$("#lib").attr("value")+")");
            var html = "";
            if (lib.err == 0) {
                $.each(lib.data, function (i) {
                    var obj = lib.data[i];
                    //html += '<img src="' + obj.logo + '"/>' + obj.name + "&nbsp;&nbsp;";
                    html += ' <a href="' + obj.url + '" target="_blank">';
                    html += ' <img src="' + obj.logo + '">';
                    html += ' <em><b>' + obj.name + '</b></em>';
                    html += ' </a>';
                });
                if (html != "") {
                    setTimeout(function () {
                        $("#lib").html(html);                      
                        $("#embody").show();
                    }, 100);
                }
            }      
        } catch (err)
        { }

    });
</script>
  <div class="category clearfix">
    <div class="category_l">
       <img src="http://static.blog.csdn.net/images/category_icon.jpg">
        <span>分类：</span>
    </div>
    <div class="category_r">
                <label onclick="GetCategoryArticles('6646022','yang5726685','top','53934754');">
                    <span onclick="_gaq.push(['_trackEvent','function', 'onclick', 'blog_articles_fenlei']);">JQuery<em>（48）</em></span>
                  <img class="arrow-down" src="http://static.blog.csdn.net/images/arrow_triangle _down.jpg" style="display:inline;">
                  <img class="arrow-up" src="http://static.blog.csdn.net/images/arrow_triangle_up.jpg" style="display:none;">
                    <div class="subItem">
                        <div class="subItem_t"><a href="http://blog.csdn.net/yang5726685/article/category/6646022" target="_blank">作者同类文章</a><i class="J_close">X</i></div>
                        <ul class="subItem_l" id="top_6646022">                            
                        </ul>
                    </div>
                </label>                    
    </div>
</div>

目录(?)[+]

jQuery Prettydate
1. 使用方式

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 方法：

$</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">(</span><span class="kwd" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,136)">function</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">()</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> </span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">{</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> $("a").prettyDate(); });

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

$</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">.</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)">prettyDate</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">.</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)">messages </span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">=</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> </span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">{</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> now</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">:</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> </span><span class="str" style="border:0px; margin:0px; padding:0px; color:rgb(0,136,0)">"gerade eben"</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">,</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> minute</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">:</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> </span><span class="str" style="border:0px; margin:0px; padding:0px; color:rgb(0,136,0)">"vor einer Minute"</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">,</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> minutes</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">:</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> $</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">.</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)">prettyDate</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">.</span><span class="kwd" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,136)">template</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">(</span><span class="str" style="border:0px; margin:0px; padding:0px; color:rgb(0,136,0)">"vor {0} Minuten"</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">),</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> hour</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">:</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> </span><span class="str" style="border:0px; margin:0px; padding:0px; color:rgb(0,136,0)">"vor einer Stunde"</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">,</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> hours</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">:</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> $</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">.</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)">prettyDate</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">.</span><span class="kwd" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,136)">template</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">(</span><span class="str" style="border:0px; margin:0px; padding:0px; color:rgb(0,136,0)">"vor {0} Stunden"</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">),</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> yesterday</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">:</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> </span><span class="str" style="border:0px; margin:0px; padding:0px; color:rgb(0,136,0)">"Gestern"</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">,</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> days</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">:</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> $</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">.</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)">prettyDate</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">.</span><span class="kwd" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,136)">template</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">(</span><span class="str" style="border:0px; margin:0px; padding:0px; color:rgb(0,136,0)">"vor {0} Tagen"</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">),</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> weeks</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">:</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> $.prettyDate.template("vor {0} Wochen") }

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

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

$</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">(</span><span class="kwd" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,136)">function</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">()</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> </span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">{</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> $("a").prettyDate({ interval: false }); });

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

$</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">(</span><span class="kwd" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,136)">function</span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">()</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> </span><span class="pun" style="border:0px; margin:0px; padding:0px; color:rgb(102,102,0)">{</span><span class="pln" style="border:0px; margin:0px; padding:0px; color:rgb(0,0,0)"> $("a").prettyDate({ interval: 1000 }); });

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

$(function() { 
    $("a").prettyDate({
        function() { // "this" 是 DOM 元素
            return $(this).attr("isodate");
        } 
    }); 
});

document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000)

    <div id="digg" articleid="53934754">
        <dl id="btnDigg" class="digg digg_enable" onclick="btndigga();">

             <dt>顶</dt>
            <dd>0</dd>
        </dl>


        <dl id="btnBury" class="digg digg_enable" onclick="btnburya();">

              <dt>踩</dt>
            <dd>0</dd>               
        </dl>

    </div>
 <div class="tracking-ad" data-mod="popu_222"><a href="javascript:void(0);" target="_blank">&nbsp;</a>   </div>
<div class="tracking-ad" data-mod="popu_223"> <a href="javascript:void(0);" target="_blank">&nbsp;</a></div>
<script type="text/javascript">
    function btndigga() {
        $(".tracking-ad[data-mod='popu_222'] a").click();
    }
    function btnburya() {
        $(".tracking-ad[data-mod='popu_223'] a").click();
    }
        </script>