存档

文章标签 ‘JQuery’

超炫的button按钮样式-赶上flash喽

2010年8月24日

超炫的button按钮效果,先看看效果吧
第一个效果是没有jquery的效果,只用了css
第二个是用jquery让北京图片从上往下出来的效果,图片做了特殊效果,很炫吧,高尚flash效果了。
第三个是背景图片左右移动的效果。
第四第五个是图片上下移动渐显渐隐效果。 阅读全文…

前端脚本, 页面设计 , , ,

jquery validate自定义验证方法

2010年4月21日

/* 追加自定义验证方法 */
// 身份证号码验证
jQuery.validator.addMethod(“idcardno”, function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, ”请正确输入身份证号码”);

//字母数字
jQuery.validator.addMethod(“alnum”, function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]+$/.test(value);
}, ”只能包括英文字母和数字”);
阅读全文…

前端脚本 , ,

jquery.validate的使用方法详解

2010年4月10日

一、必须引用:

<script src=”http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js” type=”text/javascript”></script>
<script src=”http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js” type=”text/javascript”></script>
<script src=”http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/localization/messages_cn.js” type=”text/javascript”></script>

二、默认校验规则

(1)required:true               必输字段
(2)remote:”check.php”          使用ajax方法调用check.php验证输入值
(3)email:true                  必须输入正确格式的电子邮件
(4)url:true                    必须输入正确格式的网址
(5)date:true                   必须输入正确格式的日期
(6)dateISO:true                必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
阅读全文…

前端脚本 ,

6个基于JQuery的Tab选项卡实例

2010年3月20日
今天在修整博客侧栏信息时,利用到了Tab选项卡方式,因为ZBlog封装的是JQuery库,所以很自然地就想到了IdTabs。顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下。当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了。先来看看老外们出色的基于JQuery的各式Tab选项卡吧:

1. jQuery 选项卡界面 / 选项卡结构菜单教程
这种 类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此 演示哟,你一定会喜欢上它的。
演示 | 下载 | 介绍

阅读全文…

前端脚本 , , ,

jQuery、Ajax、PHP、Json的一个综合例子

2010年3月15日

jQuery 是一个优秀的 Javascript 框架,对 js 进行了优秀的包装,提供了许多方便的功能。jQuery 对 ajax 的包装也堪称优秀。

jQuery 可以以 json 文件传输协议来传输数据(类似 xml,而且大有取代 xml 的趋势),而网站后台代码必须与之配合使用。PHP 是用 json_encode 函数来对返回的数组数据进行编码的,但这个函数只有 PHP5.2版本以上才支持。

从网上找到一个 json 的操作类,本人在 PHP4.4.7 版本下测试通过。本人还建了个函数 function my_json_encode($phparr),使代码兼容 PHP5.2 以上版本。

示例代码(包括 json 的类包软件)可以在以下网址下载:http://download.csdn.net/source/810895

阅读全文…

PHP编程, 前端脚本 , , , ,

10个超级jQuery教程

2010年2月22日

jQuery是一个简洁快速的JavaScript库,它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。
jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不用的应用程序。

1. Facebook like Autosuggestion


jquery tutorials

查看演示

阅读全文…

前端脚本 ,

jQuery入门指南教程

2010年2月16日

Hello jQuery

在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:

$(document).ready(function() {
	// do stuff when DOM is ready
});

放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.

$(document).ready(function() {
	$('a').click(function() {
		alert('Hello world!');
	});
});

这样在你点击页面的一个链接时都会触发这个’Hello world’的提示。

阅读全文…

前端脚本 , ,

写给设计人的10个jQuery特效

2010年2月12日

jQuery已经不是什么新鲜的事儿,记得第一次听说是在catch the digital flow上。总把它认为是非常难的东西,也就没有认真去了解他了。直到学完CSS的大部分内容,才开始接触这种”write less, do more” 的Javascrīpt框架。今天,这篇文章的最重要内容是来自Web Designer Wall的一篇教程,一篇包含了10个jQuery特效的教程。这里不打算全文翻译,想以自己的语言来表达,或许这样更方便大家理解/自己以后学习,也可能更准确地描述。

提示:教程中所用的 jQuery 版本为1.2.3。这篇文章是为jQuery新手而写的。

先试试看? View jQuery DemosDownload Demo ZIP

阅读全文…

前端脚本 ,

10个最实用的JQUERY学习实例资源

2010年2月12日

虽然说是最好jQuery教程,不过个人觉得,更应该说是最实用的教程,推荐初学者阅读和练习。

jQuery可以说已经是无所不在。不过,对于不懂JS的人来说,运用起来还是相当有难度的,所以,像PS一样,都会从网上找一些教程,手把手教,一点一点学。比如上次说到的写给设计人的10个jQuery特效都是手把手教的。今天这个jQuery教程也不例外,除了第一个是预览页的,其他都是手把手教的。

1. 标签式导航

2848373300_0249d4bb4b_o.jpg

2. 平滑移动导航

2848373306_c9a24450bd_o.jpg

阅读全文…

前端脚本 , , ,

jQuery+CSS实现多级下拉菜单

2010年1月6日

随着计算机网络、通信技术的迅速发展,特别是Internet的发展应用,使人们的行为方式受 到巨大的冲击及影响。电子商务作为一种崭新的商务运作方式,带来了一次新的产业革命,这场革命的最终结果将人类带入了信息经济时代。电子商务网站出现如雨 后春笋,但中国电子商务的发展较之发达国家尚处于起步阶段,

今天电子商务网站我们随处可见,如淘宝、拍拍、百度有啊……。电子商务在发展,网站技术也在不段的更新。由于电子商务网站的产品和种类的不段增加,以往的一级下拉菜单已经远不能满足现有电子商务网站发展了,多级下拉菜单是今后电子商务网站的新趋势。

一个好的菜单,能为电子商务网站增色不少。下面我就用jQuery+CSS来制做一款多级的下拉菜单。

jQuery+CSS实现多级下拉菜单

阅读全文…

前端脚本 , ,