Skip to content
Permalink
Browse files

feature: chosen upgrade to version 1.8.7

  • Loading branch information...
fmancardi committed Aug 14, 2019
1 parent 936236d commit 753aa70d4d1988c442218f22f949480b4b241a43

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

@@ -202,3 +202,18 @@ i { font-style: italic; }
padding-left: 27px;
text-decoration: none;
}

.select,
.chosen-select,
.chosen-select-no-single,
.chosen-select-no-results,
.chosen-select-deselect,
.chosen-select-rtl,
.chosen-select-width {
width: 350px;
}

.jquery-version-refer {
margin-top: 40px;
font-style: italic;
}
@@ -6,17 +6,16 @@
<link rel="stylesheet" href="docsupport/style.css">
<link rel="stylesheet" href="docsupport/prism.css">
<link rel="stylesheet" href="chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>

<meta http-equiv="Content-Security-Policy" content="default-src &apos;self&apos;; script-src &apos;self&apos; https://ajax.googleapis.com; style-src &apos;self&apos;; img-src &apos;self&apos; data:">

</head>
<body>
<form>
<div id="container">
<div id="content">
<header>
<h1>Chosen <small>(<span id="latest-version">v1.6.2</span>)</small></h1>
<h1>Chosen <small>(<span id="latest-version">v1.8.7</span>)</small></h1>
</header>
<p>Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly.</p>

@@ -30,7 +29,7 @@ <h2><a name="standard-select" class="anchor" href="#standard-select">Standard Se
<div class="side-by-side clearfix">
<div>
<em>Turns This</em>
<select data-placeholder="Choose a Country..." style="width:350px;" tabindex="1">
<select data-placeholder="Choose a Country..." class="select" tabindex="1">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
@@ -287,7 +286,7 @@ <h2><a name="standard-select" class="anchor" href="#standard-select">Standard Se
</div>
<div>
<em>Into This</em>
<select data-placeholder="Choose a Country..." class="chosen-select" style="width:350px;" tabindex="2">
<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="2">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
@@ -548,7 +547,7 @@ <h2><a name="multiple-select" class="anchor" href="#multiple-select">Multiple Se
<div class="side-by-side clearfix">
<div>
<em>Turns This</em>
<select data-placeholder="Choose a Country..." style="width:350px;" multiple tabindex="3">
<select data-placeholder="Choose a Country..." class="select" multiple tabindex="3">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
@@ -805,7 +804,7 @@ <h2><a name="multiple-select" class="anchor" href="#multiple-select">Multiple Se
</div>
<div>
<em>Into This</em>
<select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
<select data-placeholder="Choose a Country..." class="chosen-select" multiple tabindex="4">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
@@ -1066,7 +1065,7 @@ <h2><a name="optgroup-support" class="anchor" href="#optgroup-support">&lt;optgr
<div class="side-by-side clearfix">
<div>
<em>Single Select with Groups</em>
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" tabindex="5">
<select data-placeholder="Your Favorite Football Team" class="chosen-select" tabindex="5">
<option value=""></option>
<optgroup label="NFC EAST">
<option>Dallas Cowboys</option>
@@ -1120,7 +1119,7 @@ <h2><a name="optgroup-support" class="anchor" href="#optgroup-support">&lt;optgr
</div>
<div>
<em>Multiple Select with Groups</em>
<select data-placeholder="Your Favorite Football Team" style="width:350px;" class="chosen-select" multiple tabindex="6">
<select data-placeholder="Your Favorite Football Team" class="chosen-select" multiple tabindex="6">
<option value=""></option>
<optgroup label="NFC EAST">
<option>Dallas Cowboys</option>
@@ -1179,7 +1178,7 @@ <h2><a name="selected-and-disabled-support" class="anchor" href="#selected-and-d
<p>Chosen automatically highlights selected options and removes disabled options.</p>
<div>
<em>Single Select</em>
<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chosen-select" tabindex="7">
<select data-placeholder="Your Favorite Type of Bear" class="chosen-select" tabindex="7">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
@@ -1193,7 +1192,7 @@ <h2><a name="selected-and-disabled-support" class="anchor" href="#selected-and-d
</div>
<div>
<em>Multiple Select</em>
<select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chosen-select" tabindex="8">
<select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select" tabindex="8">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
@@ -1213,7 +1212,7 @@ <h2><a name="hide-search-on-single-select" class="anchor" href="#hide-search-on-
<pre><code class="language-javascript">$(".chosen-select").chosen({disable_search_threshold: 10});</code></pre>
<p></p>
<div>
<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chosen-select-no-single" tabindex="9">
<select data-placeholder="Your Favorite Type of Bear" class="chosen-select-no-single" tabindex="9">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
@@ -1231,7 +1230,7 @@ <h2><a name="hide-search-on-single-select" class="anchor" href="#hide-search-on-
<h2><a name="default-text-support" class="anchor" href="#default-text-support">Default Text Support</a></h2>
<div class="side-by-side clearfix">
<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 an 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>
<pre><code class="language-markup">&lt;select <strong>data-placeholder="Choose a country..."</strong> style="width:350px;" multiple class="chosen-select"&gt;</code></pre>
<pre><code class="language-markup">&lt;select <strong>data-placeholder="Choose a country..."</strong> multiple class="chosen-select"&gt;</code></pre>
<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>

