JQuery on Dapeng Zhang

jQuery 图片加载成功调用指定执行方法

Thu, 03 Jul 2025 17:11:40 +0000

页面中总有一些操作是，需要图片加载完之后去做的，下面的代码可实现，需要的拿走

$("img").one("load", function(v) {
 // 逻辑处理
 $(v.target).parent().parent().find('.over-shade').css({'height':$(v.target).height()});
}).each(function() {
 if(this.complete) $(this).load();
});

jQuery 实现保持滚动条一直在底部

Tue, 01 Jul 2025 11:35:56 +0000

jquery 实现保持滚动条一直在底部

var e = $('#import-bill'); 
e.scrollTop = e.scrollHeight;//让滚动条自动滚动顶部
$("#import-bill").scrollTop($("#import-bill")[0].scrollHeight);

jQuery 消息提醒插件 toastmessage

Fri, 27 Jun 2025 14:14:50 +0000

最近做系统，想到使用后台要使用消息提醒，但是一直苦恼消息提醒的效果，于是找了一个toastmessage，还不错。记录下使用的方法。

第一步：引入需要的文件

<script type="text/javascript" src="/js/admin/toastmessage/jquery.toastmessage.js"></script>
<link href="/js/admin/toastmessage/css/jquery.toastmessage.css" type="text/css" rel="stylesheet" />

第二步：测试使用的函数

<script>
 function showSuccessToast() {
 $().toastmessage('showSuccessToast', "Success Dialog which is fading away ...");
 }
 function showStickySuccessToast() {
 $().toastmessage('showToast', {
 text : 'Success Dialog which is sticky',
 sticky : true,
 position : 'top-right',
 type : 'success',
 closeText: '',
 close : function () {
 console.log("toast is closed ...");
 }
 });
 
 }
 function showNoticeToast() {
 $().toastmessage('showNoticeToast', "Notice Dialog which is fading away ...");
 }
 function showStickyNoticeToast() {
 $().toastmessage('showToast', {
 text : 'Notice Dialog which is sticky',
 sticky : true,
 position : 'top-right',
 type : 'notice',
 closeText: '',
 close : function () {console.log("toast is closed ...");}
 });
 }
 function showWarningToast() {
 $().toastmessage('showWarningToast', "Warning Dialog which is fading away ...");
 }
 function showStickyWarningToast() {
 $().toastmessage('showToast', {
 text : 'Warning Dialog which is sticky',
 sticky : true,
 position : 'top-right',
 type : 'warning',
 closeText: '',
 close : function () {
 console.log("toast is closed ...");
 }
 });
 }
 function showErrorToast() {
 $().toastmessage('showErrorToast', "Error Dialog which is fading away ...");
 }
 function showStickyErrorToast() {
 $().toastmessage('showToast', {
 text : 'Error Dialog which is sticky',
 sticky : true,
 position : 'top-right',
 type : 'error',
 closeText: '',
 close : function () {
 console.log("toast is closed ...");
 }
 });
 }
</script>

实例网站：

http://akquinet.github.io/jquery-toastmessage-plugin/demo/demo.html

结合jQuery.lazyload和masonry实现瀑布流

Fri, 27 Jun 2025 14:14:30 +0000

结合jQuery.lazyload和masonry实现瀑布流

这里主要是使用jQuery.lazyload配合masonry实现瀑布流的重新排列，有时候网站的速度慢，图片加载慢，获取不到图片的

宽度和高度，所以使用lazyload可以在图片加载完之后，进行瀑布流的重新排列。

实现方法如下：

/**
 * 自动刷新
 * @type {*|jQuery|HTMLElement}
 */
var $container = $('#main');
$container.imagesLoaded( function(){
 $container.masonry({
 itemSelector : '.item',
 columnWidth:205,
	 gutterWidth:10,
 isAnimated: true
 });
});
var pre_href;
//滚动
$(window).scroll(function(){
 // 当滚动到最底部以上100像素时， 加载新内容
 if ($(document).height() - $(this).scrollTop() - $(this).height()<100) {
 ajax_load_data();
 }
});

function ajax_load_data(){
 var href = $('#page-nav').find('.nextprev').attr('href');
 if(href && href != pre_href){
 console.log('href = '+href);
 pre_href = href;

 $.ajax({
 url:href,//获取元素列表的地址
 data:{'act':'ajax_wap_index'},
 dataType:'json',
 type:'post',
 beforeSend:function(){
 show_loading_body();
 },
 complete:function(){
 show_loading_body();
 },
 success:function(data){
 if(data.status != undefined && data.status == 'ok'){
 if(data.html){
 var $boxes = $( data.html );
 $container.append( $boxes ).masonry("appended", $boxes, true);//追加元素
 $container.imagesLoaded(function () {
 $container.masonry();
 });//加载完图片后，会实现自动重新排列。【这里是重点】
 }

 if(data.str_pages){
 $('#page-nav').html(data.str_pages);//设置下一个分页的地址。【可以自己补充】
 }
 }
 }
 });
 }
}

