分类 JQUERY 下的文章

jquery.datapicker.js在jquery1.6.4+以上不能用的问题

jquery.datapicker已经不在更新了,发现在jQuery1.6.4+不能使用,

找到下面这句:this._dpId = $.event.guid++; 大概在219行,直接搜索$.event.guid就行。

改为如下就可以用了:this._dpId = typeof($.event.guid)!='undefined' ? $.event.guid++ : $.guid++;

简单点就是把$.event.guid改为$.guid

jQuery1.6.4以后就不能用$.event.guid了

ajax中使用HTTP Basic Authenticate

抓包可以发现其实就是多了个header,header串可以如下构造:

[code language="javascript"]
function make_base_auth(user, password) {
var tok = user + ':' + pass;
var hash = Base64.encode(tok);
return "Basic " + hash;
}
[/code]

Base64.encode自己网上找个base64编码的javascript版就可以了,这里不提供。
以下为用jQuery发送请求的代码:

[code language="javascript"]
var auth = make_basic_auth('me', 'mypassword'); //用户名和密码
var url = 'http://example.com';
$.ajax({
url : url,
method : 'GET',
beforeSend : function(req) {
req.setRequestHeader('Authorization', auth);
}
});
[/code]

关于jQuery的trigger('click')或click()无法触发链接的点击事件

自jQuery1.3.2以后,jQuery对象的事件就不触发dom自带的事件了,如以前的$('a').click()可以实现点击这个链接,但1.3.2和之后的版本都不支持了,有什么办法可以兼容IE、Firefox、Chrome的触发这个事件呢,下面的代码就可以实现了。

if(document.all)
	linkObj.click();
else
{
	var evt = document.createEvent("MouseEvents");
	evt.initEvent("click", true, true);
	linkObj.dispatchEvent(evt);
}

jquery插件实现图片延迟加载

前几天上QQ的在线视频网站,看到上面的影片列表页的图片有这样一种效果:当向下拉动滚动条时下面的图片才开始加载,就是说它不会一下子把所有的图片都加载出来,拉动滚动条后用户看到了才会显示,这是一个很不错的用户体验。减少了页面加载的时间了,也减轻了服务器的压力,看了一下javascript源码,里面写的了lazyload,我就百度了一下,找到了一个jquery的实现这种效果的插件:jquery.lazyload,一个很不错的插件。

比如你打开一个比较大或者长的网页,那么Lazy load能够实现先加载您所看到区域的图片,等你滚动到哪里,就加载那里的图片。

如果你是图片网站,而且一个页面要加载很多图片,这个插件是个很不错的选择。

如何使用,引用如下js:

[code lang="html"]
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
[/code]

在你的页面中加入如下的javascript:

[code lang="js"]
$("img").lazyload();
[/code]

这将会使所有的图片都延迟加载。插件还有几个配置项可供设置。

当然对于一些用户来说就上面的功能远远是不能达到要求的,下面我们看看是如何设置灵敏度的。我们可以设置阀值来控制 这个功能比较人性化吧。

$("img").lazyload({ threshold : 200 });

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

[code lang="js"]
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
[/code]

我们还可以通过定义effect 参数来定义一些图片显示效果

[code lang="js"]
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
[/code]

下载地址: source, minified or packed

用jQuery和jQuery UI做的自定义404页面

用jQuery和jQuery UI做的404错误页面效果,裂开和振动的效果,蛮逼真的,点击下面的图片查看效果:

HTML & CSS

首先建一个简单的html页面,当然你自己运用这个404页面的时候可以加一些自己的东西,例如,网站首页链接、网站导航等,这里我们为了演示就简单些了:

[code lang="html"]
<html>
<head>
<title>404 - File Not Found - Reynoldsftw.com</title>
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script src="js/jquery-background.js"></script>
<script src="js/controller.js"></script>
<LINK href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="error_code">404</div>
<div id="error_status">File Not Found</div>
<div id="error_message">We're sorry you are seeing this page, please don't break the site again!</div>
<div id="crack"></div>
<div id="crack_overlay"></div>
</body>
</html>
[/code]

有几个DIV里面放文本内容,两个空的DIV将会放图片。一个是裂开的图片,一个是用于覆盖在第一个图片上面的PNG图片,下面是这两个图片DIV的CSS样式:

[css]
#crack{z-index:1;position:absolute;width:200px;height:600px;background-image:url(../images/crack.png);left:520px;top:0px;}
#crack_overlay{z-index:1000;position:absolute;width:200px;height:600px;background-image:url(../images/crack_over.png);background-position:0px-1100px;left:520px;top:0px;}</div>
[/css]

这里要注意:覆盖层的z-index要比其它的层大,这样才能遮住其它的层。

jQuery and jQuery UI

这里用到了jQuery UI里面的"shake","bounce"和"pulsate"效果。这里把效果的速度设置的比较小,为了看起来效果更好,这里用了随机的间隔时间。

