CodeIgniter 用户指南 版本 2.2.6

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

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


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

在上面例子中:

特效

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);

toggle()

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

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

animate()

$this->jquery->animate(target, parameters, optional speed, optional 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);

toggleClass()

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

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

fadeIn() / fadeOut()

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

$this->jquery->fadeIn(target, optional speed, optional extra information);
$this->jquery->fadeOut(target, optional speed, optional 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);

插件

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

corner()

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

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

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

tablesorter()

等待描述

modal()

等待描述

calendar()

等待描述

 

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