colonymech / docs / www / colonyscout / internal / jeditable / js / jquery.jeditable.inputs.js @ f59acf11
History | View | Annotate | Download (6.39 KB)
1 |
/**
|
---|---|
2 |
* Example custom inputs.
|
3 |
*
|
4 |
*/
|
5 |
|
6 |
/* $Id $ */
|
7 |
|
8 |
/* Needs http://digitalbush.com/projects/masked-input-plugin */
|
9 |
$.editable.addInputType('masked', { |
10 |
/* Create input element. */
|
11 |
element : function(settings, original) { |
12 |
/* Create an input. Mask it using masked input plugin. Settings */
|
13 |
/* for mask were passed with jEditable settings hash. Remember */
|
14 |
/* to return the created input! */
|
15 |
var input = $('<input>').mask(settings.mask); |
16 |
$(this).append(input); |
17 |
return(input);
|
18 |
} |
19 |
}); |
20 |
|
21 |
/* Needs http://jquery.com/plugins/project/timepicker */
|
22 |
$.editable.addInputType('timepicker', { |
23 |
/* This uses default hidden input field. No need for element() function. */
|
24 |
|
25 |
/* Call before submit hook. */
|
26 |
submit: function (settings, original) { |
27 |
/* Collect hour, minute and am/pm from pulldowns. Create a string from */
|
28 |
/* them. Set value of hidden input field to this string. */
|
29 |
var value = $("#h_").val() + ":" + $("#m_").val() + "" + $("#p_").val(); |
30 |
$("input", this).val(value); |
31 |
}, |
32 |
/* Attach Timepicker plugin to the default hidden input element. */
|
33 |
plugin: function(settings, original) { |
34 |
$("input", this).filter(":hidden").timepicker(); |
35 |
} |
36 |
}); |
37 |
|
38 |
$.editable.addInputType('time', { |
39 |
/* Create input element. */
|
40 |
element : function(settings, original) { |
41 |
/* Create and pulldowns for hours and minutes. Append them to */
|
42 |
/* form which is accessible as variable this. */
|
43 |
var hourselect = $('<select id="hour_">'); |
44 |
var minselect = $('<select id="min_">'); |
45 |
|
46 |
for (var hour=1; hour <= 24; hour++) { |
47 |
if (hour < 10) { |
48 |
hour = '0' + hour;
|
49 |
} |
50 |
var option = $('<option>').val(hour).append(hour); |
51 |
hourselect.append(option); |
52 |
} |
53 |
$(this).append(hourselect); |
54 |
|
55 |
for (var min=0; min <= 45; min = parseInt(min)+15) { |
56 |
if (min < 10) { |
57 |
min = '0' + min;
|
58 |
} |
59 |
var option = $('<option>').val(min).append(min); |
60 |
minselect.append(option); |
61 |
} |
62 |
$(this).append(minselect); |
63 |
|
64 |
/* Last create an hidden input. This is returned to plugin. It will */
|
65 |
/* later hold the actual value which will be submitted to server. */
|
66 |
var hidden = $('<input type="hidden">'); |
67 |
$(this).append(hidden); |
68 |
return(hidden);
|
69 |
}, |
70 |
/* Set content / value of previously created input element. */
|
71 |
content : function(string, settings, original) { |
72 |
|
73 |
/* Select correct hour and minute in pulldowns. */
|
74 |
var hour = parseInt(string.substr(0,2)); |
75 |
var min = parseInt(string.substr(3,2)); |
76 |
|
77 |
$("#hour_", this).children().each(function() { |
78 |
if (hour == $(this).val()) { |
79 |
$(this).attr('selected', 'selected'); |
80 |
} |
81 |
}); |
82 |
$("#min_", this).children().each(function() { |
83 |
if (min == $(this).val()) { |
84 |
$(this).attr('selected', 'selected') |
85 |
} |
86 |
}); |
87 |
|
88 |
}, |
89 |
/* Call before submit hook. */
|
90 |
submit: function (settings, original) { |
91 |
/* Take values from hour and minute pulldowns. Create string such as */
|
92 |
/* 13:45 from them. Set value of the hidden input field to this string. */
|
93 |
var value = $("#hour_").val() + ":" + $("#min_").val(); |
94 |
$("input", this).val(value); |
95 |
} |
96 |
}); |
97 |
|
98 |
/* Needs http://kelvinluck.com/assets/jquery/datePicker/v2/demo/ */
|
99 |
$.editable.addInputType('datepicker', { |
100 |
/* create input element */
|
101 |
element : function(settings, original) { |
102 |
var input = $('<input>'); |
103 |
$(this).append(input); |
104 |
//$(input).css('opacity', 0.01);
|
105 |
return(input);
|
106 |
}, |
107 |
/* attach 3rd party plugin to input element */
|
108 |
plugin : function(settings, original) { |
109 |
/* Workaround for missing parentNode in IE */
|
110 |
var form = this; |
111 |
settings.onblur = 'cancel'
|
112 |
$("input", this) |
113 |
.datePicker({createButton:false}) |
114 |
.bind('click', function() { |
115 |
//$(this).blur();
|
116 |
$(this).dpDisplay(); |
117 |
return false; |
118 |
}) |
119 |
.bind('dateSelected', function(e, selectedDate, $td) { |
120 |
$(form).submit();
|
121 |
}) |
122 |
.bind('dpClosed', function(e, selected) { |
123 |
/* TODO: unneseccary calls reset() */
|
124 |
//$(this).blur();
|
125 |
}) |
126 |
.trigger('change')
|
127 |
.click(); |
128 |
} |
129 |
}); |
130 |
|
131 |
$.editable.addInputType('ajaxupload', { |
132 |
/* create input element */
|
133 |
element : function(settings) { |
134 |
settings.onblur = 'ignore';
|
135 |
var input = $('<input type="file" id="upload" name="upload">'); |
136 |
$(this).append(input); |
137 |
return(input);
|
138 |
}, |
139 |
content : function(string, settings, original) { |
140 |
/* do nothing */
|
141 |
}, |
142 |
plugin : function(settings, original) { |
143 |
var form = this; |
144 |
$("input:submit", this) |
145 |
.bind('click', function() { |
146 |
//$(".message").show();
|
147 |
$.ajaxFileUpload({
|
148 |
url: settings.target,
|
149 |
secureuri:false, |
150 |
fileElementId: 'upload', |
151 |
dataType: 'html', |
152 |
success: function (data, status) { |
153 |
$(original).html(data);
|
154 |
original.editing = false;
|
155 |
}, |
156 |
error: function (data, status, e) { |
157 |
alert(e); |
158 |
} |
159 |
}) |
160 |
return(false); |
161 |
}); |
162 |
} |
163 |
}); |
164 |
|
165 |
$.editable.addInputType('john', { |
166 |
element : function(settings, original) { |
167 |
var default_textarea = $.editable.types['textarea'].element |
168 |
var input = default_textarea.apply(this, [settings, original]); |
169 |
return(input);
|
170 |
}, |
171 |
content : function(string, settings, original) { |
172 |
var value = string.replace(/<br[\s\/]?>/gi, '\n'); |
173 |
$(':input:first', this).val(value); |
174 |
}, |
175 |
submit : function(settings, original) { |
176 |
var value = $(':input:first', this).val(); |
177 |
value = value.replace(/\n/gi, '<br/>'); |
178 |
$(':input:first', this).val(value); |
179 |
} |
180 |
|
181 |
}); |
182 |
|
183 |
$.editable.addInputType('threebutton', { |
184 |
buttons : function(settings, original) { |
185 |
/* Call default function to create submit and cancel buttons. */
|
186 |
var default_buttons = $.editable.types['defaults'].buttons |
187 |
default_buttons.apply(this, [settings, original]);
|
188 |
/* Add third button. */
|
189 |
var third = $('<input type="button">'); |
190 |
third.val(settings.third); |
191 |
$(this).append(third); |
192 |
|
193 |
$(third).click(function() { |
194 |
alert("Third button clickced");
|
195 |
}); |
196 |
} |
197 |
}); |
198 |
|