Blame - user_guide/libraries/javascript.html - code-igniter-v3-giggi

blob: 4e262279dcb5a1090874a6b1b67950a09f1a7075 [file] [log] [blame]

Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	1	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
				2	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
				3	<head>
				4
Derek Jones	a898fb5	2011-01-28 14:09:14 -0600	[diff] [blame]	5	<title>CodeIgniter User Guide : JavaScript Class</title>
Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	6
				7	<style type='text/css' media='all'>@import url('../userguide.css');</style>
				8	<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />
				9
				10	<script type="text/javascript" src="../nav/nav.js"></script>
				11	<script type="text/javascript" src="../nav/prototype.lite.js"></script>
				12	<script type="text/javascript" src="../nav/moo.fx.js"></script>
				13	<script type="text/javascript" src="../nav/user_guide_menu.js"></script>
				14
				15	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
				16	<meta http-equiv='expires' content='-1' />
				17	<meta http-equiv= 'pragma' content='no-cache' />
				18	<meta name='robots' content='all' />
				19	<meta name='author' content='ExpressionEngine Dev Team' />
				20	<meta name='description' content='CodeIgniter User Guide' />
				21
				22	</head>
				23	<body>
				24
				25	<!-- START NAVIGATION -->
				26	<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
Greg Aker	c1ce1ce	2010-11-09 14:27:06 -0600	[diff] [blame]	27	<div id="nav2"><a name="top"></a><a href="javascript:void(0);" onclick="myHeight.toggle();"><img src="../images/nav_toggle_darker.jpg" width="153" height="44" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div>
Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	28	<div id="masthead">
				29	<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
				30	<tr>
Pascal Kriete	1f62229	2011-04-07 12:06:51 -0400	[diff] [blame^]	31	<td><h1>CodeIgniter User Guide Version 2.0.2</h1></td>
Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	32	<td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
				33	</tr>
				34	</table>
				35	</div>
				36	<!-- END NAVIGATION -->
				37
				38
				39	<!-- START BREADCRUMB -->
				40	<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
				41	<tr>
				42	<td id="breadcrumb">
				43	<a href="http://codeigniter.com/">CodeIgniter Home</a>  ›
				44	<a href="../index.html">User Guide Home</a>  ›
Eric Barnes	d91d0f7	2011-01-30 20:47:42 -0500	[diff] [blame]	45	<a href="../general/drivers.html">Drivers</a>  ›
				46	JavaScript Driver
Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	47	</td>
				48	<td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="codeigniter.com/user_guide/" />Search User Guide  <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" /> <input type="submit" class="submit" name="sa" value="Go" /></form></td>
				49	</tr>
				50	</table>
				51	<!-- END BREADCRUMB -->
				52
				53	<br clear="all" />
				54
				55
				56	<!-- START CONTENT -->
				57	<div id="content">
				58
Pascal Kriete	3b405bf	2011-01-28 14:30:50 -0500	[diff] [blame]	59	<p class="important"><strong>Note:</strong> This driver is experimental. Its feature set and implementation may change in future releases.</p><br>
Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	60
				61	<h1>Javascript Class</h1>
Derek Jones	a898fb5	2011-01-28 14:09:14 -0600	[diff] [blame]	62	<p>CodeIgniter provides a library to help you with certain common functions that you may want to use with Javascript. Please note that CodeIgniter does not require the jQuery library to run, and that any scripting library will work equally well. The jQuery library is simply presented as a convenience if you choose to use it.</p>
Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	63	<h2>Initializing the Class</h2>
Derek Jones	a898fb5	2011-01-28 14:09:14 -0600	[diff] [blame]	64	<p>To initialize the Javascript class manually in your controller constructor, use the <dfn>$this->load->library</dfn> function. Currently, the only available library is jQuery, which will automatically be loaded like this:</p>
Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	65
				66	<code>$this->load->library('javascript');</code>
				67
				68	<p>The Javascript class also accepts parameters, <dfn>js_library_driver (string) default 'jquery'</dfn> and <dfn>autoload (bool) default TRUE</dfn>. You may override the defaults if you wish by sending an associative array:</p>
				69
				70	<code>$this->load->library('javascript', array('js_library_driver' => 'scripto', 'autoload' => FALSE));</code>
				71
				72	<p>Again, presently only 'jquery' is available. You may wish to set <dfn>autoload</dfn> to FALSE, though, if you do not want the jQuery library to automatically include a script tag for the main jQuery script file. This is useful if you are loading it from a location outside of CodeIgniter, or already have the script tag in your markup.</p>
				73
				74	<p>Once loaded, the jQuery library object will be available using: <dfn>$this->javascript</dfn></p>
				75	<h2>Setup and Configuration</h2>
				76	<h3>Set these variables in your view</h3>
