Added example for disabled results
This commit is contained in:
parent
acd469c658
commit
ac7e7dae24
2
dist/css/select2.css
vendored
2
dist/css/select2.css
vendored
@ -94,6 +94,8 @@
|
||||
cursor: default;
|
||||
display: block;
|
||||
padding: 6px; }
|
||||
.select2-container.select2-theme-default .dropdown .results .options .option.disabled {
|
||||
color: #666; }
|
||||
.select2-container.select2-theme-default .dropdown .results .options .option.selected {
|
||||
background-color: #ddd; }
|
||||
.select2-container.select2-theme-default .dropdown .results .options .option.highlightable.highlighted {
|
||||
|
2
dist/css/select2.min.css
vendored
2
dist/css/select2.min.css
vendored
@ -1 +1 @@
|
||||
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-container .selection .single-select{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-container .selection .single-select .rendered-selection{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .selection .multiple-select{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-container .selection .multiple-select .rendered-selection{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:100;}.select2-container .dropdown .results{display:block;}.select2-container .dropdown .results .options{list-style:none;margin:0;padding:0;}.select2-container .dropdown .results .options .option{cursor:pointer;padding:6px;user-select:none;-webkit-user-select:none;}.select2-container.open .dropdown{border-top:none;border-top-left-radius:0;border-top-right-radius:0;left:0;}.select2-container.select2-theme-default .selection .single-select{background-color:#eee;border:1px solid #aaa;border-radius:4px;}.select2-container.select2-theme-default .selection .single-select .rendered-selection{color:#444;line-height:28px;}.select2-container.select2-theme-default .selection .multiple-select{background-color:white;border:1px solid #aaa;border-radius:4px;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection{list-style:none;margin:0;padding:5px;padding-bottom:0;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;float:left;margin-right:5px;margin-bottom:5px;padding:0 5px;}.select2-container.select2-theme-default.open .selection .single-select,.select2-container.select2-theme-default.open .selection .multiple-select{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container.select2-theme-default .dropdown .results{max-height:200px;overflow-y:scroll;}.select2-container.select2-theme-default .dropdown .results .options .option.group{padding:0;}.select2-container.select2-theme-default .dropdown .results .options .option.group .group-label{cursor:default;display:block;padding:6px;}.select2-container.select2-theme-default .dropdown .results .options .option.selected{background-color:#ddd;}.select2-container.select2-theme-default .dropdown .results .options .option.highlightable.highlighted{background-color:#5897fb;color:white;}.s2-container{margin:0;position:relative;zoom:1;vertical-align:middle;}.s2-container.s2-active{border:1px solid #5897fb;border-top:bottom;}.s2-container .s2-single-select{display:block;height:26px;padding:0 0 0 8px;overflow:hidden;position:relative;border:1px solid #aaa;white-space:nowrap;line-height:26px;color:#444;text-decoration:none;border-radius:4px;background-clip:padding-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#fff;background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));background-image:-webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);background-image:-moz-linear-gradient(center bottom, #eee 0%, #fff 50%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);background-image:linear-gradient(to top, #eee 0%, #fff 50%);}.s2-container .s2-single-select .s2-selection{margin-right:26px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.s2-container .s2-open .select2-container-active .select2-choice,.s2-container .s2-open .select2-container-active .select2-choices{border:1px solid #5897fb;outline:none;-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px rgba(0, 0, 0, 0.3);}.s2-search input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.s2-dropdown{width:100%;margin-top:-1px;position:absolute;z-index:9999;overflow:scroll;background:#fff;color:#000;border:1px solid #5897fb;border-top:none;border-radius:0 0 4px 4px;-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);}.s2-hidden{display:none;}
|
||||
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-container .selection .single-select{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-container .selection .single-select .rendered-selection{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .selection .multiple-select{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-container .selection .multiple-select .rendered-selection{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-container .dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:100;}.select2-container .dropdown .results{display:block;}.select2-container .dropdown .results .options{list-style:none;margin:0;padding:0;}.select2-container .dropdown .results .options .option{cursor:pointer;padding:6px;user-select:none;-webkit-user-select:none;}.select2-container.open .dropdown{border-top:none;border-top-left-radius:0;border-top-right-radius:0;left:0;}.select2-container.select2-theme-default .selection .single-select{background-color:#eee;border:1px solid #aaa;border-radius:4px;}.select2-container.select2-theme-default .selection .single-select .rendered-selection{color:#444;line-height:28px;}.select2-container.select2-theme-default .selection .multiple-select{background-color:white;border:1px solid #aaa;border-radius:4px;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection{list-style:none;margin:0;padding:5px;padding-bottom:0;}.select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;float:left;margin-right:5px;margin-bottom:5px;padding:0 5px;}.select2-container.select2-theme-default.open .selection .single-select,.select2-container.select2-theme-default.open .selection .multiple-select{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container.select2-theme-default .dropdown .results{max-height:200px;overflow-y:scroll;}.select2-container.select2-theme-default .dropdown .results .options .option.group{padding:0;}.select2-container.select2-theme-default .dropdown .results .options .option.group .group-label{cursor:default;display:block;padding:6px;}.select2-container.select2-theme-default .dropdown .results .options .option.disabled{color:#666;}.select2-container.select2-theme-default .dropdown .results .options .option.selected{background-color:#ddd;}.select2-container.select2-theme-default .dropdown .results .options .option.highlightable.highlighted{background-color:#5897fb;color:white;}.s2-container{margin:0;position:relative;zoom:1;vertical-align:middle;}.s2-container.s2-active{border:1px solid #5897fb;border-top:bottom;}.s2-container .s2-single-select{display:block;height:26px;padding:0 0 0 8px;overflow:hidden;position:relative;border:1px solid #aaa;white-space:nowrap;line-height:26px;color:#444;text-decoration:none;border-radius:4px;background-clip:padding-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:#fff;background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));background-image:-webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);background-image:-moz-linear-gradient(center bottom, #eee 0%, #fff 50%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);background-image:linear-gradient(to top, #eee 0%, #fff 50%);}.s2-container .s2-single-select .s2-selection{margin-right:26px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.s2-container .s2-open .select2-container-active .select2-choice,.s2-container .s2-open .select2-container-active .select2-choices{border:1px solid #5897fb;outline:none;-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.3);box-shadow:0 0 5px rgba(0, 0, 0, 0.3);}.s2-search input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}.s2-dropdown{width:100%;margin-top:-1px;position:absolute;z-index:9999;overflow:scroll;background:#fff;color:#000;border:1px solid #5897fb;border-top:none;border-radius:0 0 4px 4px;-webkit-box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);box-shadow:0 4px 5px rgba(0, 0, 0, 0.15);}.s2-hidden{display:none;}
|
2
dist/js/select2.amd.full.js
vendored
2
dist/js/select2.amd.full.js
vendored
@ -230,7 +230,7 @@ define('select2/results',[
|
||||
}
|
||||
|
||||
if (data.disabled) {
|
||||
$option.removeClass('selectable').addClass('disabled');
|
||||
$option.removeClass('selectable highlightable').addClass('disabled');
|
||||
}
|
||||
|
||||
$option.data('data', data);
|
||||
|
2
dist/js/select2.amd.js
vendored
2
dist/js/select2.amd.js
vendored
@ -230,7 +230,7 @@ define('select2/results',[
|
||||
}
|
||||
|
||||
if (data.disabled) {
|
||||
$option.removeClass('selectable').addClass('disabled');
|
||||
$option.removeClass('selectable highlightable').addClass('disabled');
|
||||
}
|
||||
|
||||
$option.data('data', data);
|
||||
|
2
dist/js/select2.full.js
vendored
2
dist/js/select2.full.js
vendored
@ -9768,7 +9768,7 @@ define('select2/results',[
|
||||
}
|
||||
|
||||
if (data.disabled) {
|
||||
$option.removeClass('selectable').addClass('disabled');
|
||||
$option.removeClass('selectable highlightable').addClass('disabled');
|
||||
}
|
||||
|
||||
$option.data('data', data);
|
||||
|
2
dist/js/select2.full.min.js
vendored
2
dist/js/select2.full.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/select2.js
vendored
2
dist/js/select2.js
vendored
@ -659,7 +659,7 @@ define('select2/results',[
|
||||
}
|
||||
|
||||
if (data.disabled) {
|
||||
$option.removeClass('selectable').addClass('disabled');
|
||||
$option.removeClass('selectable highlightable').addClass('disabled');
|
||||
}
|
||||
|
||||
$option.data('data', data);
|
||||
|
2
dist/js/select2.min.js
vendored
2
dist/js/select2.min.js
vendored
File diff suppressed because one or more lines are too long
@ -153,7 +153,7 @@ $(".js-example-data-array-selected").select2({
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="data-ajax row">
|
||||
<section id="data-ajax" class="row">
|
||||
<div class="col-md-12">
|
||||
<h1>Loading remote data</h1>
|
||||
|
||||
@ -174,6 +174,37 @@ $(".js-example-data-array-selected").select2({
|
||||
|
||||
<script type="text/x-example-code" class="js-code-data-ajax">
|
||||
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="disabled-results" class="row">
|
||||
<div class="col-md-4">
|
||||
<h1>Disabled results</h1>
|
||||
|
||||
<p>
|
||||
Select2 will correctly handled disabled results, both with data coming
|
||||
from a standard select (when the <code>disabled</code> attribute is set)
|
||||
and from remote sources, where the object has
|
||||
<code>disabled: true</code> set.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<select class="js-example-disabled-results form-control">
|
||||
<option value="one">First</option>
|
||||
<option value="two" disabled="disabled">Second (disabled)</option>
|
||||
<option value="three">Third</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<h2>Example code</h2>
|
||||
|
||||
<pre data-fill-from=".js-code-disabled-results"></pre>
|
||||
|
||||
<script type="text/x-example-code" class="js-code-data-disabled">
|
||||
|
||||
</script>
|
||||
</div>
|
||||
</section>
|
||||
@ -270,6 +301,8 @@ require(["select2/core", "select2/dropdown", "select2/utils"], function (Select2
|
||||
|
||||
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
|
||||
|
||||
var $disabledResults = $(".js-example-disabled-results");
|
||||
|
||||
$basicSingle.select2();
|
||||
$basicMultiple.select2()
|
||||
|
||||
@ -288,5 +321,7 @@ require(["select2/core", "select2/dropdown", "select2/utils"], function (Select2
|
||||
$dataArraySelected.select2({
|
||||
data: data
|
||||
});
|
||||
|
||||
$disabledResults.select2();
|
||||
});
|
||||
</script>
|
||||
|
2
src/js/select2/results.js
vendored
2
src/js/select2/results.js
vendored
@ -91,7 +91,7 @@ define([
|
||||
}
|
||||
|
||||
if (data.disabled) {
|
||||
$option.removeClass('selectable').addClass('disabled');
|
||||
$option.removeClass('selectable highlightable').addClass('disabled');
|
||||
}
|
||||
|
||||
$option.data('data', data);
|
||||
|
@ -65,6 +65,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user