root / docs / www / colonyscout / internal / jeditable / custom.html @ f59acf11
History | View | Annotate | Download (7.6 KB)
1 |
<?php
|
---|---|
2 |
|
3 |
/* $Id$ */
|
4 |
|
5 |
/* No hardoced URL's in examples. Just copy the folder to server. */
|
6 |
$folder = str_replace(basename($_SERVER['PHP_SELF']), '', $_SERVER['PHP_SELF']);
|
7 |
$url = sprintf('http://%s%s%s/', $_SERVER['SERVER_NAME'], $folder, 'php');
|
8 |
|
9 |
?>
|
10 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
11 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
12 |
|
13 |
<head>
|
14 |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
15 |
<title>Jeditable Custom Input Types Demo</title> |
16 |
<meta name="generator" content="Mephisto" /> |
17 |
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" /> |
18 |
<link rel="stylesheet" type="text/css" href="css/datePicker.css" media="screen" /> |
19 |
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" /> |
20 |
<script src="/mint/?js" type="text/javascript"></script> |
21 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script> |
22 |
|
23 |
<script src="jquery.jeditable.js" type="text/javascript"></script> |
24 |
<script src="jquery.jeditable.autogrow.js" type="text/javascript" ></script> |
25 |
<script src="jquery.jeditable.ajaxupload.js" type="text/javascript" ></script> |
26 |
<script src="jquery.jeditable.masked.js" type="text/javascript" ></script> |
27 |
<script src="jquery.jeditable.time.js" type="text/javascript" ></script> |
28 |
<script src="jquery.jeditable.timepicker.js" type="text/javascript" ></script> |
29 |
<script src="jquery.jeditable.datepicker.js" type="text/javascript" ></script> |
30 |
<script src="jquery.jeditable.charcounter.js" type="text/javascript" ></script> |
31 |
|
32 |
<script type="text/javascript" src="js/jquery.maskedinput.js"></script> |
33 |
<script type="text/javascript" src="js/jquery.timepicker.js"></script> |
34 |
<script type="text/javascript" src="js/jquery.autogrow.js"></script> |
35 |
<script type="text/javascript" src="js/jquery.charcounter.js"></script> |
36 |
|
37 |
<script type="text/javascript" src="js/date.js"></script> |
38 |
<!--
|
39 |
<script type="text/javascript" src="js/jquery.bgigframe.js"></script>
|
40 |
-->
|
41 |
<script type="text/javascript" src="js/jquery.dimensions.js"></script> |
42 |
<script type="text/javascript" src="js/jquery.datePicker.js"></script> |
43 |
|
44 |
<script type="text/javascript" src="js/jquery.ajaxfileupload.js"></script> |
45 |
|
46 |
|
47 |
<script type="text/javascript" charset="utf-8"> |
48 |
// <![CDATA[
|
49 |
$(document).ready(function() {
|
50 |
$(".charcounter").editable("<?php print $url ?>save.php", {
|
51 |
indicator : "<img src='img/indicator.gif'>",
|
52 |
type : "charcounter",
|
53 |
submit : 'OK',
|
54 |
tooltip : "Click to edit...",
|
55 |
onblur : "ignore",
|
56 |
charcounter : {
|
57 |
characters : 60
|
58 |
}
|
59 |
});
|
60 |
$(".autogrow").editable("<?php print $url ?>save.php", {
|
61 |
indicator : "<img src='img/indicator.gif'>",
|
62 |
type : "autogrow",
|
63 |
submit : 'OK',
|
64 |
cancel : 'cancel',
|
65 |
tooltip : "Click to edit...",
|
66 |
onblur : "ignore",
|
67 |
autogrow : {
|
68 |
lineHeight : 16,
|
69 |
minHeight : 32
|
70 |
}
|
71 |
});
|
72 |
$(".masked").editable("<?php print $url ?>save.php", {
|
73 |
indicator : "<img src='img/indicator.gif'>",
|
74 |
type : "masked",
|
75 |
mask : "99/99/9999",
|
76 |
submit : 'OK',
|
77 |
tooltip : "Click to edit..."
|
78 |
});
|
79 |
$(".datepicker").editable("<?php print $url ?>save.php", {
|
80 |
indicator : "<img src='img/indicator.gif'>",
|
81 |
type : 'datepicker',
|
82 |
tooltip : "Click to edit..."
|
83 |
});
|
84 |
$(".timepicker").editable("<?php print $url ?>save.php", {
|
85 |
indicator : "<img src='img/indicator.gif'>",
|
86 |
type : 'timepicker',
|
87 |
submit : 'OK',
|
88 |
tooltip : "Click to edit..."
|
89 |
});
|
90 |
$(".time").editable("<?php print $url ?>save.php", {
|
91 |
indicator : "<img src='img/indicator.gif'>",
|
92 |
type : 'time',
|
93 |
submit : 'OK',
|
94 |
tooltip : "Click to edit..."
|
95 |
});
|
96 |
$(".ajaxupload").editable("<?php print $url ?>upload.php", {
|
97 |
indicator : "<img src='img/indicator.gif'>",
|
98 |
type : 'ajaxupload',
|
99 |
submit : 'Upload',
|
100 |
cancel : 'Cancel',
|
101 |
tooltip : "Click to upload..."
|
102 |
});
|
103 |
});
|
104 |
// ]]>
|
105 |
</script>
|
106 |
<style type="text/css"> |
107 |
|
108 |
textarea {
|
109 |
line-height: 16px;
|
110 |
}
|
111 |
|
112 |
#sidebar {
|
113 |
width: 0px;
|
114 |
}
|
115 |
|
116 |
#content {
|
117 |
width: 770px;
|
118 |
}
|
119 |
|
120 |
div.entry {
|
121 |
width: 385px;
|
122 |
float: left;
|
123 |
}
|
124 |
|
125 |
</style>
|
126 |
|
127 |
</head>
|
128 |
|
129 |
<body>
|
130 |
<div id="wrap"> |
131 |
<div id="header"> |
132 |
<p>
|
133 |
<h1>Jeditable</h1><br /> |
134 |
<small>Edit in place plugin for jQuery.</small> |
135 |
<ul id="nav"> |
136 |
<li id="first"><a href="/" class="active">weblog</a></li> |
137 |
<li><a href="/projects" class="last">projects</a></li> |
138 |
<!--
|
139 |
<li><a href="/cv" class="last">cv</a></li>
|
140 |
-->
|
141 |
</ul>
|
142 |
</p>
|
143 |
</div>
|
144 |
<div id="content"> |
145 |
|
146 |
<p>You might also want to check <a href="default.html">default inputs demo</a>. |
147 |
|
148 |
<div class="entry"> |
149 |
|
150 |
|
151 |
<h2>Autogrow textarea</h2> |
152 |
<p class="autogrow" style="width: 300px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> |
153 |
<p>Depends on
|
154 |
<a href="http://plugins.jquery.com/project/autogrow">Autogrow</a> |
155 |
by Chrys Bader.</p>
|
156 |
|
157 |
</div>
|
158 |
|
159 |
<div class="entry"> |
160 |
<h2>Ajax File Upload</h2> |
161 |
<p class="ajaxupload" id="custom_6"><?php print file_get_contents($url . 'load.php?id=custom_6') ?></p> |
162 |
<p>
|
163 |
Fileupload which uses <a href="http://www.phpletter.com/Our-Projects/AjaxFileUpload/">Ajax File Upload</a> plugin. |
164 |
For security reasons after uploading this demo only display file size and name. |
165 |
<br/> |
166 |
<br/> |
167 |
<br/> |
168 |
</p>
|
169 |
</div>
|
170 |
|
171 |
|
172 |
<div class="entry"> |
173 |
|
174 |
<h2>Masked Input</h2> |
175 |
<p class="masked" id="custom_1"><?php print file_get_contents($url . 'load.php?id=custom_1') ?></p> |
176 |
<p>Depends on
|
177 |
<a href="http://digitalbush.com/projects/masked-input-plugin">Masked Input</a> by Josh Bush. |
178 |
</p>
|
179 |
|
180 |
</div>
|
181 |
<div class="entry"> |
182 |
|
183 |
<h2>Time Picker</h2> |
184 |
<p class="timepicker" id="custom_4"><?php print file_get_contents($url . 'load.php?id=custom_4') ?></p> |
185 |
<p>
|
186 |
Depends on <a href="http://jquery.com/plugins/project/timepicker">Timepicker</a> |
187 |
by Jason Huck. |
188 |
</p>
|
189 |
|
190 |
</div>
|
191 |
<div class="entry"> |
192 |
|
193 |
<h2>Time Picker 2</h2> |
194 |
<p class="time" id="custom_5"><?php print file_get_contents($url . 'load.php?id=custom_5') ?></p> |
195 |
<p>
|
196 |
Similar as previous but without dependenices. See <a href="http://www.appelsiini.net/2008/2/creating-inline-timepicker-with-javascript">how to create inputs tutorial</a>. |
197 |
</p>
|
198 |
|
199 |
</div>
|
200 |
|
201 |
<div class="entry"> |
202 |
|
203 |
<h2>Character counter</h2> |
204 |
<p class="charcounter" id="custom_5"><?php print file_get_contents($url . 'load.php?id=custom_6') ?></p> |
205 |
<p>
|
206 |
Using character counter. |
207 |
</p>
|
208 |
|
209 |
</div>
|
210 |
|
211 |
<!--
|
212 |
<div class="entry">
|
213 |
|
214 |
<h2>Date Picker</h2>
|
215 |
<p class="datepicker" id="custom_4"><?php print file_get_contents($url . 'load.php?id=custom_4') ?></p>
|
216 |
<p>
|
217 |
Custom input which uses <a href="http://kelvinluck.com/assets/jquery/datePicker/v2/demo/">Datepicker
|
218 |
Plugin</a> by Kelvin Luck. This input still has some bugs.
|
219 |
</p>
|
220 |
|
221 |
</div>
|
222 |
-->
|
223 |
|
224 |
|
225 |
<div id="sidebar"> |
226 |
</div>
|
227 |
|
228 |
<div id="footer"> |
229 |
</div>
|
230 |
|
231 |
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> |
232 |
<script type="text/javascript"> |
233 |
_uacct = "UA-190966-1";
|
234 |
urchinTracker();
|
235 |
</script>
|
236 |
|
237 |
</body>
|
238 |
</html>
|