jQuery日期插件，扩展时间

Fri, 27 Jun 2025 14:14:19 +0000

第一步，导入需要的文件

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="/wap/js/jquery.datetimepicker/jquery-ui-timepicker-addon.min.css" />
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="/wap/js/jquery.datetimepicker/jquery-ui-timepicker-addon.min.js"></script>

第二步，配置

$( "#starttime" ).datetimepicker({ dateFormat: "yy-mm-dd" });
$( "#endtime" ).datetimepicker({ dateFormat: "yy-mm-dd" });

jQuery.hash解析url hash，监听hashchange

Fri, 27 Jun 2025 09:45:18 +0000

什么是hashsearch、hashpath

其实那，hashsearch、hashpath这两个词是我自造的。在javascript语言里称url改变该部分不会影响页面重新加载的部分为hash，在后台语言里称之为fragment（碎片）。在这里，我们统称为hash。

在js里获取hash部分，可以使用如下语句获取：

// 获取当前浏览器的hash部分

// 如浏览器的url为：http://qianduanblog.com/#helloworld

var hash=location.hash;//=>"#helloworld"

在html发展的历史中，以前使用hash的作用很简单，就是做锚点使用。hash的“#”和CSS里的“#”是相同的意思，表示id。url的hash部分为#123，那么就会在页面打开的时候直接定位到id=123的元素位置。这个特性，已经被所有浏览器所接受并支持。通常这一功能用作于文章的目录部分，表示索引作用。

如下示例：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>指向id=123的内容</title>
	<style>
	div
	{
		height: 200px;
		margin-bottom: 10px;
		background: #eee;
	}
	</style>
</head>
<body>
	<a href="#123">点击这里立即跳转到id=123的元素位置</a>
	<div id="121">id=121</div>
	<div id="122">id=122</div>
	<div id="123">id=123</div>
	<div id="124">id=124</div>
	<div id="125">id=125</div>
</body>
</html>

如上例子，点击a链接就改变了当前url的hash，指向了hash指向的位置。当前了，如果为hash的id的元素不存在的话，那么各个浏览器的反应是各不相同的，部分高级浏览器不会改变页面滚动条的位置，部分低级浏览器会直接跳转到页面顶部。

说到这里，要解释下什么是hashsearch、hashpath了。从字面可以理解，hashsearch=hash+search，hashpath=hash+path。可能在专业术语里已经有这两个字了，但都与这篇文章无关，因为这俩个词是自造的。什么是hash，我们已经知道了。

那什么是search呢？

在url中有一部分是search部分，如：

http://qianduanblog.com/?name=aaa&age=100
http://qianduanblog.com/?name=bbb&age=10

url的“?”后面的部分称之为search值，是被后台程序所接收的。

path又是什么呢？

如下：

http://qianduanblog.com/name/aaa/age/100
http://qianduanblog.com/name/bbb/age/10

一眼就看出来了，search和path的不同点，通常我们都把search的url重定向成path类型的。

所以，由上可知，hashsearch、hashpath分别指的是：

http://qianduanblog.com/#?name=aaa&age=100
http://qianduanblog.com/#!name/aaa/age/100

规范1：hashsearch的开头部分为“#?”，而hashpath的开头部分为“#!”，多个“#”会被忽略，多个“?”或“!”会被最后一个“?”或“!”所覆盖，如下：

http://qianduanblog.com/#!name/aaa/age/100
http://qianduanblog.com/#####!!!!!!name/aaa/age/100
http://qianduanblog.com/#####????!name/aaa/age/100

以上3个url的hash会被解析成相同的结果。

规范2：hash部分的解析以开头的协议规定（“?”表示search类型，“!”表示path类型），与后面的内容无关，不符合规范的部分会被抛弃解析。

哪些地方可以用hashsearch、hashpath

也许我们都认为url的hash是个小角色，它的作用微乎其微，就像当初我们认为ajax很渺小一样可笑。值得回味的是，把ajax发扬光大的谷歌同样在把url的hash也再次推向时代的前言，它是随着ajax的出现，诞生的一种新型url结构。

先看看如下几个url：

http://qianduanblog.com/#!user/aaa
http://qianduanblog.com/#!user/bbb
http://qianduanblog.com/#!user/ccc
http://qianduanblog.com/#!user/ddd

从url的结构，很明显的看出来，这四个url的目的肯定是不同的，分别表示aaa、bbb、ccc、ddd四个用户所见的页面，但是有一点相同的是，这四个url是同一个页面，在浏览器打开的时候，只请求一次，不会分别请求。这是hash在url中发挥的重要特性。

有这样一个疑问了，既然页面相同的，那么四个用户的页面又如何区分呢？这里必须用到ajax，在页面载入之后，ajax载入四个用户独特的内容。

