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

Merge branch 'master' into build_system

abstract-chosen
Patrick Filler 2011-07-31 12:28:08 -04:00
parent eb30cd3b33 e10951b7a4
commit a8ae212634
8 changed files with 289 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
chosen/chosen-sprite.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 742 B

368
chosen/chosen.css
View File

@ -1,241 +1,219 @@
div.chzn-container {
/* @group Base */
select.chzn-select {
visibility: hidden;
height: 28px !important;
min-height: 28px !important;
}
.chzn-container {
font-size: 13px;
position: relative;
display: inline-block;
zoom: 1;
*display: inline;
}
div.chzn-container input {
.chzn-container .chzn-drop {
background: #fff;
background: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
background: linear-gradient(top, #ffffff 85%,#eeeeee 99%);
border: 1px solid #aaa;
font-family: sans-serif;
font-size: 1em;
margin: 0px;
padding: 4px 5px;
outline: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
div.chzn-container textarea:focus {
border-color: #058cf5;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
}
div.chzn-container div.chzn-drop {
background: #FFF;
border: 1px solid #aaa;
border-width: 0 1px 1px;
left: 0;
border-top: 0;
position: absolute;
top: 29px;
-webkit-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
left: 0;
-webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15);
-moz-box-shadow : 0 4px 5px rgba(0,0,0,.15);
-o-box-shadow : 0 4px 5px rgba(0,0,0,.15);
box-shadow : 0 4px 5px rgba(0,0,0,.15);
z-index: 999;
}
div.chzn-container-single div.chzn-drop {
-moz-border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-o-border-radius: 0 0 4px 4px;
-ms-border-radius: 0 0 4px 4px;
-khtml-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
/* @end */
/* SINGLE */
div.chzn-container a.chzn-single {
background: #ffffff;
/* @group Single Chosen */
.chzn-container-single .chzn-single {
background-color: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
background-image: -o-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
background-image: linear-gradient(top, #eeeeee 0%,#ffffff 50%);
-webkit-border-radius: 4px;
-moz-border-radius : 4px;
border-radius : 4px;
-moz-background-clip : padding;
-webkit-background-clip: padding-box;
background-clip : padding-box;
border: 1px solid #aaa;
display: block;
overflow: hidden;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
height: 25px;
color: #444;
line-height: 26px;
padding: 0px 0px 0px 8px;
position: relative;
text-decoration: none;
white-space: nowrap;
position: relative;
height: 26px;
line-height: 26px;
padding: 0 0 0 8px;
color: #444;
text-decoration: none;
}
div.chzn-container a.chzn-single span {
display: block;
.chzn-container-single .chzn-single span {
margin-right: 26px;
display: block;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-moz-binding: url('/xml/ellipsis.xml#ellipsis');
text-overflow: ellipsis;
}
div.chzn-container a.chzn-single div {
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
-o-border-top-right-radius: 4px;
-ms-border-top-right-radius: 4px;
-khtml-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
-ms-border-bottom-right-radius: 4px;
-khtml-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
.chzn-container-single .chzn-single div {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius : 0 4px 4px 0;
border-radius : 0 4px 4px 0;
-moz-background-clip : padding;
-webkit-background-clip: padding-box;
background-clip : padding-box;
background: #ccc;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
background-image: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
background-image: linear-gradient(top, #cccccc 0%,#eeeeee 60%);
border-left: 1px solid #aaa;
display: block;
height: 100%;
position: absolute;
right: 0;
top: 0;
display: block;
height: 100%;
width: 18px;
}
div.chzn-container a.chzn-single div b {
.chzn-container-single .chzn-single div b {
background: url('chosen-sprite.png') no-repeat 0 1px;
display: block;
width: 100%;
height: 100%;
}
div.chzn-container div.chzn-search {
.chzn-container-single .chzn-search {
padding: 3px 4px;
margin: 0px;
margin: 0;
white-space: nowrap;
}
div.chzn-container div.chzn-search input {
background: url('chosen-sprite.png') no-repeat 97% -35px, #ffffff;
background: url('chosen-sprite.png') no-repeat 97% -35px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background: url('chosen-sprite.png') no-repeat 97% -35px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('chosen-sprite.png') no-repeat 97% -35px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background: url('chosen-sprite.png') no-repeat 97% -35px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
background: url('chosen-sprite.png') no-repeat 97% -35px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
background: linear-gradient(top, #ffffff 85%,#eeeeee 99%);
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-o-border-radius: 0px;
-ms-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
.chzn-container-single .chzn-search input {
background: #fff url('chosen-sprite.png') no-repeat 100% -20px;
background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background: url('chosen-sprite.png') no-repeat 100% -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
background: url('chosen-sprite.png') no-repeat 100% -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
background: url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(top, #ffffff 85%,#eeeeee 99%);
margin: 1px 0;
padding: 4px 20px 4px 5px;
outline: 0;
border: 1px solid #aaa;
font-family: sans-serif;
font-size: 1em;
}
.chzn-container-single .chzn-drop {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius : 0 0 4px 4px;
border-radius : 0 0 4px 4px;
-moz-background-clip : padding;
-webkit-background-clip: padding-box;
background-clip : padding-box;
}
/* @end */
/* Multi */
div.chzn-container ul.chzn-choices {
background: #fff;
/* @group Multi Chosen */
.chzn-container-multi .chzn-choices {
background-color: #fff;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background-image: -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background-image: -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background-image: -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background-image: -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
background-image: linear-gradient(top, #ffffff 85%,#eeeeee 99%);
margin: 0;
cursor: text;
border: 1px solid #aaa;
margin: 0;
padding: 0;
cursor: text;
overflow: hidden;
height: auto !important;
height: 1%;
padding: 0;
position: relative;
}
div.chzn-container ul.chzn-choices:focus {
border-color: #058cf5;
-moz-box-shadow: 0px 0px 5px #999;
-webkit-box-shadow: 0px 0px 5px #999;
box-shadow: 0px 0px 5px #999;
}
div.chzn-container ul.chzn-choices li {
.chzn-container-multi .chzn-choices li {
float: left;
list-style-type: none;
margin: 0px;
list-style: none;
}
div.chzn-container ul.chzn-choices li.search-field {
margin: 0px;
.chzn-container-multi .chzn-choices .search-field {
white-space: nowrap;
padding: 0px;
margin: 0;
padding: 0;
}
div.chzn-container ul.chzn-choices li.search-field input {
.chzn-container-multi .chzn-choices .search-field input {
color: #666;
background: transparent !important;
border: 0px !important;
border: 0 !important;
padding: 5px;
margin: 1px 0;
outline: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-moz-box-shadow : none;
-o-box-shadow : none;
box-shadow : none;
}
div.chzn-container ul.chzn-choices li.search-field input.default {
.chzn-container-multi .chzn-choices .search-field .default {
color: #999;
}
div.chzn-container ul.chzn-choices li.search-choice {
-moz-border-radius: 3px;
.chzn-container-multi .chzn-choices .search-choice {
-webkit-border-radius: 3px;
border-radius: 3px;
background: #e4e4e4;
-moz-border-radius : 3px;
border-radius : 3px;
-moz-background-clip : padding;
-webkit-background-clip: padding-box;
background-clip : padding-box;
background-color: #e4e4e4;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e4e4e4), color-stop(0.7, #eeeeee));
background-image: -webkit-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%);
background-image: -moz-linear-gradient(center bottom, #e4e4e4 0%, #eeeeee 70%);
background-image: -o-linear-gradient(bottom, #e4e4e4 0%, #eeeeee 70%);
background: -ms-linear-gradient(top, #e4e4e4 0%,#eeeeee 70%);
background-image: -ms-linear-gradient(top, #e4e4e4 0%,#eeeeee 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#eeeeee',GradientType=0 );
background: linear-gradient(top, #e4e4e4 0%,#eeeeee 70%);
background-image: linear-gradient(top, #e4e4e4 0%,#eeeeee 70%);
color: #333;
border: 1px solid #b4b4b4;
line-height: 13px;
padding: 3px 19px 3px 6px;
margin: 3px 0 3px 5px;
position: relative;
margin: 3px 0px 3px 5px;
}
div.chzn-container ul.chzn-choices li.search-choice span {
.chzn-container-multi .chzn-choices .search-choice span {
cursor: default;
}
div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus {
.chzn-container-multi .chzn-choices .search-choice-focus {
background: #d4d4d4;
}
div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close {
.chzn-container-multi .chzn-choices .search-choice .search-choice-close {
display: block;
position: absolute;
right: 5px;
top: 6px;
display: block;
width: 8px;
height: 9px;
font-size: 1px;
background: url(chosen-sprite.png) right top no-repeat;
}
div.chzn-container ul.chzn-choices li.search-choice a.search-choice-close:hover {
.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover {
background-position: right -9px;
}
div.chzn-container ul.chzn-choices li.search-choice.search-choice-focus a.search-choice-close {
.chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close {
background-position: right -9px;
}
/* @end */
/* Results */
div.chzn-container ul.chzn-results {
/* @group Results */
.chzn-container .chzn-results {
margin: 0 4px 4px 0;
max-height: 190px;
padding: 0 0 0 4px;
@ -243,92 +221,120 @@ div.chzn-container ul.chzn-results {
overflow-x: hidden;
overflow-y: auto;
}
div.chzn-container-multi ul.chzn-results {
.chzn-container-multi .chzn-results {
margin: -1px 0 0;
padding: 0;
}
div.chzn-container-multi ul.chzn-results li {
border-left: 0px !important;
border-right: 0px !important;
}
div.chzn-container ul.chzn-results li {
.chzn-container .chzn-results li {
line-height: 80%;
padding: 7px 7px 8px;
margin: 0;
list-style-type: none;
list-style: none;
}
div.chzn-container ul.chzn-results li.active-result {
.chzn-container .chzn-results .active-result {
cursor: pointer;
}
div.chzn-container ul.chzn-results li em {
font-style: normal;
background: #FEFFDC;
}
div.chzn-container ul.chzn-results li.highlighted {
.chzn-container .chzn-results .highlighted {
background: #3875d7;
color: #fff;
}
div.chzn-container ul.chzn-results li.highlighted em {
.chzn-container .chzn-results li em {
background: #feffde;
font-style: normal;
}
.chzn-container .chzn-results .highlighted em {
background: transparent;
}
div.chzn-container ul.chzn-results li.no-results {
background: #F4F4F4;
.chzn-container .chzn-results .no-results {
background: #f4f4f4;
}
div.chzn-container ul.chzn-results li.group-result {
.chzn-container .chzn-results .group-result {
cursor: default;
color: #999;
font-weight: bold;
}
div.chzn-container ul.chzn-results li.group-option {
.chzn-container .chzn-results .group-option {
padding-left: 20px;
}
div.chzn-container-multi div.chzn-drop li.result-selected {
.chzn-container-multi .chzn-drop .result-selected {
display: none;
}
/* @end */
/* Active */
div.chzn-container-active a.chzn-single {
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
/* @group Active */
.chzn-container-active .chzn-single {
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
-o-box-shadow : 0 0 5px rgba(0,0,0,.3);
box-shadow : 0 0 5px rgba(0,0,0,.3);
border: 1px solid #5897fb;
}
div.chzn-container-active a.chzn-single-with-drop {
.chzn-container-active .chzn-single-with-drop {
border: 1px solid #aaa;
border-width: 1px 1px 1px;
-moz-box-shadow: 0px 1px 0px #FFF inset;
-webkit-box-shadow: 0px 1px 0px #FFF inset;
box-shadow: 0px 1px 0px #FFF inset;
background: #EEE;
-webkit-box-shadow: 0 1px 0 #fff inset;
-moz-box-shadow : 0 1px 0 #fff inset;
-o-box-shadow : 0 1px 0 #fff inset;
box-shadow : 0 1px 0 #fff inset;
background-color: #eee;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius : 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomleft : 0;
-moz-border-radius-bottomright: 0;
border-bottom-left-radius : 0;
border-bottom-right-radius: 0;
}
div.chzn-container-active a.chzn-single-with-drop div {
.chzn-container-active .chzn-single-with-drop div {
background: transparent;
border-left: none;
}
div.chzn-container-active a.chzn-single-with-drop div b {
.chzn-container-active .chzn-single-with-drop div b {
background-position: -18px 1px;
}
div.chzn-container-active ul.chzn-choices {
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
.chzn-container-active .chzn-choices {
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
-moz-box-shadow : 0 0 5px rgba(0,0,0,.3);
-o-box-shadow : 0 0 5px rgba(0,0,0,.3);
box-shadow : 0 0 5px rgba(0,0,0,.3);
border: 1px solid #5897fb;
}
div.chzn-container-active ul.chzn-choices input {
.chzn-container-active .chzn-choices .search-field input {
color: #111 !important;
}
/* @end */
/* @group Right to Left */
.chzn-rtl { direction:rtl;text-align: right; }
.chzn-rtl .chzn-single { padding-left: 0; padding-right: 8px; }
.chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; }
.chzn-rtl .chzn-single div {
left: 0; right: auto;
border-left: none; border-right: 1px solid #aaaaaa;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius : 4px 0 0 4px;
border-radius : 4px 0 0 4px;
}
.chzn-rtl .chzn-choices li { float: right; }
.chzn-rtl .chzn-choices .search-choice { padding: 3px 6px 3px 19px; margin: 3px 5px 3px 0; }
.chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 5px; right: auto; background-position: right top;}
.chzn-rtl.chzn-container-single .chzn-results { margin-left: 4px; margin-right: 0; padding-left: 0; padding-right: 4px; }
.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 20px; }
.chzn-rtl.chzn-container-active .chzn-single-with-drop div { border-right: none; }
.chzn-rtl .chzn-search input {
background: url('chosen-sprite.png') no-repeat -38px -20px, #ffffff;
background: url('chosen-sprite.png') no-repeat -38px -20px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
background: url('chosen-sprite.png') no-repeat -38px -20px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('chosen-sprite.png') no-repeat -38px -20px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
background: url('chosen-sprite.png') no-repeat -38px -20px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
background: url('chosen-sprite.png') no-repeat -38px -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
background: url('chosen-sprite.png') no-repeat -38px -20px, -ms-linear-gradient(top, #ffffff 85%,#eeeeee 99%);
background: url('chosen-sprite.png') no-repeat -38px -20px, linear-gradient(top, #ffffff 85%,#eeeeee 99%);
padding: 4px 5px 4px 20px;
}
/* @end */

7
chosen/chosen.jquery.js
View File

@ -97,6 +97,7 @@
this.form_field = elmn;
this.form_field_jq = $(this.form_field);
this.is_multiple = this.form_field.multiple;
this.is_rtl = this.form_field_jq.hasClass("chzn-rtl");
this.default_text_default = this.form_field.multiple ? "Select Some Options" : "Select an Option";
this.set_up_html();
this.register_observers();
@ -115,13 +116,13 @@
};
Chosen.prototype.set_up_html = function() {
var container_div, dd_top, dd_width, sf_width;
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(/(:|\.)/g, '_') : 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',
"class": "chzn-container " + (this.is_rtl ? ' chzn-rtl' : void 0),
style: 'width: ' + this.f_width + 'px;'
});
if (this.is_multiple) {

7
chosen/chosen.proto.js
View File

@ -86,6 +86,7 @@
this.set_default_values();
this.form_field = elmn;
this.is_multiple = this.form_field.multiple;
this.is_rtl = this.form_field.hasClassName("chzn-rtl");
this.default_text_default = this.form_field.multiple ? "Select Some Options" : "Select an Option";
this.set_up_html();
this.register_observers();
@ -107,14 +108,14 @@
};
Chosen.prototype.set_up_html = function() {
var base_template, container_props, dd_top, dd_width, sf_width;
this.container_id = this.form_field.identify().replace('.', '_') + "_chzn";
this.container_id = this.form_field.identify().replace(/(:|\.)/g, '_') + "_chzn";
this.f_width = this.form_field.getStyle("width") ? parseInt(this.form_field.getStyle("width"), 10) : this.form_field.getWidth();
container_props = {
'id': this.container_id,
'class': 'chzn-container',
'class': "chzn-container " + (this.is_rtl ? ' chzn-rtl' : void 0),
'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({

9
coffee/chosen.jquery.coffee
View File

@ -14,7 +14,7 @@ $.fn.extend({
$(this).each((input_field) ->
new Chosen(this, data, options) unless ($ this).hasClass "chzn-done"
)
})
})
class Chosen
@ -24,6 +24,7 @@ class Chosen
@form_field = elmn
@form_field_jq = $ @form_field
@is_multiple = @form_field.multiple
@is_rtl = @form_field_jq.hasClass "chzn-rtl"
@default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option"
@ -42,16 +43,16 @@ class Chosen
@choices = 0
set_up_html: ->
@container_id = if @form_field.id.length then @form_field.id.replace('.', '_') else this.generate_field_id()
@container_id = if @form_field.id.length then @form_field.id.replace(/(:|\.)/g, '_') else this.generate_field_id()
@container_id += "_chzn"
@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
class: 'chzn-container'
class: "chzn-container #{' chzn-rtl' if @is_rtl}"
style: 'width: ' + (@f_width) + 'px;' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter
})

7
coffee/chosen.proto.coffee
View File

@ -15,6 +15,7 @@ class Chosen
@form_field = elmn
@is_multiple = @form_field.multiple
@is_rtl = @form_field.hasClassName "chzn-rtl"
@default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option"
@ -40,16 +41,16 @@ class Chosen
set_up_html: ->
@container_id = @form_field.identify().replace('.', '_') + "_chzn"
@container_id = @form_field.identify().replace(/(:|\.)/g, '_') + "_chzn"
@f_width = if @form_field.getStyle("width") then parseInt @form_field.getStyle("width"), 10 else @form_field.getWidth()
container_props =
'id': @container_id
'class': 'chzn-container'
'class': "chzn-container #{' chzn-rtl' if @is_rtl}"
'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 }) )

54
example.html
View File

@ -58,7 +58,8 @@
<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=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
@ -306,7 +307,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 +560,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 +808,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 +1061,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 +1115,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 +1174,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 +1188,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,10 +1204,41 @@
<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>
<p><strong>Note:</strong> on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.</p>
</div>
<h2>Right to Left Support</h2>
<div class="side-by-side clearfix">
<p>Chosen supports right to left select boxes too. just add <code>"chzn-rtl"</code> in addition to <code>"chzn-select"</code> to your select tags and you are good to go.</p>
<p><code>&lt;select class="chzn-select <strong>chzn-rtl</strong>"&gt;</code></p>
<div>
<em>Single right to left select</em>
<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chzn-select chzn-rtl" tabindex="9">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
<option>Brown Bear</option>
<option>Giant Panda</option>
<option selected>Sloth Bear</option>
<option>Polar Bear</option>
</select>
</div>
<div>
<em>Multiple right to left select</em>
<select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select chzn-rtl" tabindex="10">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
<option>Brown Bear</option>
<option>Giant Panda</option>
<option selected>Sloth Bear</option>
<option selected>Polar Bear</option>
</select>
</div>
</div>
<h2>Change / Update Events</h2>
<div class="side-by-side clearfix">
<ul>

52
example.jquery.html
View File

@ -58,7 +58,8 @@
<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=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
@ -306,7 +307,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 +560,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 +808,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 +1061,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 +1115,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 +1174,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 +1188,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 +1204,39 @@
<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>
<p><strong>Note:</strong> on single selects, the first element is assumed to be selected by the browser. To take advantage of the default text support, you will need to include a blank option as the first element of your select list.</p>
</div>
<h2>Right to Left Support</h2>
<div class="side-by-side clearfix">
<p>Chosen supports right to left select boxes too. just add <code>"chzn-rtl"</code> in addition to <code>"chzn-select"</code> to your select tags and you are good to go.</p>
<p><code>&lt;select class="chzn-select <strong>chzn-rtl</strong>"&gt;</code></p>
<div>
<em>Single right to left select</em>
<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chzn-select chzn-rtl" tabindex="9">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
<option>Brown Bear</option>
<option>Giant Panda</option>
<option selected>Sloth Bear</option>
<option>Polar Bear</option>
</select>
</div>
<div>
<em>Multiple right to left select</em>
<select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chzn-select chzn-rtl" tabindex="10">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
<option>Brown Bear</option>
<option>Giant Panda</option>
<option selected>Sloth Bear</option>
<option selected>Polar Bear</option>
</select>
</div>
</div>
<h2>Change / Update Events</h2>