- 欢迎使用 CodeIgniter
- 安装说明
- 下载 CodeIgniter
- 从老版本升级
- 疑难解答
- CodeIgniter 概览
- CodeIgniter 将从这里开始
- CodeIgniter 概览
- CodeIgniter 特性
- 应用程序流程图
- 模型-视图-控制器
- 设计与架构目标
- 教程 - 内容提要
- 加载静态内容
- 读取新闻条目
- 创建新闻条目
- 结束语
- 向 CodeIgniter 贡献你的力量
- 编写 CodeIgniter 的文档
- Developer's Certificate of Origin 1.1
- CodeIgniter URL
- 控制器
- 保留名称
- 视图
- 模型
- 辅助函数
- 使用 CodeIgniter 类库
- 创建类库
- 使用 CodeIgniter 驱动器
- 创建驱动器
- 创建核心系统类
- 创建附属类
- 钩子 - 扩展框架核心
- 自动加载资源
- 公共函数
- 兼容性函数
- URI 路由
- 错误处理
- 网页缓存
- 程序分析
- 以 CLI 方式运行
- 管理你的应用程序
- 处理多环境
- 在视图文件中使用 PHP 替代语法
- 安全
- PHP 开发规范
- 基准测试类
- 缓存驱动器
- 日历类
- 购物车类
- 配置类
- Email 类
- 加密类
- 加密类(新版)
- 文件上传类
- 表单验证类
- FTP 类
- 图像处理类
- 输入类
- Javascript 类
- 语言类
- 加载器类
- 迁移类
- 输出类
- 分页类
- 模板解析类
- 安全类
- Session 类
- HTML 表格类
- 引用通告类
- 排版类
- 单元测试类
- URI 类
- 用户代理类
- XML-RPC 与 XML-RPC 服务器类
- Zip 编码类
- 数据库参考
- 数据库快速入门: 示例代码
- 数据库配置
- 连接你的数据库
- 查询
- 生成查询结果
- 查询辅助函数
- 查询构造器类
- 事务
- 数据库元数据
- 自定义函数调用
- 数据库缓存类
- 数据库工厂类
- 数据库工具类
- 数据库驱动器参考
- 数组辅助函数
- 验证码辅助函数
- Cookie 辅助函数
- 日期辅助函数
- 目录辅助函数
- 下载辅助函数
- 邮件辅助函数
- 文件辅助函数
- 表单辅助函数
- HTML 辅助函数
- Inflector 辅助函数
- 语言辅助函数
- 数字辅助函数
- 路径辅助函数
- 安全辅助函数
- 表情辅助函数
- 字符串辅助函数
- 文本辅助函数
- 排版辅助函数
- URL 辅助函数
- XML 辅助函数
- The MIT License (MIT)
- 服务器要求
- 关于 CodeIgniter
Javascript 类
CodeIgniter 提供一个类库和一些共用的方法来处理 Javascript 。要注意的是, CodeIgniter 并不是只能用于 jQuery ,其他脚本库也可以。JQuery 仅仅是 作为一个方便的工具,如果你选择使用它的话。
重要
这个类库已经废弃,不要使用它。它将永远处于 "实验" 版本, 而且现在也已经不提供支持了。保留它只是为了向前兼容。
- 使用 Javascript 类
- 初始化类
- 初始化配置
- 在视图文件中设置变量
- 设置库路径
- jQuery 类
- jQuery 事件
- 特效
- hide() / show()
- toggle()
- animate()
- toggleClass()
- fadeIn() / fadeOut()
- slideUp() / slideDown() / slideToggle()
- 插件
- corner()
- tablesorter()
- modal()
- calendar()
使用 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()
待添加
modal()
待添加
calendar()
待添加
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论