在当今，hash部分通常应用于单页面应用的丰富表现里，国外很多网站（twitter、谷歌等）已经这样做了，同样国内的如网易邮箱也这样做了。这样做的好处是：

页面只需要一次加载。
页面体验流畅，反应速度快。
页面内容按需加载，减轻服务器压力。
页面可以适配搜索引擎。

前3条的意思很明显，第4条的详细内容，我在这里就不说了，大家有兴趣可以去查看谷歌的介绍文字：jquery插件2：jquery.hash解析url hash，监听hashchange https://developers.google.com/webmasters/ajax-crawling/docs/getting-started。大概的意思是hashpath是可以被搜索引擎认识的，而hashsearch则不可以（目前）。所以，我们可以根据内容的不同来选择不同的hash类型。

jquery.hash及hashchange

说明：jquery.hash.js默认的hashType为hashpath，其标示符为”!“，而hashsearch的标示符为”?”。

3.1、解析hash

按照以上的hash规则，我们可以把hash解析成键值对，$.hash();就可以直接解析，例：

// http://qianduanblog.com/#!a/1/b/2/c/3
// http://qianduanblog.com/#?a=1&b=2&c=3
// $.hash();
// =>{a:"1",b:"2",c:"3"}

3.2、读取hash

把hash解析成了键值对（json对象），读取它就很好办了，例：

// http://qianduanblog.com/#!a/1/b/2/c/3
// http://qianduanblog.com/#?a=1&b=2&c=3
$.hash("a");
// =>"1"
$.hash(["a","b"]);
// =>{a:"1",b:"2"}

3.3、设置hash

设置hash的值也很简单，如：

// 单个设置
$.hash("a","11");
// =>http://qianduanblog.com/#!a/11/b/2/c/3
// 单个设置的时候同时修改hash类型
$.hash("a","11","?");
// =>http://qianduanblog.com/#?a=11&b=2&c=3
// 多个设置
$.hash({a:111,b:222});
// =>http://qianduanblog.com/#?a=111&b=222&c=3
// 多个设置的时候同时修改hash类型
$.hash({a:111,b:222},"!");
// =>http://qianduanblog.com/#!a/111/b/222/c/3

3.4、删除hash

删除hash操作也很简单，例：

// 删除单个
$.hash("a",null)
// =>http://qianduanblog.com/#!b/222/c/3
// 删除多个
$.hash(["a","b"],null)
// =>http://qianduanblog.com/#!c/3

3.5、清空hash

清空操作一如既往的方便，例：

$.hash(null);
// =>http://qianduanblog.com/#

3.6、监听hashchange

监听的使用方法也很便捷，例：

// 单监听，当监听的变量发生变化时触发
// 假设a值由1变化为2
$.hash("listen","a",function(oldObj,newObj){
// 当hash中的a值发生变化就会触发监听事件
// 回调函数有2个参数
// 参数1：旧值的对象，如这里监听的是a，那么其为{a:1}
// 参数2：现值的对象，如这里监听的是a，那么其为{a:2}
});
// 并监听，当监听的变量都同时发生变化时才触发
// 假设b由2=>3
// 假设c由3=>4
$.hash("listenAnd",["b","c"],function(oldObj,newObj){
// 参数1：旧值的对象，如这里监听的是b、c，那么其为{b:2,c:3}
// 参数2：现值的对象，如这里监听的是b、c，那么其为{b:3,c:4}
});
// 或监听，当监听的变量任何一个发生变化时都触发
// 假设d由4=>5
// 假设e没变5=>5
$.hash("listenOr",["d","e"],function(oldObj,newObj){
// 参数1：旧值的对象，如这里监听的是d、e，那么其为{d:4,e:5}
// 参数2：现值的对象，如这里监听的是d、e，那么其为{b:5,e:5}
});

插件下载及演示

下载地址：

http://festatic.aliapp.com/#jquery.hash

http://festatic.aliapp.com/js/jquery.hash/#!a/1/b/2/c/3

参考文章：

http://qianduanblog.com/2003.html

Django 整合 jQuery Waterfall 插件实现瀑布流

Tue, 24 Jun 2025 14:46:03 +0000

Django实现瀑布流

需要Waterfall插件，jQuery Waterfall插件的使用这一节已经说过了

这里使用的时候可能会比较简短，跟上一篇文章有太多的不一样，不过这里使用的时候，调用的是html格式的数据。

Django Server端代码如下：

def ajax(request):
 '''ajax请求数据'''
 if request.user.is_authenticated():
 user = request.user
 else:
 user = request.user
 try:
 items = Gifts.objects.filter(is_show = 0).order_by('-create_date')[10:20]
 except:
 items = []

 return render_to_response('home/ajax.html',{'action':'home','items':items,'user':user},context_instance=RequestContext(request))

ajax.html代码如下:

{% load staticfiles %}
{% load dajaxice_templatetags %}

