目录搜索
文字

CodeIgniter提供了一个库来帮助您使用某些您可能想要在Javascript中使用的常用功能。请注意,CodeIgniter不需要运行jQuery库,并且任何脚本库都可以正常工作。如果您选择使用jQuery库,则只需简单介绍一下jQuery库。

重要

该库已被弃用,不应使用。它一直处于“试验”状态,现在不再支持。目前只保留向后兼容性。

  • 初始化类

  • 设置和配置

    • 在你的视图中设置这些变量

    • 使用配置项目设置图书馆的路径

  • jQuery类

  • jQuery事件

  • 效果

    • hide()/ show()

    • 切换()

    • 动画()

    • 淡入淡出()

    • toggleClass()

    • 淡入淡出()

    • slideUp()/ slideDown()/ slideToggle()

  • 插件

    • 角()

    • tablesorter()

    • 资本()

    • 日历()

使用Javascript类

初始化类

要在控制器构造函数中手动初始化Javascript类,请使用该$this->load->library()方法。目前,唯一可用的库是jQuery,它将自动加载,如下所示:

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

Javascript类也接受参数:

  • js_library_driver(字符串)默认值:'jquery'

  • 自动加载(布尔)默认值:TRUE

您可以通过发送关联数组来覆盖默认值:

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

再次,目前只有'jquery'可用。不过,如果您不希望jQuery库自动为主jQuery脚本文件包含脚本标记,您可能希望将自动加载设置为FALSE。如果您从CodeIgniter之外的位置加载它,或者在标记中已经有脚本标记,这很有用。

一旦加载,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加载器”的图像或进度指示器。如果没有人,需要进行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('javascript/jquery');

您可以发送一个可选参数来确定加载库时是否自动包含主jQuery文件的脚本标记。它将在默认情况下创建。为防止出现这种情况,请按如下所述加载库:

$this->load->library('javascript/jquery', FALSE);

一旦加载,jQuery库对象将可用使用:

$this->jquery

jQuery事件

事件使用以下语法设置。

$this->jquery->event('element_path', code_to_run());

在上面的例子中:

  • “事件”是任何模糊,更改,点击,dblclick,错误,焦点,悬停,keydown,键入,加载,mousedown,mouseup,mouseover,mouseup,调整大小,滚动或卸载。

  • “element_path”是任何有效的jQuery选择器。由于jQuery独特的选择器语法,这通常是一个元素ID或CSS选择器。例如“#notice_area”会生效<div id="notice_area">,而“#content a.notice”会在id为“content”的div中产生所有具有“notice”类别的锚。

  • code_to_run()”是你自己写的脚本,或者是一个动作,比如下面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);
  • “目标”将是任何有效的jQuery选择器或选择器。

  • “速度”是可选的,并且设置为慢,正常,快或者毫秒数。

  • “额外信息”是可选的,并且可以包括回调或其他附加信息。

toggle()

toggle()会将项目的可见性更改为其当前状态的相反,隐藏可见元素并显示隐藏元素。

$this->jquery->toggle(target);
  • “目标”将是任何有效的jQuery选择器或选择器。

animate()

$this->jquery->animate(target, parameters, optional speed, optional extra information);
  • “目标”将是任何有效的jQuery选择器或选择器。

  • jQuery中的“参数”通常会包含一系列您希望更改的CSS属性。

  • “速度”是可选的,并且设置为慢,正常,快或者毫秒数。

  • “额外信息”是可选的,并且可以包括回调或其他附加信息。

下面是一个animate()的例子,它调用id为“note”的div,并通过使用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);
  • “目标”将是任何有效的jQuery选择器或选择器。

  • “速度”是可选的,并且设置为慢,正常,快或者毫秒数。

  • “额外信息”是可选的,并且可以包括回调或其他附加信息。

toggleClass()

这个函数将添加或删除一个CSS类到它的目标。

$this->jquery->toggleClass(target, class)
  • “目标”将是任何有效的jQuery选择器或选择器。

  • “class”是任何CSS类名。请注意,此类必须在已加载的CSS中定义并可用。

fadeIn() / fadeOut()

这些效果会导致元素随着时间消失或重新出现。

$this->jquery->fadeIn(target,  optional speed, optional extra information);$this->jquery->fadeOut(target,  optional speed, optional extra information);
  • “目标”将是任何有效的jQuery选择器或选择器。

  • “速度”是可选的,并且设置为慢,正常,快或者毫秒数。

  • “额外信息”是可选的,并且可以包括回调或其他附加信息。

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选择器或选择器。

  • “速度”是可选的,并且设置为慢,正常,快或者毫秒数。

  • “额外信息”是可选的,并且可以包括回调或其他附加信息。

插件

一些选择jQuery插件可以使用这个库。

corner()

$this->jquery->corner(target, corner_style);
  • “目标”将是任何有效的jQuery选择器或选择器。

  • “corner_style”是可选的,可以设置为任何有效的样式,例如圆形,尖锐,斜角,咬,狗等。可以通过按照样式使用空格并使用“tl”(左上)来设置单独的角落, “tr”(右上),“bl”(左下)或“br”(右下)。

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

tablesorter()

说明即将到来

modal()

说明即将到来

calendar()

说明即将到来

上一篇:下一篇: