Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Editable: Added select editor.

  • Loading branch information...
commit 2a961f5f0c0759e2fdbbeabd5b5539213b168014 1 parent c7cc36b
Rafael Xavier de Souza authored December 07, 2011
177  demos/editable/editors.html
@@ -31,7 +31,7 @@
31 31
 			}
32 32
 		});
33 33
 		$( "#datepicker" ).editable({
34  
-			// Set an editor while passing custom options to it
  34
+			// Setting a different editor with custom options
35 35
 			editor: {
36 36
 				datepicker: {
37 37
 					changeMonth: true,
@@ -40,6 +40,14 @@
40 40
 			},
41 41
 			placeholder: "Datepicker"
42 42
 		});
  43
+		$( "#select" ).editable({
  44
+			editor: {
  45
+				select: {
  46
+					source: languages
  47
+				}
  48
+			},
  49
+			placeholder: "Select"
  50
+		});
43 51
 
44 52
 		$( "#start-all" )
45 53
 			.button()
@@ -58,6 +66,169 @@
58 66
 			});
59 67
 	});
60 68
 	</script>
  69
+
  70
+	<script>
  71
+languages = [
  72
+	"Use browser's default",
  73
+	{value: "af", label: "Afrikaans"},
  74
+	{value: "sq", label: "Albanian"},
  75
+	{value: "ar-dz", label: "Arabic (Algeria)"},
  76
+	{value: "ar", label: "Arabic"},
  77
+	{value: "ar-bh", label: "Arabic (Bahrain)"},
  78
+	{value: "ar-eg", label: "Arabic (Egypt)"},
  79
+	{value: "ar-iq", label: "Arabic (Iraq)"},
  80
+	{value: "ar-jo", label: "Arabic (Jordan)"},
  81
+	{value: "ar-kw", label: "Arabic (Kuwait)"},
  82
+	{value: "ar-lb", label: "Arabic (Lebanon)"},
  83
+	{value: "ar-ly", label: "Arabic (libya)"},
  84
+	{value: "ar-ma", label: "Arabic (Morocco)"},
  85
+	{value: "ar-om", label: "Arabic (Oman)"},
  86
+	{value: "ar-qa", label: "Arabic (Qatar)"},
  87
+	{value: "ar-sa", label: "Arabic (Saudi Arabia)"},
  88
+	{value: "ar-sy", label: "Arabic (Syria)"},
  89
+	{value: "ar-tn", label: "Arabic (Tunisia)"},
  90
+	{value: "ar-ae", label: "Arabic (U.A.E.)"},
  91
+	{value: "ar-ye", label: "Arabic (Yemen)"},
  92
+	{value: "hy", label: "Armenian"},
  93
+	{value: "as", label: "Assamese"},
  94
+	{value: "az", label: "Azeri (Cyrillic)"},
  95
+	{value: "az", label: "Azeri (Latin)"},
  96
+	{value: "eu", label: "Basque"},
  97
+	{value: "be", label: "Belarusian"},
  98
+	{value: "bn", label: "Bengali"},
  99
+	{value: "bg", label: "Bulgarian"},
  100
+	{value: "ca", label: "Catalan"},
  101
+	{value: "cs", label: "Chech"},
  102
+	{value: "zh-cn", label: "Chinese (China)"},
  103
+	{value: "zh-hk", label: "Chinese (Hong Kong SAR)"},
  104
+	{value: "zh-mo", label: "Chinese (Macau SAR)"},
  105
+	{value: "zh-sg", label: "Chinese (Singapore)"},
  106
+	{value: "zh-tw", label: "Chinese (Taiwan)"},
  107
+	{value: "zh", label: "Chinese"},
  108
+	{value: "hr", label: "Croatian"},
  109
+	{value: "da", label: "Danish"},
  110
+	{value: "div", label: "Divehi"},
  111
+	{value: "nl-be", label: "Dutch (Belgium)"},
  112
+	{value: "nl", label: "Dutch (Netherlands)"},
  113
+	{value: "en-au", label: "English (Australia)"},
  114
+	{value: "en-bz", label: "English (Belize)"},
  115
+	{value: "en-ca", label: "English (Canada)"},
  116
+	{value: "en", label: "English (Caribbean)"},
  117
+	{value: "en", label: "English"},
  118
+	{value: "en-ie", label: "English (Ireland)"},
  119
+	{value: "en-jm", label: "English (Jamaica)"},
  120
+	{value: "en-nz", label: "English (New Zealand)"},
  121
+	{value: "en-ph", label: "English (Philippines)"},
  122
+	{value: "en-za", label: "English (South Africa)"},
  123
+	{value: "en-tt", label: "English (Trinidad)"},
  124
+	{value: "en-gb", label: "English (United Kingdom)"},
  125
+	{value: "en-us", label: "English (United States)"},
  126
+	{value: "en-zw", label: "English (Zimbabwe)"},
  127
+	{value: "et", label: "Estonian"},
  128
+	{value: "fo", label: "Faeroese"},
  129
+	{value: "fa", label: "Farsi"},
  130
+	{value: "fi", label: "Finnish"},
  131
+	{value: "fr-be", label: "French (Belgium)"},
  132
+	{value: "fr-ca", label: "French (Canada)"},
  133
+	{value: "fr", label: "French (France)"},
  134
+	{value: "fr-lu", label: "French (Luxembourg)"},
  135
+	{value: "fr-mc", label: "French (Monaco)"},
  136
+	{value: "fr-ch", label: "French (Switzerland)"},
  137
+	{value: "mk", label: "FYRO Macedonian"},
  138
+	{value: "gd", label: "Gaelic"},
  139
+	{value: "ka", label: "Georgian"},
  140
+	{value: "de-at", label: "German (Austria)"},
  141
+	{value: "de", label: "German (Germany)"},
  142
+	{value: "de-lu", label: "German (lexumbourg)"},
  143
+	{value: "de-li", label: "German (Liechtenstein)"},
  144
+	{value: "de-ch", label: "German (Switzerland)"},
  145
+	{value: "el", label: "Greek"},
  146
+	{value: "gu", label: "Gujarati"},
  147
+	{value: "he", label: "Hebrew"},
  148
+	{value: "hi", label: "Hindi"},
  149
+	{value: "hu", label: "Hungarian"},
  150
+	{value: "is", label: "Icelandic"},
  151
+	{value: "id", label: "Indonesian"},
  152
+	{value: "it", label: "Italian (Italy)"},
  153
+	{value: "it-ch", label: "Italian (Switzerland)"},
  154
+	{value: "ja", label: "Japanese"},
  155
+	{value: "kn", label: "Kannada"},
  156
+	{value: "kk", label: "Kazakh"},
  157
+	{value: "kok", label: "Konkani"},
  158
+	{value: "ko", label: "Korean"},
  159
+	{value: "kz", label: "Kyrgyz"},
  160
+	{value: "lv", label: "Latvian"},
  161
+	{value: "lt", label: "Lithuanian"},
  162
+	{value: "ml", label: "Malayalam"},
  163
+	{value: "ms", label: "Malay (Brunei)"},
  164
+	{value: "ms", label: "Malay (Malaysia)"},
  165
+	{value: "mt", label: "Maltese"},
  166
+	{value: "mr", label: "Marathi"},
  167
+	{value: "mn", label: "Mongolian (Cyrillic)"},
  168
+	{value: "ne", label: "Nepali (India)"},
  169
+	{value: "nb-no", label: "Norwegian (Bokmal)"},
  170
+	{value: "no", label: "Norwegian (Bokmal)"},
  171
+	{value: "nn-no", label: "Norwegian (Nynorsk)"},
  172
+	{value: "or", label: "Oriya"},
  173
+	{value: "pl", label: "Polish"},
  174
+	{value: "pt-br", label: "Portuguese (Brazil)"},
  175
+	{value: "pt", label: "Portuguese (Portugal)"},
  176
+	{value: "pa", label: "Punjabi"},
  177
+	{value: "rm", label: "Rhaeto-Romanic"},
  178
+	{value: "ro-md", label: "Romanian (Moldova)"},
  179
+	{value: "ro", label: "Romanian"},
  180
+	{value: "ru-md", label: "Russian (Moldova)"},
  181
+	{value: "ru", label: "Russian"},
  182
+	{value: "sa", label: "Sanskrit"},
  183
+	{value: "sr", label: "Serbian (Cyrillic)"},
  184
+	{value: "sr", label: "Serbian (Latin)"},
  185
+	{value: "sk", label: "Slovak"},
  186
+	{value: "ls", label: "Slovenian"},
  187
+	{value: "sb", label: "Sorbian"},
  188
+	{value: "es-ar", label: "Spanish (Argentina)"},
  189
+	{value: "es-bo", label: "Spanish (Bolivia)"},
  190
+	{value: "es-cl", label: "Spanish (Chile)"},
  191
+	{value: "es-co", label: "Spanish (Colombia)"},
  192
+	{value: "es-cr", label: "Spanish (Costa Rica)"},
  193
+	{value: "es-do", label: "Spanish (Dominican Republic)"},
  194
+	{value: "es-ec", label: "Spanish (Ecuador)"},
  195
+	{value: "es-sv", label: "Spanish (El Salvador)"},
  196
+	{value: "es-gt", label: "Spanish (Guatemala)"},
  197
+	{value: "es-hn", label: "Spanish (Honduras)"},
  198
+	{value: "es", label: "Spanish (International Sort)"},
  199
+	{value: "es-mx", label: "Spanish (Mexico)"},
  200
+	{value: "es-ni", label: "Spanish (Nicaragua)"},
  201
+	{value: "es-pa", label: "Spanish (Panama)"},
  202
+	{value: "es-py", label: "Spanish (Paraguay)"},
  203
+	{value: "es-pe", label: "Spanish (Peru)"},
  204
+	{value: "es-pr", label: "Spanish (Puerto Rico)"},
  205
+	{value: "es", label: "Spanish (Traditional Sort)"},
  206
+	{value: "es-us", label: "Spanish (United States)"},
  207
+	{value: "es-uy", label: "Spanish (Uruguay)"},
  208
+	{value: "es-ve", label: "Spanish (Venezuela)"},
  209
+	{value: "sx", label: "Sutu"},
  210
+	{value: "sw", label: "Swahili"},
  211
+	{value: "sv-fi", label: "Swedish (Finland)"},
  212
+	{value: "sv", label: "Swedish"},
  213
+	{value: "syr", label: "Syriac"},
  214
+	{value: "ta", label: "Tamil"},
  215
+	{value: "tt", label: "Tatar"},
  216
+	{value: "te", label: "Telugu"},
  217
+	{value: "th", label: "Thai"},
  218
+	{value: "ts", label: "Tsonga"},
  219
+	{value: "tn", label: "Tswana"},
  220
+	{value: "tr", label: "Turkish"},
  221
+	{value: "uk", label: "Ukrainian"},
  222
+	{value: "ur", label: "Urdu"},
  223
+	{value: "uz", label: "Uzbek (Cyrillic)"},
  224
+	{value: "uz", label: "Uzbek (Latin)"},
  225
+	{value: "vi", label: "Vietnamese"},
  226
+	{value: "xh", label: "Xhosa"},
  227
+	{value: "yi", label: "Yiddish"},
  228
+	{value: "zu ", label: "Zulu"}
  229
+];
  230