{% if items %}
{% for item in items %}
<div class="item" >
 <a target='_blank' title='{{ item.title }}' href='{{ item.url_address }}'>
 <img src="{{ MEDIA_URL }}{{ item.large_image }}" width="192" height="288">
 </a>
 <h3>{{ item.title|slice:"10" }}</h3>
 <p>{{ item.description|slice:"100" }}</p>
 <p>
 <a class="btn btn-primary" target='_blank' href="{{ item.url_address }}">浏览</a>
 <a class="btn have_feeling" href="#" onclick="Dajaxice.walkerfree.feeling(feeling_callback, {'id':'{{ item.id }}','type':'woman'});return false;">有感觉</a>
 <a class="btn no_feeling" href="#" onclick="Dajaxice.walkerfree.no_feeling(no_feeling_callback,{'id':'{{ item.id }}','type':'woman'});return false;">没感觉</a>
 <input type='hidden' value='woman' name='type'>
 </p>
</div>
{% endfor %}
{% endif %}

因为是调用的html格式的数据，这里就直接的将数据展示出来了。

调用数据的页面的html代码如下：

<div id='container'>
 {% if items %}
 {% for item in items %}
 <div class="item" >
 <a target='_blank' title='{{ item.title }}' href='{{ item.url_address }}'>
 <img src="{{ MEDIA_URL }}{{ item.large_image }}" width="192" height="288">
 </a>
 <h3>{{ item.title|slice:"10" }}</h3>
 <p>{{ item.description|slice:"100" }}</p>
 <p>
 <a class="btn btn-primary" target='_blank' href="{{ item.url_address }}">浏览</a> 
 <a class="btn have_feeling" href="#" onclick="Dajaxice.walkerfree.feeling(feeling_callback, {'id':'{{ item.id }}','type':'woman'});return false;">有感觉</a>
 <a class="btn no_feeling" href="#" onclick="Dajaxice.walkerfree.no_feeling(no_feeling_callback,{'id':'{{ item.id }}','type':'woman'});return false;">没感觉</a>
 <input type='hidden' value='woman' name='type'>
 </p>
 </div>
 {% endfor %}
 {% endif %}
</div>

调用的script如下：

<script type='text/javascript' src="/static/js/jquery-1.8.3.min.js"></script>
<script type='text/javascript' src="/static/waterfall/js/libs/handlebars/handlebars.js"></script> 
<script type='text/javascript' src="/static/waterfall/js/waterfall.min.js"></script>

瀑布流的实现部分如下：

$(function(){
 $('#container').waterfall({
 itemCls: 'item',
 colWidth: 210,
 gutterWidth: 15,
 gutterHeight: 15,
 checkImagesLoaded: false,
 dataType: 'html',
 path: function(page) {
 return '/ajax/?page=' + page;
 }

 });
 $('.container-block').css({'visibility':'visible'})
});

jQuery Waterfall插件的使用

Tue, 24 Jun 2025 14:46:01 +0000

简介

Waterfall

jquery waterfall plugin,like Pinterest、huaban.com、faxianla.com

下载地址：waterfall plugin

如何使用

第一步

添加html代码

<div id="container"></div>

第二步

引入需要的js

<script src="/path/jquery.min.js"></script>
<script src="/path/handlebars.js"></script>
<script src="/path/waterfall.min.js"></script>

第三步

添加模板

<script id="waterfall-tpl" type="text/x-handlebars-template">
 //template content
</script>

第四步

script的实现如下:

$('#container').waterfall({
	itemCls: 'waterfall-item', 
	prefix: 'waterfall',
	fitWidth: true, 
	colWidth: 240, 
	gutterWidth: 10,
	gutterHeight: 10,
	align: 'center',
	minCol: 1, 
	maxCol: undefined, 
	maxPage: undefined, 
	bufferPixel: -50, 
	containerStyle: {
		position: 'relative'
	},
	resizable: true, 
	isFadeIn: false,
	isAnimated: false,
	animationOptions: { 
	},
	isAutoPrefill: true,
	checkImagesLoaded: true,
	path: undefined,
	dataType: 'json', 
	params: {}, 
	
	loadingMsg: '<div style="text-align:center;padding:10px 0; color:#999;"><img src="data:image/gif;base64,R0lGODlhEAALAPQAAP///zMzM+Li4tra2u7u7jk5OTMzM1hYWJubm4CAgMjIyE9PT29vb6KiooODg8vLy1JSUjc3N3Jycuvr6+Dg4Pb29mBgYOPj4/X19cXFxbOzs9XV1fHx8TMzMzMzMzMzMyH5BAkLAAAAIf4aQ3JlYXRlZCB3aXRoIGFqYXhsb2FkLmluZm8AIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7" alt=""><br />Loading...</div>',
	
	state: { 
		isDuringAjax: false, 
		isProcessingData: false, 
		isResizing: false,
		curPage: 1 
	},

	// callbacks
	callbacks: {
		/*
		 * loadingStart
		 * @param {Object} loading $('#waterfall-loading')
		 */
		loadingStart: function($loading) {
			$loading.show();
			//console.log('loading', 'start');
		},
		
		/*
		 * loadingFinished
		 * @param {Object} loading $('#waterfall-loading')
		 * @param {Boolean} isBeyondMaxPage
		 */
		loadingFinished: function($loading, isBeyondMaxPage) {
			if ( !isBeyondMaxPage ) {
				$loading.fadeOut();
				//console.log('loading finished');
			} else {
				//console.log('loading isBeyondMaxPage');
				$loading.remove();
			}
		},
		
		/*
		 * loadingError
		 * @param {String} xhr , "end" "error"
		 */
		loadingError: function($message, xhr) {
			$message.html('Data load faild, please try again later.');
		},
		
		/*
		 * renderData
		 * @param {String} data
		 * @param {String} dataType , "json", "jsonp", "html"
		 */
		renderData: function (data, dataType) {
			var tpl,
				template;
				
			if ( dataType === 'json' || dataType === 'jsonp' ) { // json or jsonp format
				tpl = $('#waterfall-tpl').html();
				template = Handlebars.compile(tpl);
				
				return template(data);
			} else { // html format
				return data;
			}
		}
	},
	
	debug: false
});

