directory search
Array Array Helper Benchmarking Benchmarking Class Caching Caching Driver Calendaring Calendaring Class CAPTCHA CAPTCHA Helper Config Config Class Cookie Cookie Helper Database Connecting to your Database Custom Function Calls Database Caching Class Database Configuration Database Forge Class Database Metadata Database Quick Start: Example Code Database Reference Database Utility Class DB Driver Reference Generating Query Results Queries Query Builder Class Query Helper Methods Transactions Date Date Helper Directory Directory Helper Download Download Helper Email Email Class Email Helper Encrypt Encrypt Class Encryption Encryption Library File File Helper File Uploading File Uploading Class Form Form Helper Form Validation Form Validation FTP FTP Class Functions compatibility_functions common_functions HTML HTML Helper HTML Table HTML Table Class Image Manipulation Image Manipulation Class Inflector Inflector Helper Input Input Class Javascript Javascript Class Language Language Class Language Helper Loader Loader Class Migrations Migrations Class Number Number Helper Output Output Class Pagination Pagination Class Path Path Helper Security Security Class Security Helper Session Session Library Shopping Cart Shopping Cart Class Smiley Smiley Helper String String Helper Template Parser Template Parser Class Text Text Helper Trackback Trackback Class Typography Typography Class Typography Helper Unit Testing Unit Testing Class URI URL User Agent XML XML-RPC and XML-RPC Server Zip Encoding Zip Encoding Class XML-RPC and XML-RPC Server Classes XML Helper User Agent Class URL Helper URI Class
characters

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

说明即将到来

Previous article: Next article: