目录 搜索
欢迎 目录 快速参考图 基本信息 服务器要求 许可协议 变更记录 关于CodeIgniter 安装 下载 CodeIgniter 安装指导 从老版本升级 疑难解答 介绍 开始 CodeIgniter 是什么? CodeIgniter 速记表 支持特性 应用程序流程图 模型-视图-控制器 架构目标 教程 内容提要 加载静态内容 创建新闻条目 读取新闻条目 结束语 常规主题 CodeIgniter URL 控制器 保留字 视图 模型 辅助函数 使用 CodeIgniter 类库 创建你自己的类库 使用 CodeIgniter 适配器 创建适配器 创建核心系统类 钩子 - 扩展框架的核心 自动装载资源 公共函数 URI 路由 错误处理 缓存 调试应用程序 以CLI方式运行 管理应用程序 处理多环境 PHP替代语法 安全 开发规范 类库参考 基准测试类 日历类 购物车类 配置类 Email 类 加密类 文件上传类 表单验证详解 FTP 类 图像处理类 输入类 Javascript 类 语言类 装载类 迁移类 输出类 分页类 模板解析器类 安全类 Session 类 HTML 表格类 引用通告类 排版类 单元测试类 URI 类 User-Agent 类 表单验证 XML-RPC 和 XML-RPC 服务器 Zip 编码类 缓存适配器 适配器参考 适配器 数据库类 Active Record 类 数据库缓存类 自定义函数调用 数据库配置 连接你的数据库 数据库快速入门例子代码 字段数据 数据库维护类 查询辅助函数 数据库类 查询 生成查询记录集 表数据 事务 数据库工具类 JavaScript类 辅助函数参考 数组辅助函数 CAPTCHA 辅助函数 Cookie Helper 日期辅助函数 目录辅助函数 下载辅助函数 Email 辅助函数 文件辅助函数 表单辅助函数 HTML辅助函数 Inflector 辅助函数 语言辅助函数 数字辅助函数 路径辅助函数 安全辅助函数 表情辅助函数 字符串辅助函数 文本辅助函数 排版辅助函数 URL 辅助函数 XML 辅助函数
文字

CodeIgniter 用户指南 版本 2.1.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 to FALSE, 不过,如果你不希望jquery自动包含一个jquery核心文件的脚本标记. 如果你在CodeIgniter外加载了它或者已经在你的标记中加载了它,这个做法无疑是有用的.

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

安装与配置

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

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

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

<?php echo $library_src;?>
<?php echo $script_head;?>

$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核心文件的脚本标记将自动包含库。它将被默认创建。为了防止这种情况,配置加载库如下:

$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()

等待描述

 

翻译贡献者: chenwenli, Hex, Jimmy_zZ, yinzhili
最后修改: 2012-02-06 01:00:34
上一篇: 下一篇: