Javascript Class

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

重要

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

初始化类

使用Javascript类

初始化类

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

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

Javascript类也接受参数：

js_library_driver（字符串）默认值：'jquery'

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

$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，调整大小，滚动或卸载。

效果

查询库支持强大的效果库。在可以使用效果之前，必须加载它：

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

下面是一个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选择器或选择器。

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

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

tablesorter()

说明即将到来

modal()

说明即将到来

calendar()

说明即将到来