©
本文档使用 PHP中文网手册 发布
CodeIgniter提供了一个库来帮助您使用某些您可能想要在Javascript中使用的常用功能。请注意,CodeIgniter不需要运行jQuery库,并且任何脚本库都可以正常工作。如果您选择使用jQuery库,则只需简单介绍一下jQuery库。
重要
该库已被弃用,不应使用。它一直处于“试验”状态,现在不再支持。目前只保留向后兼容性。
初始化类
设置和配置
在你的视图中设置这些变量
使用配置项目设置图书馆的路径
jQuery类
jQuery事件
效果
hide()/ show()
切换()
动画()
淡入淡出()
toggleClass()
淡入淡出()
slideUp()/ slideDown()/ slideToggle()
插件
角()
tablesorter()
资本()
日历()
要在控制器构造函数中手动初始化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类,请使用以下$this->load->library()
方法:
$this->load->library('javascript/jquery');
您可以发送一个可选参数来确定加载库时是否自动包含主jQuery文件的脚本标记。它将在默认情况下创建。为防止出现这种情况,请按如下所述加载库:
$this->load->library('javascript/jquery', FALSE);
一旦加载,jQuery库对象将可用使用:
$this->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()会显示它。
$this->jquery->hide(target, optional speed, optional extra information);$this->jquery->show(target, optional speed, optional extra information);
“目标”将是任何有效的jQuery选择器或选择器。
“速度”是可选的,并且设置为慢,正常,快或者毫秒数。
“额外信息”是可选的,并且可以包括回调或其他附加信息。
toggle()会将项目的可见性更改为其当前状态的相反,隐藏可见元素并显示隐藏元素。
$this->jquery->toggle(target);
“目标”将是任何有效的jQuery选择器或选择器。
$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'));
$this->jquery->fadeIn(target, optional speed, optional extra information);$this->jquery->fadeOut(target, optional speed, optional extra information);
“目标”将是任何有效的jQuery选择器或选择器。
“速度”是可选的,并且设置为慢,正常,快或者毫秒数。
“额外信息”是可选的,并且可以包括回调或其他附加信息。
这个函数将添加或删除一个CSS类到它的目标。
$this->jquery->toggleClass(target, class)
“目标”将是任何有效的jQuery选择器或选择器。
“class”是任何CSS类名。请注意,此类必须在已加载的CSS中定义并可用。
这些效果会导致元素随着时间消失或重新出现。
$this->jquery->fadeIn(target, optional speed, optional extra information);$this->jquery->fadeOut(target, optional speed, optional extra information);
“目标”将是任何有效的jQuery选择器或选择器。
“速度”是可选的,并且设置为慢,正常,快或者毫秒数。
“额外信息”是可选的,并且可以包括回调或其他附加信息。
这些效果会导致元素滑动。
$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插件可以使用这个库。
$this->jquery->corner(target, corner_style);
“目标”将是任何有效的jQuery选择器或选择器。
“corner_style”是可选的,可以设置为任何有效的样式,例如圆形,尖锐,斜角,咬,狗等。可以通过按照样式使用空格并使用“tl”(左上)来设置单独的角落, “tr”(右上),“bl”(左下)或“br”(右下)。
$this->jquery->corner("#note", "cool tl br");
说明即将到来
说明即将到来
说明即将到来