# CodeIgniter 用户指南 版本 2.2.0

编辑文档、查看近期更改请 登录 或 注册 找回密码

搜索用户指南

查看原文

提示: 此类是实验性的, 其功能设置及执行在未来版本中可能更改.

# Javascript 类

CodeIgniter提供一个类库用来加载你想用的Javascript库. 请注意,CodeIgniter不是只引入jQuery才能运行,其他脚本库也能运行.jquery仅仅作为一个方便的工具,如果你选择使用它的话.

## 初始化 Javascript 类

为了初始化Javascript类,通常在你的控制器内手动添加,使用$this->load->library 函数. 目前,唯一能用的脚本库是jQuery,它会像这样自动加载:

`$this->load->library('javascript');`

Javascript类也能接受其他参数,函数js_library_driver (string) default 'jquery' and autoload (bool) default TRUE. 你可以覆盖默认参数,只要你愿意发送一个关联数组:

`$this->load->library('javascript', array('js_library_driver' => 'scripto', 'autoload' => FALSE));`

再次说明,目前只有'jquery'是可用的.你可以设置autoload为FALSE. 不过,如果你不希望jquery自动包含一个jquery核心文件的脚本标记. 如果你在CodeIgniter外加载了它或者已经在你的标记中加载了它,这个做法无疑是有用的.

一旦加载了,jQuery库就可以这样引用: $this->javascript

## 安装与配置

### 在你的视图里设置这些变量

作为一个Javascript库,你的源文件必须提供给你的应用程序.

由于Javascript是一种客户端语言，库必须能够写入到最终输出的内容。这通常意味:您需要在文件的<head>节设置以下变量.

`<?php echo $library_src;?>
<?php echo $script_foot;?>`

$library_src, 就是载入真正库文件的路径，以及随后任何插件脚本的调用路径; $script_head 就是具体的事件，功能和其他命令将被渲染.

### 项目设置与配置库路径

Javascript库中有一些配置项。这些配置项可以在application/config.php文件，在自己的config/javascript.php文件，或在任何控制器里使用set_item()函数里配置.

比如一个图片被用作"ajax loader", 或者进度指示条,或者在调用ajax时显示简单文字信息"loading"

`$config['javascript_location'] = 'http://localhost/codeigniter/themes/js/jquery/';
$config['javascript_ajax_img'] = 'images/ajax-loader.gif';`

如果你把文件留在与图片下载路径相同的文件夹里,那么你不需要设置这个配置项.

## jQuery 类

要初始化jQuery 类一般在控制器构造类里使用$this->load->library 函数:

`$this->load->library('jquery');`

您可以使用一个可选的参数,以决定在载入库时是否自动把 jQuery 的 script 标签输出到 HTML 中。默认为自动输出到 HTML 中。为了防止这种情况，配置加载库如下：

`$this->load->library('jquery', FALSE);`

一旦加载了,jquery库就可以这样引用: $this->jquery

## jQuery 事件

使用以下语法来设置事件.

`$this->jquery->event('element_path', code_to_run());`

在上面例子中:

- "event" 事件可以是 blur, change, click, dblclick, error, focus, hover, keydown, keyup, load, mousedown, mouseup, mouseover, mouseup, resize, scroll, or unload的任何一个.
- "element_path" is any valid jQuery selector. 是任何有效的jquery选择器.由于jQuery独特的选择器语法，通常是一个元素ID或CSS选择器。例如，"#notice_area" 会影响到<div id="notice_area">, and "#content a.notice" 会影响div包含"notice" id为"content"的所有锚.
- "code_to_run()" 是你写的脚本,或者一个行为程序比如在jquery下实现的动态效果.

## 特效

jQuery支持一个强大的:Effects功能.要实现一个效果,必须这样加载:

`$this->jquery->effect([optional path] plugin name); // for example $this->jquery->effect('bounce');`

### hide() / show()

这个功能通过控制页面上一个项目元素的可见性实现效果. hide() 使其隐藏, show() 则显示它.

`$this->jquery->hide(target, optional speed, optional extra information);
$this->jquery->show(target, optional speed, optional extra information);`

- "target" 任何一个有效的jQuery选择器.
- "speed" 可选参数,可设置slow, normal, fast,也可以是毫秒数.
- "extra information" 可选参数, 包括一个回调函数或者其他额外信息.

### toggle()

toggle() 将使一个项目元素从当前状态改变成与原先相反的可见状态,原先隐藏则使项目可见，或者 显示原先隐藏的项目.

`$this->jquery->toggle(target);`

- "target" 是任何有效的一个或多个jQuery选择器.

### animate()

`$this->jquery->animate(target, parameters, optional speed, optional extra information);`

- "target" 是任何有效的一个或多个jQuery选择器.
- "parameters" 通常是你想改变的元素本身的一系列CSS属性.
- "speed" 是可选的，可以被设置为 slow, normal, fast 当中的一种或者是一个毫秒数值.
- "extra information" 是可选的，可以包含一个回调函数，或者其它附加信息.

想要一个完整的摘要,请参考 http://docs.jquery.com/Effects/animate

下面是一个例子, id 为"note"的div调用animate(), 通过单击引发jQuery库的click() 事件.

`$params = array(
'height' => 80,
'width' => '50%',
'marginLeft' => 125
);
$this->jquery->click('#trigger', $this->jquery->animate('#note', $params, normal));`

### fadeIn() / fadeOut()

`$this->jquery->fadeIn(target, optional speed, optional extra information);
$this->jquery->fadeOut(target, optional speed, optional extra information);`

- "target" 是任何有效的一个或多个jQuery选择器.
- "speed" 是可选的，可以被设置为 slow, normal, fast 当中的一种或者是一个毫秒数值.
- "extra information" 是可选的，可以包含一个回调函数，或者其它附加信息.

### toggleClass()

此功能是对目标元素添加或删除一个CSS类.

`$this->jquery->toggleClass(target, class)`

- "target" 是任何有效的一个或多个jQuery选择器.
- "class" 任何CSS类名. 请注意，这个css类必须定义在一个已加载的CSS文件.

### fadeIn() / fadeOut()

这些效果是随时间的推移实现一个元素的隐藏或显示.

`$this->jquery->fadeIn(target, optional speed, optional extra information);
$this->jquery->fadeOut(target, optional speed, optional extra information);`

- "target" 是任何有效的一个或多个jQuery选择器.
- "speed" 是可选的，可以被设置为 slow, normal, fast 当中的一种或者是一个毫秒数值.
- "extra information" 是可选的，可以包含一个回调函数，或者其它附加信息.

### slideUp() / slideDown() / slideToggle()

这些效果是实现对元素的滑动.

`$this->jquery->slideUp(target, optional speed, optional extra information);
$this->jquery->slideDown(target, optional speed, optional extra information);
$this->jquery->slideToggle(target, optional speed, optional extra information);`

- "target" 是任何有效的一个或多个jQuery选择器.
- "speed" 是可选的，可以被设置为 slow, normal, fast 当中的一种或者是一个毫秒数值.
- "extra information" 是可选的，可以包含一个回调函数，或者其它附加信息.

## 插件

有一些可选择的基于jQuery库的插件.

### corner()

用于在页面元素四周添加不同样式的圆角。有关详情请参阅http://www.malsup.com/jquery/corner/

`$this->jquery->corner(target, corner_style);`

- "target" 是任何有效的一个或多个jQuery选择器.
- "corner_style" is optional, 可以设置为任何样式如圆，尖，斜面，撕纹，dog等. 个别的圆角可使用以下定位样式"tl" (左上), "tr" (右上), "bl" (左下), or "br" (右下).

`$this->jquery->corner("#note", "cool tl br");`

### tablesorter()

等待描述

### modal()

等待描述

### calendar()

等待描述

翻译贡献者: changekale, chenwenli, csfhc, Hex, Jimmy_zZ, yinzhili, zhiquan
最后修改: 2014-03-14 11:04:32