• 国家国际发展合作署举行揭牌仪式 2018-04-21
  • 春潮涌动,千余青少年相约科技馆 2018-04-21
  • 英俄用“关闭电视台”互相威胁 双边关系雪上加霜 2018-04-21
  • 拔不拔赖清德?蔡英文何去何从 2018-04-21
  • 我国阅读指数首次发布 人均纸书阅读量为4.66本 2018-04-20
  • 《夏目的美丽日记》绿色度测评报告 2018-04-20
  • 只要打动人心,文艺片也可以很好看 2018-04-19
  • 《荒城纪》揭幕北京大学生电影节 2018-04-19
  • 贵州桐梓:困难群众打工差点错过“移民搬迁”之后 2018-04-19
  • 《英雄联盟》2018年季中冠军赛入围赛抽签将4月24日举行 2018-04-19
  • 全国最美志愿者黄梅生:孤儿的“校长爸爸” 2018-04-19
  • 《荒城纪》揭幕北京大学生电影节 2018-04-18
  • 贵州桐梓:困难群众打工差点错过“移民搬迁”之后 2018-04-18
  • 老布什夫人芭芭拉放弃治疗,余生将在家中“颐养” 2018-04-18
  • 音乐剧《朝暮有情人》演绎港穗两地三代情 2018-04-18
  • 【jquery教程】jQuery Prettydate

    栏目: jquery 发布于: 2014-11-28 18:25:43

    jQuery Prettydate

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

    该插件目前版本是 1.1.0。

    访问 jQuery Prettydate 官网,下载 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://www.rocksun.cn/prettydate/libs/jquery.js"></script>
    	<script src="http://www.rocksun.cn/prettydate/jquery.prettydate.js"></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(http://www.rocksun.cn/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 rel="nofollow" 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" rel="nofollow" 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://www.rocksun.cn/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="nofollow"  title="Fork jquery.prettydate on GitHub!"></a>
    	<h1>jQuery Prettydate 插件演示</h1>
    	<div class="entries">
    		<ul><em>加载...</em></ul>
    		<hr>
    		<p><a rel="nofollow" >源代码:github.com/jzaefferer/jquery-prettydate</a></p>
    	</div>
    </body>
    </html>
    


    本文转载自:w3cschool
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:【jquery教程】jQuery Prettydate
    IT技术书籍推荐:
    PHP从入门到精通(第3版)
    PHP从入门到精通(第3版)
    明日科技 (作者)
    《PHP从入门到精通(第3版)》从初学者角度出发,通过通俗易懂的语言、丰富多彩的实例,详细介绍了使用PHP进行网络开发应该掌握的各方面技术。全书共分4篇25章,包括初识PHP、PHP环境搭建和开发工具、PHP语言基础、流程控制语句、字符串操作、正则表达式、PHP数组、PHP与Web页面交互、PHP与JavaScript交互、日期和时间、Cookie与Session、图形图像处理技术、文件系统、面向对象、PHP加密技术、MySQL数据库基础、phpMyAdmin图形化管理工具、PHP操作MySQL数据库、PDO数据库抽象层、ThinkPHP框架、Smarty模板技术、PHP与XML技术、PHP与Ajax技术、应用Smarty模板开发电子商务网站、应用ThinkPHP框架开发明日导航网等内容。书中所有知识都结合具体实例进行介绍,涉及的程序代码均附以详细的注释,可以使读者轻松领会PHP程序开发的精髓,快速提高开发技能。