jQuery Prettydate
2021-10-18 15:44 更新
jQuery Prettydate
jQuery Prettydate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求。該插件捆綁了一套有用的驗(yàn)證方法，包括 URL 和電子郵件驗(yàn)證，同時(shí)提供了一個(gè)用來編寫用戶自定義方法的 API。所有的捆綁方法默認(rèn)使用英語作為錯(cuò)誤信息，且已翻譯成其他 37 種語言。
該插件目前版本是 1.1.0。
訪問 jQuery Prettydate 官網(wǎng)，下載 jQuery Prettydate Validation（密碼驗(yàn)證）插件。
使用方式
如需使用 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>
然后對(duì)它們應(yīng)用 prettyDate 方法：
$(function() { $("a").prettyDate(); });
如需本地化該插件，請(qǐng)?jiān)?$.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 秒中更新一次每個(gè)被選中的元素。這樣子 "just now" 會(huì)變?yōu)?"1 minute ago" 再變?yōu)?"x minutes ago" 再變?yōu)?"1 hour ago" 等等。
您可以通過指定 interval 選項(xiàng)為 "false" 來禁用間隔更新：
$(function() { $("a").prettyDate({ interval: false }); });或者設(shè)置一個(gè)不同的時(shí)間間隔，例如：interval: 1000，每隔一秒更新一次每個(gè)被選中的元素：
$(function() { $("a").prettyDate({ interval: 1000 }); });value 選項(xiàng)默認(rèn)讀取 title 屬性中的 ISO8601 日期字符串。重載該選項(xiàng)來使用其他屬性，例如，一個(gè)自定義的 "isodate" 屬性：
$(function() { $("a").prettyDate({ function() { // "this" is the DOM element return $(this).attr("isodate"); } }); });實(shí)例演示
jQuery Prettydate 插件演示。本實(shí)例使用了一個(gè)固定的日期，因?yàn)樵摬寮粫?huì)格式化一個(gè)月之前的日期。實(shí)例不使用類似 "6 months ago" 這種模糊的表達(dá)，而是保持原有的日期字符串。
<!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 不重復(fù)
var zulus, $langs,
msgsEn = $.extend({}, $.prettyDate.messages),
$langMenu = $('<select>'),
$entries = $('.entries ul').empty();
function doPretty() {
$('.time').prettyDate({
// 由于時(shí)間是固定的，不需要更新
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>' +
' • ' + '<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');
// 獨(dú)立于當(dāng)前日期的固定日期
// （防止變成“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" href="http://hgci.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="http://hgci.cn/targetlink?url=https://github.com/jzaefferer/jquery-prettydate">源代碼：github.com/jzaefferer/jquery-prettydate</a></p>
</div>
</body>
</html>以上內(nèi)容是否對(duì)您有幫助：
更多建議：