第五步

设置调用数据的服务

第六步

DEMO实例如下：

infinitescroll

jQuery插件开发全解析

Mon, 23 Jun 2025 16:26:43 +0000

jQuery插件的开发包括两种：

一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。

1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：

1.1 添加一个新的全局函数

添加一个全局函数，我们只需如下定义：

jQuery.foo = function() { 
 alert('This is a test. This is only a test.'); 
};

1.2 增加多个全局函数

添加多个全局函数，可采用如下定义：

jQuery.foo = function() { 
 alert('This is a test. This is only a test.'); 
};
jQuery.bar = function(param) { 
 alert('This function takes a parameter, which is "' + param + '".'); 
};

调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar(‘bar’);

1.3 使用jQuery.extend(object);

jQuery.extend({ 
 foo: function() { 
 alert('This is a test. This is only a test.'); 
 }, 
 bar: function(param) { 
 alert('This function takes a parameter, which is "' + param +'".'); 
 } 
});

1.4 使用命名空间

虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。

jQuery.myPlugin = { 
 foo:function() { 
 alert('This is a test. This is only a test.'); 
 }, 
 bar:function(param) { 
 alert('This function takes a parameter, which is "' + param + '".'); 
 } 
};

采用命名空间的函数仍然是全局函数，调用时采用的方法：

$.myPlugin.foo(); 
$.myPlugin.bar('baz');

通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。

2、对象级别的插件开发

对象级别的插件开发需要如下的两种形式：、

形式1：

(function($){ 
 $.fn.extend({ 
 pluginName:function(opt,callback){ 
 // Our plugin implementation code goes here. 
 } 
 }) 
})(jQuery);

形式2：

(function($){
 $.fn.pluginName = function() {
 // Our plugin implementation code goes here. 
 }; 
})(jQuery);

上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.

2.1 在JQuery名称空间下申明一个名字

这是一个单一插件的脚本。如果你的脚本中包含多个插件，或者互逆的插件（例如： $.fn.doSomething() 和 $.fn.undoSomething()），那么你需要声明多个函数名字。但是，通常当我们编写一个插件时，力求仅使用一个名字来包含它的所有内容。我们的示例插件命名为"highlight"

(function($){
 $.fn.hilight = function() { 
 // Our plugin implementation code goes here. 
 };
})(jQuery);
$('#myDiv').hilight();

但是如果我们需要分解我们的实现代码为多个函数该怎么办？有很多原因：设计上的需要；这样做更容易或更易读的实现；而且这样更符合面向对象。这真是一个麻烦事，把功能实现分解成多个函数而不增加多余的命名空间。出于认识到和利用函数是javascript中最基本的类对象，我们可以这样做。就像其他对象一样，函数可以被指定为属性。因此我们已经声明"hilight"为jQuery的属性对象，任何其他的属性或者函数我们需要暴露出来的，都可以在"hilight"函数中被声明属性。稍后继续。

我们的插件通过这样被调用：

2.2 接受options参数以控制插件的行为

让我们为我们的插件添加功能指定前景色和背景色的功能。我们也许会让选项像一个options对象传递给插件函数。例如：

// plugin definition 
$.fn.hilight = function(options) { 
 var defaults = { 
 foreground: 'red', 
 background: 'yellow' 
 }; 
 // Extend our default options with those provided. 
 var opts = $.extend(defaults, options); 
 // Our plugin implementation code goes here. 
};

我们的插件可以这样被调用：

$('#myDiv').hilight({ 
 foreground: 'blue' 
});

2.3 暴露插件的默认设置

我们应该对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件。接下来我们开始利用函数对象。