Derek Jones	a898fb5	2011-01-28 14:09:14 -0600	[diff] [blame]	77	<p>As a Javascript library, your files must be available to your application.</p>
				78	<p>As Javascript is a client side language, the library must be able to write content into your final output. This generally means a view. You'll need to include the following variables in the <head> sections of your output.</p>
Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	79	<p><code><?php echo $library_src;?><br />
				80	<?php echo $script_head;?>
				81	</code></p>
				82	<p>$library_src, is where the actual library file will be loaded, as well as any subsequent plugin script calls; $script_head is where specific events, functions and other commands will be rendered.</p>
				83	<h3>Set the path to the librarys with config items</h3>
Derek Jones	a898fb5	2011-01-28 14:09:14 -0600	[diff] [blame]	84	<p>There are some configuration items in Javascript library. These can either be set in application/config.php, within its own config/javascript.php file, or within any controller usings the set_item() function. </p>
Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	85	<p>An image to be used as an "ajax loader", or progress indicator. Without one, the simple text message of "loading" will appear when Ajax calls need to be made.</p>
Eric Barnes	d91d0f7	2011-01-30 20:47:42 -0500	[diff] [blame]	86	<p><code>$config['javascript_location'] = 'http://localhost/codeigniter/themes/js/jquery/';<br />
Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	87	$config['javascript_ajax_img'] = 'images/ajax-loader.gif';</code></p>
				88	<p>If you keep your files in the same directories they were downloaded from, then you need not set this configuration items.</p>
Derek Jones	1cf1149	2010-03-11 09:39:11 -0600	[diff] [blame]	89
Derek Jones	a898fb5	2011-01-28 14:09:14 -0600	[diff] [blame]	90	<h2>The jQuery Class</h2>
				91
				92	<p>To initialize the jQuery class manually in your controller constructor, use the <dfn>$this->load->library</dfn> function:</p>
				93
				94	<code>$this->load->library('jquery');</code>
				95
				96	<p>You may send an optional parameter to determine whether or not a script tag for the main jQuery file will be automatically included when loading the library. It will be created by default. To prevent this, load the library as follows:</p>
				97
				98	<code>$this->load->library('jquery', FALSE);</code>
				99
				100	<p>Once loaded, the jQuery library object will be available using: <dfn>$this->jquery</dfn></p>
				101
				102	<h2>jQuery Events</h2>
				103
				104	<p>Events are set using the following syntax.</p>
				105
				106	<p><code>$this->jquery->event('element_path', code_to_run());</code></p>
				107
				108	<p>In the above example:</p>
				109
				110	<ul>
				111	<li>"event" is any of blur, change, click, dblclick, error, focus, hover, keydown, keyup, load, mousedown, mouseup, mouseover, mouseup, resize, scroll, or unload.</li>
				112	<li>"element_path" is any valid <a href="http://docs.jquery.com/Selectors">jQuery selector</a>. Due to jQuery's unique selector syntax, this is usually an element id, or CSS selector. For example "#notice_area" would effect <div id="notice_area">, and "#content a.notice" would effect all anchors with a class of "notice" in the div with id "content".</li>
				113	<li>"code_to_run()" is script your write yourself, or an action such as an effect from the jQuery library below.</li>
				114	</ul>
				115
				116	<h2>Effects</h2>
				117
				118	<p>The query library supports a powerful <a href="http://docs.jquery.com/Effects">Effects</a> repertoire. Before an effect can be used, it must be loaded:</p>
				119
				120	<p><code>$this->jquery->effect([optional path] plugin name);
				121	// for example
				122	$this->jquery->effect('bounce');
				123	</code></p>
				124
				125	<h3>hide() / show()</h3>
				126
				127	<p>Each of this functions will affect the visibility of an item on your page. hide() will set an item invisible, show() will reveal it.</p>
				128	<p><code>$this->jquery->hide(target, optional speed, optional extra information);<br />
				129	$this->jquery->show(target, optional speed, optional extra information);</code></p>
				130
				131	<ul>
				132	<li>"target" will be any valid jQuery selector or selectors.</li>
				133	<li>"speed" is optional, and is set to either slow, normal, fast, or alternatively a number of milliseconds.</li>
				134	<li>"extra information" is optional, and could include a callback, or other additional information.</li>
				135	</ul>
				136
				137	<h3>toggle()</h3>
				138
				139	<p>toggle() will change the visibility of an item to the opposite of its current state, hiding visible elements, and revealing hidden ones.</p>
				140	<p><code>$this->jquery->toggle(target);</code></p>
				141	<ul>
				142	<li>"target" will be any valid jQuery selector or selectors.</li>
				143	</ul>
				144
				145	<h3>animate()</h3>
				146
				147	<p><code> $this->jquery->animate(target, parameters, optional speed, optional extra information);</code></p>
				148	<ul>
				149	<li>"target" will be any valid jQuery selector or selectors.</li>
