Initial commit
This commit is contained in:
meusinfirmary
50
public/assets/vendor/select2-4.1.0-rc.0/docs/pages/01.getting-started/01.installation/docs.md
vendored
Executable file
50
public/assets/vendor/select2-4.1.0-rc.0/docs/pages/01.getting-started/01.installation/docs.md
vendored
Executable file
@ -0,0 +1,50 @@
|
||||
---
|
||||
title: Installation
|
||||
taxonomy:
|
||||
category: docs
|
||||
---
|
||||
|
||||
In order to use Select2, you must include the compiled JavaScript and CSS files on your website. There are multiple options for including these pre-compiled files, also known as a **distribution**, in your website or application.
|
||||
|
||||
## Using Select2 from a CDN
|
||||
|
||||
A CDN (content delivery network) is the fastest way to get up and running with Select2!
|
||||
|
||||
Select2 is hosted on both the [jsDelivr](https://www.jsdelivr.com/package/npm/select2) and [cdnjs](https://cdnjs.com/libraries/select2) CDNs. Simply include the following lines of code in the `<head>` section of your page:
|
||||
|
||||
```
|
||||
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
||||
```
|
||||
|
||||
>>> <i class="fa fa-info-circle"></i> Immediately following a new release, it takes some time for CDNs to catch up and get the new versions live on the CDN.
|
||||
|
||||
## Installing with Bower
|
||||
|
||||
Select2 is available on Bower. Add the following to your `bower.json` file and then run `bower install`:
|
||||
|
||||
```
|
||||
"dependencies": {
|
||||
"select2": "~4.0"
|
||||
}
|
||||
```
|
||||
|
||||
Or, run `bower install select2` from your project directory.
|
||||
|
||||
The precompiled distribution files will be available in `vendor/select2/dist/css/` and `vendor/select2/dist/js/`, relative to your project directory. Include them in your page:
|
||||
|
||||
```
|
||||
<link href="vendor/select2/dist/css/select2.min.css" rel="stylesheet" />
|
||||
<script src="vendor/select2/dist/js/select2.min.js"></script>
|
||||
```
|
||||
|
||||
## Manual installation
|
||||
|
||||
We strongly recommend that you use either a CDN or a package manager like Bower or npm. This will make it easier for you to deploy your project in different environments, and easily update Select2 when new versions are released. Nonetheless if you prefer to integrate Select2 into your project manually, you can [download the release of your choice](https://github.com/select2/select2/tags) from GitHub and copy the files from the `dist` directory into your project.
|
||||
|
||||
Include the compiled files in your page:
|
||||
|
||||
```
|
||||
<link href="path/to/select2.min.css" rel="stylesheet" />
|
||||
<script src="path/to/select2.min.js"></script>
|
||||
```
|
||||
106
public/assets/vendor/select2-4.1.0-rc.0/docs/pages/01.getting-started/02.basic-usage/docs.md
vendored
Executable file
106
public/assets/vendor/select2-4.1.0-rc.0/docs/pages/01.getting-started/02.basic-usage/docs.md
vendored
Executable file
@ -0,0 +1,106 @@
|
||||
---
|
||||
title: Basic usage
|
||||
taxonomy:
|
||||
category: docs
|
||||
process:
|
||||
twig: true
|
||||
never_cache_twig: true
|
||||
---
|
||||
|
||||
## Single select boxes
|
||||
|
||||
Select2 was designed to be a replacement for the standard `<select>` box that is displayed by the browser. By default it supports all options and operations that are available in a standard select box, but with added flexibility.
|
||||
|
||||
Select2 can take a regular select box like this...
|
||||
|
||||
<select class="js-states form-control"></select>
|
||||
|
||||
and turn it into this...
|
||||
|
||||
<div class="s2-example">
|
||||
<select class="js-example-basic-single js-states form-control"></select>
|
||||
</div>
|
||||
|
||||
```
|
||||
<select class="js-example-basic-single" name="state">
|
||||
<option value="AL">Alabama</option>
|
||||
...
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
<script type="text/javascript" class="js-code-example-basic-single">
|
||||
$(document).ready(function() {
|
||||
$('.js-example-basic-single').select2();
|
||||
});
|
||||
</script>
|
||||
|
||||
Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call `.select2()` on any jQuery selector where you would like to initialize Select2.
|
||||
|
||||
```
|
||||
// In your Javascript (external .js resource or <script> tag)
|
||||
$(document).ready(function() {
|
||||
$('.js-example-basic-single').select2();
|
||||
});
|
||||
```
|
||||
|
||||
>>>>>> The DOM cannot be safely manipulated until it is "ready". To make sure that your DOM is ready before the browser initializes the Select2 control, wrap your code in a [`$(document).ready()`](https://learn.jquery.com/using-jquery-core/document-ready/) block. Only one `$(document).ready()` block is needed per page.
|
||||
|
||||
## Multi-select boxes (pillbox)
|
||||
|
||||
Select2 also supports multi-value select boxes. The select below is declared with the `multiple` attribute.
|
||||
|
||||
<div class="s2-example">
|
||||
<p>
|
||||
<select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
**In your HTML:**
|
||||
|
||||
```
|
||||
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
|
||||
<option value="AL">Alabama</option>
|
||||
...
|
||||
<option value="WY">Wyoming</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
**In your Javascript (external `.js` resource or `<script>` tag):**
|
||||
|
||||
```
|
||||
$(document).ready(function() {
|
||||
$('.js-example-basic-multiple').select2();
|
||||
});
|
||||
```
|
||||
|
||||
<script type="text/javascript">
|
||||
$.fn.select2.amd.require([
|
||||
"select2/core",
|
||||
"select2/utils"
|
||||
], function (Select2, Utils, oldMatcher) {
|
||||
var $basicSingle = $(".js-example-basic-single");
|
||||
var $basicMultiple = $(".js-example-basic-multiple");
|
||||
|
||||
$.fn.select2.defaults.set("width", "100%");
|
||||
|
||||
$basicSingle.select2();
|
||||
$basicMultiple.select2();
|
||||
|
||||
function formatState (state) {
|
||||
if (!state.id) {
|
||||
return state.text;
|
||||
}
|
||||
var $state = $(
|
||||
'<span>' +
|
||||
'<img src="vendor/images/flags/' +
|
||||
state.element.value.toLowerCase() +
|
||||
'.png" class="img-flag" /> ' +
|
||||
state.text +
|
||||
'</span>'
|
||||
);
|
||||
return $state;
|
||||
};
|
||||
});
|
||||
|
||||
</script>
|
||||
64
public/assets/vendor/select2-4.1.0-rc.0/docs/pages/01.getting-started/03.builds-and-modules/docs.md
vendored
Executable file
64
public/assets/vendor/select2-4.1.0-rc.0/docs/pages/01.getting-started/03.builds-and-modules/docs.md
vendored
Executable file
@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Builds and modules
|
||||
taxonomy:
|
||||
category: docs
|
||||
process:
|
||||
twig: true
|
||||
---
|
||||
|
||||
## The different Select2 builds
|
||||
|
||||
Select2 provides multiple builds that are tailored to different
|
||||
environments where it is going to be used. If you think you need to use
|
||||
Select2 in a nonstandard environment, like when you are using AMD, you
|
||||
should read over the list below.
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Build name</th>
|
||||
<th>When you should use it</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr id="builds-standard">
|
||||
<td>
|
||||
Standard (<code>select2.js</code> / <code>select2.min.js</code>)
|
||||
</td>
|
||||
<td>
|
||||
This is the build that most people should be using for Select2. It
|
||||
includes the most commonly used features.
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="builds-full">
|
||||
<td>
|
||||
Full (<code>select2.full.js</code> / <code>select2.full.min.js</code>)
|
||||
</td>
|
||||
<td>
|
||||
You should only use this build if you need the recommended includes like <a href="https://github.com/jquery/jquery-mousewheel">jquery.mousewheel</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Using Select2 with AMD or CommonJS loaders
|
||||
|
||||
Select2 should work with most AMD- or CommonJS-compliant module loaders, including [RequireJS](http://requirejs.org/) and [almond](https://github.com/jrburke/almond). Select2 ships with a modified version of the [UMD jQuery template](https://github.com/umdjs/umd/blob/f208d385768ed30cd0025d5415997075345cd1c0/templates/jqueryPlugin.js) that supports both CommonJS and AMD environments.
|
||||
|
||||
### Configuration
|
||||
|
||||
For most AMD and CommonJS setups, the location of the data files used by Select2 will be automatically determined and handled without you needing to do anything.
|
||||
|
||||
Select2 internally uses AMD and the r.js build tool to build the files located in the `dist` folder. These are built using the files in the `src` folder, so _you can_ just point your modules to the Select2 source and load in `jquery.select2` or `select2/core` when you want to use Select2. The files located in the `dist` folder are also AMD-compatible, so you can point to that file if you want to load in all of the default Select2 modules.
|
||||
|
||||
If you are using Select2 in a build environment where preexisting module names are changed during a build step, Select2 may not be able to find optional language files. You can manually set the prefixes to use for these files using the `amdLanguageBase` options.
|
||||
|
||||
```
|
||||
$.fn.select2.defaults.set('amdLanguageBase', 'select2/i18n/');
|
||||
```
|
||||
|
||||
#### `amdLanguageBase`
|
||||
|
||||
Specifies the base AMD loader language path to be used for select2 language file resolution. This option typically doesn't need to be changed, but is available for situations where module names may change as a result of certain build environments.
|
||||
|
||||
>>> Due to [a bug in older versions](https://github.com/jrburke/requirejs/issues/1342) of the r.js build tool, Select2 was sometimes placed before jQuery in then compiled build file. Because of this, Select2 will trigger an error because it won't be able to find or load jQuery. By upgrading to version 2.1.18 or higher of the r.js build tool, you will be able to fix the issue.
|
||||
82
public/assets/vendor/select2-4.1.0-rc.0/docs/pages/01.getting-started/chapter.md
vendored
Executable file
82
public/assets/vendor/select2-4.1.0-rc.0/docs/pages/01.getting-started/chapter.md
vendored
Executable file
@ -0,0 +1,82 @@
|
||||
---
|
||||
title: Getting Started
|
||||
taxonomy:
|
||||
category: docs
|
||||
process:
|
||||
twig: true
|
||||
twig_first: true
|
||||
---
|
||||
|
||||
|
||||
|
||||
# Select2
|
||||
|
||||
The jQuery replacement for select boxes
|
||||
|
||||
<div class="s2-docs-featurette">
|
||||
<a class="button" href="https://github.com/select2/select2/releases">Releases</a>
|
||||
<a class="button" href="https://forums.select2.org">Forums</a>
|
||||
<a class="button" href="https://github.com/select2/select2">GitHub</a>
|
||||
</div>
|
||||
|
||||
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
|
||||
|
||||
<div class="s2-docs-featurette">
|
||||
<div class="grid">
|
||||
<div class="size-1-3 size-tablet-1-2">
|
||||
<i class="fa fa-language fa-4x"></i>
|
||||
<h4>In your language</h4>
|
||||
<p>
|
||||
Select2 comes with support for
|
||||
<a href="{{base_url_absolute}}/i18n#rtl-support">RTL environments</a>,
|
||||
<a href="{{base_url_absolute}}/i18n#diacritics">searching with diacritics</a> and
|
||||
<a href="{{base_url_absolute}}/i18n#">over 40 languages</a> built-in.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="size-1-3 size-tablet-1-2">
|
||||
<i class="fa fa-database fa-4x"></i>
|
||||
<h4>Remote data support</h4>
|
||||
<p>
|
||||
<a href="{{base_url_absolute}}/data-sources/ajax">Using AJAX</a> you can efficiently
|
||||
search large lists of items.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="size-1-3 size-tablet-1-2">
|
||||
<i class="fa fa-paint-brush fa-4x"></i>
|
||||
<h4>Theming</h4>
|
||||
<p>
|
||||
Fully skinnable, CSS built with Sass and an
|
||||
<a href="https://github.com/ttskch/select2-bootstrap4-theme">optional theme for Bootstrap 4</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="size-1-3 size-tablet-1-2">
|
||||
<i class="fa fa-plug fa-4x"></i>
|
||||
<h4>Fully extensible</h4>
|
||||
<p>
|
||||
The <a href="{{base_url_absolute}}/advanced">plugin system</a>
|
||||
allows you to easily customize Select2 to work exactly how you want it
|
||||
to.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="size-1-3 size-tablet-1-2">
|
||||
<i class="fa fa-tag fa-4x"></i>
|
||||
<h4>Dynamic item creation</h4>
|
||||
<p>
|
||||
Allow users to type in a new option and
|
||||
<a href="{{base_url_absolute}}/tagging">add it on the fly</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="size-1-3 size-tablet-1-2">
|
||||
<i class="fa fa-html5 fa-4x"></i>
|
||||
<h4>Full browser support</h4>
|
||||
<p>Support for both modern and legacy browsers is built-in, even including Internet Explorer 11.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user