Compare commits
108 Commits
Author | SHA1 | Date |
---|---|---|
mlharvest | 6a5d61b061 | |
Krister Kari | 75606a7434 | |
Krister Kari | 50e3db34ab | |
Krister Kari | 4b6fe537d7 | |
mlharvest | dc2eb014bd | |
Matthew Lettini | 7430fd54e4 | |
Patrick Filler | 5175cb809e | |
Patrick Filler | c93a52b7e8 | |
Patrick Filler | add519f2ad | |
Patrick Filler | dcbac1aba2 | |
Patrick Filler | 929253b6d9 | |
Matthew Lettini | bd2cc547e4 | |
Matthew Beale | 5d23a35453 | |
Matthew Beale | eb2b3285bc | |
Matthew Beale | 71c06c7da4 | |
Matthew Beale | 04568d271e | |
Patrick Filler | 8ce24bda89 | |
Patrick Filler | 3b3eca5249 | |
Patrick Filler | c9294d5943 | |
Patrick Filler | 0108f15866 | |
Thomas Frössman | 4f3a8bebdb | |
Mark Nadig | e400dc7a3a | |
Mark Nadig | cf23dc522d | |
Mark Nadig | 47bc14148f | |
Mike Frey | 5911d684f9 | |
Paul Redmond | e85cf8481e | |
Mike Frey | a316ca88d6 | |
Patrick Filler | 880a30dcb4 | |
Matthew Lettini | 7a0687e995 | |
Matthew Lettini | 859425f782 | |
Matthew Lettini | 50f2df47e7 | |
Matthew Lettini | 89141f1493 | |
Matthew Lettini | 1ed5f7d5af | |
Patrick Filler | 5808c97172 | |
Patrick Filler | 31cd33f22b | |
Patrick Filler | 16b6f5047a | |
Patrick Filler | 9dd4fb51a8 | |
Jerrett | 5d0e5855c7 | |
Jerrett | acf540ff21 | |
T.J. Schuck | 875c800c7a | |
Jerrett | 91502810c9 | |
Patrick Filler | f87575cb75 | |
Patrick Filler | f0a349d782 | |
Patrick Filler | 948fbcca11 | |
Graham Randall | 3ba2d65221 | |
Patrick Filler | a9d52581a5 | |
Patrick Filler | 9bc5fdcfe0 | |
Patrick Filler | 581f2073b5 | |
François Bernier | 17c1e8e18e | |
Krister Kari | 71b343ffd5 | |
Patrick Filler | 0f89ebef85 | |
Patrick Filler | c772be4cc1 | |
Patrick Filler | 84ee71187d | |
Steve De Jonghe | b3ff621d85 | |
Patrick Filler | f09c117224 | |
Patrick Filler | 35e0680e75 | |
Patrick Filler | 20a588d5b1 | |
Patrick Filler | fa35528d15 | |
Patrick Filler | 499c35b62d | |
Kévin Gomez Pinto | a53b58f15a | |
Patrick Filler | f618c69d54 | |
Patrick Filler | 4a48fbcd11 | |
Matthew Beale | 47b7b4d6bc | |
Patrick Filler | 1e49c19d20 | |
Patrick Filler | 1e9b4ddbe9 | |
Patrick Filler | d87310ee5d | |
Patrick Filler | 7dd29088e8 | |
Patrick Filler | cde5fc8e69 | |
Patrick Filler | 785020b189 | |
Patrick Filler | 6e10084329 | |
Patrick Filler | d4c7005b5c | |
Patrick Filler | 953d3baa4f | |
Patrick Filler | b7a9b218fb | |
Patrick Filler | fec3d3aafb | |
Patrick Filler | 763eecf39f | |
Patrick Filler | eb2636838e | |
Patrick Filler | 5a783bbb96 | |
Patrick Filler | 66e5da9dec | |
Patrick Filler | ed69a328c2 | |
Patrick Filler | 81c084ec99 | |
Patrick Filler | 3b11f2e2d1 | |
Patrick Filler | df394886e4 | |
Patrick Filler | 85c436086f | |
Patrick Filler | 6c6f3590bc | |
Patrick Filler | 805a60f4a5 | |
Patrick Filler | 255e77711e | |
Patrick Filler | 41831bb934 | |
Patrick Filler | f1e1c559ea | |
Adam Ford | 208370bd0d | |
Patrick Filler | 91734e94ee | |
Patrick Filler | 6571967085 | |
Patrick Filler | b51d4a798f | |
Nagyman | 93dbe8efec | |
Nagyman | 8922e6e854 | |
Patrick Filler | ada808db43 | |
Patrick Filler | 8fdb2a9c1d | |
Patrick Filler | d9ae47eda4 | |
Patrick Filler | 2df646eaf0 | |
Patrick Filler | a7a8ad54e2 | |
Patrick Filler | 800e3d5502 | |
Patrick Filler | 718f500c9a | |
Patrick Filler | 15b9b5136f | |
Patrick Filler | eb8ee7366d | |
Adam Ford | 4b9a5c68a5 | |
Matthew Beale | 4e463669d2 | |
Sebastian Delmont | 3bf68f6aef | |
Tim Chen | f9674e7db2 | |
Tim Chen | 90ca300921 |
|
@ -1 +1,2 @@
|
|||
.DS_Store
|
||||
.DS_Store
|
||||
node_modules
|
||||
|
|
20
Cakefile
20
Cakefile
|
@ -11,12 +11,14 @@ CoffeeScript = require 'coffee-script'
|
|||
|
||||
javascripts = {
|
||||
'chosen/chosen.jquery.js': [
|
||||
'coffee/chosen.jquery.coffee'
|
||||
'coffee/lib/select-parser.coffee'
|
||||
'coffee/lib/abstract-chosen.coffee'
|
||||
'coffee/chosen.jquery.coffee'
|
||||
]
|
||||
'chosen/chosen.proto.js': [
|
||||
'coffee/chosen.proto.coffee'
|
||||
'coffee/lib/select-parser.coffee'
|
||||
'coffee/lib/abstract-chosen.coffee'
|
||||
'coffee/chosen.proto.coffee'
|
||||
]
|
||||
}
|
||||
|
||||
|
@ -75,7 +77,8 @@ task 'build', 'build Chosen from source', build = (cb) ->
|
|||
write_chosen_javascript javascript.replace(/\.js$/,'.min.js'), (
|
||||
uglify.gen_code uglify.ast_squeeze uglify.ast_mangle parser.parse code
|
||||
)
|
||||
cb() if typeof cb is 'function'
|
||||
package_npm () ->
|
||||
cb() if typeof cb is 'function'
|
||||
catch e
|
||||
print_error e, file_name, file_contents
|
||||
|
||||
|
@ -92,6 +95,17 @@ task 'watch', 'watch coffee/ for changes and build Chosen', ->
|
|||
invoke 'build'
|
||||
)(file)
|
||||
|
||||
task 'package_npm', 'generate the package.json file for npm', package_npm = (cb) ->
|
||||
try
|
||||
package_file = 'package.json'
|
||||
package = JSON.parse("#{fs.readFileSync package_file}")
|
||||
package['version'] = version()
|
||||
fs.writeFileSync package_file, JSON.stringify(package, null, 2)
|
||||
console.log "Wrote #{package_file}"
|
||||
cb() if typeof cb is 'function'
|
||||
catch e
|
||||
print_error e, package_file
|
||||
|
||||
run = (cmd, args, cb, err_cb) ->
|
||||
exec "#{cmd} #{args.join(' ')}", (err, stdout, stderr) ->
|
||||
if err isnt null
|
||||
|
|
22
README.md
22
README.md
|
@ -14,17 +14,20 @@ Contributions and pull requests are very welcome. Please follow these guidelines
|
|||
|
||||
1. Make all changes in Coffeescript files, **not** JavaScript files.
|
||||
2. For feature changes, update both jQuery *and* Prototype versions
|
||||
3. Use 'cake build' to generate Chosen's JavaScript file and minified version.
|
||||
4. Don't touch the VERSION file
|
||||
5. Submit a Pull Request using GitHub.
|
||||
3. Use `npm install -d` to install the correct development dependencies.
|
||||
4. Use `cake build` or `cake watch` to generate Chosen's JavaScript file and minified version.
|
||||
5. Don't touch the `VERSION` file
|
||||
6. Submit a Pull Request using GitHub.
|
||||
|
||||
### Using CoffeeScript & Cake
|
||||
|
||||
First, make sure you have the proper CoffeeScript / Cake set-up in place.
|
||||
First, make sure you have the proper CoffeeScript / Cake set-up in place. We have added a package.json that makes this easy:
|
||||
|
||||
1. Install Coffeescript: the [CoffeeScript documentation](http://jashkenas.github.com/coffee-script/) provides easy-to-follow instructions.
|
||||
2. Install UglifyJS: <code>npm -g install uglify-js</code>
|
||||
3. Verify that your $NODE_PATH is properly configured using <code>echo $NODE_PATH</code>
|
||||
```
|
||||
npm install -d
|
||||
```
|
||||
|
||||
This will install `coffee-script` and `uglifyjs`.
|
||||
|
||||
Once you're configured, building the JavasScript from the command line is easy:
|
||||
|
||||
|
@ -36,11 +39,12 @@ If you're interested, you can find the recipes in Cakefile.
|
|||
|
||||
### Chosen Credits
|
||||
|
||||
- Built by [Harvest](http://www.getharvest.com/)
|
||||
- Built by [Harvest](http://www.getharvest.com/). Want to work on projects like this? [We’re hiring](http://www.getharvest.com/careers)!
|
||||
- Concept and development by [Patrick Filler](http://www.patrickfiller.com/)
|
||||
- Design and CSS by [Matthew Lettini](http://matthewlettini.com/)
|
||||
|
||||
### Notable Forks
|
||||
|
||||
- [Chosen for MooTools](https://github.com/julesjanssen/chosen), by Jules Janssen
|
||||
- [Chosen Drupal 7 Module](https://github.com/Polzme/chosen), by Pol Dell'Aiera
|
||||
- [Chosen Drupal 7 Module](http://drupal.org/project/chosen), by Pol Dell'Aiera, Arshad Chummun, Bart Feenstra, Kálmán Hosszu, etc.
|
||||
- [Chosen CakePHP Plugin](https://github.com/paulredmond/chosen-cakephp), by Paul Redmond
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 742 B After Width: | Height: | Size: 1.5 KiB |
|
@ -23,29 +23,32 @@
|
|||
|
||||
/* @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;
|
||||
background-color: #ffffff;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0 );
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
|
||||
background-image: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background-image: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background-image: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background-image: -ms-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
background-image: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius : 5px;
|
||||
border-radius : 5px;
|
||||
-moz-background-clip : padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
background-clip : padding-box;
|
||||
border: 1px solid #aaa;
|
||||
border: 1px solid #aaaaaa;
|
||||
-webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
|
||||
-moz-box-shadow : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
|
||||
box-shadow : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1);
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
height: 23px;
|
||||
line-height: 24px;
|
||||
padding: 0 0 0 8px;
|
||||
color: #444;
|
||||
color: #444444;
|
||||
text-decoration: none;
|
||||
}
|
||||
.chzn-container-single .chzn-single span {
|
||||
|
@ -57,22 +60,20 @@
|
|||
-ms-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.chzn-container-single .chzn-single abbr {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 26px;
|
||||
top: 6px;
|
||||
width: 12px;
|
||||
height: 13px;
|
||||
font-size: 1px;
|
||||
background: url(chosen-sprite.png) right top no-repeat;
|
||||
}
|
||||
.chzn-container-single .chzn-single abbr:hover {
|
||||
background-position: right -11px;
|
||||
}
|
||||
.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;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
@ -81,25 +82,26 @@
|
|||
width: 18px;
|
||||
}
|
||||
.chzn-container-single .chzn-single div b {
|
||||
background: url('chosen-sprite.png') no-repeat 0 1px;
|
||||
background: url('chosen-sprite.png') no-repeat 0 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.chzn-container-single .chzn-search {
|
||||
padding: 3px 4px;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
z-index: 1010;
|
||||
}
|
||||
.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%);
|
||||
background: #fff url('chosen-sprite.png') no-repeat 100% -22px;
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat 100% -22px, linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
margin: 1px 0;
|
||||
padding: 4px 20px 4px 5px;
|
||||
outline: 0;
|
||||
|
@ -117,16 +119,20 @@
|
|||
}
|
||||
/* @end */
|
||||
|
||||
.chzn-container-single-nosearch .chzn-search input {
|
||||
position: absolute;
|
||||
left: -9000px;
|
||||
}
|
||||
|
||||
/* @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%);
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
border: 1px solid #aaa;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
@ -149,6 +155,9 @@
|
|||
color: #666;
|
||||
background: transparent !important;
|
||||
border: 0 !important;
|
||||
font-family: sans-serif;
|
||||
font-size: 100%;
|
||||
height: 15px;
|
||||
padding: 5px;
|
||||
margin: 1px 0;
|
||||
outline: 0;
|
||||
|
@ -168,21 +177,22 @@
|
|||
-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-image: -ms-linear-gradient(top, #e4e4e4 0%,#eeeeee 70%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#eeeeee',GradientType=0 );
|
||||
background-image: linear-gradient(top, #e4e4e4 0%,#eeeeee 70%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 );
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
|
||||
background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
|
||||
-webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
||||
-moz-box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
||||
box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
|
||||
color: #333;
|
||||
border: 1px solid #b4b4b4;
|
||||
border: 1px solid #aaaaaa;
|
||||
line-height: 13px;
|
||||
padding: 3px 19px 3px 6px;
|
||||
padding: 3px 20px 3px 5px;
|
||||
margin: 3px 0 3px 5px;
|
||||
position: relative;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-choice span {
|
||||
cursor: default;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-choice-focus {
|
||||
|
@ -191,25 +201,25 @@
|
|||
.chzn-container-multi .chzn-choices .search-choice .search-choice-close {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 6px;
|
||||
width: 8px;
|
||||
height: 9px;
|
||||
right: 3px;
|
||||
top: 4px;
|
||||
width: 12px;
|
||||
height: 13px;
|
||||
font-size: 1px;
|
||||
background: url(chosen-sprite.png) right top no-repeat;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover {
|
||||
background-position: right -9px;
|
||||
background-position: right -11px;
|
||||
}
|
||||
.chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close {
|
||||
background-position: right -9px;
|
||||
background-position: right -11px;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Results */
|
||||
.chzn-container .chzn-results {
|
||||
margin: 0 4px 4px 0;
|
||||
max-height: 190px;
|
||||
max-height: 240px;
|
||||
padding: 0 0 0 4px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
|
@ -220,16 +230,25 @@
|
|||
padding: 0;
|
||||
}
|
||||
.chzn-container .chzn-results li {
|
||||
line-height: 80%;
|
||||
padding: 7px 7px 8px;
|
||||
display: none;
|
||||
line-height: 15px;
|
||||
padding: 5px 6px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.chzn-container .chzn-results .active-result {
|
||||
cursor: pointer;
|
||||
display: list-item;
|
||||
}
|
||||
.chzn-container .chzn-results .highlighted {
|
||||
background: #3875d7;
|
||||
background-color: #3875d7;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3875d7', endColorstr='#2a62bc', GradientType=0 );
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc));
|
||||
background-image: -webkit-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
background-image: -moz-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
background-image: -o-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
background-image: -ms-linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
background-image: linear-gradient(top, #3875d7 20%, #2a62bc 90%);
|
||||
color: #fff;
|
||||
}
|
||||
.chzn-container .chzn-results li em {
|
||||
|
@ -241,6 +260,7 @@
|
|||
}
|
||||
.chzn-container .chzn-results .no-results {
|
||||
background: #f4f4f4;
|
||||
display: list-item;
|
||||
}
|
||||
.chzn-container .chzn-results .group-result {
|
||||
cursor: default;
|
||||
|
@ -248,11 +268,34 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
.chzn-container .chzn-results .group-option {
|
||||
padding-left: 20px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.chzn-container-multi .chzn-drop .result-selected {
|
||||
display: none;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll {
|
||||
background: white;
|
||||
margin: 0 4px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 321px; /* This should by dynamic with js */
|
||||
z-index: 1;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll span {
|
||||
display: inline-block;
|
||||
height: 17px;
|
||||
text-indent: -5000px;
|
||||
width: 9px;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll-down {
|
||||
bottom: 0;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll-down span {
|
||||
background: url('chosen-sprite.png') no-repeat -4px -3px;
|
||||
}
|
||||
.chzn-container .chzn-results-scroll-up span {
|
||||
background: url('chosen-sprite.png') no-repeat -22px -3px;
|
||||
}
|
||||
/* @end */
|
||||
|
||||
/* @group Active */
|
||||
|
@ -270,13 +313,13 @@
|
|||
-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%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0 );
|
||||
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff));
|
||||
background-image: -webkit-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
|
||||
background-image: -moz-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
|
||||
background-image: -o-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
|
||||
background-image: -ms-linear-gradient(top, #eeeeee 20%, #ffffff 80%);
|
||||
background-image: linear-gradient(top, #eeeeee 20%, #ffffff 80%);
|
||||
-webkit-border-bottom-left-radius : 0;
|
||||
-webkit-border-bottom-right-radius: 0;
|
||||
-moz-border-radius-bottomleft : 0;
|
||||
|
@ -303,32 +346,44 @@
|
|||
}
|
||||
/* @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;
|
||||
/* @group Disabled Support */
|
||||
.chzn-disabled {
|
||||
cursor: default;
|
||||
opacity:0.5 !important;
|
||||
}
|
||||
.chzn-disabled .chzn-single {
|
||||
cursor: default;
|
||||
}
|
||||
.chzn-disabled .chzn-choices .search-choice .search-choice-close {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* @group Right to Left */
|
||||
.chzn-rtl { text-align: right; }
|
||||
.chzn-rtl .chzn-single { padding: 0 8px 0 0; overflow: visible; }
|
||||
.chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; direction: rtl; }
|
||||
|
||||
.chzn-rtl .chzn-single div { left: 3px; right: auto; }
|
||||
.chzn-rtl .chzn-single abbr {
|
||||
left: 26px;
|
||||
right: auto;
|
||||
}
|
||||
.chzn-rtl .chzn-choices .search-field input { direction: rtl; }
|
||||
.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-choices .search-choice { padding: 3px 5px 3px 19px; margin: 3px 5px 3px 0; }
|
||||
.chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 4px; right: auto; background-position: right top;}
|
||||
.chzn-rtl.chzn-container-single .chzn-results { margin: 0 0 4px 4px; padding: 0 4px 0 0; }
|
||||
.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 15px; }
|
||||
.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%);
|
||||
background: #fff url('chosen-sprite.png') no-repeat -38px -22px;
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
background: url('chosen-sprite.png') no-repeat -38px -22px, linear-gradient(top, #eeeeee 1%, #ffffff 15%);
|
||||
padding: 4px 5px 4px 20px;
|
||||
direction: rtl;
|
||||
}
|
||||
/* @end */
|
||||
/* @end */
|
||||
|
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
@ -6,51 +6,34 @@ root = this
|
|||
$ = jQuery
|
||||
|
||||
$.fn.extend({
|
||||
chosen: (data, options) ->
|
||||
chosen: (options) ->
|
||||
# Do no harm and return as soon as possible for unsupported browsers, namely IE6 and IE7
|
||||
return this if $.browser is "msie" and ($.browser.version is "6.0" or $.browser.version is "7.0")
|
||||
return this if $.browser.msie and ($.browser.version is "6.0" or $.browser.version is "7.0")
|
||||
$(this).each((input_field) ->
|
||||
new Chosen(this, data, options) unless ($ this).hasClass "chzn-done"
|
||||
new Chosen(this, options) unless ($ this).hasClass "chzn-done"
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
class Chosen
|
||||
class Chosen extends AbstractChosen
|
||||
|
||||
constructor: (elmn) ->
|
||||
this.set_default_values()
|
||||
|
||||
@form_field = elmn
|
||||
setup: ->
|
||||
@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"
|
||||
|
||||
this.set_up_html()
|
||||
this.register_observers()
|
||||
finish_setup: ->
|
||||
@form_field_jq.addClass "chzn-done"
|
||||
|
||||
set_default_values: ->
|
||||
|
||||
@click_test_action = (evt) => this.test_active_click(evt)
|
||||
@active_field = false
|
||||
@mouse_on_container = false
|
||||
@results_showing = false
|
||||
@result_highlighted = null
|
||||
@result_single_selected = null
|
||||
@choices = 0
|
||||
|
||||
set_up_html: ->
|
||||
@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()
|
||||
@f_width = @form_field_jq.outerWidth()
|
||||
|
||||
@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 #{ if @is_rtl then 'chzn-rtl' else '' }"
|
||||
class: "chzn-container#{ if @is_rtl then ' chzn-rtl' else '' }"
|
||||
style: 'width: ' + (@f_width) + 'px;' #use parens around @f_width so coffeescript doesn't think + ' px' is a function parameter
|
||||
})
|
||||
|
||||
|
@ -86,10 +69,11 @@ class Chosen
|
|||
|
||||
this.results_build()
|
||||
this.set_tab_index()
|
||||
|
||||
@form_field_jq.trigger("liszt:ready", {chosen: this})
|
||||
|
||||
register_observers: ->
|
||||
@container.mousedown (evt) => this.container_mousedown(evt)
|
||||
@container.mouseup (evt) => this.container_mouseup(evt)
|
||||
@container.mouseenter (evt) => this.mouse_enter(evt)
|
||||
@container.mouseleave (evt) => this.mouse_leave(evt)
|
||||
|
||||
|
@ -107,34 +91,40 @@ class Chosen
|
|||
@search_choices.click (evt) => this.choices_click(evt)
|
||||
@search_field.focus (evt) => this.input_focus(evt)
|
||||
else
|
||||
@selected_item.focus (evt) => this.activate_field(evt)
|
||||
@container.click (evt) => evt.preventDefault() # gobble click of anchor
|
||||
|
||||
search_field_disabled: ->
|
||||
@is_disabled = @form_field_jq[0].disabled
|
||||
if(@is_disabled)
|
||||
@container.addClass 'chzn-disabled'
|
||||
@search_field[0].disabled = true
|
||||
@selected_item.unbind "focus", @activate_action if !@is_multiple
|
||||
this.close_field()
|
||||
else
|
||||
@container.removeClass 'chzn-disabled'
|
||||
@search_field[0].disabled = false
|
||||
@selected_item.bind "focus", @activate_action if !@is_multiple
|
||||
|
||||
container_mousedown: (evt) ->
|
||||
if evt and evt.type is "mousedown"
|
||||
evt.stopPropagation()
|
||||
if not @pending_destroy_click
|
||||
if not @active_field
|
||||
@search_field.val "" if @is_multiple
|
||||
$(document).click @click_test_action
|
||||
this.results_show()
|
||||
else if not @is_multiple and evt and ($(evt.target) is @selected_item || $(evt.target).parents("a.chzn-single").length)
|
||||
evt.preventDefault()
|
||||
this.results_toggle()
|
||||
if !@is_disabled
|
||||
target_closelink = if evt? then ($ evt.target).hasClass "search-choice-close" else false
|
||||
if evt and evt.type is "mousedown"
|
||||
evt.stopPropagation()
|
||||
if not @pending_destroy_click and not target_closelink
|
||||
if not @active_field
|
||||
@search_field.val "" if @is_multiple
|
||||
$(document).click @click_test_action
|
||||
this.results_show()
|
||||
else if not @is_multiple and evt and (($(evt.target)[0] == @selected_item[0]) || $(evt.target).parents("a.chzn-single").length)
|
||||
evt.preventDefault()
|
||||
this.results_toggle()
|
||||
|
||||
this.activate_field()
|
||||
else
|
||||
@pending_destroy_click = false
|
||||
this.activate_field()
|
||||
else
|
||||
@pending_destroy_click = false
|
||||
|
||||
mouse_enter: -> @mouse_on_container = true
|
||||
mouse_leave: -> @mouse_on_container = false
|
||||
|
||||
input_focus: (evt) ->
|
||||
setTimeout (=> this.container_mousedown()), 50 unless @active_field
|
||||
|
||||
input_blur: (evt) ->
|
||||
if not @mouse_on_container
|
||||
@active_field = false
|
||||
setTimeout (=> this.blur_test()), 100
|
||||
container_mouseup: (evt) ->
|
||||
this.results_reset(evt) if evt.target.nodeName is "ABBR"
|
||||
|
||||
blur_test: (evt) ->
|
||||
this.close_field() if not @active_field and @container.hasClass "chzn-container-active"
|
||||
|
@ -175,7 +165,6 @@ class Chosen
|
|||
this.close_field()
|
||||
|
||||
results_build: ->
|
||||
startTime = new Date()
|
||||
@parsing = true
|
||||
@results_data = root.SelectParser.select_to_array @form_field
|
||||
|
||||
|
@ -184,6 +173,10 @@ class Chosen
|
|||
@choices = 0
|
||||
else if not @is_multiple
|
||||
@selected_item.find("span").text @default_text
|
||||
if @form_field.options.length <= @disable_search_threshold
|
||||
@container.addClass "chzn-container-single-nosearch"
|
||||
else
|
||||
@container.removeClass "chzn-container-single-nosearch"
|
||||
|
||||
content = ''
|
||||
for data in @results_data
|
||||
|
@ -195,7 +188,9 @@ class Chosen
|
|||
this.choice_build data
|
||||
else if data.selected and not @is_multiple
|
||||
@selected_item.find("span").text data.text
|
||||
this.single_deselect_control_build() if @allow_single_deselect
|
||||
|
||||
this.search_field_disabled()
|
||||
this.show_search_field_default()
|
||||
this.search_field_scale()
|
||||
|
||||
|
@ -210,23 +205,6 @@ class Chosen
|
|||
else
|
||||
""
|
||||
|
||||
result_add_option: (option) ->
|
||||
if not option.disabled
|
||||
option.dom_id = @container_id + "_o_" + option.array_index
|
||||
|
||||
classes = if option.selected and @is_multiple then [] else ["active-result"]
|
||||
classes.push "result-selected" if option.selected
|
||||
classes.push "group-option" if option.group_array_index?
|
||||
|
||||
'<li id="' + option.dom_id + '" class="' + classes.join(' ') + '">' + option.html + '</li>'
|
||||
else
|
||||
""
|
||||
|
||||
results_update_field: ->
|
||||
this.result_clear_highlight()
|
||||
@result_single_selected = null
|
||||
this.results_build()
|
||||
|
||||
result_do_highlight: (el) ->
|
||||
if el.length
|
||||
this.result_clear_highlight()
|
||||
|
@ -250,12 +228,6 @@ class Chosen
|
|||
@result_highlight.removeClass "highlighted" if @result_highlight
|
||||
@result_highlight = null
|
||||
|
||||
results_toggle: ->
|
||||
if @results_showing
|
||||
this.results_hide()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
results_show: ->
|
||||
if not @is_multiple
|
||||
@selected_item.addClass "chzn-single-with-drop"
|
||||
|
@ -325,8 +297,11 @@ class Chosen
|
|||
|
||||
choice_destroy_link_click: (evt) ->
|
||||
evt.preventDefault()
|
||||
@pending_destroy_click = true
|
||||
this.choice_destroy $(evt.target)
|
||||
if not @is_disabled
|
||||
@pending_destroy_click = true
|
||||
this.choice_destroy $(evt.target)
|
||||
else
|
||||
evt.stopPropagation
|
||||
|
||||
choice_destroy: (link) ->
|
||||
@choices -= 1
|
||||
|
@ -337,6 +312,14 @@ class Chosen
|
|||
this.result_deselect (link.attr "rel")
|
||||
link.parents('li').first().remove()
|
||||
|
||||
results_reset: (evt) ->
|
||||
@form_field.options[0].selected = true
|
||||
@selected_item.find("span").text @default_text
|
||||
this.show_search_field_default()
|
||||
$(evt.target).remove();
|
||||
@form_field_jq.trigger "change"
|
||||
this.results_hide() if @active_field
|
||||
|
||||
result_select: (evt) ->
|
||||
if @result_highlight
|
||||
high = @result_highlight
|
||||
|
@ -344,13 +327,14 @@ class Chosen
|
|||
|
||||
this.result_clear_highlight()
|
||||
|
||||
high.addClass "result-selected"
|
||||
|
||||
if @is_multiple
|
||||
this.result_deactivate high
|
||||
else
|
||||
@search_results.find(".result-selected").removeClass "result-selected"
|
||||
@result_single_selected = high
|
||||
|
||||
high.addClass "result-selected"
|
||||
|
||||
position = high_id.substr(high_id.lastIndexOf("_") + 1 )
|
||||
item = @results_data[position]
|
||||
item.selected = true
|
||||
|
@ -361,7 +345,8 @@ class Chosen
|
|||
this.choice_build item
|
||||
else
|
||||
@selected_item.find("span").first().text item.text
|
||||
|
||||
this.single_deselect_control_build() if @allow_single_deselect
|
||||
|
||||
this.results_hide() unless evt.metaKey and @is_multiple
|
||||
|
||||
@search_field.val ""
|
||||
|
@ -370,10 +355,10 @@ class Chosen
|
|||
this.search_field_scale()
|
||||
|
||||
result_activate: (el) ->
|
||||
el.addClass("active-result").show()
|
||||
el.addClass("active-result")
|
||||
|
||||
result_deactivate: (el) ->
|
||||
el.removeClass("active-result").hide()
|
||||
el.removeClass("active-result")
|
||||
|
||||
result_deselect: (pos) ->
|
||||
result_data = @results_data[pos]
|
||||
|
@ -389,14 +374,10 @@ class Chosen
|
|||
@form_field_jq.trigger "change"
|
||||
this.search_field_scale()
|
||||
|
||||
results_search: (evt) ->
|
||||
if @results_showing
|
||||
this.winnow_results()
|
||||
else
|
||||
this.results_show()
|
||||
single_deselect_control_build: ->
|
||||
@selected_item.find("span").first().after "<abbr class=\"search-choice-close\"></abbr>" if @allow_single_deselect and @selected_item.find("abbr").length < 1
|
||||
|
||||
winnow_results: ->
|
||||
startTime = new Date()
|
||||
this.no_results_clear()
|
||||
|
||||
results = 0
|
||||
|
@ -408,10 +389,11 @@ class Chosen
|
|||
for option in @results_data
|
||||
if not option.disabled and not option.empty
|
||||
if option.group
|
||||
$('#' + option.dom_id).hide()
|
||||
$('#' + option.dom_id).css('display', 'none')
|
||||
else if not (@is_multiple and option.selected)
|
||||
found = false
|
||||
result_id = option.dom_id
|
||||
result = $("#" + result_id)
|
||||
|
||||
if regex.test option.html
|
||||
found = true
|
||||
|
@ -432,16 +414,15 @@ class Chosen
|
|||
text = text.substr(0, startpos) + '<em>' + text.substr(startpos)
|
||||
else
|
||||
text = option.html
|
||||
|
||||
result.html(text)
|
||||
this.result_activate result
|
||||
|
||||
$("#" + result_id).html text if $("#" + result_id).html != text
|
||||
|
||||
this.result_activate $("#" + result_id)
|
||||
|
||||
$("#" + @results_data[option.group_array_index].dom_id).show() if option.group_array_index?
|
||||
$("#" + @results_data[option.group_array_index].dom_id).css('display', 'list-item') if option.group_array_index?
|
||||
else
|
||||
this.result_clear_highlight() if @result_highlight and result_id is @result_highlight.attr 'id'
|
||||
this.result_deactivate $("#" + result_id)
|
||||
|
||||
this.result_deactivate result
|
||||
|
||||
if results < 1 and searchText.length
|
||||
this.no_results searchText
|
||||
else
|
||||
|
@ -454,20 +435,20 @@ class Chosen
|
|||
for li in lis
|
||||
li = $(li)
|
||||
if li.hasClass "group-result"
|
||||
li.show()
|
||||
li.css('display', 'auto')
|
||||
else if not @is_multiple or not li.hasClass "result-selected"
|
||||
this.result_activate li
|
||||
|
||||
winnow_results_set_highlight: ->
|
||||
if not @result_highlight
|
||||
|
||||
selected_results = if not @is_multiple then @search_results.find(".result-selected") else []
|
||||
selected_results = if not @is_multiple then @search_results.find(".result-selected.active-result") else []
|
||||
do_high = if selected_results.length then selected_results.first() else @search_results.find(".active-result").first()
|
||||
|
||||
this.result_do_highlight do_high if do_high?
|
||||
|
||||
no_results: (terms) ->
|
||||
no_results_html = $('<li class="no-results">No results match "<span></span>"</li>')
|
||||
no_results_html = $('<li class="no-results">' + @results_none_found + ' "<span></span>"</li>')
|
||||
no_results_html.find("span").first().html(terms)
|
||||
|
||||
@search_results.append no_results_html
|
||||
|
@ -508,27 +489,6 @@ class Chosen
|
|||
@pending_backstroke.removeClass "search-choice-focus" if @pending_backstroke
|
||||
@pending_backstroke = null
|
||||
|
||||
keyup_checker: (evt) ->
|
||||
stroke = evt.which ? evt.keyCode
|
||||
this.search_field_scale()
|
||||
|
||||
switch stroke
|
||||
when 8
|
||||
if @is_multiple and @backstroke_length < 1 and @choices > 0
|
||||
this.keydown_backstroke()
|
||||
else if not @pending_backstroke
|
||||
this.result_clear_highlight()
|
||||
this.results_search()
|
||||
when 13
|
||||
evt.preventDefault()
|
||||
this.result_select(evt) if this.results_showing
|
||||
when 27
|
||||
this.results_hide() if @results_showing
|
||||
when 9, 38, 40, 16, 91, 17
|
||||
# don't do anything on these keys
|
||||
else this.results_search()
|
||||
|
||||
|
||||
keydown_checker: (evt) ->
|
||||
stroke = evt.which ? evt.keyCode
|
||||
this.search_field_scale()
|
||||
|
@ -540,6 +500,7 @@ class Chosen
|
|||
@backstroke_length = this.search_field.val().length
|
||||
break
|
||||
when 9
|
||||
this.result_select(evt) if this.results_showing and not @is_multiple
|
||||
@mouse_on_container = false
|
||||
break
|
||||
when 13
|
||||
|
@ -552,8 +513,7 @@ class Chosen
|
|||
when 40
|
||||
this.keydown_arrow()
|
||||
break
|
||||
|
||||
|
||||
|
||||
search_field_scale: ->
|
||||
if @is_multiple
|
||||
h = 0
|
||||
|
@ -580,22 +540,12 @@ class Chosen
|
|||
dd_top = @container.height()
|
||||
@dropdown.css({"top": dd_top + "px"})
|
||||
|
||||
generate_field_id: ->
|
||||
new_id = this.generate_random_id()
|
||||
@form_field.id = new_id
|
||||
new_id
|
||||
|
||||
generate_random_id: ->
|
||||
string = "sel" + this.generate_random_char() + this.generate_random_char() + this.generate_random_char()
|
||||
while $("#" + string).length > 0
|
||||
string += this.generate_random_char()
|
||||
string
|
||||
|
||||
generate_random_char: ->
|
||||
chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ";
|
||||
rand = Math.floor(Math.random() * chars.length)
|
||||
newchar = chars.substring rand, rand+1
|
||||
|
||||
get_side_border_padding = (elmt) ->
|
||||
side_border_padding = elmt.outerWidth() - elmt.width()
|
||||
|
||||
|
|
|
@ -4,38 +4,22 @@ Copyright (c) 2011 by Harvest
|
|||
###
|
||||
root = this
|
||||
|
||||
class Chosen
|
||||
class Chosen extends AbstractChosen
|
||||
|
||||
constructor: (elmn) ->
|
||||
this.set_default_values()
|
||||
|
||||
@form_field = elmn
|
||||
@is_multiple = @form_field.multiple
|
||||
setup: ->
|
||||
@is_rtl = @form_field.hasClassName "chzn-rtl"
|
||||
|
||||
@default_text_default = if @form_field.multiple then "Select Some Options" else "Select an Option"
|
||||
|
||||
this.set_up_html()
|
||||
this.register_observers()
|
||||
finish_setup: ->
|
||||
@form_field.addClassName "chzn-done"
|
||||
|
||||
|
||||
set_default_values: ->
|
||||
super()
|
||||
|
||||
@click_test_action = (evt) => this.test_active_click(evt)
|
||||
@active_field = false
|
||||
@mouse_on_container = false
|
||||
@results_showing = false
|
||||
@result_highlighted = null
|
||||
@result_single_selected = null
|
||||
@choices = 0
|
||||
|
||||
# HTML Templates
|
||||
@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" autocomplete="off" /></div><ul class="chzn-results"></ul></div>')
|
||||
@multi_temp = new Template('<ul class="chzn-choices"><li class="search-field"><input type="text" value="#{default}" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>')
|
||||
@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>')
|
||||
@no_results_temp = new Template('<li class="no-results">No results match "<span>#{terms}</span>"</li>')
|
||||
|
||||
@no_results_temp = new Template('<li class="no-results">' + @results_none_found + ' "<span>#{terms}</span>"</li>')
|
||||
|
||||
set_up_html: ->
|
||||
@container_id = @form_field.identify().replace(/(:|\.)/g, '_') + "_chzn"
|
||||
|
@ -44,7 +28,7 @@ class Chosen
|
|||
|
||||
container_props =
|
||||
'id': @container_id
|
||||
'class': "chzn-container #{ if @is_rtl then 'chzn-rtl' else '' }"
|
||||
'class': "chzn-container#{ if @is_rtl then ' chzn-rtl' else '' }"
|
||||
'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 'data-placeholder' then @form_field.readAttribute 'data-placeholder' else @default_text_default
|
||||
|
@ -78,10 +62,11 @@ class Chosen
|
|||
|
||||
this.results_build()
|
||||
this.set_tab_index()
|
||||
|
||||
@form_field.fire("liszt:ready", {chosen: this})
|
||||
|
||||
register_observers: ->
|
||||
@container.observe "mousedown", (evt) => this.container_mousedown(evt)
|
||||
@container.observe "mouseup", (evt) => this.container_mouseup(evt)
|
||||
@container.observe "mouseenter", (evt) => this.mouse_enter(evt)
|
||||
@container.observe "mouseleave", (evt) => this.mouse_leave(evt)
|
||||
|
||||
|
@ -99,34 +84,39 @@ class Chosen
|
|||
@search_choices.observe "click", (evt) => this.choices_click(evt)
|
||||
@search_field.observe "focus", (evt) => this.input_focus(evt)
|
||||
else
|
||||
@selected_item.observe "focus", (evt) => this.activate_field(evt)
|
||||
@container.observe "click", (evt) => evt.preventDefault() # gobble click of anchor
|
||||
|
||||
search_field_disabled: ->
|
||||
@is_disabled = @form_field.disabled
|
||||
if(@is_disabled)
|
||||
@container.addClassName 'chzn-disabled'
|
||||
@search_field.disabled = true
|
||||
@selected_item.stopObserving "focus", @activate_action if !@is_multiple
|
||||
this.close_field()
|
||||
else
|
||||
@container.removeClassName 'chzn-disabled'
|
||||
@search_field.disabled = false
|
||||
@selected_item.observe "focus", @activate_action if !@is_multiple
|
||||
|
||||
container_mousedown: (evt) ->
|
||||
if evt and evt.type is "mousedown"
|
||||
evt.stop()
|
||||
if not @pending_destroy_click
|
||||
if not @active_field
|
||||
@search_field.clear() if @is_multiple
|
||||
document.observe "click", @click_test_action
|
||||
this.results_show()
|
||||
else if not @is_multiple and evt and (evt.target is @selected_item || evt.target.up("a.chzn-single"))
|
||||
this.results_toggle()
|
||||
if !@is_disabled
|
||||
target_closelink = if evt? then evt.target.hasClassName "search-choice-close" else false
|
||||
if evt and evt.type is "mousedown"
|
||||
evt.stop()
|
||||
if not @pending_destroy_click and not target_closelink
|
||||
if not @active_field
|
||||
@search_field.clear() if @is_multiple
|
||||
document.observe "click", @click_test_action
|
||||
this.results_show()
|
||||
else if not @is_multiple and evt and (evt.target is @selected_item || evt.target.up("a.chzn-single"))
|
||||
this.results_toggle()
|
||||
|
||||
this.activate_field()
|
||||
else
|
||||
@pending_destroy_click = false
|
||||
|
||||
mouse_enter: -> @mouse_on_container = true
|
||||
mouse_leave: -> @mouse_on_container = false
|
||||
|
||||
input_focus: (evt) ->
|
||||
setTimeout this.container_mousedown.bind(this), 50 unless @active_field
|
||||
this.activate_field()
|
||||
else
|
||||
@pending_destroy_click = false
|
||||
|
||||
input_blur: (evt) ->
|
||||
if not @mouse_on_container
|
||||
@active_field = false
|
||||
setTimeout this.blur_test.bind(this), 100
|
||||
container_mouseup: (evt) ->
|
||||
this.results_reset(evt) if evt.target.nodeName is "ABBR"
|
||||
|
||||
blur_test: (evt) ->
|
||||
this.close_field() if not @active_field and @container.hasClassName("chzn-container-active")
|
||||
|
@ -167,7 +157,6 @@ class Chosen
|
|||
this.close_field()
|
||||
|
||||
results_build: ->
|
||||
startTime = new Date()
|
||||
@parsing = true
|
||||
@results_data = root.SelectParser.select_to_array @form_field
|
||||
|
||||
|
@ -176,6 +165,10 @@ class Chosen
|
|||
@choices = 0
|
||||
else if not @is_multiple
|
||||
@selected_item.down("span").update(@default_text)
|
||||
if @form_field.options.length <= @disable_search_threshold
|
||||
@container.addClassName "chzn-container-single-nosearch"
|
||||
else
|
||||
@container.removeClassName "chzn-container-single-nosearch"
|
||||
|
||||
content = ''
|
||||
for data in @results_data
|
||||
|
@ -187,7 +180,9 @@ class Chosen
|
|||
this.choice_build data
|
||||
else if data.selected and not @is_multiple
|
||||
@selected_item.down("span").update( data.html )
|
||||
this.single_deselect_control_build() if @allow_single_deselect
|
||||
|
||||
this.search_field_disabled()
|
||||
this.show_search_field_default()
|
||||
this.search_field_scale()
|
||||
|
||||
|
@ -202,23 +197,6 @@ class Chosen
|
|||
else
|
||||
""
|
||||
|
||||
result_add_option: (option) ->
|
||||
if not option.disabled
|
||||
option.dom_id = @container_id + "_o_" + option.array_index
|
||||
|
||||
classes = if option.selected and @is_multiple then [] else ["active-result"]
|
||||
classes.push "result-selected" if option.selected
|
||||
classes.push "group-option" if option.group_array_index?
|
||||
|
||||
'<li id="' + option.dom_id + '" class="' + classes.join(' ') + '">' + option.html + '</li>'
|
||||
else
|
||||
""
|
||||
|
||||
results_update_field: ->
|
||||
this.result_clear_highlight()
|
||||
@result_single_selected = null
|
||||
this.results_build()
|
||||
|
||||
result_do_highlight: (el) ->
|
||||
this.result_clear_highlight()
|
||||
|
||||
|
@ -241,12 +219,6 @@ class Chosen
|
|||
@result_highlight.removeClassName('highlighted') if @result_highlight
|
||||
@result_highlight = null
|
||||
|
||||
results_toggle: ->
|
||||
if @results_showing
|
||||
this.results_hide()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
results_show: ->
|
||||
if not @is_multiple
|
||||
@selected_item.addClassName('chzn-single-with-drop')
|
||||
|
@ -320,8 +292,9 @@ class Chosen
|
|||
|
||||
choice_destroy_link_click: (evt) ->
|
||||
evt.preventDefault()
|
||||
@pending_destroy_click = true
|
||||
this.choice_destroy evt.target
|
||||
if not @is_disabled
|
||||
@pending_destroy_click = true
|
||||
this.choice_destroy evt.target
|
||||
|
||||
choice_destroy: (link) ->
|
||||
@choices -= 1
|
||||
|
@ -332,17 +305,26 @@ class Chosen
|
|||
this.result_deselect link.readAttribute("rel")
|
||||
link.up('li').remove()
|
||||
|
||||
results_reset: (evt) ->
|
||||
@form_field.options[0].selected = true
|
||||
@selected_item.down("span").update(@default_text)
|
||||
this.show_search_field_default()
|
||||
evt.target.remove()
|
||||
@form_field.simulate("change") if typeof Event.simulate is 'function'
|
||||
this.results_hide() if @active_field
|
||||
|
||||
result_select: (evt) ->
|
||||
if @result_highlight
|
||||
high = @result_highlight
|
||||
this.result_clear_highlight()
|
||||
|
||||
high.addClassName("result-selected")
|
||||
|
||||
if @is_multiple
|
||||
this.result_deactivate high
|
||||
else
|
||||
@search_results.descendants(".result-selected").invoke "removeClassName", "result-selected"
|
||||
@result_single_selected = high
|
||||
|
||||
high.addClassName("result-selected")
|
||||
|
||||
position = high.id.substr(high.id.lastIndexOf("_") + 1 )
|
||||
item = @results_data[position]
|
||||
|
@ -354,6 +336,7 @@ class Chosen
|
|||
this.choice_build item
|
||||
else
|
||||
@selected_item.down("span").update(item.html)
|
||||
this.single_deselect_control_build() if @allow_single_deselect
|
||||
|
||||
this.results_hide() unless evt.metaKey and @is_multiple
|
||||
|
||||
|
@ -363,10 +346,10 @@ class Chosen
|
|||
this.search_field_scale()
|
||||
|
||||
result_activate: (el) ->
|
||||
el.addClassName("active-result").show()
|
||||
el.addClassName("active-result")
|
||||
|
||||
result_deactivate: (el) ->
|
||||
el.removeClassName("active-result").hide()
|
||||
el.removeClassName("active-result")
|
||||
|
||||
result_deselect: (pos) ->
|
||||
result_data = @results_data[pos]
|
||||
|
@ -381,15 +364,11 @@ class Chosen
|
|||
|
||||
@form_field.simulate("change") if typeof Event.simulate is 'function'
|
||||
this.search_field_scale()
|
||||
|
||||
results_search: (evt) ->
|
||||
if @results_showing
|
||||
this.winnow_results()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
single_deselect_control_build: ->
|
||||
@selected_item.down("span").insert { after: "<abbr class=\"search-choice-close\"></abbr>" } if @allow_single_deselect and not @selected_item.down("abbr")
|
||||
|
||||
winnow_results: ->
|
||||
startTime = new Date()
|
||||
this.no_results_clear()
|
||||
|
||||
results = 0
|
||||
|
@ -430,7 +409,7 @@ class Chosen
|
|||
|
||||
this.result_activate $(result_id)
|
||||
|
||||
$(@results_data[option.group_array_index].dom_id).show() if option.group_array_index?
|
||||
$(@results_data[option.group_array_index].dom_id).setStyle({display: 'list-item'}) if option.group_array_index?
|
||||
else
|
||||
this.result_clear_highlight() if $(result_id) is @result_highlight
|
||||
this.result_deactivate $(result_id)
|
||||
|
@ -454,7 +433,7 @@ class Chosen
|
|||
if not @result_highlight
|
||||
|
||||
if not @is_multiple
|
||||
do_high = @search_results.down(".result-selected")
|
||||
do_high = @search_results.down(".result-selected.active-result")
|
||||
|
||||
if not do_high?
|
||||
do_high = @search_results.down(".active-result")
|
||||
|
@ -506,27 +485,6 @@ class Chosen
|
|||
@pending_backstroke.removeClassName("search-choice-focus") if @pending_backstroke
|
||||
@pending_backstroke = null
|
||||
|
||||
keyup_checker: (evt) ->
|
||||
stroke = evt.which ? evt.keyCode
|
||||
this.search_field_scale()
|
||||
|
||||
switch stroke
|
||||
when 8
|
||||
if @is_multiple and @backstroke_length < 1 and @choices > 0
|
||||
this.keydown_backstroke()
|
||||
else if not @pending_backstroke
|
||||
this.result_clear_highlight()
|
||||
this.results_search()
|
||||
when 13
|
||||
evt.preventDefault()
|
||||
this.result_select(evt) if this.results_showing
|
||||
when 27
|
||||
this.results_hide() if @results_showing
|
||||
when 9, 38, 40, 16, 91, 17
|
||||
# don't do anything on these keys
|
||||
else this.results_search()
|
||||
|
||||
|
||||
keydown_checker: (evt) ->
|
||||
stroke = evt.which ? evt.keyCode
|
||||
this.search_field_scale()
|
||||
|
@ -536,16 +494,21 @@ class Chosen
|
|||
switch stroke
|
||||
when 8
|
||||
@backstroke_length = this.search_field.value.length
|
||||
break
|
||||
when 9
|
||||
this.result_select(evt) if this.results_showing and not @is_multiple
|
||||
@mouse_on_container = false
|
||||
break
|
||||
when 13
|
||||
evt.preventDefault()
|
||||
break
|
||||
when 38
|
||||
evt.preventDefault()
|
||||
this.keyup_arrow()
|
||||
break
|
||||
when 40
|
||||
this.keydown_arrow()
|
||||
|
||||
break
|
||||
|
||||
search_field_scale: ->
|
||||
if @is_multiple
|
||||
|
@ -580,13 +543,6 @@ if Prototype.Browser.IE
|
|||
Prototype.BrowserFeatures['Version'] = new Number(RegExp.$1);
|
||||
|
||||
|
||||
document.observe 'dom:loaded', (evt) ->
|
||||
# Do no harm and return as soon as possible for unsupported browsers, namely IE6 and IE7
|
||||
return if Prototype.Browser.IE and (Prototype.BrowserFeatures['Version'] is 6 or Prototype.BrowserFeatures['Version'] is 7)
|
||||
|
||||
selects = $$(".chzn-select")
|
||||
new Chosen select for select in selects
|
||||
|
||||
get_side_border_padding = (elmt) ->
|
||||
layout = new Element.Layout(elmt)
|
||||
side_border_padding = layout.get("border-left") + layout.get("border-right") + layout.get("padding-left") + layout.get("padding-right")
|
||||
|
|
|
@ -0,0 +1,109 @@
|
|||
###
|
||||
Chosen source: generate output using 'cake build'
|
||||
Copyright (c) 2011 by Harvest
|
||||
###
|
||||
root = this
|
||||
|
||||
class AbstractChosen
|
||||
|
||||
constructor: (@form_field, @options={}) ->
|
||||
this.set_default_values()
|
||||
|
||||
@is_multiple = @form_field.multiple
|
||||
@default_text_default = if @is_multiple then "Select Some Options" else "Select an Option"
|
||||
|
||||
this.setup()
|
||||
|
||||
this.set_up_html()
|
||||
this.register_observers()
|
||||
|
||||
this.finish_setup()
|
||||
|
||||
set_default_values: ->
|
||||
@click_test_action = (evt) => this.test_active_click(evt)
|
||||
@activate_action = (evt) => this.activate_field(evt)
|
||||
@active_field = false
|
||||
@mouse_on_container = false
|
||||
@results_showing = false
|
||||
@result_highlighted = null
|
||||
@result_single_selected = null
|
||||
@allow_single_deselect = if @options.allow_single_deselect? and @form_field.options[0]? and @form_field.options[0].text is "" then @options.allow_single_deselect else false
|
||||
@disable_search_threshold = @options.disable_search_threshold || 0
|
||||
@choices = 0
|
||||
@results_none_found = @options.no_results_text or "No results match"
|
||||
|
||||
mouse_enter: -> @mouse_on_container = true
|
||||
mouse_leave: -> @mouse_on_container = false
|
||||
|
||||
input_focus: (evt) ->
|
||||
setTimeout (=> this.container_mousedown()), 50 unless @active_field
|
||||
|
||||
input_blur: (evt) ->
|
||||
if not @mouse_on_container
|
||||
@active_field = false
|
||||
setTimeout (=> this.blur_test()), 100
|
||||
|
||||
result_add_option: (option) ->
|
||||
if not option.disabled
|
||||
option.dom_id = @container_id + "_o_" + option.array_index
|
||||
|
||||
classes = if option.selected and @is_multiple then [] else ["active-result"]
|
||||
classes.push "result-selected" if option.selected
|
||||
classes.push "group-option" if option.group_array_index?
|
||||
classes.push option.classes if option.classes != ""
|
||||
|
||||
style = if option.style.cssText != "" then " style=\"#{option.style}\"" else ""
|
||||
|
||||
'<li id="' + option.dom_id + '" class="' + classes.join(' ') + '"'+style+'>' + option.html + '</li>'
|
||||
else
|
||||
""
|
||||
|
||||
results_update_field: ->
|
||||
this.result_clear_highlight()
|
||||
@result_single_selected = null
|
||||
this.results_build()
|
||||
|
||||
results_toggle: ->
|
||||
if @results_showing
|
||||
this.results_hide()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
results_search: (evt) ->
|
||||
if @results_showing
|
||||
this.winnow_results()
|
||||
else
|
||||
this.results_show()
|
||||
|
||||
keyup_checker: (evt) ->
|
||||
stroke = evt.which ? evt.keyCode
|
||||
this.search_field_scale()
|
||||
|
||||
switch stroke
|
||||
when 8
|
||||
if @is_multiple and @backstroke_length < 1 and @choices > 0
|
||||
this.keydown_backstroke()
|
||||
else if not @pending_backstroke
|
||||
this.result_clear_highlight()
|
||||
this.results_search()
|
||||
when 13
|
||||
evt.preventDefault()
|
||||
this.result_select(evt) if this.results_showing
|
||||
when 27
|
||||
this.results_hide() if @results_showing
|
||||
return true
|
||||
when 9, 38, 40, 16, 91, 17
|
||||
# don't do anything on these keys
|
||||
else this.results_search()
|
||||
|
||||
generate_field_id: ->
|
||||
new_id = this.generate_random_id()
|
||||
@form_field.id = new_id
|
||||
new_id
|
||||
|
||||
generate_random_char: ->
|
||||
chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZ"
|
||||
rand = Math.floor(Math.random() * chars.length)
|
||||
newchar = chars.substring rand, rand+1
|
||||
|
||||
root.AbstractChosen = AbstractChosen
|
|
@ -34,6 +34,8 @@ class SelectParser
|
|||
selected: option.selected
|
||||
disabled: if group_disabled is true then group_disabled else option.disabled
|
||||
group_array_index: group_position
|
||||
classes: option.className
|
||||
style: option.style.cssText
|
||||
else
|
||||
@parsed.push
|
||||
array_index: @parsed.length
|
||||
|
|
|
@ -1064,7 +1064,7 @@
|
|||
<em>Single Select with Groups</em>
|
||||
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
|
||||
<option value=""></option>
|
||||
<optgroup label="NFC East">
|
||||
<optgroup label="NFC EAST">
|
||||
<option>Dallas Cowboys</option>
|
||||
<option>New York Giants</option>
|
||||
<option>Philadelphia Eagles</option>
|
||||
|
@ -1118,7 +1118,7 @@
|
|||
<em>Multiple Select with Groups</em>
|
||||
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
|
||||
<option value=""></option>
|
||||
<optgroup label="NFC East">
|
||||
<optgroup label="NFC EAST">
|
||||
<option>Dallas Cowboys</option>
|
||||
<option>New York Giants</option>
|
||||
<option>Philadelphia Eagles</option>
|
||||
|
@ -1209,6 +1209,32 @@
|
|||
<code><select <strong>data-placeholder="Choose a country..."</strong> style="width:350px;" multiple class="chzn-select"></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>No Results Text Support</h2>
|
||||
<div class="side-by-side clearfix">
|
||||
<p>Setting the "No results" search text is as easy as passing an option when you create Chosen:</p>
|
||||
<code>
|
||||
$(".chzn-select").chosen({no_results_text: "No results matched"});
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<h2>Allow Deselect on Single Selects</h2>
|
||||
<div class="side-by-side clearfix">
|
||||
<p>When a single select box isn't a required field, you can set <code>allow_single_deselect: true</code> and Chosen will add a UI element for option deselection. This will only work if the first option has blank text.</p>
|
||||
<div class="side-by-side clearfix">
|
||||
<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chzn-select-deselect" tabindex="7">
|
||||
<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>Sun Bear</option>
|
||||
<option>Polar Bear</option>
|
||||
<option>Spectacled Bear</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Right to Left Support</h2>
|
||||
<div class="side-by-side clearfix">
|
||||
|
@ -1269,8 +1295,8 @@
|
|||
</ol>
|
||||
|
||||
</div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>
|
||||
<script type="text/javascript"> $(".chzn-select").chosen(); </script>
|
||||
<script type="text/javascript"> $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); </script>
|
||||
</form>
|
||||
</body>
|
||||
|
|
|
@ -1063,7 +1063,7 @@
|
|||
<em>Single Select with Groups</em>
|
||||
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" tabindex="5">
|
||||
<option value=""></option>
|
||||
<optgroup label="NFC East">
|
||||
<optgroup label="NFC EAST">
|
||||
<option>Dallas Cowboys</option>
|
||||
<option>New York Giants</option>
|
||||
<option>Philadelphia Eagles</option>
|
||||
|
@ -1117,7 +1117,7 @@
|
|||
<em>Multiple Select with Groups</em>
|
||||
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chzn-select" multiple tabindex="6">
|
||||
<option value=""></option>
|
||||
<optgroup label="NFC East">
|
||||
<optgroup label="NFC EAST">
|
||||
<option>Dallas Cowboys</option>
|
||||
<option>New York Giants</option>
|
||||
<option>Philadelphia Eagles</option>
|
||||
|
@ -1209,6 +1209,32 @@
|
|||
<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>No Results Text Support</h2>
|
||||
<div class="side-by-side clearfix">
|
||||
<p>Setting the "No results" search text is as easy as passing an option when you create Chosen:</p>
|
||||
<code>
|
||||
New Chosen($("chzn_select_field"),{no_results_text: "No results matched"});
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<h2>Allow Deselect on Single Selects</h2>
|
||||
<div class="side-by-side clearfix">
|
||||
<p>When a single select box isn't a required field, you can set <code>allow_single_deselect: true</code> and Chosen will add a UI element for option deselection. This will only work if the first option has blank text.</p>
|
||||
<div class="side-by-side clearfix">
|
||||
<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chzn-select-deselect" tabindex="7">
|
||||
<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>Sun Bear</option>
|
||||
<option>Polar Bear</option>
|
||||
<option>Spectacled Bear</option>
|
||||
</select>
|
||||
</div>
|
||||
</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>
|
||||
|
@ -1263,11 +1289,31 @@
|
|||
<p>Using Chosen is easy as can be.</p>
|
||||
<ol>
|
||||
<li>Download the plugin and copy the chosen files to your app.</li>
|
||||
<li>Add the class <em>chzn-select</em> to any select box.</li>
|
||||
<li>Activate the plugin by creating a new instance of Chosen: new Chosen(<em>some_form_field</em>);</li>
|
||||
<li><a href="http://youtu.be/pS-RsIzb78U?t=57s">Disco</a>.</li>
|
||||
</ol>
|
||||
|
||||
</div>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
|
||||
<script src="chosen/chosen.proto.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
document.observe('dom:loaded', function(evt) {
|
||||
var select, selects, _i, _len, _results;
|
||||
if (Prototype.Browser.IE && (Prototype.BrowserFeatures['Version'] === 6 || Prototype.BrowserFeatures['Version'] === 7)) {
|
||||
return;
|
||||
}
|
||||
selects = $$(".chzn-select");
|
||||
_results = [];
|
||||
for (_i = 0, _len = selects.length; _i < _len; _i++) {
|
||||
select = selects[_i];
|
||||
_results.push(new Chosen(select));
|
||||
}
|
||||
deselects = $$(".chzn-select-deselect");
|
||||
for (_i = 0, _len = deselects.length; _i < _len; _i++) {
|
||||
select = deselects[_i];
|
||||
_results.push(new Chosen(select,{allow_single_deselect:true}));
|
||||
}
|
||||
return _results;
|
||||
});
|
||||
</script>
|
||||
</body>
|
|
@ -0,0 +1,18 @@
|
|||
{
|
||||
"author": "harvest",
|
||||
"name": "chosen",
|
||||
"version": "0.9.7",
|
||||
"description": "Chosen is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/harvesthq/chosen"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"coffee-script": ">= 1.2",
|
||||
"uglify-js": ">= 1.2.5"
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue