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 += "_chzn";
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 />", {
id: this.container_id,
"class": 'chzn-container',

2
chosen/chosen.proto.js
View file

@ -42,7 +42,7 @@
'class': 'chzn-container',
'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({
"default": this.default_text
})) : 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) ->
new Chosen(this, data, options) unless ($ this).hasClass "chzn-done"
)
})
})
class Chosen
@ -48,7 +48,7 @@ class Chosen
@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 />", {
id: @container_id

2
coffee/chosen.proto.coffee
View file

@ -50,7 +50,7 @@ class Chosen
'class': 'chzn-container'
'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 }) )

20
example.html
View file

@ -58,7 +58,7 @@
<div class="side-by-side clearfix">
<div>
<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 Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
@ -306,7 +306,7 @@
</div>
<div>
<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="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
@ -559,7 +559,7 @@
<div class="side-by-side clearfix">
<div>
<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 Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
@ -807,7 +807,7 @@
</div>
<div>
<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="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
@ -1060,7 +1060,7 @@
<div class="side-by-side clearfix">
<div>
<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>
<optgroup label="NFC East">
<option>Dallas Cowboys</option>
@ -1114,7 +1114,7 @@
</div>
<div>
<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>
<optgroup label="NFC East">
<option>Dallas Cowboys</option>
@ -1173,7 +1173,7 @@
<p>Chosen automatically highlights selected options and removes disabled options.</p>
<div>
<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>American Black Bear</option>
<option>Asiatic Black Bear</option>
@ -1187,7 +1187,7 @@
</div>
<div>
<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>American Black Bear</option>
<option>Asiatic Black Bear</option>
@ -1203,8 +1203,8 @@
<h2>Default Text Support</h2>
<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>
<code>&lt;select <strong>title="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code>
<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>data-placeholder="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code>
</div>
<h2>Change / Update Events</h2>

20
example.jquery.html
View file

@ -58,7 +58,7 @@
<div class="side-by-side clearfix">
<div>
<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 Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
@ -306,7 +306,7 @@
</div>
<div>
<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="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
@ -559,7 +559,7 @@
<div class="side-by-side clearfix">
<div>
<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 Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
@ -807,7 +807,7 @@
</div>
<div>
<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="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
@ -1060,7 +1060,7 @@
<div class="side-by-side clearfix">
<div>
<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>
<optgroup label="NFC East">
<option>Dallas Cowboys</option>
@ -1114,7 +1114,7 @@
</div>
<div>
<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>
<optgroup label="NFC East">
<option>Dallas Cowboys</option>
@ -1173,7 +1173,7 @@
<p>Chosen automatically highlights selected options and removes disabled options.</p>
<div>
<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>American Black Bear</option>
<option>Asiatic Black Bear</option>
@ -1187,7 +1187,7 @@
</div>
<div>
<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>American Black Bear</option>
<option>Asiatic Black Bear</option>
@ -1203,8 +1203,8 @@
<h2>Default Text Support</h2>
<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>
<code>&lt;select <strong>title="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code>
<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>data-placehoder="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"&gt;</code>
</div>
<h2>Change / Update Events</h2>