colonymech / docs / www / colonyscout / internal / jeditable / custom.html @ f59acf11
History | View | Annotate | Download (7.6 KB)
1 | f59acf11 | Dan Shope | <?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> |