2、jCal
3?a >jQuery Week Calendar
4?a >jMonthCalendar
5?a >Date Picker
]]>
有时候，囄的效果胜q千a万字Q这是毫无疑问的Q如CNNQESPNQ它们都是用了大规模的照片qȝ片放|在头版。这是一个非常有效的吸引观众 注意的方法?/p>
所以，从这里。你可以感受?4个以jQuery为基的图片展C所带来的感受?/p>
1.jQuery Cycle
jQuery Cycle
2.Pikachoose
Website | Demo
Pikachoose
3.s3Slider
Website | Demo
s3Slider
4.Galleria
Website | Demo
Galleria
5.slideViewer
Website | Demo
slideViewer
6.Image Flow
Image Flow
7.jQuery Gallery Scroller
jQuery Gallery Scroller
8.Spacegallery
Spacegallery
9.Easy Slider
Easy Slider
10.jFlow
jFlow
11.Supersized
Supersized
12.Simple jQuery Slideshow
Simple jQuery Slideshow
13.CrossSlide
CrossSlide
14.Innerfade
Innerfade
l束
希望大家会喜Ƣ这个集? 
]]>
15个优U的jQuery囄qȝ?d效果Q基本都已经包含了原插g的发布地址、用方法和源代码下载?/p>
1QGallerific
Galleriffic 是? Mike Alsup ?jQuery Cycle plugin 创徏的图片展C效果，包括~略图、图片标题和描述{详l功能，是一个非怸错的高质量画廊相册展C工兗?/p>
2QZoomImage
zoomimage Q以一U独具魅力的方式展示囄效果。羃略图链接在本弹出大图，q且可以可以随意拖拽该?zhn)图片?/p>
3QEasySlider
Easy Slider 可以实现囄或其他Q意内容，在水qx垂直方向上的滑动效果Q你q可以通过 CSS 自定义设|样式?/p>
4QThe Slider from Barack Obama’s website
一个源自美国ȝ Barack Obama |站的垂下滑动菜单控制的囄qȝ效果?/p>
5QCodaSlider
CodaSliderQ? 又一个不错的滑动控制效果?/p>
6QjQuery Slider II
jQuery Slider II 的布局非常W合操作习惯Q在底部列出带滚动条的羃略图控制列表Q然后在上面昄对应囄的大图浏览，非常适合做高U相册?/p>
7QBeautiful Slider
Beautiful SliderQ? 光看q个效果图你q道这个插件有多棒了吧Q是的，q个插g实现的效果已l不逊色于Flash完成的效果，整体表现畅Q文字显C效果更是创意独牏V?/p>
Q，LoopedSlider
loopedSlider是又一个Q意内Ҏ(gu)? 切换的灯片插gQ用操作简单?/p>
9QSpaceGallery
SpaceGallery是一个全新的jQuery插gQ点d 前图片，会自动放大消失，同时后面的图片向前展C，有一U时光机器的感觉?/p>
10QjQuery Popeye
11QNoobslide
12QAccessible News Slider
13QSmoothGallery
SmoothGallery是一个最好的 Javascript qȝ片效果之一Q可以实现各U不同的qȝ片{换效果?/p>
14QjQuery Multimedia Portfolio
jQuery Multimedia Portfolio是一个基于jQuery 的滑动效果插?除了可以展示囄之外Q还可以加入各种不同cd的多媒体文g?/p>
15Qs3Slider
s3Slider是一个非常简单实用的畅qȝ片效果，q个
插g被应用在无数的WordPress专业主题模板中?/p>
facebox是一个jquery为基的lightboxQ可昄囑փQ?divs Q或者远E页面?它的使用单，Ҏ(gu)。下载j(lu)sQ请查看例子Q然后开始n受faceboxl我们带来的乐趣?
首先我们用Facebox观看囄 Q?/font>
<a href="cssrain.jpg" rel="facebox">text</a>
仅仅q样O(jin)K?br />
然后我们在来?用Facebox观看div Q?/font>
<a href="#info" rel="facebox">text</a>
ok,p样就能简单的实现facebox了?br />
当然在ajax横行的时代，ajaxq程加蝲面也是必不可少的?br /> 我们用Facebox加蝲q程的页面内容：
<a href="cssrain.html" rel="facebox">text</a>
OKQ这样就能远E加?cssrain.html 的内容，以facebox的方式显CZ?br />
q是FamSpam 上的截图
用法Q?/font>
facebox应该导入
<script src="jquery.js" type="text/javascript"></script>
<link href="/facebox/facebox.css" _fcksavedurl=""/facebox/facebox.css"" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>
jQuery(document).ready(function($) {
//链接的rel属性是否具有facebox
$('a[rel*=facebox]').facebox()
})
演示
演示
下蝲
你需要在js和css里面 加上 loading囄Q和四个角的囄和边框图片?q就是你要做的?
Download Facebox v1.0
深入研究
http://famspam.com/facebox/
感谢 & 联系
感谢Facebook的理念和风格。感谢Mindy Tchieu她在工作中对我的帮助?
facebox作者Email: chris@ozmm.org
译作者Email: cssrain@gmail.com Blog:http://www.cssrain.cn
摘自【http://bbs.blueidea.com/thread-2822886-1-1.html?
]]>
解决:
jquery和prototype冲突解决, |上传的一文?我这里测试结果是错误? http://ajaxbbs.net/blog/post/71/
另一U方式是:
<script type=”text/javascript”>
jQuery.noConflict();
</script>
参? http://www.d5s.cn/archives/6, 但我q里试也有问题!
本h试通过的方?
1、将jquery.js攑ֈprototype.js前面Q这个是必须?Q?br /> 2、在jquery.js后面?变量重命名?br /> Ҏ(gu)如下Q?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var jQuery=$;
</script>
<script type="text/javascript" type="text/javascript" src="window.js"></script>
<!--上面q个window.js调用了jquery框架的方?->
<script type="text/javascript" type="text/javascript" src="prototype.js"></script>
3、将原来使用?Ҏ(gu)名一律替换ؓjQuery名，?("obj")替换为jQuery("obj")?
例如下面的一D代? 混合?jQuery和基于Prototype?EasyValidation:
<!-- jquery, 注意加蝲序 -->
<script src="js/jquery-1.2.6.pack.js"></script>
<script type=”text/javascript”>
var jQuery=$;
</script>
<!-- 表单验证 -->
<script src="easy_validation/lib/prototype.js" type="text/javascript"></script>
<script src="easy_validation/lib/effects.js" type="text/javascript"></script>
<script src="easy_validation/src/validation_cn.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="easy_validation/styles/style_min.css" />
<div id="contents"></div>
<script>
jQuery(document).ready(function(){
//jQuery("#contents").load("test.jsp");
jQuery("#contents").load("test.jsp?username=BeanSoft")
});
</script>
<!-- 为form增加required-validate class,标识需要验证form -->
<form id='helloworld' action="#" class='required-validate'>
<input name="user.name" class="required min-length-6 max-length-20 validate-alphanum" value="beansoft">
*密码:
<input name="user.password" type="password" class="required min-length-6 max-length-20" value="123456" >
*密码(重复):
<input name="password1" type="password" class="required equals-user.password" value="123456" >
<input type='submit' value='Submit'/>
<input type='reset' value='Reset'/>
</form>
]]>
]]>
它是著名的JavaScript包jQuery的一个插Ӟ其实它还有其它的一些插件应该都爽，有待慢慢来学?
官方地址Qhttp://bassistance.de/jquery-plugins/jquery-plugin-validation/
jQuery用户手册Qhttp://jquery.org.cn/visual/cn/index.xml
开发用v来非常简单明了，
我的代码Q?/p>
1. $(document).ready(function(){
2.
3. /* 讄默认属?nbsp;*/
4. $.validator.setDefaults({
5. submitHandler: function(form) { form.submit(); }
6. });
7. // 中文字两个字?nbsp;
8. jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
9. var length = value.length;
10. for(var i = 0; i < value.length; i++){
11. if(value.charCodeAt(i) > 127){
12. length++;
13. }
14. }
15. return this.optional(element) || ( length >= param[0] && length <= param[1] );
16. }, "L(fng)保输入的值在3-15个字节之?一个中文字?个字?");
17.
18. /* q加自定义验证方?nbsp;*/
19. // w䆾证号码验?nbsp;
20. jQuery.validator.addMethod("isIdCardNo", function(value, element) {
21. return this.optional(element) || isIdCardNo(value);
22. }, "h输入?zhn)的n份证L(fng)");
23.
24. // 字符验证
25. jQuery.validator.addMethod("userName", function(value, element) {
26. return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
27. }, "用户名只能包括中文字、英文字母、数字和下划U?/span>");
28.
29. // 手机L(fng)验证
30. jQuery.validator.addMethod("isMobile", function(value, element) {
31. var length = value.length;
32. return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));
33. }, "h填写?zhn)的手机号?/span>");
34.
35. // ?sh)话L(fng)验证
36. jQuery.validator.addMethod("isPhone", function(value, element) {
37. var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
38. return this.optional(element) || (tel.test(value));
39. }, "h填写?zhn)的?sh)话号?/span>");
40.
41. // 邮政~码验证
42. jQuery.validator.addMethod("isZipCode", function(value, element) {
43. var tel = /^[0-9]{6}$/;
44. return this.optional(element) || (tel.test(value));
45. }, "h填写?zhn)的邮政编?/span>");
46. $(regFrom).validate({
47. /* 讄验证规则 */
48. rules: {
49. userName: {
50. required: true,
51. userName: true,
52. byteRangeLength: [3,15]
53. },
54. password: {
55. required: true,
56. minLength: 5
57. },
58. repassword: {
59. required: true,
60. minLength: 5,
61. equalTo: "#password"
62. },
63. question: {
64. required: true
65. },
66. answer: {
67. required: true
68. },
69. realName: {
70. required: true
71. },
72. cardNumber: {
73. isIdCardNo: true
74. },
75. mobilePhone: {
76. isMobile: true
77. },
78. phone: {
79. isPhone: true
80. },
81. email: {
82. required: true,
83. email: true
84. },
85. zipCode: {
86. isZipCode:true
87. }
88. },
89. /* 讄错误信息 */
90. messages: {
91. userName: {
92. required: "请填写用户名",
93. byteRangeLength: "用户名必d3-15个字W之?一个中文字?个字W?"
94. },
95. password: {
96. required: "请填写密?/span>",
97. minlength: jQuery.format("输入{0}.")
98. },
99. repassword: {
100. required: "请填写确认密?/span>",
101. equalTo: "两次密码输入不相?/span>"
102. },
103. question: {
104. required: "请填写?zhn)的密码提C问?/span>"
105. },
106. answer: {
107. required: "请填写?zhn)的密码提C答?/span>"
108. },
109. realName: {
110. required: "请填写?zhn)的真实姓?/span>"
111. },
112. email: {
113. required: "误入一个Email地址",
114. email: "误入一个有效的Email地址"
115. }
116. },
117. /* 错误信息的显CZ|?nbsp;*/
118. errorPlacement: function(error, element) {
119. error.appendTo( element.parent() );
120. },
121. /* 验证通过时的处理 */
122. success: function(label) {
123. // set as text for IE
124. label.html(" ").addClass("checked");
125. },
126. /* 获得焦点时不验证 */
127. focusInvalid: false,
128. onkeyup: false
129. });
130.
131. // 输入框获得焦Ҏ(gu)Q样式设|?nbsp;
132. $('input').focus(function(){
133. if($(this).is(":text") || $(this).is(":password"))
134. $(this).addClass('focus');
135. if ($(this).hasClass('have_tooltip')) {
136. $(this).parent().parent().removeClass('field_normal').addClass('field_focus');
137. }
138. });
139.
140. // 输入框失ȝҎ(gu)Q样式设|?nbsp;
141. $('input').blur(function() {
142. $(this).removeClass('focus');
143. if ($(this).hasClass('have_tooltip')) {
144. $(this).parent().parent().removeClass('field_focus').addClass('field_normal');
145. }
146. });
147. });
2.
3. /* 讄默认属?nbsp;*/
4. $.validator.setDefaults({
5. submitHandler: function(form) { form.submit(); }
6. });
7. // 中文字两个字?nbsp;
8. jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
9. var length = value.length;
10. for(var i = 0; i < value.length; i++){
11. if(value.charCodeAt(i) > 127){
12. length++;
13. }
14. }
15. return this.optional(element) || ( length >= param[0] && length <= param[1] );
16. }, "L(fng)保输入的值在3-15个字节之?一个中文字?个字?");
17.
18. /* q加自定义验证方?nbsp;*/
19. // w䆾证号码验?nbsp;
20. jQuery.validator.addMethod("isIdCardNo", function(value, element) {
21. return this.optional(element) || isIdCardNo(value);
22. }, "h输入?zhn)的n份证L(fng)");
23.
24. // 字符验证
25. jQuery.validator.addMethod("userName", function(value, element) {
26. return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
27. }, "用户名只能包括中文字、英文字母、数字和下划U?/span>");
28.
29. // 手机L(fng)验证
30. jQuery.validator.addMethod("isMobile", function(value, element) {
31. var length = value.length;
32. return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));
33. }, "h填写?zhn)的手机号?/span>");
34.
35. // ?sh)话L(fng)验证
36. jQuery.validator.addMethod("isPhone", function(value, element) {
37. var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
38. return this.optional(element) || (tel.test(value));
39. }, "h填写?zhn)的?sh)话号?/span>");
40.
41. // 邮政~码验证
42. jQuery.validator.addMethod("isZipCode", function(value, element) {
43. var tel = /^[0-9]{6}$/;
44. return this.optional(element) || (tel.test(value));
45. }, "h填写?zhn)的邮政编?/span>");
46. $(regFrom).validate({
47. /* 讄验证规则 */
48. rules: {
49. userName: {
50. required: true,
51. userName: true,
52. byteRangeLength: [3,15]
53. },
54. password: {
55. required: true,
56. minLength: 5
57. },
58. repassword: {
59. required: true,
60. minLength: 5,
61. equalTo: "#password"
62. },
63. question: {
64. required: true
65. },
66. answer: {
67. required: true
68. },
69. realName: {
70. required: true
71. },
72. cardNumber: {
73. isIdCardNo: true
74. },
75. mobilePhone: {
76. isMobile: true
77. },
78. phone: {
79. isPhone: true
80. },
81. email: {
82. required: true,
83. email: true
84. },
85. zipCode: {
86. isZipCode:true
87. }
88. },
89. /* 讄错误信息 */
90. messages: {
91. userName: {
92. required: "请填写用户名",
93. byteRangeLength: "用户名必d3-15个字W之?一个中文字?个字W?"
94. },
95. password: {
96. required: "请填写密?/span>",
97. minlength: jQuery.format("输入{0}.")
98. },
99. repassword: {
100. required: "请填写确认密?/span>",
101. equalTo: "两次密码输入不相?/span>"
102. },
103. question: {
104. required: "请填写?zhn)的密码提C问?/span>"
105. },
106. answer: {
107. required: "请填写?zhn)的密码提C答?/span>"
108. },
109. realName: {
110. required: "请填写?zhn)的真实姓?/span>"
111. },
112. email: {
113. required: "误入一个Email地址",
114. email: "误入一个有效的Email地址"
115. }
116. },
117. /* 错误信息的显CZ|?nbsp;*/
118. errorPlacement: function(error, element) {
119. error.appendTo( element.parent() );
120. },
121. /* 验证通过时的处理 */
122. success: function(label) {
123. // set as text for IE
124. label.html(" ").addClass("checked");
125. },
126. /* 获得焦点时不验证 */
127. focusInvalid: false,
128. onkeyup: false
129. });
130.
131. // 输入框获得焦Ҏ(gu)Q样式设|?nbsp;
132. $('input').focus(function(){
133. if($(this).is(":text") || $(this).is(":password"))
134. $(this).addClass('focus');
135. if ($(this).hasClass('have_tooltip')) {
136. $(this).parent().parent().removeClass('field_normal').addClass('field_focus');
137. }
138. });
139.
140. // 输入框失ȝҎ(gu)Q样式设|?nbsp;
141. $('input').blur(function() {
142. $(this).removeClass('focus');
143. if ($(this).hasClass('have_tooltip')) {
144. $(this).parent().parent().removeClass('field_focus').addClass('field_normal');
145. }
146. });
147. });
|上的资料有Q它跟prototype包会有冲H，我还没有同时使用q，q点不是很清楚，但我是发C个问题：
对于最??
长度的验证方法，作者可能考虑到大家的命名习惯不同Q同时做了minLength和minlengthQmaxLength和maxlengthQ方法，
应该哪一个都是可以的Q但对于用户Message来说Q只能够定义针对minlengthQmaxlengthQ，才能调用用户自定义的MessageQ?
否则只是调用包的默认MessageQ但具体原因q没有查清楚。同Ӟq个插g提供了本地化的消息，但对于我q里初学者来_怎么使用它还有待摸烦Q?
]]>
jQuery 是个宝库Q?jQuery 的插件体pL个取之不竭的宝库Q众多开发者在 jQuery 框架下，设计了数不清的插ӞjQuery 的特长是|页效果Q因此，它的插g库也多与 UI 有关。本文是 webdesignledger.com |站推选的2009q度最?jQuery 插g?/p>
拉洋?/h3>
在一个固定区域，循环昄几段内容Q这U方式很像旧时的拉洋片，2009q_q种 Web 效果大行光QjQuery 有大量与此有关的插gQ以下插件无疑是最佳的?/p>
AnythingSlider
?CSS-Tricks ?Chris Coyier 设计Q功能齐全，应用十分q泛?/p>
Easy Slider
q个 Content Slider 插g既包含传l?#8220;前后”D模式Q又包含늠式导航?/p>
Coda-Slider 2.0
Coda-Slider 2.0 是对 Panic Coda |站上对应效果的模仿?/p>
囄?/h3>
那些需要借助 Flash 实现滑动与渐入渐出效果图片库的日子已l去q，借助 jQueryQ这U效果已l可以在本地实现Q以下是本年度备受欢q的几个 jQuery 囄库插件?/p>
Galleria
q是一个基?jQuery 的图片库Q可以逐个加蝲囄q显C羃略图?/p>
jQuery Panel Gallery
一个可以高度定义的囄库插Ӟ无需对单个图片进行Q何处理，q个插g会帮你完成一切?/p>
slideViewer
slideViewer 会检查你的图片列表中的编P动态创建各个图片的늠览D?/p>
Supersized
一个o人惊讶的囄循环展示插gQ包含各U变换效果和预加载选项Q会对图片自动改变尺总适应览器窗口?/p>
D
我们怿Q作为网站的DpȝQ应该越单，易用越好，然而，假如你确实希望实C些更炫的效果QjQuery 是最好的选项Q以下插件是09q最好的 jQuery D插g?/p>
jquery mb.menu
Horizontal Scroll Menu with jQuery
AutoSprites
表单和表?/h3>
?Web 设计中，表单和表格都是不是很讨h喜欢的东西，但你不得不面对，本年度出现几个不错的 jQuery 插g帮你完成q些d?/p>
Password Strength
q个插g帮你评估用户输入的密码是否够强壮?/p>
Ajax Fancy Capcha
思义Q一个支?Ajax 又很炫的 jQuery Captcha 插gQ它使用了很人性化的验证机制?/p>
Chromatable
q个插g可以帮助你在表格上实现滚动条?/p>
jqTransform
一个式hӞ帮助你对表单中的控gq行式样控制?/p>
Uploadify
实现多个文g同时上传?/p>
jExpand
一个很轻量?jQuery 插gQ你的表格可以扩展Q在一些商业应用中Q可以让表格更容易组l其中的内容?/p>
本文来源Q?a >http://webdesignledger.com/resources/the-best-jquery-plugins-of-2009
]]>
HTML Code
<input type="text"name="quantity"id="quantity"/><span id="errmsg"></span>
As you can see above, I’ve given the name and id of textbox to “quantity” in this example.This is the textbox which only accepts numbers (digits only). You can see “span” after textbox which is used to display the error message with fading effect using jQuery.
Javascript Code
First of all, we need to use jQuery library as we’re using the jquery’s function to accept only digits.
<script type="text/javascript"src="jquery.js"></script>
Now le’ts write the code in JavaScript using jQuery to accept only digits in textbox and displaying error with animation.
//when key is pressed in the textbox$("#quantity").keypress(function (e)
{
//if the letter is not digit then display error and don't type anything
if( e.which!=8&& e.which!=0&&(e.which<48|| e.which>57))
{
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
returnfalse;
}
});
When the key is pressed, we’re using the key’s ASCII value to check which button is pressed. In first expression, delete, tab or backspace button is is checked and “8″ is the ASCII values of the Back-space. Digits are checked in the second expression. “48″ is the ASCII values of “0″ and “57″ is the ASCII values of “9″. The the ASCII values of the other digits lies between “48″ to “57″. And, if the key pressed values doesn’t lies withing these range, then we are displaying the error message with jQuery’s fading effect.
And, the “return false” statement means that this functions returns false values which means not to type anything on the text box.
]]>
]]>