随笔分类 - JavaScript
摘要：我们本章要介绍的是单页导航动画效果的实现，感觉有点拗口，其实我也不知道这个效果动画到底叫什么名字合适。 其实他实现的功能还是好理解的，就是有一个母页面，母页面会加载一定数目的子页面，母页面上有各个子页面的link。默认母页面显示第一个子页面的内容，当点击母页面上的链接时，显示相应子页面的内容。这里的母页面和子页面是实际存在的不同页面，但是整个动画实现的结果是，所有页面的切换都是在母页面上实现的，url并没有发生变化。要是大家还不知道是怎么回事，那就下载demo看运行效果吧，一看便知。 好了不说废话了，开始我们的教程。第一步是创建母页面的html代码。<div id="outer
阅读全文
摘要：我将上一章中了插件做了个小小的升级，实现了自动运行效果，完整代码大家见demo。 主要的变化点有：把‘下一条’、‘上一条’的click事件抽象到一个函数showNext中。添加setInterval，添加selector元素的hover事件。好了，我们一个个的看。showNext函数：//显示函数function showNext(flag) { //隐藏导航 $(config.selector).find('a').css('display', 'none'); //创建遮罩 $.tranzify.createOverlay(config);
阅读全文
摘要：今天我们要完成的是一个带有遮罩效果（补间动画）的图片走廊jquery插件：jquery.tranzify.js。我们先看下效果： 好了，现在我们开始讲解这个jquery动画插件如何制作，大家可以再文章最后下载demo，查看详细代码。 首先开始准备html页面，代码很简单就是一个id为frame的div，里面包含了一些图片。<div id="frame"> <img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" /> <i
阅读全文
摘要：今天文章的内容是关于使用jquery的animate方法，修改html元素的position属性，创建一个图片走廊。效果预览图片： 大家可以下载demo看完整效果，下面介绍制作过程。 1.首先创建一个html页面，html结构如下：<div id="slider"> <div id="viewer"> <img id="image1" src="img/amstrad.jpg" alt="Amstrad CPC 472" /> <img id="
阅读全文
摘要：我们今天要做的是手风琴panel，jquery.ui里面有个叫做accordtion的插件，我们要实现的效果和他一样。 首先我们还是创建一个html文件，里面包含如下的html结构。<div id="pane-container"> <div class="pane"> <h1>first pane</h1> <p>this script should allow only one pane to be visible at a time.</p> </div> <
阅读全文
摘要：今天我们介绍的是提示框插件tooltip的制作，其中还会介绍到自定义选择器插件的开发。 我们首先来介绍自定义选择器的开发，他的代码结构如下：(function ($) { $.expr[':'].customselector = function (object,index,properties,list) { //code };})(jQuery);调用时候的写法：$(a:customselector) 现在我们先解释下函数中所使用到的各个参数。 object：当前dom元素的引用，而不是jquery对象。需要强调的一点，dom元素和jquery对象完全不...
阅读全文
摘要：本章我们将创建一个自增长的输入框插件，jquery.aotogrow.js。首先还是看html代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <
阅读全文
摘要：该系列文章是我阅读《jQuery 1.4 Animation Techniques》后的总结，有兴趣的朋友可以去看原版书籍。 动画效果对于丰富网站的交互体验起到了不可或缺的作用，他可以让你的站点更酷，更吸引人。什么时候使用动画： 1.当显示或隐藏页面、弹出框或内容区域的时候； 2.当一些内容从页面的一个地方移动到其他地方的时候； 3.当页面中的一些内容，应用户的操作而产生状态改变的时候； 4.当一些内容在几种状态间转变的时候； 5.引导用户去执行某些操作，或者引起他们对某些很重要信息注意的时候。什么时候不应使用动画： 1.当某些操作是需要用户频繁重复操作的时候； 2.当设备...
阅读全文
摘要：今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是，当表单提交的时候检查必填项是否正确填写，同时根据需要验证输入信息是否符合规范。 先下页面代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> &
阅读全文
摘要：本文主要内容是讲解图片走廊-gallery的实现。 首先创建jquery.gallery.js的插件文件，构建程序骨架。(function ($) { $.fn.gallery = function () { return this.each(function () { var self = $(this); self.click(function () { }); }); }})(jQuery); 创建html文件，使用...
阅读全文
摘要：该系列文章是我阅读<jQuery Plugin Development Beginner's Guide>后的总结，有兴趣的朋友可以去读原版的书籍。 定义插件的结构骨架： 书中最开始使用的结构骨架如下：jQuery.fn.fluginmane=function(){ return this.each(function(){ //code... })} 这种结构不是很理想，特别书中提到，为了防止冲突例子不使用$，而使用jQuery。在这里，我们使用匿名函数的方式实现插件的结构骨架，这样就可以防止可能的冲突。也希望大家好好了解下匿名函数相关的知识。(function($){..
阅读全文
摘要：本章的主题是继承，在javascript中要实现继承比其他面相对象语言要复杂的多，他主要使用原型实现继承。下面就介绍几种常用的实现继承的方式。 1.经典继承（Classical Inheritance） 我们首先创建一个Person类。/* Class Person. */function Person(name) { this.name = name;}Person.prototype.getName = function() { return this.name;} 现在我们创建一个Author类，继承自Person/* Class Author. */function Au...
阅读全文
摘要：本章的主题是继承，分为上下两部分来介绍，上主要来介绍call和apply方法，下用来介绍继承的几种实现方式。 在介绍继承的时候，call和apply是一个绕不过去的话题，也是大家需要深入了解的知识。下面我们来看看call的定义（apply和call基本是一样的，只是参数不同，这里不做介绍了）：call 方法请参阅应用于：Function 对象要求版本 5.5调用一个对象的一个方法，以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj可选项。将被用作当前对象的对象。arg1, arg2, , argN可选项。将...
阅读全文
摘要：今天讲解的内容是高级模式（Advanced Patterns），如何实现静态方法和属性，常量还有其他一些知识点。 1.静态方法和属性 其实要实现这一功能还是要借助于闭包。在上一讲中的第三种实现方式也使用了闭包，但通过那种实现，内部属性和方法是实例级别的。var book1=new Book('isbn1','title1','author1');var book2=new Book('isbn2','title2','author2');alert(book1.getTitle()); //输出ti
阅读全文
摘要：今天博文关注的是javascript中的封装，文章内容来自《pro javascript design patterns》（有兴趣的朋友可以直接去下）和自己对这一问题的理解。 本文分上下两部分，上部讲基本模式（basic patterns）：完全暴露法，下划线标记法和使用闭包；下部讲高级模式（Advanced Patterns），如何实现静态方法和属性，常量还有其他一些知识点。 封装是面向对象语言很基本也是很有用的特性，虽然javascript也可以称的上是面向对象语言，但他对封装的支持并不是很好，不像其他语言，只要使用private、protected就可以实现。但这并不是说就没有办...
阅读全文
摘要：最近在看javascript设计模式的书籍《pro javascript design pattrens》，觉得很不错，可以提高自己对js oo的理解，也可能帮助自己更好的理解别人写的js library，提高自己js的水平。 这本书中第一个重要的内容就是接口。 大家对接口应该都不陌生，简单的说接口就是一个契约或者规范。在强类型的面相对象语言中，接口可以很容易的实现。但是在javascript中并没有原生的创建或者实现接口的方式，或者判定一个类型是否实现了某个接口，我们只能利用js的灵活性的特点，模拟接口。 在javascript中实现接口有三种方式：注释描述、属性验证、鸭子模型。note：.
阅读全文