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

Add deselect examples.

Browse source
This commit is contained in:
Patrick Filler 2011-09-28 13:29:00 -04:00
parent 763eecf39f
commit fec3d3aafb
2 changed files with 42 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
example.jquery.html
View file

@ -1218,6 +1218,24 @@
</code> </code>
</div> </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> <h2>Right to Left Support</h2>
<div class="side-by-side clearfix"> <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>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>
@ -1279,6 +1297,6 @@
</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/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 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> </form>
</body> </body>

23
example.proto.html
View file

@ -1217,6 +1217,24 @@
</code> </code>
</div> </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> <h2>Right to Left Support</h2>
<div class="side-by-side clearfix"> <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>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>
@ -1290,6 +1308,11 @@
select = selects[_i]; select = selects[_i];
_results.push(new Chosen(select)); _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; return _results;
}); });
</script> </script>