deac/chosen
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Update to latest version of prototype and drop ids from example page.

Browse source
This commit is contained in:
pfiller 2011-07-26 15:19:39 -04:00
parent d99cf46f0c
commit 32a1b719f6
2 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
chosen/chosen.proto.js
View file

@ -28,14 +28,14 @@
this.result_highlighted = null; this.result_highlighted = null;
this.result_single_selected = null; this.result_single_selected = null;
this.choices = 0; this.choices = 0;
this.single_temp = new Template('<a href="#" class="chzn-single"><span>#{default}</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" /></div><ul class="chzn-results"></ul></div>'); this.single_temp = new Template('<a href="javascript:void(0)" class="chzn-single"><span>#{default}</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" /></div><ul class="chzn-results"></ul></div>');
this.multi_temp = new Template('<ul class="chzn-choices"><li class="search-field"><input type="text" value="#{default}" class="default" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>'); this.multi_temp = new Template('<ul class="chzn-choices"><li class="search-field"><input type="text" value="#{default}" class="default" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>');
this.choice_temp = new Template('<li class="search-choice" id="#{id}"><span>#{choice}</span><a href="#" class="search-choice-close" rel="#{position}"></a></li>'); this.choice_temp = new Template('<li class="search-choice" id="#{id}"><span>#{choice}</span><a href="javascript:void(0)" class="search-choice-close" rel="#{position}"></a></li>');
return this.no_results_temp = new Template('<li class="no-results">No results match "<span>#{terms}</span>"</li>'); return this.no_results_temp = new Template('<li class="no-results">No results match "<span>#{terms}</span>"</li>');
}; };
Chosen.prototype.set_up_html = function() { Chosen.prototype.set_up_html = function() {
var base_template, container_props, dd_top, dd_width, sf_width; var base_template, container_props, dd_top, dd_width, sf_width;
this.container_id = this.form_field.id + "_chzn"; this.container_id = this.form_field.identify().replace('.', '_') + "_chzn";
this.f_width = this.form_field.getStyle("width") ? parseInt(this.form_field.getStyle("width"), 10) : this.form_field.getWidth(); this.f_width = this.form_field.getStyle("width") ? parseInt(this.form_field.getStyle("width"), 10) : this.form_field.getWidth();
container_props = { container_props = {
'id': this.container_id, 'id': this.container_id,
@ -188,7 +188,7 @@
return this.search_field.focus(); return this.search_field.focus();
}; };
Chosen.prototype.test_active_click = function(evt) { Chosen.prototype.test_active_click = function(evt) {
if (evt.target.up('#' + this.container.id)) { if (evt.target.up('#' + this.container_id)) {
return this.active_field = true; return this.active_field = true;
} else { } else {
return this.close_field(); return this.close_field();
@ -227,7 +227,7 @@
}; };
Chosen.prototype.result_add_group = function(group) { Chosen.prototype.result_add_group = function(group) {
if (!group.disabled) { if (!group.disabled) {
group.dom_id = this.form_field.id + "chzn_g_" + group.array_index; group.dom_id = this.container_id + "_g_" + group.array_index;
return '<li id="' + group.dom_id + '" class="group-result">' + group.label.escapeHTML() + '</li>'; return '<li id="' + group.dom_id + '" class="group-result">' + group.label.escapeHTML() + '</li>';
} else { } else {
return ""; return "";
@ -236,7 +236,7 @@
Chosen.prototype.result_add_option = function(option) { Chosen.prototype.result_add_option = function(option) {
var classes; var classes;
if (!option.disabled) { if (!option.disabled) {
option.dom_id = this.form_field.id + "chzn_o_" + option.array_index; option.dom_id = this.container_id + "_o_" + option.array_index;
classes = option.selected && this.is_multiple ? [] : ["active-result"]; classes = option.selected && this.is_multiple ? [] : ["active-result"];
if (option.selected) { if (option.selected) {
classes.push("result-selected"); classes.push("result-selected");
@ -361,7 +361,7 @@
}; };
Chosen.prototype.choice_build = function(item) { Chosen.prototype.choice_build = function(item) {
var choice_id, link; var choice_id, link;
choice_id = this.form_field.id + "_chzn_c_" + item.array_index; choice_id = this.container_id + "_c_" + item.array_index;
this.choices += 1; this.choices += 1;
this.search_container.insert({ this.search_container.insert({
before: this.choice_temp.evaluate({ before: this.choice_temp.evaluate({
@ -428,7 +428,7 @@
result_data = this.results_data[pos]; result_data = this.results_data[pos];
result_data.selected = false; result_data.selected = false;
this.form_field.options[result_data.options_index].selected = false; this.form_field.options[result_data.options_index].selected = false;
result = $(this.form_field.id + "chzn_o_" + pos); result = $(this.container_id + "_o_" + pos);
result.removeClassName("result-selected").addClassName("active-result").show(); result.removeClassName("result-selected").addClassName("active-result").show();
this.result_clear_highlight(); this.result_clear_highlight();
this.winnow_results(); this.winnow_results();
@ -762,4 +762,4 @@
return parser.parsed; return parser.parsed;
}; };
root.SelectParser = SelectParser; root.SelectParser = SelectParser;
}).call(this); }).call(this);

12
index.html
View file

@ -293,7 +293,7 @@
</div> </div>
<div> <div>
<em>Into This</em> <em>Into This</em>
<select title="Choose a Country" class="chzn-select" style="width:350px;" tabindex="2" id="single_example"> <select title="Choose a Country" class="chzn-select" style="width:350px;" tabindex="2">
<option value=""></option> <option value=""></option>
<option value="United States">United States</option> <option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option> <option value="United Kingdom">United Kingdom</option>
@ -794,7 +794,7 @@
</div> </div>
<div> <div>
<em>Into This</em> <em>Into This</em>
<select title="Choose a Country" class="chzn-select" multiple style="width:350px;" tabindex="4" id="multi_example"> <select title="Choose a Country" class="chzn-select" multiple style="width:350px;" tabindex="4">
<option value=""></option> <option value=""></option>
<option value="United States">United States</option> <option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option> <option value="United Kingdom">United Kingdom</option>
@ -1047,7 +1047,7 @@
<div class="side-by-side clearfix"> <div class="side-by-side clearfix">
<div> <div>
<em>Single Select with Groups</em> <em>Single Select with Groups</em>
<select id="nfl_team_single" title="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5"> <select title="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
<option value=""></option> <option value=""></option>
<optgroup label="NFC East"> <optgroup label="NFC East">
<option>Dallas Cowboys</option> <option>Dallas Cowboys</option>
@ -1101,7 +1101,7 @@
</div> </div>
<div> <div>
<em>Multiple Select with Groups</em> <em>Multiple Select with Groups</em>
<select id="nfl_team_multi" title="Your Favorite Football Teams" style="width:350px;" class="chzn-select" multiple tabindex="6"> <select title="Your Favorite Football Teams" style="width:350px;" class="chzn-select" multiple tabindex="6">
<option value=""></option> <option value=""></option>
<optgroup label="NFC East"> <optgroup label="NFC East">
<option>Dallas Cowboys</option> <option>Dallas Cowboys</option>
@ -1160,7 +1160,7 @@
<p>Chosen automatically highlights selected options and removes disabled options.</p> <p>Chosen automatically highlights selected options and removes disabled options.</p>
<div> <div>
<em>Single Select</em> <em>Single Select</em>
<select id="bears_single" title="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7"> <select title="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7">
<option value=""></option> <option value=""></option>
<option>American Black Bear</option> <option>American Black Bear</option>
<option>Asiatic Black Bear</option> <option>Asiatic Black Bear</option>
@ -1174,7 +1174,7 @@
</div> </div>
<div> <div>
<em>Multiple Select with Groups</em> <em>Multiple Select with Groups</em>
<select id="bears_multiple" title="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" tabindex="8"> <select title="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" tabindex="8">
<option value=""></option> <option value=""></option>
<option>American Black Bear</option> <option>American Black Bear</option>
<option>Asiatic Black Bear</option> <option>Asiatic Black Bear</option>