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

Javascript 类

CodeIgniter提供一个类库用来加载你想用的Javascript库. 请注意,CodeIgniter不是只引入jQuery才能运行,其他脚本库也能运行.jquery仅仅作为一个方便的工具,如果你选择使用它的话.

初始化 Javascript 类

为了初始化Javascript类,通常在你的控制器内手动添加,使用$this->load->library 函数. 目前,唯一能用的脚本库是jQuery,它会像这样自动加载:

  1. $this->load->library('javascript');
Javascript类也能接受其他参数,函数_js_library_driver (string) default 'jquery'_ and _autoload (bool) default TRUE_. 你可以覆盖默认参数,只要你愿意发送一个关联数组: 
  1. $this->load->library('javascript', array('js_library_driver' => 'scripto', 'autoload' => FALSE));
再次说明,目前只有'jquery'是可用的.你可以设置_autoload_为FALSE. 不过,如果你不希望jquery自动包含一个jquery核心文件的脚本标记. 如果你在CodeIgniter外加载了它或者已经在你的标记中加载了它,这个做法无疑是有用的. 一旦加载了,jQuery库就可以这样引用: _$this->javascript_ ## 安装与配置 ### 在你的视图里设置这些变量 作为一个Javascript库,你的源文件必须提供给你的应用程序. 由于Javascript是一种客户端语言，库必须能够写入到最终输出的内容。这通常意味:您需要在文件的<head>节设置以下变量. 
  1. <?php echo $library_src;?>
  2. <?php echo $script_foot;?>

$library_src, 就是载入真正库文件的路径，以及随后任何插件脚本的调用路径; $script_head 就是具体的事件，功能和其他命令将被渲染.

项目设置与配置库路径

Javascript库中有一些配置项。这些配置项可以在application/config.php文件，在自己的config/javascript.php文件，或在任何控制器里使用set_item()函数里配置.

比如一个图片被用作"ajax loader", 或者进度指示条,或者在调用ajax时显示简单文字信息"loading"

  1. $config['javascript_location'] = 'http://localhost/codeigniter/themes/js/jquery/';
  2.     $config['javascript_ajax_img'] = 'images/ajax-loader.gif';

如果你把文件留在与图片下载路径相同的文件夹里,那么你不需要设置这个配置项.

jQuery 类

要初始化jQuery 类一般在控制器构造类里使用$this->load->library 函数:

  1. $this->load->library('jquery');
您可以使用一个可选的参数,以决定在载入库时是否自动把 jQuery 的 script 标签输出到 HTML 中。默认为自动输出到 HTML 中。为了防止这种情况，配置加载库如下： 
  1. $this->load->library('jquery', FALSE);
一旦加载了,jquery库就可以这样引用: _$this->jquery_ ## jQuery 事件 使用以下语法来设置事件. 
  1. $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" 会影响到
    , and "#content a.notice" 会影响div包含"notice" id为"content"的所有锚.
  • "code_to_run()" 是你写的脚本,或者一个行为程序比如在jquery下实现的动态效果.

特效

jQuery支持一个强大的:Effects功能.要实现一个效果,必须这样加载:

  1. $this->jquery->effect([optional path] plugin name);
  2. // for example
  3. $this->jquery->effect('bounce');

hide() / show()

这个功能通过控制页面上一个项目元素的可见性实现效果. hide() 使其隐藏, show() 则显示它.

  1. $this->jquery->hide(target,  optional speed, optional extra information);
  2.   $this->jquery->show(target,  optional speed, optional extra information);
  • "target" 任何一个有效的jQuery选择器.
  • "speed" 可选参数,可设置slow, normal, fast,也可以是毫秒数.
  • "extra information" 可选参数, 包括一个回调函数或者其他额外信息.

toggle()

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

  1. $this->jquery->toggle(target);
  • "target" 是任何有效的一个或多个jQuery选择器.

animate()

  1.  $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() 事件.

  1.  $params = array(
  2.   'height' => 80,
  3.   'width' => '50%',
  4.   'marginLeft' => 125
  6. );
  7. $this->jquery->click('#trigger', $this->jquery->animate('#note', $params, normal));

fadeIn() / fadeOut()

  1. $this->jquery->fadeIn(target,  optional speed, optional extra information);
  2.   $this->jquery->fadeOut(target,  optional speed, optional extra information);
  • "target" 是任何有效的一个或多个jQuery选择器.
  • "speed" 是可选的，可以被设置为 slow, normal, fast 当中的一种或者是一个毫秒数值.
  • "extra information" 是可选的，可以包含一个回调函数，或者其它附加信息.

toggleClass()

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

  1. $this->jquery->toggleClass(target, class)
  • "target" 是任何有效的一个或多个jQuery选择器.
  • "class" 任何CSS类名. 请注意，这个css类必须定义在一个已加载的CSS文件.

fadeIn() / fadeOut()

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

  1. $this->jquery->fadeIn(target,  optional speed, optional extra information);
  2.   $this->jquery->fadeOut(target,  optional speed, optional extra information);
  • "target" 是任何有效的一个或多个jQuery选择器.
  • "speed" 是可选的，可以被设置为 slow, normal, fast 当中的一种或者是一个毫秒数值.
  • "extra information" 是可选的，可以包含一个回调函数，或者其它附加信息.

slideUp() / slideDown() / slideToggle()

这些效果是实现对元素的滑动.

  1. $this->jquery->slideUp(target,  optional speed, optional extra information);
  2.   $this->jquery->slideDown(target,  optional speed, optional extra information);
  3. $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/

  1. $this->jquery->corner(target, corner_style);
  • "target" 是任何有效的一个或多个jQuery选择器.
  • "corner_style" is optional, 可以设置为任何样式如圆，尖，斜面，撕纹，dog等. 个别的圆角可使用以下定位样式"tl" (左上), "tr" (右上), "bl" (左下), or "br" (右下).
  1. $this->jquery->corner("#note", "cool tl br");

tablesorter()

等待描述

modal()

等待描述

calendar()

等待描述

翻译贡献者:changekale, chenwenli, csfhc, Hex, Jimmy_zZ, yinzhili, zhiquan