// plugin definition 
$.fn.hilight = function(options) { 
 // Extend our default options with those provided. 
 // Note that the first arg to extend is an empty object - 
 // this is to keep from overriding our "defaults" object. 
 var opts = $.extend({}, $.fn.hilight.defaults, options); 
 // Our plugin implementation code goes here. 
 }; 
 // plugin defaults - added as a property on our plugin function 
 $.fn.hilight.defaults = { 
 foreground: 'red', 
 background: 'yellow' 
 }
};

现在使用者可以包含像这样的一行在他们的脚本里：

//这个只需要调用一次，且不一定要在ready块中调用 

$.fn.hilight.defaults.foreground = 'blue';

接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色：

$('#myDiv').hilight();

如你所见，我们允许使用者写一行代码在插件的默认前景色。而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值：

// 覆盖插件缺省的背景颜色 

$.fn.hilight.defaults.foreground = 'blue';
// ... 

// 使用一个新的缺省设置调用插件 

$('.hilightDiv').hilight();
// ... 

// 通过传递配置参数给插件方法来覆盖缺省设置 

$('#green').hilight({ 
 foreground: 'green' 
});

2.4 适当的暴露一些函数

这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件（同时让其他人扩展你的插件）。例如，我们插件的实现里面可以定义一个名叫"format"的函数来格式化高亮文本。我们的插件现在看起来像这样，默认的format方法的实现部分在hiligth函数下面。

// plugin definition 
$.fn.hilight = function(options) { 
 // iterate and reformat each matched element 
 return this.each(function() { 
 var $this = $(this); 
 // ... 
 var markup = $this.html(); 
 // call our format function 
 markup = $.fn.hilight.format(markup); 
 $this.html(markup); 
 }); 
}; 
// define our format function 
$.fn.hilight.format = function(txt) { 
 return '<strong>' + txt + '</strong>'; 
};

我们很容易的支持options对象中的其他的属性通过允许一个回调函数来覆盖默认的设置。这是另外一个出色的方法来修改你的插件。这里展示的技巧是进一步有效的暴露format函数进而让他能被重新定义。通过这技巧，是其他人能够传递他们自己设置来覆盖你的插件，换句话说，这样其他人也能够为你的插件写插件。

 考虑到这个篇文章中我们建立的无用的插件，你也许想知道究竟什么时候这些会有用。一个真实的例子是Cycle插件.这个Cycle插件是一个滑动显示插件，他能支持许多内部变换作用到滚动，滑动，渐变消失等。但是实际上，没有办法定义也许会应用到滑动变化上每种类型的效果。那是这种扩展性有用的地方。 Cycle插件对使用者暴露"transitions"对象，使他们添加自己变换定义。插件中定义就像这样：

$.fn.cycle.transitions = { 
// ... 
};

这个技巧使其他人能定义和传递变换设置到Cycle插件。

2.5 保持私有函数的私有性

这种技巧暴露你插件一部分来被覆盖是非常强大的。但是你需要仔细思考你实现中暴露的部分。一但被暴露，你需要在头脑中保持任何对于参数或者语义的改动也许会破坏向后的兼容性。一个通理是，如果你不能肯定是否暴露特定的函数，那么你也许不需要那样做。

那么我们怎么定义更多的函数而不搅乱命名空间也不暴露实现呢？这就是闭包的功能。为了演示，我们将会添加另外一个“debug”函数到我们的插件中。这个 debug函数将为输出被选中的元素格式到firebug控制台。为了创建一个闭包，我们将包装整个插件定义在一个函数中。

(function($) { 
 // plugin definition 
 $.fn.hilight = function(options) { 
 debug(this); 
 // ... 
 }; 
 // private function for debugging 
 function debug($obj) { 
 if (window.console && window.console.log) {
 window.console.log('hilight selection count: ' + $obj.size()); 
 } 
 }; 
 // ... 
})(jQuery);

我们的"debug"方法不能从外部闭包进入,因此对于我们的实现是私有的。

2.6 支持Metadata插件

在你正在写的插件的基础上，添加对Metadata插件的支持能使他更强大。个人来说，我喜欢这个Metadata插件，因为它让你使用不多的"markup”覆盖插件的选项（这非常有用当创建例子时）。而且支持它非常简单。更新：注释中有一点优化建议。

$.fn.hilight = function(options) { 
 // ... 
 // build main options before element iteration 
 var opts = $.extend({}, $.fn.hilight.defaults, options);
 return this.each(function() {
 var $this = $(this); 
 // build element specific options 
 var o = $.meta ? $.extend({}, opts, $this.data()) : opts; 
 //... 
 });
}

这些变动行做了一些事情：它是测试Metadata插件是否被安装如果它被安装了，它能扩展我们的options对象通过抽取元数据这行作为最后一个参数添加到JQuery.extend，那么它将会覆盖任何其它选项设置。现在我们能从"markup”处驱动行为,如果我们选择了“markup”：