Phil Sturgeon	2e1f180	2011-04-02 12:11:21 +0100	[diff] [blame]	150	<li>"parameters" in jQuery would generally include a series of CSS properties that you wish to change.</li>
Derek Jones	a898fb5	2011-01-28 14:09:14 -0600	[diff] [blame]	151	<li>"speed" is optional, and is set to either slow, normal, fast, or alternatively a number of milliseconds.</li>
				152	<li>"extra information" is optional, and could include a callback, or other additional information.</li>
				153	</ul>
				154	<p>For a full summary, see <a href="http://docs.jquery.com/Effects/animate">http://docs.jquery.com/Effects/animate</a></p>
				155	<p>Here is an example of an animate() called on a div with an id of "note", and triggered by a click using the jQuery library's click() event.</p>
				156	<p><code> $params = array(<br />
				157	'height' => 80,<br />
				158	'width' => '50%',<br />
				159	'marginLeft' => 125<br />
				160	);<br />
				161	$this->jquery->click('#trigger', $this->jquery->animate('#note', $params, normal));</code></p>
				162
				163	<h3>fadeIn() / fadeOut()</h3>
				164
				165	<p><code>$this->jquery->fadeIn(target, optional speed, optional extra information);<br />
				166	$this->jquery->fadeOut(target, optional speed, optional extra information);</code></p>
				167	<ul>
				168	<li>"target" will be any valid jQuery selector or selectors.</li>
				169	<li>"speed" is optional, and is set to either slow, normal, fast, or alternatively a number of milliseconds.</li>
				170	<li>"extra information" is optional, and could include a callback, or other additional information.</li>
				171	</ul>
				172
				173	<h3>toggleClass()</h3>
				174
				175	<p>This function will add or remove a CSS class to its target.</p>
				176	<p><code>$this->jquery->toggleClass(target, class)</code></p>
				177	<ul>
				178	<li>"target" will be any valid jQuery selector or selectors.</li>
				179	<li>"class" is any CSS classname. Note that this class must be defined and available in a CSS that is already loaded.</li>
				180	</ul>
				181
				182	<h3>fadeIn() / fadeOut()</h3>
				183
				184	<p>These effects cause an element(s) to disappear or reappear over time.</p>
				185	<p><code>$this->jquery->fadeIn(target, optional speed, optional extra information);<br />
				186	$this->jquery->fadeOut(target, optional speed, optional extra information);</code></p>
				187	<ul>
				188	<li>"target" will be any valid jQuery selector or selectors.</li>
				189	<li>"speed" is optional, and is set to either slow, normal, fast, or alternatively a number of milliseconds.</li>
				190	<li>"extra information" is optional, and could include a callback, or other additional information.</li>
				191	</ul>
				192
				193	<h3>slideUp() / slideDown() / slideToggle()</h3>
				194
				195	<p>These effects cause an element(s) to slide.</p>
				196	<p><code>$this->jquery->slideUp(target, optional speed, optional extra information);<br />
				197	$this->jquery->slideDown(target, optional speed, optional extra information);<br />
				198	$this->jquery->slideToggle(target, optional speed, optional extra information);</code></p>
				199	<ul>
				200	<li>"target" will be any valid jQuery selector or selectors.</li>
				201	<li>"speed" is optional, and is set to either slow, normal, fast, or alternatively a number of milliseconds.</li>
				202	<li>"extra information" is optional, and could include a callback, or other additional information.</li>
				203	</ul>
				204
				205	<h2>Plugins</h2>
				206
				207	<p>
				208
				209	<p>Some select jQuery plugins are made available using this library.</p>
				210
				211	<h3>corner()</h3>
				212	<p>Used to add distinct corners to page elements. For full details see <a href="http://www.malsup.com/jquery/corner/">http://www.malsup.com/jquery/corner/</a></p>
				213	<p><code>$this->jquery->corner(target, corner_style);</code></p>
				214	<ul>
				215	<li>"target" will be any valid jQuery selector or selectors.</li>
				216	<li>"corner_style" is optional, and can be set to any valid style such as round, sharp, bevel, bite, dog, etc. Individual corners can be set by following the style with a space and using "tl" (top left), "tr" (top right), "bl" (bottom left), or "br" (bottom right).</li>
				217	</ul>
				218	<p><code>$this->jquery->corner("#note", "cool tl br");</code></p>
				219
				220	<h3>tablesorter()</h3>
				221
				222	<p>description to come</p>
				223
				224	<h3>modal()</h3>
				225
				226	<p>description to come</p>
				227
				228	<h3>calendar()</h3>
				229
				230	<p>description to come</p>
				231
Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	232	</div>
				233	<!-- END CONTENT -->
				234
				235
				236	<div id="footer">
				237	<p>
				238	Previous Topic:  <a href="input.html">Input Class</a>
				239	·
				240	<a href="#top">Top of Page</a>   ·
				241	<a href="../index.html">User Guide Home</a>   ·
				242	Next Topic:  <a href="language.html">Language Class</a></p>
Derek Jones	898949f	2011-01-28 07:42:16 -0600	[diff] [blame]	243	<p><a href="http://codeigniter.com">CodeIgniter</a>  ·  Copyright © 2006 - 2011  ·  <a href="http://ellislab.com/">EllisLab, Inc.</a></p>
Derek Jones	b8354c1	2010-03-05 12:47:30 -0600	[diff] [blame]	244	</div>
				245
				246	</body>
Phil Sturgeon	33ed0f3	2011-02-16 19:03:49 +0000	[diff] [blame]	247	</html>