RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-30 00:26:03 +03:00
Code Issues Projects Releases Wiki Activity

IE fixes and alt-arrow support

Browse Source 
alt-down/up is the standard way of opening a select when using a
screen reader. This also fixes the gradient in IE, so now it
displays the right colors. Also added a note about Placeholders.js,
so the placeholders on multi-select boxes will work in IE 9 and
below.
This commit is contained in:
Kevin Brown 2014-12-17 19:06:13 -05:00
parent 358306ac8c
commit ea41b627dc
12 changed files with 35 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
dist/css/select2.css vendored
View File

@ -207,11 +207,11 @@
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 4px; border-radius: 4px;
outline: 0; outline: 0;
background-image: -webkit-linear-gradient(top, #ffffff 50%, #eee 100%); background-image: -webkit-linear-gradient(top, #ffffff 50%, #eeeeee 100%);
background-image: -o-linear-gradient(top, #ffffff 50%, #eee 100%); background-image: -o-linear-gradient(top, #ffffff 50%, #eeeeee 100%);
background-image: linear-gradient(to bottom, #ffffff 50%, #eee 100%); background-image: linear-gradient(to bottom, #ffffff 50%, #eeeeee 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); } filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); }
.select2-container--classic .select2-selection--single:focus { .select2-container--classic .select2-selection--single:focus {
border: 1px solid #5897fb; } border: 1px solid #5897fb; }
.select2-container--classic .select2-selection--single .select2-selection__rendered { .select2-container--classic .select2-selection--single .select2-selection__rendered {
@ -235,11 +235,11 @@
top: 1px; top: 1px;
right: 1px; right: 1px;
width: 20px; width: 20px;
background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%); background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%); background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%); background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0); } filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0); }
.select2-container--classic .select2-selection--single .select2-selection__arrow b { .select2-container--classic .select2-selection--single .select2-selection__arrow b {
border-color: #888 transparent transparent transparent; border-color: #888 transparent transparent transparent;
border-style: solid; border-style: solid;
@ -263,20 +263,20 @@
border-top: none; border-top: none;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
background-image: -webkit-linear-gradient(top, #ffffff 0%, #eee 50%); background-image: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
background-image: -o-linear-gradient(top, #ffffff 0%, #eee 50%); background-image: -o-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
background-image: linear-gradient(to bottom, #ffffff 0%, #eee 50%); background-image: linear-gradient(to bottom, #ffffff 0%, #eeeeee 50%);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); } filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); }
.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
border-bottom: none; border-bottom: none;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
background-image: -webkit-linear-gradient(top, #eee 50%, #ffffff 100%); background-image: -webkit-linear-gradient(top, #eeeeee 50%, #ffffff 100%);
background-image: -o-linear-gradient(top, #eee 50%, #ffffff 100%); background-image: -o-linear-gradient(top, #eeeeee 50%, #ffffff 100%);
background-image: linear-gradient(to bottom, #eee 50%, #ffffff 100%); background-image: linear-gradient(to bottom, #eeeeee 50%, #ffffff 100%);
background-repeat: repeat-x; background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0); } filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); }
.select2-container--classic .select2-selection--multiple { .select2-container--classic .select2-selection--multiple {
background-color: white; background-color: white;
border: 1px solid #aaa; border: 1px solid #aaa;

2
dist/css/select2.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
dist/js/select2.amd.full.js vendored
View File

@ -3778,7 +3778,8 @@ define('select2/core',[
evt.preventDefault(); evt.preventDefault();
} }
} else { } else {
if (key === KEYS.ENTER || key === KEYS.SPACE) { if (key === KEYS.ENTER || key === KEYS.SPACE ||
((key === KEYS.DOWN || key === KEYS.UP) && evt.altKey)) {
self.open(); self.open();
evt.preventDefault(); evt.preventDefault();

3
dist/js/select2.amd.js vendored
View File

@ -3778,7 +3778,8 @@ define('select2/core',[
evt.preventDefault(); evt.preventDefault();
} }
} else { } else {
if (key === KEYS.ENTER || key === KEYS.SPACE) { if (key === KEYS.ENTER || key === KEYS.SPACE ||
((key === KEYS.DOWN || key === KEYS.UP) && evt.altKey)) {
self.open(); self.open();
evt.preventDefault(); evt.preventDefault();

3
dist/js/select2.full.js vendored
View File

@ -13313,7 +13313,8 @@ define('select2/core',[
evt.preventDefault(); evt.preventDefault();
} }
} else { } else {
if (key === KEYS.ENTER || key === KEYS.SPACE) { if (key === KEYS.ENTER || key === KEYS.SPACE ||
((key === KEYS.DOWN || key === KEYS.UP) && evt.altKey)) {
self.open(); self.open();
evt.preventDefault(); evt.preventDefault();

2
dist/js/select2.full.min.js vendored
View File

File diff suppressed because one or more lines are too long

3
dist/js/select2.js vendored
View File

@ -4206,7 +4206,8 @@ define('select2/core',[
evt.preventDefault(); evt.preventDefault();
} }
} else { } else {
if (key === KEYS.ENTER || key === KEYS.SPACE) { if (key === KEYS.ENTER || key === KEYS.SPACE ||
((key === KEYS.DOWN || key === KEYS.UP) && evt.altKey)) {
self.open(); self.open();
evt.preventDefault(); evt.preventDefault();

2
dist/js/select2.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
docs/examples.html
View File

@ -4,6 +4,7 @@ title: Examples - Select2
slug: examples slug: examples
--- ---
<script type="text/javascript" src="https://jamesallardice.github.io/Placeholders.js/assets/js/placeholders.jquery.min.js"></script>
<script type="text/javascript" src="dist/js/i18n/es.js"></script> <script type="text/javascript" src="dist/js/i18n/es.js"></script>
<div class="container"> <div class="container">
@ -90,7 +91,9 @@ $(".js-example-basic-multiple").select2();
</p> </p>
<p> <p>
This works for multiple select boxes as well. Select2 uses the <code>placeholder</code> attribute on multiple select
boxes, which requires IE 10+. You can support it in older versions with
<a href="https://jamesallardice.github.io/Placeholders.js/">the Placeholders.js polyfill</a>.
</p> </p>
<p> <p>

3
src/js/select2/core.js vendored
View File

@ -288,7 +288,8 @@ define([
evt.preventDefault(); evt.preventDefault();
} }
} else { } else {
if (key === KEYS.ENTER || key === KEYS.SPACE) { if (key === KEYS.ENTER || key === KEYS.SPACE ||
((key === KEYS.DOWN || key === KEYS.UP) && evt.altKey)) {
self.open(); self.open();
evt.preventDefault(); evt.preventDefault();

2
src/scss/theme/classic/_defaults.scss
View File

@ -12,7 +12,7 @@ $focus-border-color: #5897fb !default;
$container-height: 28px !default; $container-height: 28px !default;
$selection-bg-top-color: white !default; $selection-bg-top-color: white !default;
$selection-bg-bottom-color: #eee !default; $selection-bg-bottom-color: #eeeeee !default;
$container-placeholder-color: #999 !default; $container-placeholder-color: #999 !default;

2
src/scss/theme/classic/_single.scss
View File

@ -45,7 +45,7 @@
width: 20px; width: 20px;
@include gradient-vertical(#eee, #ccc, 50%, 100%); @include gradient-vertical(#eeeeee, #cccccc, 50%, 100%);
b { b {
border-color: #888 transparent transparent transparent; border-color: #888 transparent transparent transparent;