调用的时候可以这样写： jQuery.foo(); 或 $.foo();

<!-- markup --> 
<div class="hilight { background: 'red', foreground: 'white' }"> 
 Have a nice day! 
</div> 
<div class="hilight { foreground: 'orange' }"> 
 Have a nice day! 
</div> 
<div class="hilight { background: 'green' }"> 
 Have a nice day! 
</div>

现在我们能高亮哪些div仅使用一行脚本：

$('.hilight').hilight();

2.7 整合

下面使我们的例子完成后的代码：

// 创建一个闭包 
(function($) { 
 // 插件的定义 
 $.fn.hilight = function(options) { 
 debug(this); 
 // build main options before element iteration 
 var opts = $.extend({}, $.fn.hilight.defaults, options); 
 // iterate and reformat each matched element 
 return this.each(function() { 
 $this = $(this); 
 // build element specific options 
 var o = $.meta ? $.extend({}, opts, $this.data()) : opts; 
 // update element styles 
 $this.css({ 
 backgroundColor: o.background, 
 color: o.foreground 
 }); 
 var markup = $this.html(); 
 // call our format function 
 markup = $.fn.hilight.format(markup); 
 $this.html(markup); 
 }); 
 }; 
 // 私有函数：debugging 
 function debug($obj) { 
 if (window.console && window.console.log) 
 window.console.log('hilight selection count: ' + $obj.size()); 
 }; 
 // 定义暴露format函数 
 $.fn.hilight.format = function(txt) { 
 return '<strong>' + txt + '</strong>'; 
 }; 
 // 插件的defaults 
 $.fn.hilight.defaults = { 
 foreground: 'red', 
 background: 'yellow' 
 }; 
// 闭包结束 
})(jQuery);

这段设计已经让我创建了强大符合规范的插件。我希望它能让你也能做到。

3、总结

jQuery为开发插件提拱了两个方法，分别是：

jQuery.fn.extend(object); 给jQuery对象添加方法。

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

3.1 jQuery.fn.extend(object);

fn 是什么东西呢。查看jQuery代码，就不难发现。

