Project

General

Profile

Statistics
| Branch: | Revision:

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