1 教程-内容提要
1.1 CodeIgniter3.1教程——开始
1.2 加载静态内容
1.3 读取新闻条目
1.4 创建新闻条目
2 常规主题
2.1 CodeIgniter URL
2.2 控制器
2.3 保留名称
2.4 视图
2.5 模型
2.6 辅助函数
2.7 使用 CodeIgniter 类库
2.8 创建类库
2.9 使用 CodeIgniter 驱动器
2.10 创建驱动器
2.11 创建核心系统类
2.12 创建附属类
2.13 钩子 - 扩展框架核心
2.14 自动加载资源
2.15 公共函数
2.16 兼容性函数
2.17 URI 路由
2.18 错误处理
2.19 网页缓存
2.20 程序分析
2.21 以 CLI 方式运行
2.22 管理你的应用程序
2.23 处理多环境
2.24 在视图文件中使用 PHP 替代语法
2.25 安全
2.26 PHP 开发规范
3 类库参考
3.1 基准测试类
3.2 缓存驱动器
3.3 日历类
3.4 购物车类
3.5 配置类
3.6 Email 类
3.7 加密类(废弃)
3.8 加密类(新版)
3.9 文件上传类
3.10 表单验证类
3.11 FTP 类
3.12 图像处理类
3.13 输入类
3.14 Javascript 类
3.15 语言类
3.16 加载器类
3.17 迁移类
3.18 输出类
3.19 分页类
3.20 模板解析类
3.21 安全类
3.22 Session 类
3.23 HTML 表格类
3.24 引用通告类
3.25 排版类
3.26 单元测试类
3.27 URI 类
3.28 用户代理类
3.29 XML-RPC 与 XML-RPC 服务器类
3.30 Zip 编码类
4 数据库参考
4.1 数据库快速入门: 示例代码
4.2 数据库配置
4.3 连接你的数据库
4.4 查询
4.5 生成查询结果
4.6 查询辅助函数
4.7 查询构造器类
4.8 事务
4.9 数据库元数据
4.10 自定义函数调用
4.11 查询缓存
4.12 数据库工厂类
4.13 数据库工具类
4.14 数据库驱动器参考
5 辅助函数参考
5.1 数组辅助函数
5.2 验证码辅助函数
5.3 Cookie 辅助函数
5.4 日期辅助函数
5.5 目录辅助函数
5.6 下载辅助函数
5.7 邮件辅助函数
5.8 文件辅助函数
5.9 表单辅助函数
5.10 HTML 辅助函数
5.11 Inflector 辅助函数
5.12 语言辅助函数
5.13 数字辅助函数
5.14 路径辅助函数
5.15 安全辅助函数
5.16 表情辅助函数(废弃)
5.17 字符串辅助函数
5.18 文本辅助函数
5.19 排版辅助函数
5.20 URL 辅助函数
5.21 XML 辅助函数

Javascript 类

2017-12-03 19:58:19
linefo
636
最后编辑:linefo 于 2017-12-03 21:00:38

Javascript 类

CodeIgniter 提供一个类库和一些共用的方法来处理 Javascript 。要注意的是, CodeIgniter 并不是只能用于 jQuery ,其他脚本库也可以。JQuery 仅仅是 作为一个方便的工具,如果你选择使用它的话。

重要

这个类库已经废弃,不要使用它。它将永远处于 "实验" 版本, 而且现在也已经不提供支持了。保留它只是为了向前兼容。

使用 Javascript 类

初始化类

要初始化 Javascript 类,你可以在控制器的构造函数中使用 $this->load->library() 函数。目前,唯一可用的库是 jQuery ,可以使用下面的方法加载:

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

Javascript 类也可以接受参数:

  • js_library_driver (string) default: 'jquery'
  • autoload (bool) default: TRUE

你可以通过一个关联数组覆盖默认的参数:

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

再次说明,目前只有 jQuery 是可用的,如果你不想让 jQuery 脚本文件自动的包含在 script 标签中,你可以设置 autoload 参数为 FALSE 。这在当你在 CodeIgniter 之外 加载它时,或者 script 标签已经有了的时候很有用。

一旦加载完成,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 请求时, 将会显示 "加载中" 这样的文本。

$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('javascript/jquery');

你可以提供一个可选的参数来决定加载该库时是否将其自动包含到 script 标签中。 默认情况下会包含,如果不需要,可以像下面这样来加载:

$this->load->library('javascript/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 或者 unload 中的任何一个事件。
  • "element_path" 可以是任何的 jQuery 选择器 。 使用 jQuery 独特的选择器语法,通常是一个元素 ID 或 CSS 选择器。例如,"#notice_area" 会影响到 <div id="notice_area"> ,"#content a.notice" 会影响到 ID 为 "content" 的元素下的所有 class 为 "notice" 的链接。
  • "code_to_run()" 为你自己写的脚本,或者是一个 jQuery 动作,例如下面所介绍的特效。

特效

jQuery 库支持很多强大的 特效 ,在使用特效之前, 必须使用下面的方法加载:

$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://api.jquery.com/animate/

下面是个在 ID 为 "note" 的一个 div 上使用 animate() 的例子,它使用了 jQuery 库的 click 事件, 通过 click 事件触发。

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

toggleClass()

该函数用于往目标元素添加或移除一个 CSS 类。

$this->jquery->toggleClass(target, class)
  • "target" 是任何有效的 jQuery 选择器。
  • "class" 是任何 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" 可选,可以设置为 slow、normal、fast 或你自己设置的毫秒数。

插件

使用这个库时还有几个 jQuery 插件可用。

corner()

用于在页面的某个元素四周添加不同样式的边角。更多详细信息,参考 http://malsup.com/jquery/corner/

$this->jquery->corner(target, corner_style);
  • "target" 是任何有效的 jQuery 选择器。
  • "corner_style" 可选,可以设置为任何有效的样式,例如: round、sharp、bevel、bite、dog 等。如果只想设置某个边角的样式, 可以在样式后添加一个空格,然后使用 "tl" (左上),"tr" (右上), "bl" (左下),和 "br" (右下)。
$this->jquery->corner("#note", "cool tl br");

tablesorter()

待添加

calendar()

待添加