+	</script>
  231
+
61 232
 </head>
62 233
 <body>
63 234
 
@@ -79,6 +250,10 @@
79 250
 <span class="sample" id="datepicker"></span>
80 251
 </p>
81 252
 
  253
+<p>
  254
+<span class="sample" id="select"></span>
  255
+</p>
  256
+
82 257
 </div><!-- End demo -->
83 258
 
84 259
 
46  ui/jquery.ui.editable.js
@@ -317,7 +317,51 @@ $.ui.editable.editors = {
317 317
 			return $( "textarea", editable.element ).val().replace(/\r\n|\r|\n/g, "<br/>");
318 318
 		}
319 319
 	},
320  
-	select: $.noop,
  320
+	select: {
  321
+		element: function( editable ) {
  322
+			return $( "<select></select>" )
  323
+				.append( $.ui.editable.editors.select.content( editable ) )
  324
+				.addClass( inputClass );
  325
+		},
  326
+		content: function( editable ) {
  327
+			var option, selected, options = $([]);
  328
+			$.each( editable._editorOptions.source, function( key, value ) {
  329
+				if ( typeof value === "string" ) {
  330
+					option = $( "<option></option>" ).html( value );
  331
+					selected = editable.value() == value;
  332
+				}
  333
+				else if ( typeof value === "object" && value.value && value.label ) {
  334
+					option = $( "<option></option>" )
  335
+						.val( value.value )
  336
+						.html( value.label );
  337
+					selected = editable.value() == value.value;
  338
+				}
  339
+				else {
  340
+					throw "jQuery UI Editable: \"" + value + "\" is an invalid select source item.";
  341
+					return true;	// continue
  342
+				}
  343
+				if ( selected ) {
  344
+					option.attr( "selected", true );
  345
+				}
  346
+				options = $.merge(options, option);
  347
+			});
  348
+			return options;
  349
+		},
  350
+		bind: function( editable ) {
  351
+			var self = editable;
  352
+			$( "select", editable.element )
  353
+				.focus( function() {
  354
+					self.frame.addClass( activeStateClass );
  355
+				})
  356
+				.blur( function() {
  357
+					self.frame.removeClass( activeStateClass );
  358
+				})
  359
+				.focus();
  360
+		},
  361
+		value: function( editable ) {
  362
+			return $( "select", editable.element ).val();
  363
+		}
  364
+	},
321 365
 	spinner: $.noop,
322 366
 	datepicker: {
323 367
 		element: function( editable ) {

0 notes on commit 2a961f5

Please sign in to comment.
Something went wrong with that request. Please try again.