@@ -1242,7 +1241,7 @@ <h2><a name="no-results-text-support" class="anchor" href="#no-results-text-supp
<p></p>
<div>
<em>Single Select</em>
<select data-placeholder="Type &apos;C&apos; to view" style="width:350px;" class="chosen-select-no-results" tabindex="10">
<select data-placeholder="Type &apos;C&apos; to view" class="chosen-select-no-results" tabindex="10">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
@@ -1256,7 +1255,7 @@ <h2><a name="no-results-text-support" class="anchor" href="#no-results-text-supp
</div>
<div>
<em>Multiple Select</em>
<select data-placeholder="Type &apos;C&apos; to view" style="width:350px;" multiple class="chosen-select-no-results" tabindex="11">
<select data-placeholder="Type &apos;C&apos; to view" multiple class="chosen-select-no-results" tabindex="11">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
@@ -1282,7 +1281,7 @@ <h2><a name="allow-deselect-on-single-selects" class="anchor" href="#allow-desel
<div class="side-by-side clearfix">
<p>When a single select box isn't a required field, you can set <code class="language-javascript">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="chosen-select-deselect" tabindex="12">
<select data-placeholder="Your Favorite Type of Bear" class="chosen-select-deselect" tabindex="12">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
@@ -1296,13 +1295,14 @@ <h2><a name="allow-deselect-on-single-selects" class="anchor" href="#allow-desel
</div>
</div>

<h2><a name="right-to-left-support" class="anchor" href="#right-to-left-support">Right to Left Support</a></h2>
<h2><a name="right-to-left-support" class="anchor" href="#right-to-left-support">Right-to-Left Support</a></h2>
<div class="side-by-side clearfix">
<p>Chosen supports right to left select boxes too. just add <code class="language-javascript">"chosen-rtl"</code> in addition to <code class="language-javascript">"chosen-select"</code> to your select tags and you are good to go.</p>
<pre><code class="language-markup">&lt;select class="chosen-select <strong>chosen-rtl</strong>"&gt;</code></pre>
<p>You can set right-to-left text by setting <code class="language-javascript">rtl: true</code></p>
<pre><code class="language-javascript"> $(".chosen-select").chosen({rtl: true}); </code></pre>

<div>
<em>Single right to left select</em>
<select data-placeholder="Your Favorite Type of Bear" style="width:350px;" class="chosen-select chosen-rtl" tabindex="13">
<em>Single Right-to-Left Select</em>
<select data-placeholder="Your Favorite Type of Bear" class="chosen-select-rtl" tabindex="13">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
@@ -1313,8 +1313,8 @@ <h2><a name="right-to-left-support" class="anchor" href="#right-to-left-support"
</select>
</div>
<div>
<em>Multiple right to left select</em>
<select data-placeholder="Your Favorite Types of Bear" style="width:350px;" multiple class="chosen-select chosen-rtl" tabindex="14">
<em>Multiple Right-to-Left Select</em>
<select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select-rtl" tabindex="14">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
@@ -1387,7 +1387,7 @@ <h2><a name="labels-work-too" class="anchor" href="#labels-work-too">Labels work
<p></p>
<div>
<em><label for="single-label-example">Click to Highlight Single Select</label></em>
<select data-placeholder="Your Favorite Types of Bear" class="chosen-select" style="width:350px;" tabindex="17" id="single-label-example">
<select data-placeholder="Your Favorite Types of Bear" class="chosen-select" tabindex="17" id="single-label-example">
<option value=""></option>
<option selected>American Black Bear</option>
<option>Asiatic Black Bear</option>
@@ -1401,7 +1401,7 @@ <h2><a name="labels-work-too" class="anchor" href="#labels-work-too">Labels work
</div>
<div>
<em><label for="multiple-label-example">Click to Highlight Multiple Select</label></em>
<select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select" style="width:350px;" tabindex="18" id="multiple-label-example">
<select data-placeholder="Your Favorite Types of Bear" multiple class="chosen-select" tabindex="18" id="multiple-label-example">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
@@ -1458,21 +1458,10 @@ <h2><a name="credits" class="anchor" href="#credits">Credits</a></h2>

</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="docsupport/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
<script src="docsupport/init.js" type="text/javascript" charset="utf-8"></script>
</form>
<div class="oss-bar">
<ul>

0 comments on commit 753aa70

Please sign in to comment.
You can’t perform that action at this time.