Chinaunix首页 | 论坛 | 博客
  • 博客访问: 887505
  • 博文数量: 60
  • 博客积分: 1458
  • 博客等级: 中尉
  • 技术积分: 1373
  • 用 户 组: 普通用户
  • 注册时间: 2011-12-24 12:50
个人简介

不积硅步无以至千里

文章分类

全部博文(60)

分类: IT业界

2012-07-24 12:56:50

使用回调函数

1213日更新

内容

概述

定义回调函数

内部作用域

复杂行为

延迟回调

概述

在本教程中,我们将学习当一个组件的状态发生改变时如何使用回调函数。

定义回调函数

几乎每一个组件都有不同的状态,当事件发生时,你可以通过回调函数知道它们的状态。

可以方便地使用UI组件提供的on方法指定一个回调函数。

On方法接收的两个参数是:

· 回调函数名字

· 将要被执行的句柄

让我们来看一个关于Modal组件的例子:

点击(此处)折叠或打开

  1. var myModal = $("#my-modal").modal("Some content.");

  2. myModal.on("show", function () {

  3. //回调函数内部

  4. });

每个组件可以使用的回调函数都在API Documentation中写出。

内部作用域

为了使事情变得简单,每一次回调在函数上下文中都有一个特殊的作用域。

通过使用this关键字,你可以继续使用组件实例。

点击(此处)折叠或打开

  1. var myModal = $("#my-modal").modal("Some content.");

  2. myModal.on("show", function () {

  3.     this.content("New content for 'this', the Modal.").widht(500).heigth(300);

  4.  });

复杂行为

通过使用回调函数组合使用一些组件,你可以很容易地创建更为复杂的行为。

例如:首先创建一个空的Modal

点击(此处)折叠或打开

  1. var myModal = $("#my-modal").modal();


然后,创建一个 Form 控制器

点击(此处)折叠或打开

  1. var myForm = $("#my-form").form();


定义一个“submit”回调

点击(此处)折叠或打开

  1. myForm.on("submit", function () {

  2.     //改变Modal内容并显示它

  3.     myModal.content("

    Are you sure?

    "
    ).show();

  4. });

延迟调用

另一个有用的模式是指定回调的延迟句柄。通过这种方式,你可以通过用户行为或者你应用的配置指定组件的行为。为了使所有的Object都有这一功能,它们具有公用方法on,通过on,你可以定义延迟回调,与此对应,有另外一个叫做off的方法,可以删除回调。

例如,创建一个有一些内容的Modal

点击(此处)折叠或打开

  1. var myModal = $("#my-modal").modal("/some/content.html");


你可以为已登录的用户做一些不同的操作

点击(此处)折叠或打开

  1. if (user.isLogged) {

  2.     myModal.on("show", function(){

  3.    //执行一些内容

  4.     });

  5.  }


正如你在之前的例子中所看到的,on方法通过使用一种简单易用的方法为已登录用户指定一些特殊的行为。

阅读(1923) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~