[code lang="js"]
var coord = -1125;

$(document).ready(function() {
setTimeout("shake()", 2000);
});

function reveal()
{
setTimeout("moreCrack(coord)", 200);
}

function shake()
{
coordcoord = coord + 50;
if(coord < -125)
{
$("#crack").effect("shake", {distance: 1}, 40, reveal);
$("#error_code").effect("bounce", {distance: 5}, 50);
$("#error_status").effect("pulsate", {times: 2}, 50);
} else {
$("#crack_overlay").hide();
}
}

function randomXToY(minVal,maxVal,floatVal)
{
var randVal = minVal+(Math.random()*(maxVal-minVal));
return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
}

function moreCrack(coord)
{
$("#crack_overlay").animate({backgroundPosition:"(0 " + coord + ")"});
setTimeout("shake()", randomXToY(3500, 5000));
}
[/code]

下载源码包

非常酷的jquery弹框插件:FancyBox

一个外国人写的jquery弹框插件,看他网站的alexa排名真高,应该是非常有名的弹框插件了。插件网站地址:http://fancy.klade.lv/home google code上的源码地址:http://code.google.com/p/fancybox/downloads/detail?name=jquery.fancybox-1.2.1.zip

可以弹出如下内容的窗口(注意:所有的触发弹框的dom必须是A这个标签,而且a中必须带有href属性,感觉有点局限性)

1、单个图片,(href属性就是一个图片的地址了,而且地址必须满足这个正则:/\.(jpg|gif|png|bmp|jpeg)(.*)?$/i,也就是必须是图片扩展名结尾的地址,这个限制太死了,不知道作者是怎么想的);

2、一组图片,就是一个相册展示(和1差不多,但这组A中必须都有一个rel属性,而且所有的A的rel必须相同);

3、弹出一个Dom的内容(href属性这样写:href="#domid",domid就是要弹出的dom的id;

4、用iframe显示一个链接,(href属性中必须带有iframe字样,或者有个叫iframe的class,不然是弹不出这个链接的内容的);

5、用ajax请求一个连接的内容,然后显示,(href是一个可访问的链接即可,当然不要出现iframe字样,^_^);

就这几种弹出的方式了,差不多可以满足平常的需求。

附上使用插件的方法和初始化的配置项:

1. Include nessesary JS files
<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>

Optional, add if you wish to use fancy transitions as jQuery by default supports only "swing" and "linear"
<script type="text/javascript" src="path-to-file/jquery.easing.js"></script>

2. Add FancyBox CSS file
Don`t forget to change image paths if CSS file is not in the same directory as images used by FancyBox
<link rel="stylesheet" href="path-to-file/fancybox.css" type="text/css" media="screen">

3. Create a link element (<a href>)

For images
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

Inline content
<a id="inline" href="#data">This shows content of element who has id="data"</a>

Iframe
<a href="http://www.example?iframe">This goes to iframe</a> or <a class="iframe" href="http://www.example">This goes to iframe</a>

Ajax <a href="http://www.example/data.php">This takes content using ajax</a>

Optional: Use the

title

attribute if you want to show a caption
Note: You may want to set hideOnContentClick to false if you display iframed or inline content and it containts clickable elements (for example - play buttons for movies, links to other pages)

4. Fire plugin using jQuery selector
If you are not familiar with jQuery, please, read at least this tutorial for beginners
Sample examples: $(document).ready(function() { /* This is basic - uses default settings */ $("a#single_image").fancybox(); /* Using custom settings */ $("a#inline").fancybox({ 'hideOnContentClick': true }); $("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); });
Galleries are created from found anchors who have the same "rel" tags

Available options

You can pass them as shown above or modify them at the bottom of FancyBox JS file

padding Padding around content
imageScale If true, images are scaled to fit in viewport
zoomOpacity If true, changes content transparency when animating
zoomSpeedIn Speed in miliseconds of the zooming-in animation
(no animation if 0)
zoomSpeedOut Speed in miliseconds of the zooming-out animation
(no animation if 0)
zoomSpeedChange Speed in miliseconds of the animation when changing gallery items
(no animation if 0)
easingIn, easingOut, easingChange Easing used for animations
frameWidth Default width for iframed and inline content
frameHeight Default height for iframed and inline content
overlayShow If true, shows the overlay (false by default)
Overlay color is defined in CSS file
overlayOpacity Opacity of overlay (from 0 to 1)
hideOnContentClick Hides FancyBox when cliked on opened item
centerOnScroll If true, content is centered when user scrolls page
itemArray Optional, can set custom item array
callbackOnStart Optional, called on start
callbackOnShow Optional, called on displaying content
callbackOnClose Optional, called on close

转一个作者网站上的常见问答:

4. How can I close FancyBox from other element? ?

Just call

$.fn.fancybox.close()

on your onClick event