summaryrefslogtreecommitdiffstats
path: root/user_guide/libraries/javascript.html
blob: b5041e5b84922ffb7c09fc5443fbf0735ac660d4 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>CodeIgniter User Guide : Input Class</title>

<style type='text/css' media='all'>@import url('../userguide.css');</style>
<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />

<script type="text/javascript" src="../nav/nav.js"></script>
<script type="text/javascript" src="../nav/prototype.lite.js"></script>
<script type="text/javascript" src="../nav/moo.fx.js"></script>
<script type="text/javascript" src="../nav/user_guide_menu.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv='expires' content='-1' />
<meta http-equiv= 'pragma' content='no-cache' />
<meta name='robots' content='all' />
<meta name='author' content='ExpressionEngine Dev Team' />
<meta name='description' content='CodeIgniter User Guide' />

</head>
<body>

<!-- START NAVIGATION -->
<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
<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>
<div id="masthead">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td><h1>CodeIgniter User Guide Version 2.0.0</h1></td>
<td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
</tr>
</table>
</div>
<!-- END NAVIGATION -->


<!-- START BREADCRUMB -->
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td id="breadcrumb">
<a href="http://codeigniter.com/">CodeIgniter Home</a> &nbsp;&#8250;&nbsp;
<a href="../index.html">User Guide Home</a> &nbsp;&#8250;&nbsp;
Input Class
</td>
<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&nbsp; <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" />&nbsp;<input type="submit" class="submit" name="sa" value="Go" /></form></td>
</tr>
</table>
<!-- END BREADCRUMB -->

<br clear="all" />


<!-- START CONTENT -->
<div id="content">


<h1>Javascript Class</h1>
<p>Rewrite this paragraph: <a href="http://jquery.com/">jQuery</a> is a fast, concise, JavaScript Library that simplifies how you  traverse HTML documents, handle events, perform animations, and add  Ajax interactions to your web pages. CodeIgniter provides a library to help you with certain common functions that you may want to use within jQuery. 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>
<h2>Initializing the Class</h2>
<p>To initialize the jQuery class manually in your controller constructor, use the <dfn>$this-&gt;load-&gt;library</dfn> function. Currently, the only available library is jQuery, which will automatically be loaded like this:</p>

<code>$this-&gt;load-&gt;library('javascript');</code>

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

<code>$this-&gt;load-&gt;library('javascript', array('js_library_driver' =&gt; 'scripto', 'autoload' =&gt; FALSE));</code>

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

<p>Once loaded, the jQuery library object will be available using: <dfn>$this-&gt;javascript</dfn></p>
<h2>Setup and Configuration</h2>
<h3>Set these variables in your view</h3>
<p>As a javascript library, your files must be available to your application. For your convenience, the needed files to run this library are available for <a href="http://codeigniter.com/downloads/">download</a> from our site.</p>
<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 &lt;head&gt; sections of your output.</p>
<p><code>&lt;?php echo $library_src;?&gt;<br />
&lt;?php echo $script_head;?&gt;
</code></p>
<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>
<h3>Set the path to the librarys with config items</h3>
<p>There are some configuration items in javascript library. These can either be set in application/config.php, within its own confg/javascript.php file, or within any controller usings the set_item() function. </p>
<p>An image to be used as an &quot;ajax loader&quot;, or progress indicator. Without one, the simple text message of &quot;loading&quot; will appear when Ajax calls need to be made.</p>
<p><code>$config['javascript_location'] = 'http://localhost/codeigniter/themes/js/jquery/');<br />
		$config['javascript_ajax_img'] = 'images/ajax-loader.gif';</code></p>
<p>If you keep your files in the same directories they were downloaded from, then you need not set this configuration items.</p>

<p>For information on outputting events, effects, etc., refer to the <a href="jquery.html">jQuery Class</a> documentation.</p>
</div>
<!-- END CONTENT -->


<div id="footer">
<p>
Previous Topic:&nbsp;&nbsp;<a href="input.html">Input Class</a>
&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="#top">Top of Page</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="../index.html">User Guide Home</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
Next Topic:&nbsp;&nbsp;<a href="language.html">Language Class</a></p>
<p><a href="http://codeigniter.com">CodeIgniter</a> &nbsp;&middot;&nbsp; Copyright &#169; 2006 - 2011 &nbsp;&middot;&nbsp; <a href="http://ellislab.com/">EllisLab, Inc.</a></p>
</div>

</body>
</html>