jQuery.fn = jQuery.prototype = { 
 init: function( selector, context ) {//....　 
 //...... 
};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。jQuery便是一个封装得非常好的类，比如我们用语句　$("#btn1") 会生成一个 jQuery类的实例。

jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

$.fn.extend({ 
 alertWhileClick:function(){ 
 $(this).click(function(){ 
 alert($(this).val()); 
 }); 
 } 
}); 
$("#input1").alertWhileClick(); //页面上为：<input id="input1" type="text"/>

$("#input1")　为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

3.2 jQuery.extend(object);

为jQuery类添加添加类方法，可以理解为添加静态方法。如：

$.extend({ 
 add:function(a,b){return a+b;} 
});

便为　jQuery　添加一个为 add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了，$.add(3,4); //return 7

其他文章：http://www.oschina.net/news/41776/jquery-10-tips

jQuery validate 实例 remote操作自定义错误提示

Fri, 20 Jun 2025 11:07:37 +0000

jquery validate 实例 remote操作自定义错误提示

关于这个网站上好多的示例，但是为看到过有关于remote的操作，还有关于自定义错误提示的示例，自己google一下，自己又测试了一下来个PHP版本的，此项目方案更适合于QEEPHP框架，或者其他的框架。

html代码

<form id='complete-form' action="" method="post">
 	<li class="input">
 <span class="title">邮箱</span>
 <input id='email' name='email' type="email" />
 <span class="back"></span>
 </li>
 <li class="input">
 <span class="title">登录密码</span>
 <input id='password' name='password' type="password" />
 <span class="back"></span></li>
 <li class="input">
 <span class="title">确认密码</span>
 <input id='repassword' name='repassword' type="password" />
 <span class="back"></span>
 </li>
 <li class="submit">
 <span>完成注册</span>
 </li>
 </form>

js代码

<script language="javascript">
 $(function(){
 $('form#complete-form').validate({
 rules: {
 email:{
 required:true,
 email:true,
 remote:{
 url:'/default/isemail/type/validate',
 type:'post'
 },
 },
 password:{
 required:true,
 minlength:6,
 },
 repassword:{
 required:true,
 equalTo:password,
 minlength:6,
 }
 },
 messages:{
 email:{
 required:'邮箱地址不能为空',
 email:'邮箱格式错误',
 remote:'该邮箱已经被注册 <a href="/default/bind">绑定账号</a>'
 },
 password:{
 required:'登录密码不能为空',
 minlength:'密码长度不能少于6个字符'
 },
 repassword:{
 required:'确认密码不能为空',
 minlength:'密码长度不能少于6个字符',
 equalTo:'确认密码与输入的密码不一致'
 }
 },
 errorElement:'em',
 errorPlacement: function(error, element) {
 error.appendTo( element.parent().find('.back')); 
 
 },
 });
 
 $("#complete .submit span").click(function(){
 $("#complete form").submit();	
 })
 });
</script>

php后台操作代码：

/**
 * Email是否存在
 */
public function actionIsEmail(){
 $email = $this->_context->post('email','');
 $ajaxType = $this->_context->get('type','');

 $email = $this->filter($email);
 $obj = User_Star::find('email=?',$email)->query();
 
 if(empty($obj->id)){
 if($ajaxType != 'validate'){
 $message['error'] = 1;//可以注册
 $message['email'] = false;
 echo json_encode($message);
 exit;
 }else{
 echo 'true';
 exit;
 }
 }else{
 if($ajaxType != 'validate'){
 $message['error'] = 0;//不可以注册
 $message['email'] = true;
 echo json_encode($message);
 exit;
 }else{
 echo 'false';
 exit;
 }
 }
}

这里提示几点，

1，记载jquery框架库

2，加载jauery.validate插件

3，php后台输出操作，一定是字符串型的

jQuery获取和设置Select选项方法

Tue, 17 Jun 2025 15:51:13 +0000

获取Select ：
获取select 选中的 text:

$("#select_id”).find("option:selected”).text();

获取select选中的 value:

$("#select_id option:selected”).val();
($("#select_id”).val();这个方法是错误的)

获取select选中的索引:

$("#select_id ").get(0).selectedIndex;

设置select:
设置select 选中的索引：

$("#select_id ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value：

$("#select_id ").attr("value”,”Normal");
$("#select_id ").val("Normal”);
$("#select_id ").get(0).value = value;

设置select 选中的text:

var count=$("#select_id ").find("option”).length;
for(var i=0;i<count;i++)
{ 
	if($("#select_id ").get(0).options[i].text == text)
	{
		$("#select_id ").get(0).options[i].selected = true;
		break;
	}
}

select根据value默认选中

$("#SelectID option[value='selectValue']").attr("selected”,true)

清空 Select:

$("#select_id ").empty();
$("#veg1″).find("option”).clone().appendTo("#veg2″); 添加另一个select option
$("#veg2″).get(0).selectedIndex=2; 设置选中项

提示小插件Poshy Tip jQuery Plugin

Tue, 17 Jun 2025 15:51:08 +0000

关于Poshy Tip是个很简单的提示插件。我觉的还不错，下面做了一个简答的小例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>我的小提示</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />


	<!-- Tooltip classes -->
	<link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
	<link rel="stylesheet" href="../src/tip-violet/tip-violet.css" type="text/css" />
	<link rel="stylesheet" href="../src/tip-darkgray/tip-darkgray.css" type="text/css" />
	<link rel="stylesheet" href="../src/tip-skyblue/tip-skyblue.css" type="text/css" />
	<link rel="stylesheet" href="../src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
	<link rel="stylesheet" href="../src/tip-twitter/tip-twitter.css" type="text/css" />
	<link rel="stylesheet" href="../src/tip-green/tip-green.css" type="text/css" />

	<!-- jQuery and the Poshy Tip plugin files -->
	<script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../src/jquery.poshytip.js"></script>

	<!-- Setup examples on this page -->
	<script type="text/javascript">
		//<![CDATA[
		$(function(){

			$('#demo-basic').poshytip();
		});
		//]]>
	</script>
</head>

<body>

	<div id="content">
		<p><a id="demo-basic" title="小提示出现了，你好，我是小提示" href="#">快出来小提示</a></p>
	</div>
</body>
</html>

关键几个文件要引入

样式文件

<link rel="stylesheet" href="../src/tip-yellow/tip-yellow.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-violet/tip-violet.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-darkgray/tip-darkgray.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-skyblue/tip-skyblue.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-twitter/tip-twitter.css" type="text/css" />
<link rel="stylesheet" href="../src/tip-green/tip-green.css" type="text/css" />

这里面的样式可以跟你自己的需要进行选择定制

脚本文件

<script type="text/javascript" src="includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../src/jquery.poshytip.js"></script>

这个大家都知道的

具体的演示文档，可以参考这个地址：http://vadikom.com/demos/poshytip/#download

读读英文文档还不错

JQuery on Dapeng Zhang

jQuery 图片加载成功调用指定执行方法

jQuery 实现 保持滚动条一直在底部

jQuery 消息提醒插件 toastmessage

结合jQuery.lazyload和masonry实现瀑布流

jQuery日期插件，扩展时间

jQuery.hash解析url hash，监听hashchange

Django 整合 jQuery Waterfall 插件 实现瀑布流

jQuery Waterfall插件的使用

jQuery插件开发全解析

jQuery validate 实例 remote操作 自定义错误提示

jQuery获取和设置Select选项方法

提示小插件Poshy Tip jQuery Plugin

jQuery 实现保持滚动条一直在底部

Django 整合 jQuery Waterfall 插件实现瀑布流

jQuery validate 实例 remote操作自定义错误提示