提示: 此类是实验性的, 其功能设置及执行在未来版本中可能更改.
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()
等待描述