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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Code Igniter User Guide</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">
window.onload = function() {
myHeight = new fx.Height('nav', {duration: 400});
myHeight.hide();
}
</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='Rick Ellis' />
<meta name='description' content='Code Igniter 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.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>Code Igniter User Guide Version 1.5.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://www.codeigniter.com/">Code Igniter Home</a> ›
<a href="../index.html">User Guide Home</a> ›
Smiley Helper
</td>
<td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="www.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>
</tr>
</table>
<!-- END BREADCRUMB -->
<br clear="all" />
<!-- START CONTENT -->
<div id="content">
<h1>Smiley Helper</h1>
<p>The Smiley Helper file contains functions that let you manage smileys (emoticons).</p>
<h2>Loading this Helper</h2>
<p>This helper is loaded using the following code:</p>
<code>$this->load->helper('smiley');</code>
<h2>Overview</h2>
<p>The Smiley helper has a renderer that takes plain text simileys, like <dfn>:-)</dfn> and turns
them into a image representation, like <img src="../images/smile.gif" width="19" height="19" border="0" alt="smile!" /></p>
<p>It also lets you display a set of smiley images that when clicked will be inserted into a form field.
For example, if you have a blog that allows user commenting you can show the smileys next to the comment form.
Your users can click a desired smiley and with the help of some JavaScript it will be placed into the form field.</p>
<h2>Clickable Smileys Tutorial</h2>
<p>Here is an example demonstrating how you might create a set of clickable smileys next to a form field. This example
requires that you first download and install the smiley images, then create a controller and the View as described.</p>
<p class="important"><strong>Important:</strong> Before you begin, please <a href="http://www.codeigniter.com/downloads/smileys.zip">download the smiley images</a> and put them in
a publicly accessible place on your server. This helper also assumes you have the smiley replacement array located at
<dfn>application/config/smileys.php</dfn></p>
<h3>The Controller</h3>
<p>In your <dfn>application/controllers/</dfn> folder, create a file called <kbd>smileys.php</kbd> and place the code below in it.</p>
<p><strong>Important:</strong> Change the URL in the <dfn>get_clickable_smileys()</dfn> function below so that it points to
your <dfn>smiley</dfn> folder.</p>
<p>You'll notice that in addition to the smiley helper we are using the <a href="../libraries/table.html">Table Class</a>.</p>
<textarea class="textarea" style="width:100%" cols="50" rows="25">
<?php
class Smileys extends Controller {
function Smileys()
{
parent::Controller();
}
function index()
{
$this->load->helper('smiley');
$this->load->library('table');
$image_array = get_clickable_smileys('http://www.your-site.com/images/smileys/');
$col_array = $this->table->make_columns($image_array, 8);
$data['smiley_table'] = $this->table->generate($col_array);
$this->load->view('smiley_view', $data);
}
}
</textarea>
<p>In your <dfn>application/views/</dfn> folder, create a file called <kbd>smiley_view.php</kbd> and place this code in it:</p>
<textarea class="textarea" style="width:100%" cols="50" rows="20">
<html>
<head>
<title>Smileys</title>
<?php echo js_insert_smiley('blog', 'comments'); ?>
</head>
<body>
<form name="blog">
<textarea name="comments" cols="40" rows="4"></textarea>
</form>
<p>Click to insert a smiley!</p>a
<?php echo $smiley_table; ?>
</body>
</html>
</textarea>
<p>When you have created the above controller and view, load it by visiting <dfn>http://www.your=site.com/index.php/smileys/</dfn></p>
<h1>Function Reference</h1>
<h2>get_clickable_smileys()</h2>
<p>Returns an array containing your smiley images wrapped in a cliackable link. You must supply the URL to your smiley folder
via the first parameter:</p>
<code>$image_array = get_clickable_smileys("http://www.your-site.com/images/smileys/");</code>
<h2>js_insert_smiley()</h2>
<p>Generates the JavaScript that allows the images to be clicked and inserted into a form field.
The first parameter must contain the name of your form, the second parameter must contain the name of the
form field. This function is designed to be placed into the <head> area of your web page.</p>
<code><?php echo js_insert_smiley('blog', 'comments'); ?></code>
<h2>parse_smileys()</h2>
<p>Takes a string of text as input and replaces any contained plain text smileys into the image
equivalent. The first parameter must contain your string, the second must contain the the URL to your smiley folder:</p>
<code>
$str = 'Here are some simileys: :-) ;-)';
$str = parse_smileys($str, "http://www.your-site.com/images/smileys/");
echo $str;
</div>
<!-- END CONTENT -->
<div id="footer">
<p>
Previous Topic: <a href="html_helper.html">HTML Helper</a>
·
<a href="#top">Top of Page</a> ·
<a href="../index.html">User Guide Home</a> ·
Next Topic: <a href="string_helper.html">String Helper</a>
<p>
<p><a href="http://www.codeigniter.com">Code Igniter</a> · Copyright © 2006 · <a href="http://www.pmachine.com">pMachine, Inc.</a></p>
</div>
</body>
</html>
|
