jQuery – Plupload 文件批量上传
线上Demo地址：http://www.plupload.com/example_queuewidget.php
可以批量上传图片和zip文件。我看我是越来越懒了，啥都不想介绍了，自己看吧孩子们。
The developers of TinyMCE brings you Plupload, a highly usable upload handler for your Content Management Systems or similar.
Plupload is currently separated into a Core API and a jQuery upload queue widget this enables you to either use it out of the box or write your own custom implementation.
Features：
1. Drag/drop support of files is currently only available in Firefox 3.5+. WebKit/Opera doesn't support this feature yet.
2. Image resizing is only possible on Firefox 3.5+ and only at a fixed quality. WebKit/Opera doesn't support direct data access to the selected files.
3. File type filtering is currently not supported by any browser. But we fill the HTML 5 accept attribute so once the support is there it will work.
jQuery Plugins-SimpleModal弹窗插件
官方地址：http://www.ericmmartin.com/projects/simplemodal-demos/. 内容简单明了，如下哈：
The following demos are intended to illustrate the flexibility of SimpleModal.
Note: The Contact Form demo needs to be run from a web server and requires PHP.
Basic Modal Dialog
A basic modal dialog with minimal styling and without any additional settings. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on external CSS for the look and feel.
Contact Form
A contact form built on SimpleModal. Demonstrates the use of the onOpen, onShow and onClose callbacks, as well as the use of Ajax with SimpleModal.
OSX Style Dialog
A modal dialog configured to behave like an OSX dialog. Demonstrates the use of the onOpen and onClose callbacks as well as a handful of options, and custom styling.
Inspired by ModalBox, an OSX style dialog build with prototype.
Hello!
SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.
As you can see by this example, SimpleModal can be easily configured to behave like an OSX dialog. With a handful options, 2 custom callbacks and some styling, you have a visually appealing dialog that is ready to use!
(or press ESC or click the overlay)
jQuery Plugins-Lazy Load
Learned From http://www.webappers.com/2009/10/01/delays-loading-of-images-with-lazy-loader-jquery-plugin/
Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.
Using Lazy loader on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.
There are options for control maniacs who need to fine-tune. You can set threshold on how close to the edge image should come before it is loaded. You can also set placeholder image and custom event to trigger loading. You can check out the demo with FadeIn Effect enabled.
Requirements: jQuery Framework
Demo: http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
License: MIT License
jQuery Plugins-jLook & niceForm
介绍两款Form美化插件,一个是jLook,一个是niceForm,具体两个都很简单,下载插件,然后配置好路径就可以了.
有兴趣的可以看下来自cssrain.cn的jLook demo,简单的几行代码就可以搞定:
<script type="text/javascript">
$(document).ready(function(){
$("#testForm").jLook();
});
</script>
jLook下载地址.
接着是niceForm的demo.
以及下载地址.
jQuery-Drop Down Menu Effect With jQuery & CSS
Learned from 《Sexy Drop Down Menu w/ jQuery & CSS》，and made a little modification，remove the span tag and the image of dropdown icon。
Demo:DropDownMenu.html
下边开始HTML部分：
<div class="container">
<div id="header">
<ul class="topnav">
<li><a href="#">Home</a></li>
<li>
<a href="#">Tutorials</a>
<ul style="display: none;" class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li>
<a href="#">Resources</a>
<ul style="display: none;" class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
jQuery-Timepickr + Slider + Keypad
1.jQuery.timepickr.js：
Introduction
jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible.
时间选择器，恩。，。。感觉实际应用不大，而且这个也太龟毛了吧……
jQuery-多屏幕切换模拟
* 豆腐 | 豆奶 | 豆浆
* 邪恶的天蝎座 | 萝莉控 | 制服癖
* WOW | JX | SLG游戏大好
* 冬眠 | 冬眠 | 冬眠
* Guestbook 地址:
- http://nwhy.org/nwhy/guestbook/
* 点击"我要留言"留言
* 选择"随机"或者"方阵"方式浏览留言
* Wish Sky 地址:
- http://nwhy.org/nwhy/wish/
* 点击"Mak A Wish"放飞一个希望
* 在输入表单中点击头像可以更换头像
* Something you want to show here.
模拟的一个多屏幕切换效果，放大到全屏之后，在把每个子栏目美化一下，还是挺有趣的一个网站。
创意是来自学妹前几天在看的一个4屏切换效果。
4格只是最简单的做法，可以扩展到6格，9格，N格。。
最近有点喜欢上jQuery了，哈哈。
<script>
function divMove(num){
switch(num){
case "1":
$(".blocks").animate({left: '0',top:'0' }, 800, 'easeOutCubic');
break;
case "2":
$(".blocks").animate({left: '-500',top:'0' }, 500, 'easeOutCubic');
break;
case "3":
$(".blocks").animate({left: '0',top:'-300' }, 600, 'easeOutCubic');
break;
case "4":
$(".blocks").animate({left: '-500',top:'-300' }, 700, 'easeOutCubic');
break;
}
}
</script>
jQuery-each(fn)的使用
最近在忙这更Lazystudio.cn/guestbook的进度，由于木有人提供美工意见，so，现在全部的美工状况…就别提了～
本来想在页面输出div之后根据屏幕宽度来让div实现同DFdou’s留言板一样的效果随机分布，如果能加animate效果那是最好了。
但是昨天因为不知道jQuery的each(fn)，所以错误的尝试了js获取屏幕宽度后传值给php，然后由php输出div的时候设置element的left跟top这种不讨好的做法。
当时的做法是，在加载页面时先通过js获取屏幕的宽度跟高度，然后重新location给页面传参，再通过php获取get的值来设置div的element属性。
唉，个人觉得这个方法太笨，太别扭，太不Web2.0 
所以决定做一个修改。
从学妹那得知有each(fn)这个东西的存在，参考了下，可以完美使用，嘿嘿，下边是js代码部分：
哦，对了，先放Demo地址http://lazystudio.cn/guestbook/，另一个demo地址http://nwhy.org/jquery-animation.html
Demo中每个div的class为e_post～
PS：请确保您的页面加载了jQuery+easing Plungin。。
$(".e_post").each(function(i){$(this).animate({left:Math.random()*(screen.width-300),top:Math.random()*(screen.height-500)}, Math.random()*2000, 'easeInQuint')});
each这个用起来比较简单，官方文档的说明是：以每一个匹配的元素作为上下文来执行一个函数。这意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的元素（每次都是一个不同的匹配元素）。而且，在每次执行函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数。
我们可以假设，js在执行的时候会先读取全部$(".e_post")，然后压入一个数组，接着，就开始fn的循环，从第0个$(".e_post")开始，到第最后一个$(".e_post")结束。
上例中的处理是，对每个$(".e_post")进行left和top的animate设置，如left的值是设置为0到当前屏幕分辨率的值-300之间的一个随机数。
由于each(fn)是个循环体，所以每次的Math.random()值会重新计算，so，每个$(".e_post")的位置也会因此不同。
PS：别鄙视我，我就是喜欢万恶的Math.random()，多好啊，乱糟糟的排列。
关于div的拖动，请使用easydrag Plungin。。这个插件没有显示可拖动范围为屏幕宽度，唉，没有Flash方便嘿嘿，不过看了下QQ爱墙也是木有限制，就放弃修改这个了。
等咱有这能力了再说，哈哈。下边是加载easydrag Plungin后让class为e_post的div可拖动的代码：
$(".e_post").easydrag();
恩，看完有兴趣的可以在Lazystudio的留言板留个言哦～
PS：js使用起来比Flash不习惯些，有些地方确实无法做到Flash的效果，但是资源占用率比Flash底很多，唉，DFdou’s留言板那里的动画，加多点效果就会卡死一部分浏览器……
IE6的absolute Bug
今天跟学妹的任务是解决学妹上星期做的仿Ifekt.net的WP皮肤，
哇塞，我发现姐姐是越来越强大了 
差不多在中午的时候解决了IE7的兼容问题，唉，叹一句，JS的调试也太复杂了吧，IE提示的错误地点，模糊的太厉害，只能Alert么？
兼容玩IE7，发现IE6下边不行，看了下Ifekt.net，发现它那边的居然也不支持IE6，汗。
怎么办。就是不支持top的animate()，。。
16：30的时候学妹告诉我好了，讶异。
问了下和解，原来是IE6下的absolute Bug，哇，这样也能找到BUG所在。。。。
这个BUG是这样的，jQuery在IE6下无法读取CSS中的absolute属性，只能在需要效果的地方重新写入absolute。。
唉，IE6，can we say no to you？……