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

using data-placeholder instead of title attribute

Browse source
This commit is contained in:
Allen Bargi 2011-07-28 22:33:14 +02:00
parent f5e508d862
commit 2a8bd04b93
6 changed files with 25 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
chosen/chosen.jquery.js
View file

@ -46,7 +46,7 @@
this.container_id = this.form_field.id.length ? this.form_field.id.replace('.', '_') : this.generate_field_id(); this.container_id = this.form_field.id.length ? this.form_field.id.replace('.', '_') : this.generate_field_id();
this.container_id += "_chzn"; this.container_id += "_chzn";
this.f_width = this.form_field_jq.width(); this.f_width = this.form_field_jq.width();
this.default_text = this.form_field_jq.attr('title') ? this.form_field_jq.attr('title') : this.default_text_default; this.default_text = this.form_field_jq.data('placeholder') ? this.form_field_jq.data('placeholder') : this.default_text_default;
container_div = $("<div />", { container_div = $("<div />", {
id: this.container_id, id: this.container_id,
"class": 'chzn-container', "class": 'chzn-container',

2
chosen/chosen.proto.js
View file

@ -42,7 +42,7 @@
'class': 'chzn-container', 'class': 'chzn-container',
'style': 'width: ' + this.f_width + 'px' 'style': 'width: ' + this.f_width + 'px'
}; };
this.default_text = this.form_field.readAttribute('title') ? this.form_field.readAttribute('title') : this.default_text_default; this.default_text = this.form_field.readAttribute('data-placeholder') ? this.form_field.readAttribute('data-placeholder') : this.default_text_default;
base_template = this.is_multiple ? new Element('div', container_props).update(this.multi_temp.evaluate({ base_template = this.is_multiple ? new Element('div', container_props).update(this.multi_temp.evaluate({
"default": this.default_text "default": this.default_text
})) : new Element('div', container_props).update(this.single_temp.evaluate({ })) : new Element('div', container_props).update(this.single_temp.evaluate({

4
coffee/chosen.jquery.coffee
View file

@ -15,7 +15,7 @@ $.fn.extend({
$(this).each((input_field) -> $(this).each((input_field) ->
new Chosen(this, data, options) unless ($ this).hasClass "chzn-done" new Chosen(this, data, options) unless ($ this).hasClass "chzn-done"
) )
}) })
class Chosen class Chosen
@ -48,7 +48,7 @@ class Chosen
@f_width = @form_field_jq.width() @f_width = @form_field_jq.width()
@default_text = if @form_field_jq.attr 'title' then @form_field_jq.attr 'title' else @default_text_default @default_text = if @form_field_jq.data 'placeholder' then @form_field_jq.data 'placeholder' else @default_text_default
container_div = ($ "<div />", { container_div = ($ "<div />", {
id: @container_id id: @container_id

2
coffee/chosen.proto.coffee
View file

@ -50,7 +50,7 @@ class Chosen
'class': 'chzn-container' 'class': 'chzn-container'
'style': 'width: ' + (@f_width) + 'px' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter 'style': 'width: ' + (@f_width) + 'px' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter
@default_text = if @form_field.readAttribute 'title' then @form_field.readAttribute 'title' else @default_text_default @default_text = if @form_field.readAttribute 'data-placeholder' then @form_field.readAttribute 'data-placeholder' else @default_text_default
base_template = if @is_multiple then new Element('div', container_props).update( @multi_temp.evaluate({ "default": @default_text}) ) else new Element('div', container_props).update( @single_temp.evaluate({ "default":@default_text }) ) base_template = if @is_multiple then new Element('div', container_props).update( @multi_temp.evaluate({ "default": @default_text}) ) else new Element('div', container_props).update( @single_temp.evaluate({ "default":@default_text }) )

20
example.html
View file

@ -58,7 +58,7 @@
<div class="side-by-side clearfix"> <div class="side-by-side clearfix">
<div> <div>
<em>Turns This</em> <em>Turns This</em>
<select title="Choose a Country..." style="width:350px;" tabindex="1"> <select data-placeholder="Choose a Country..." style="width:350px;" tabindex="1">
<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>
<option value="Afghanistan">Afghanistan</option> <option value="Afghanistan">Afghanistan</option>
@ -306,7 +306,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"> <select data-placeholder="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>
@ -559,7 +559,7 @@
<div class="side-by-side clearfix"> <div class="side-by-side clearfix">
<div> <div>
<em>Turns This</em> <em>Turns This</em>
<select title="Choose a Country..." style="width:350px;" multiple tabindex="3"> <select data-placeholder="Choose a Country..." style="width:350px;" multiple tabindex="3">
<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>
<option value="Afghanistan">Afghanistan</option> <option value="Afghanistan">Afghanistan</option>
@ -807,7 +807,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"> <select data-placeholder="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>
@ -1060,7 +1060,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 title="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5"> <select data-placeholder="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>
@ -1114,7 +1114,7 @@
</div> </div>
<div> <div>
<em>Multiple Select with Groups</em> <em>Multiple Select with Groups</em>
<select title="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6"> <select data-placeholder="Your Favorite Football Team" 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>
@ -1173,7 +1173,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 title="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7"> <select data-placeholder="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>
@ -1187,7 +1187,7 @@
</div> </div>
<div> <div>
<em>Multiple Select with Groups</em> <em>Multiple Select with Groups</em>
<select title="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" tabindex="8"> <select data-placeholder="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>
@ -1203,8 +1203,8 @@
<h2>Default Text Support</h2> <h2>Default Text Support</h2>
<div class="side-by-side clearfix"> <div class="side-by-side clearfix">
<p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's title value. If no title value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p> <p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p>
<code>&lt;select <strong>title="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code> <code>&lt;select <strong>data-placeholder="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code>
</div> </div>
<h2>Change / Update Events</h2> <h2>Change / Update Events</h2>

20
example.jquery.html
View file

@ -58,7 +58,7 @@
<div class="side-by-side clearfix"> <div class="side-by-side clearfix">
<div> <div>
<em>Turns This</em> <em>Turns This</em>
<select title="Choose a Country..." style="width:350px;" tabindex="1"> <select data-placeholder="Choose a Country..." style="width:350px;" tabindex="1">
<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>
<option value="Afghanistan">Afghanistan</option> <option value="Afghanistan">Afghanistan</option>
@ -306,7 +306,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"> <select data-placeholder="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>
@ -559,7 +559,7 @@
<div class="side-by-side clearfix"> <div class="side-by-side clearfix">
<div> <div>
<em>Turns This</em> <em>Turns This</em>
<select title="Choose a Country..." style="width:350px;" multiple tabindex="3"> <select data-placeholder="Choose a Country..." style="width:350px;" multiple tabindex="3">
<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>
<option value="Afghanistan">Afghanistan</option> <option value="Afghanistan">Afghanistan</option>
@ -807,7 +807,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"> <select data-placeholder="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>
@ -1060,7 +1060,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 title="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5"> <select data-placeholder="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>
@ -1114,7 +1114,7 @@
</div> </div>
<div> <div>
<em>Multiple Select with Groups</em> <em>Multiple Select with Groups</em>
<select title="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6"> <select data-placeholder="Your Favorite Football Team" 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>
@ -1173,7 +1173,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 title="Your Favorite Type of Bear" style="width:350px;" class="chzn-select" tabindex="7"> <select data-placeholder="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>
@ -1187,7 +1187,7 @@
</div> </div>
<div> <div>
<em>Multiple Select with Groups</em> <em>Multiple Select with Groups</em>
<select title="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select" tabindex="8"> <select data-placeholder="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>
@ -1203,8 +1203,8 @@
<h2>Default Text Support</h2> <h2>Default Text Support</h2>
<div class="side-by-side clearfix"> <div class="side-by-side clearfix">
<p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's title value. If no title value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p> <p>Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit.</p>
<code>&lt;select <strong>title="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code> <code>&lt;select <strong>data-placehoder="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code>
</div> </div>
<h2>Change / Update Events</h2> <h2>Change / Update Events</h2>