作者:伏染善 | 来源:互联网 | 2013-06-26 22:51
CI 的Javascript 类,刚刚发现CI的Javascript类也很强大,下面是官方的一些方法。来自CI中国官网,CI手册。
CodeIgniter提供一个类库用来加载你想用的Javascript库. 请注意,CodeIgniter不是只引入jQuery才能运行,其他脚本库也能运行.jquery仅仅作为一个方便的工具,如果你选择使用它的话.
初始化 Javascript 类
为了初始化Javascript类,通常在你的控制器内手动添加,使用$this->load->library函数. 目前,唯一能用的脚本库是jQuery,它会像这样自动加载:
$this->load->library('Javascript');
Javascript类也能接受其他参数,函数js_library_driver (string) default ‘jquery’andautoload (bool) default TRUE. 你可以覆盖默认参数,只要你愿意发送一个关联数组:
$this->load->library('Javascript', array('js_library_driver' => 'scripto', 'autoload' => FALSE));
再次说明,目前只有’jquery’是可用的.你可以设置autoloadto FALSE, 不过,如果你不希望jquery自动包含一个jquery核心文件的脚本标记. 如果你在CodeIgniter外加载了它或者已经在你的标记中加载了它,这个做法无疑是有用的.
一旦加载了,jQuery库就可以这样引用:$this->Javascript
安装与配置
在你的视图里设置这些变量
作为一个Javascript库,你的源文件必须提供给你的应用程序.
由于Javascript是一种客户端语言,库必须能够写入到最终输出的内容。这通常意味:您需要在文件的节设置以下变量.
$library_src, 就是载入真正库文件的路径,以及随后任何插件脚本的调用路径; $script_head 就是具体的事件,功能和其他命令将被渲染.
项目设置与配置库路径
Javascript库中有一些配置项。这些配置项可以在application/ config.php文件,在自己的config/Javascript.php文件,或在任何控制器里使用set_item()函数里配置.
比如一个图片被用作”ajax loader”, 或者进度指示条,或者在调用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('jquery');
您可以发送一个可选的参数,以决定在载入库时是否将jQuery核心文件的脚本标记将自动包含库。它将被默认创建。为了防止这种情况,配置加载库如下:
$this->load->library('jquery', FALSE);
一旦加载了,jquery库就可以这样引用:$this->jquery
jQuery 事件
使用以下语法来设置事件.
$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功能.要实现一个效果,必须这样加载:
$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);
-
“target” 任何一个有效的jQuery选择器.
-
“speed” 可选参数,可设置slow, normal, fast,也可以是毫秒数.
-
“extra information” 可选参数, 包括一个回调函数或者其他额外信息.
toggle()
toggle() 将使一个项目元素从当前状态改变成与原先相反的可见状态,原先隐藏则使项目可见,或者 显示原先隐藏的项目.
$this->jquery->toggle(target);
-
“target” 是任何有效的一个或多个jQuery选择器.
animate()
$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() 事件.
$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);
-
“target” 是任何有效的一个或多个jQuery选择器.
-
“speed” 是可选的,可以被设置为 slow, normal, fast 当中的一种或者是一个毫秒数值.
-
“extra information” 是可选的,可以包含一个回调函数,或者其它附加信息.
toggleClass()
此功能是对目标元素添加或删除一个CSS类.
$this->jquery->toggleClass(target, class)
-
“target” 是任何有效的一个或多个jQuery选择器.
-
“class” 任何CSS类名. 请注意,这个css类必须定义在一个已加载的CSS文件.
fadeIn() / fadeOut()
这些效果是随时间的推移实现一个元素的隐藏或显示.
$this->jquery->fadeIn(target, optional speed, optional extra information);
$this->jquery->fadeOut(target, optional speed, optional extra information);
-
“target” 是任何有效的一个或多个jQuery选择器.
-
“speed” 是可选的,可以被设置为 slow, normal, fast 当中的一种或者是一个毫秒数值.
-
“extra information” 是可选的,可以包含一个回调函数,或者其它附加信息.
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);
-
“target” 是任何有效的一个或多个jQuery选择器.
-
“speed” 是可选的,可以被设置为 slow, normal, fast 当中的一种或者是一个毫秒数值.
-
“extra information” 是可选的,可以包含一个回调函数,或者其它附加信息.
插件
有一些可选择的基于jQuery库的插件.
corner()
用于在页面元素四周添加不同样式的圆角。有关详情请参阅http://www.malsup.com/jquery/corner/
$this->jquery->corner(target, corner_style);
-
“target” 是任何有效的一个或多个jQuery选择器.
-
“corner_style” is optional, 可以设置为任何样式如圆,尖,斜面,撕纹,dog等. 个别的圆角可使用以下定位样式”tl” (左上), “tr” (右上), “bl” (左下), or “br” (右下).
$this->jquery->corner("#note", "cool tl br");
推荐阅读
-
本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ...
[详细]
蜡笔小新 2023-12-09 17:40:33
-
本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
-
-
前言:关于跨域CORS1.没有跨域时,ajax默认是带cookie的2.跨域时,两种解决方案:1)服务器端在filter中配置详情:http:blog.csdn.netwzl002 ...
[详细]
蜡笔小新 2023-10-17 17:47:27
-
本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ...
[详细]
蜡笔小新 2023-12-13 20:01:16
-
本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ...
[详细]
蜡笔小新 2023-12-11 10:07:32
-
随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ...
[详细]
蜡笔小新 2023-12-10 20:05:15
-
web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ...
[详细]
蜡笔小新 2023-10-17 20:40:03
-
本文目录一览:1、extjs实用开发指南2、本 ...
[详细]
蜡笔小新 2023-10-17 13:23:21
-
本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ...
[详细]
蜡笔小新 2023-12-14 16:44:09
-
本文讨论了如何优化解决hdu 1003 java题目的动态规划方法,通过分析加法规则和最大和的性质,提出了一种优化的思路。具体方法是,当从1加到n为负时,即sum(1,n)sum(n,s),可以继续加法计算。同时,还考虑了两种特殊情况:都是负数的情况和有0的情况。最后,通过使用Scanner类来获取输入数据。 ...
[详细]
蜡笔小新 2023-12-14 13:11:00
-
本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ...
[详细]
蜡笔小新 2023-12-14 12:09:13
-
本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ...
[详细]
蜡笔小新 2023-12-10 12:35:46
-
本文详细介绍了使用jQuery实现简单动画效果的方法,包括显示/隐藏、向上收缩/向下展开、淡入/淡出、自定义动画等。同时提供了具体的用法示例,并解释了参数的含义和使用技巧。通过本文的学习,读者可以掌握如何使用jQuery实现各种动画效果,为网页增添生动和互动性。 ...
[详细]
蜡笔小新 2023-12-10 12:09:52
-
本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ...
[详细]
蜡笔小新 2023-12-10 04:03:11
-
Allegro总结:1.防焊层(SolderMask):又称绿油层,PCB非布线层,用于制成丝网印板,将不需要焊接的地方涂上防焊剂.在防焊层上预留的焊盘大小要比实际的焊盘大一些,其差值一般 ...
[详细]
蜡笔小新 2023-10-17 18:30:39
-