• 特朗普再与世界"为敌" 多国斥其关于耶路撒冷决定 2018-06-22
  • 严防“两节”期间“四风”反弹 持续保持高压态势 2018-06-22
  • 反转!华南理工大学否认向莱阳14岁神童发送考察函 2018-06-21
  • 中国出版集团公司总裁谭跃委员:唱响新时代的好声音 2018-06-21
  • 新華網評:分享經濟,別演成分享的“獨角戲” 2018-06-20
  • 红薯会越放越甜吗 如何保存红薯最科学? 2018-06-20
  • 猪肉创八年新低部分养殖户巨亏离场 行业加速洗牌 2018-06-19
  • 招商证券:创业板反弹压力逐渐显现 2018-06-19
  • “一拖二快三”足球比分直400余名应届大学毕业生成为部队“准警官” 2018-06-19
  • 男子累计献血20万毫升 获选江苏"最美志愿者" 2018-06-19
  • 欧米茄全新推出新西兰酋长队腕表 2018-06-19
  • 財政部發文要求清理“有照無證”會計師事務所 2018-06-19
  • 八旬老人街头贴纸条求收养 称儿子同意其找人抚养 2018-06-18
  • 全国政协委员许鸿飞:让中国文化走出去 2018-06-18
  • 《谈判官》杨幂曝爱情观金句 演绎独立新女性获赞 2018-06-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程序开发的精髓,快速提高开发技能。