site reworked with jekyll. added 2.0 and latest pages
This commit is contained in:
Igor Vaynberg
parent
926b3052b9
commit
8e696c48a0
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,2 +1,3 @@
|
|||||||
.idea
|
.idea
|
||||||
select2wip
|
select2wip
|
||||||
|
_site
|
||||||
|
|||||||
0
_config.yml
Executable file
0
_config.yml
Executable file
36
_includes/pages_list
Executable file
36
_includes/pages_list
Executable file
@ -0,0 +1,36 @@
|
|||||||
|
{% comment %}<!--
|
||||||
|
The pages_list include is a listing helper.
|
||||||
|
Usage:
|
||||||
|
1) assign the 'pages_list' variable to a valid array of pages or posts.
|
||||||
|
2) include JB/pages_list
|
||||||
|
example:
|
||||||
|
<ul>
|
||||||
|
{% assign pages_list = site.pages %}
|
||||||
|
{% include JB/pages_list %}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
Grouping: (optional):
|
||||||
|
assign the 'group' variable to constrain the list to only pages/posts
|
||||||
|
in the given group. Note you must define the group manually in the page/post
|
||||||
|
meta-data to use this feature.
|
||||||
|
Grouping is mainly helpful for non-post pages.
|
||||||
|
If you want to group posts, it's easier/better to tag them, then pass the tagged posts array.
|
||||||
|
i.e. site.tags.cool_tag (this returns an array of posts tagged: cool_tag)
|
||||||
|
|
||||||
|
This helper can be seen in use at: ../_layouts/default.html
|
||||||
|
-->{% endcomment %}
|
||||||
|
|
||||||
|
{% for node in pages_list %}
|
||||||
|
{% if node.title != null %}
|
||||||
|
{% if group == null or group == node.group %}
|
||||||
|
{% if page.url == node.url %}
|
||||||
|
<li class="active"><a href="{{ BASE_PATH }}{{node.url}}" class="active">{{node.title}}</a></li>
|
||||||
|
{% else %}
|
||||||
|
<li><a href="{{ BASE_PATH }}{{node.url}}">{{node.title}}</a></li>
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
|
||||||
|
{% assign pages_list = nil %}
|
||||||
|
{% assign group = nil %}
|
||||||
146
_layouts/main.html
Executable file
146
_layouts/main.html
Executable file
@ -0,0 +1,146 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>{{ page.title }}</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="description" content="Select2 JQuery Plugin">
|
||||||
|
<meta name="author" content="Igor Vaynberg">
|
||||||
|
|
||||||
|
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
|
||||||
|
<link href="prettify/prettify.css" rel="stylesheet"/>
|
||||||
|
<style type="text/css">
|
||||||
|
.zebra { background-color: #efefef; }
|
||||||
|
|
||||||
|
.select2-container img.flag { height: 10px; width: 15px; padding-right: 10px; }
|
||||||
|
|
||||||
|
.movie-result td {vertical-align: top }
|
||||||
|
.movie-image { width: 60px; }
|
||||||
|
.movie-image img { height: 80px; width: 60px; }
|
||||||
|
.movie-info { padding-left: 10px; vertical-align: top; }
|
||||||
|
.movie-title { font-size: 1.2em; padding-bottom: 15px; }
|
||||||
|
.movie-synopsis { font-size: .8em; color: #888; }
|
||||||
|
.select2-highlighted .movie-synopsis { font-size: .8em; color: #eee; }
|
||||||
|
.bigdrop .select2-results {max-height: 300px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<script src="js/html5shim.js"></script>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<script src="js/jquery-1.7.1.min.js"></script>
|
||||||
|
<script src="js/jquery.mousewheel.js"></script>
|
||||||
|
<script src="prettify/prettify.min.js"></script>
|
||||||
|
<script src="bootstrap/js/bootstrap.min.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
function setupExampleCode(id) {
|
||||||
|
var s = $("#script_"+id).html();
|
||||||
|
s = s.replace(/</g, "<");
|
||||||
|
s = s.substr(s.indexOf("\n") + 1);
|
||||||
|
s = s.substr(s.indexOf("\n") + 1);
|
||||||
|
s = s.substr(0, s.lastIndexOf("\n"));
|
||||||
|
s = s.substr(0, s.lastIndexOf("\n"));
|
||||||
|
$("#code_"+id).html(s);
|
||||||
|
}
|
||||||
|
|
||||||
|
var i, e;
|
||||||
|
for (i = 2; ; i++) {
|
||||||
|
e = $("#script_e" + i);
|
||||||
|
if (e.length == 0) break;
|
||||||
|
setupExampleCode("e" + i);
|
||||||
|
}
|
||||||
|
|
||||||
|
prettyPrint();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var _gaq = _gaq || [];
|
||||||
|
_gaq.push(['_setAccount', 'UA-29683190-1']);
|
||||||
|
_gaq.push(['_trackPageview']);
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||||
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||||
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||||
|
})();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<a href="https://github.com/ivaynberg/select2"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 2000" src="https://a248.e.akamai.net/assets.github.com/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
|
||||||
|
<div class="navbar">
|
||||||
|
<div class="navbar-inner">
|
||||||
|
<div class="container">
|
||||||
|
<a class="brand" href="{{ HOME_PATH }}">{{ site.title }}</a>
|
||||||
|
<ul class="nav">
|
||||||
|
{% assign pages_list = site.pages %}
|
||||||
|
{% assign group = 'navigation' %}
|
||||||
|
{% include pages_list %}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
|
||||||
|
<div class="hero-unit">
|
||||||
|
<h1>Select2</h1>
|
||||||
|
<p>Select2 is a jQuery based replacement for select boxes.
|
||||||
|
It supports searching, remote data sets, and infinite scrolling of results.
|
||||||
|
Look and feel of Select2 is based on the excellent
|
||||||
|
<a href="http://harvesthq.github.com/chosen/">Chosen</a> library.</p>
|
||||||
|
<p>
|
||||||
|
<a class="btn btn-primary btn-large" href="https://github.com/ivaynberg/select2">Learn more on GitHub»</a>
|
||||||
|
<a class="btn btn-success btn-large" href="https://github.com/ivaynberg/select2/downloads">Download»</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12">
|
||||||
|
<div class="alert alert-block alert-error">
|
||||||
|
<h4 class="alert-heading">Warning!</h4>
|
||||||
|
This page refers to an unreleased version of Select2 which may be unstable. For the latest stable
|
||||||
|
and previous versions please see links at the top. The code for this version is only available in the <a
|
||||||
|
href="https://github.com/ivaynberg/select2">master branch.</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
|
{{ content }}
|
||||||
|
|
||||||
|
|
||||||
|
<section id="about">
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12"><h2>About</h2></div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12">
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://github.com/ivaynberg/select2">Project Site</a></li>
|
||||||
|
<li><a href="https://github.com/ivaynberg/select2/issues">Bug Tracker</a></li>
|
||||||
|
<li><a href="https://groups.google.com/d/forum/select2">Mailing List</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<hr/>
|
||||||
|
<footer>
|
||||||
|
<p>Select2 is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache Software Foundation License Version 2.0</a>. Coded by Igor Vaynberg.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div> <!-- /container -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
166
index.html
166
index.html
@ -1,44 +1,10 @@
|
|||||||
<!DOCTYPE html>
|
---
|
||||||
<html lang="en">
|
layout: main
|
||||||
<head>
|
title: Select2 2.0
|
||||||
<meta charset="utf-8">
|
group: navigation
|
||||||
<title>Select2</title>
|
---
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta name="description" content="">
|
|
||||||
<meta name="author" content="">
|
|
||||||
|
|
||||||
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
|
|
||||||
<link href="prettify/prettify.css" rel="stylesheet"/>
|
|
||||||
<link href="select2-2.0/select2.css" rel="stylesheet"/>
|
<link href="select2-2.0/select2.css" rel="stylesheet"/>
|
||||||
<style type="text/css">
|
|
||||||
body {
|
|
||||||
padding-top: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zebra { background-color: #efefef; }
|
|
||||||
|
|
||||||
.select2-container img.flag { height: 10px; width: 15px; padding-right: 10px; }
|
|
||||||
|
|
||||||
.movie-result td {vertical-align: top }
|
|
||||||
.movie-image { width: 60px; }
|
|
||||||
.movie-image img { height: 80px; width: 60px; }
|
|
||||||
.movie-info { padding-left: 10px; vertical-align: top; }
|
|
||||||
.movie-title { font-size: 1.2em; padding-bottom: 15px; }
|
|
||||||
.movie-synopsis { font-size: .8em; color: #888; }
|
|
||||||
.select2-highlighted .movie-synopsis { font-size: .8em; color: #eee; }
|
|
||||||
.bigdrop .select2-results {max-height: 300px;}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/>
|
|
||||||
|
|
||||||
<!--[if lt IE 9]>
|
|
||||||
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
||||||
<![endif]-->
|
|
||||||
|
|
||||||
<script src="js/jquery-1.7.1.min.js"></script>
|
|
||||||
<script src="js/jquery.mousewheel.js"></script>
|
|
||||||
<script src="prettify/prettify.min.js"></script>
|
|
||||||
<script src="bootstrap/js/bootstrap.min.js"></script>
|
|
||||||
<script src="select2-2.0/select2.js"></script>
|
<script src="select2-2.0/select2.js"></script>
|
||||||
|
|
||||||
<script id="script_e1">
|
<script id="script_e1">
|
||||||
@ -196,98 +162,18 @@ $("#e10_3").select2({
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
|
||||||
$(document).ready(function() {
|
|
||||||
|
|
||||||
function setupExampleCode(id) {
|
<div class="row">
|
||||||
var s = $("#script_"+id).html();
|
<div class="span12">
|
||||||
s = s.replace(/</g, "<");
|
<div class="alert alert-block alert-info">
|
||||||
s = s.substr(s.indexOf("\n") + 1);
|
For latest version see the <strong>Select2 Latest</strong> link in the top menu.
|
||||||
s = s.substr(s.indexOf("\n") + 1);
|
|
||||||
s = s.substr(0, s.lastIndexOf("\n"));
|
|
||||||
s = s.substr(0, s.lastIndexOf("\n"));
|
|
||||||
$("#code_"+id).html(s);
|
|
||||||
}
|
|
||||||
|
|
||||||
var i, e;
|
|
||||||
for (i = 2; ; i++) {
|
|
||||||
e = $("#script_e" + i);
|
|
||||||
if (e.length == 0) break;
|
|
||||||
setupExampleCode("e" + i);
|
|
||||||
}
|
|
||||||
|
|
||||||
prettyPrint();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
var _gaq = _gaq || [];
|
|
||||||
_gaq.push(['_setAccount', 'UA-29683190-1']);
|
|
||||||
_gaq.push(['_trackPageview']);
|
|
||||||
|
|
||||||
(function() {
|
|
||||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
||||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
||||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
||||||
})();
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="navbar navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
</a>
|
|
||||||
<div class="nav-collapse">
|
|
||||||
<ul class="nav">
|
|
||||||
<li class="active"><a href="index.html">Select2 2.0</a></li>
|
|
||||||
<li><a href="select2-1.0.html">Select2 1.0</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!--/.nav-collapse -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<a href="https://github.com/ivaynberg/select2"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 2000" src="https://a248.e.akamai.net/assets.github.com/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<div class="hero-unit">
|
<header class="jumbotron subhead">
|
||||||
<h1>Select2</h1>
|
|
||||||
<p>Select2 is a jQuery based replacement for select boxes.
|
|
||||||
It supports searching, remote data sets, and infinite scrolling of results.
|
|
||||||
Look and feel of Select2 is based on the excellent
|
|
||||||
<a href="http://harvesthq.github.com/chosen/">Chosen</a> library.</p>
|
|
||||||
<p>
|
|
||||||
<a class="btn btn-primary btn-large" href="https://github.com/ivaynberg/select2">Learn more on GitHub»</a>
|
|
||||||
<a class="btn btn-success btn-large" href="https://github.com/ivaynberg/select2/downloads">Download»</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--
|
|
||||||
<div class="row">
|
|
||||||
<div class="span12">
|
|
||||||
<div class="alert alert-block alert-error">
|
|
||||||
<h4 class="alert-heading">Warning!</h4>
|
|
||||||
This page refers to an unreleased version of Select2 which may be unstable. For the latest stable
|
|
||||||
and previous versions please see links at the top. The code for this version is only available in the <a
|
|
||||||
href="https://github.com/ivaynberg/select2">master branch.</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<header class="jumbotron subhead">
|
|
||||||
<div class="subnav">
|
<div class="subnav">
|
||||||
<ul class="nav nav-pills">
|
<ul class="nav nav-pills">
|
||||||
<li><a href="#changelog">Changelog</a></li>
|
<li><a href="#changelog">Changelog</a></li>
|
||||||
@ -350,7 +236,7 @@ $("#e10_3").select2({
|
|||||||
</div>
|
</div>
|
||||||
<div class="span8">
|
<div class="span8">
|
||||||
<h3>Example Code</h3>
|
<h3>Example Code</h3>
|
||||||
<pre class="prettyprint linenums" id="code_e1">
|
<pre class="prettyprint linenums">
|
||||||
<head>
|
<head>
|
||||||
<link href="select2.css" rel="stylesheet"/>
|
<link href="select2.css" rel="stylesheet"/>
|
||||||
<script src="select2.js"></script>
|
<script src="select2.js"></script>
|
||||||
@ -992,31 +878,3 @@ $("#tags").select2({
|
|||||||
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
<section id="about">
|
|
||||||
<div class="row">
|
|
||||||
<div class="span12"><h2>About</h2></div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="span12">
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://github.com/ivaynberg/select2">Project Site</a></li>
|
|
||||||
<li><a href="https://github.com/ivaynberg/select2/issues">Bug Tracker</a></li>
|
|
||||||
<li><a href="https://groups.google.com/d/forum/select2">Mailing List</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
<footer>
|
|
||||||
<p>Select2 is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache Software Foundation License Version 2.0</a>. Coded by Igor Vaynberg.</p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div> <!-- /container -->
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
3
js/html5shim.js
Executable file
3
js/html5shim.js
Executable file
@ -0,0 +1,3 @@
|
|||||||
|
/*! HTML5 Shiv vpre3.6 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
|
||||||
|
Uncompressed source: https://github.com/aFarkas/html5shiv */
|
||||||
|
(function(a,b){function h(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function i(){var a=l.elements;return typeof a=="string"?a.split(" "):a}function j(a){var b={},c=a.createElement,f=a.createDocumentFragment,g=f();a.createElement=function(a){if(!l.shivMethods)return c(a);var f;return b[a]?f=b[a].cloneNode():e.test(a)?f=(b[a]=c(a)).cloneNode():f=c(a),f.canHaveChildren&&!d.test(a)?g.appendChild(f):f},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+i().join().replace(/\w+/g,function(a){return c(a),g.createElement(a),'c("'+a+'")'})+");return n}")(l,g)}function k(a){var b;return a.documentShived?a:(l.shivCSS&&!f&&(b=!!h(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),g||(b=!j(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea|object|iframe|option|optgroup)$/i,e=/^<|^(?:a|b|button|code|div|fieldset|form|h1|h2|h3|h4|h5|h6|i|iframe|img|input|label|li|link|ol|option|p|param|q|script|select|span|strong|style|table|tbody|td|textarea|tfoot|th|thead|tr|ul)$/i,f,g;(function(){var c=b.createElement("a");c.innerHTML="<xyz></xyz>",f="hidden"in c,f&&typeof injectElementWithStyles=="function"&&injectElementWithStyles("#modernizr{}",function(b){b.hidden=!0,f=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle).display=="none"}),g=c.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var l={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:k};a.html5=l,k(b)})(this,document)
|
||||||
136
select2-1.0.html
136
select2-1.0.html
@ -1,45 +1,10 @@
|
|||||||
<!DOCTYPE html>
|
---
|
||||||
<html lang="en">
|
layout: main
|
||||||
<head>
|
title: Select2 1.0
|
||||||
<meta charset="utf-8">
|
group: navigation
|
||||||
<title>Select2</title>
|
---
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<link href="select2-1.0/select2.css" rel="stylesheet"/>
|
||||||
<meta name="description" content="">
|
<script src="select2-1.0/select2-1.0.js"></script>
|
||||||
<meta name="author" content="">
|
|
||||||
|
|
||||||
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
|
|
||||||
<link href="prettify/prettify.css" rel="stylesheet"/>
|
|
||||||
<link href="select2-1.0/select2.css" rel="stylesheet"/>
|
|
||||||
<style type="text/css">
|
|
||||||
body {
|
|
||||||
padding-top: 60px;
|
|
||||||
padding-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zebra { background-color: #efefef; }
|
|
||||||
|
|
||||||
.select2-container img.flag { height: 10px; width: 15px; padding-right: 10px; }
|
|
||||||
|
|
||||||
.movie-result td {vertical-align: top }
|
|
||||||
.movie-image { width: 60px; }
|
|
||||||
.movie-image img { height: 80px; width: 60px; }
|
|
||||||
.movie-info { padding-left: 10px; vertical-align: top; }
|
|
||||||
.movie-title { font-size: 1.2em; padding-bottom: 15px; }
|
|
||||||
.movie-synopsis { font-size: .8em; color: #888; }
|
|
||||||
.select2-highlighted .movie-synopsis { font-size: .8em; color: #eee; }
|
|
||||||
.bigdrop .select2-results {max-height: 300px;}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet"/>
|
|
||||||
|
|
||||||
<!--[if lt IE 9]>
|
|
||||||
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
||||||
<![endif]-->
|
|
||||||
|
|
||||||
<script src="js/jquery-1.7.1.min.js"></script>
|
|
||||||
<script src="prettify/prettify.min.js"></script>
|
|
||||||
<script src="bootstrap/js/bootstrap.min.js"></script>
|
|
||||||
<script src="select2-1.0/select2-1.0.js"></script>
|
|
||||||
|
|
||||||
<script id="script_e1">
|
<script id="script_e1">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
@ -47,7 +12,6 @@ $("#e1").select2();
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<script id="script_e2">
|
<script id="script_e2">
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
$("#e2").select2({
|
$("#e2").select2({
|
||||||
@ -200,28 +164,7 @@ $("#e8_set").click(
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$(document).ready(function() {
|
|
||||||
|
|
||||||
function setupExampleCode(id) {
|
|
||||||
var s = $("#script_"+id).html();
|
|
||||||
s = s.replace(/</g, "<");
|
|
||||||
s = s.substr(s.indexOf("\n") + 1);
|
|
||||||
s = s.substr(s.indexOf("\n") + 1);
|
|
||||||
s = s.substr(0, s.lastIndexOf("\n"));
|
|
||||||
s = s.substr(0, s.lastIndexOf("\n"));
|
|
||||||
$("#code_"+id).html(s);
|
|
||||||
}
|
|
||||||
|
|
||||||
setupExampleCode("e2");
|
|
||||||
setupExampleCode("e3");
|
|
||||||
setupExampleCode("e4");
|
|
||||||
setupExampleCode("e5");
|
|
||||||
setupExampleCode("e6");
|
|
||||||
setupExampleCode("e7");
|
|
||||||
setupExampleCode("e8");
|
|
||||||
prettyPrint();});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
|
||||||
@ -237,43 +180,6 @@ $("#e8_set").click(
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="navbar navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
<span class="icon-bar"></span>
|
|
||||||
</a>
|
|
||||||
<div class="nav-collapse">
|
|
||||||
<ul class="nav">
|
|
||||||
<li><a href="index.html">Select2 2.0</a></li>
|
|
||||||
<li class="active"><a href="select2-1.0.html">Select2 1.0</a></li>
|
|
||||||
</ul>
|
|
||||||
</div><!--/.nav-collapse -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a href="https://github.com/ivaynberg/select2"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 2000" src="https://a248.e.akamai.net/assets.github.com/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub"></a>
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
|
|
||||||
<div class="hero-unit">
|
|
||||||
<h1>Select2</h1>
|
|
||||||
<p>Select2 is a jQuery based replacement for select boxes.
|
|
||||||
It supports searching, remote data sets, and infinite scrolling of results.
|
|
||||||
Look and feel of Select2 is based on the excellent
|
|
||||||
<a href="http://harvesthq.github.com/chosen/">Chosen</a> library.</p>
|
|
||||||
<p>
|
|
||||||
<a class="btn btn-primary btn-large" href="https://github.com/ivaynberg/select2">Learn more on GitHub»</a>
|
|
||||||
<a class="btn btn-success btn-large" href="https://github.com/ivaynberg/select2/downloads">Download»</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span12">
|
<div class="span12">
|
||||||
@ -557,31 +463,3 @@ $("#e8_set").click(
|
|||||||
<div class="span12"><h3>selected</h3></div>
|
<div class="span12"><h3>selected</h3></div>
|
||||||
</div>
|
</div>
|
||||||
<p>Signals a selection has been made</p>
|
<p>Signals a selection has been made</p>
|
||||||
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="span12"><h2>Community</h2></div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="span12">
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://github.com/ivaynberg/select2">Project Site</a></li>
|
|
||||||
<li><a href="https://github.com/ivaynberg/select2/issues">Bug Tracker</a></li>
|
|
||||||
<li><a href="https://groups.google.com/d/forum/select2">Mailing List</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<hr/>
|
|
||||||
<footer>
|
|
||||||
<p>Select2 is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache Software Foundation License Version 2.0</a></p>
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div> <!-- /container -->
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
883
select2-latest.html
Executable file
883
select2-latest.html
Executable file
@ -0,0 +1,883 @@
|
|||||||
|
---
|
||||||
|
layout: main
|
||||||
|
title: Select2 Latest
|
||||||
|
group: navigation
|
||||||
|
---
|
||||||
|
|
||||||
|
<link href="select2-master/select2.css" rel="stylesheet"/>
|
||||||
|
<script src="select2-master/select2.js"></script>
|
||||||
|
|
||||||
|
<script id="script_e1">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("#e1").select2();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script id="script_e3">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("#e3").select2({
|
||||||
|
minimumInputLength: 2
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script id="script_e4">
|
||||||
|
$(document).ready(function() {
|
||||||
|
function format(state) {
|
||||||
|
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
|
||||||
|
}
|
||||||
|
$("#e4").select2({
|
||||||
|
formatResult: format,
|
||||||
|
formatSelection: format
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<script id="script_e5">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("#e5").select2({
|
||||||
|
minimumInputLength: 1,
|
||||||
|
query: function (query) {
|
||||||
|
var data = {results: []}, i, j, s;
|
||||||
|
for (i = 1; i < 5; i++) {
|
||||||
|
s = "";
|
||||||
|
for (j = 0; j < i; j++) {s = s + query.term;}
|
||||||
|
data.results.push({id: query.term + i, text: s});
|
||||||
|
}
|
||||||
|
query.callback(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
function movieFormatResult(movie) {
|
||||||
|
var markup = "<table class='movie-result'><tr>";
|
||||||
|
if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
|
||||||
|
markup += "<td class='movie-image'><img src='" + movie.posters.thumbnail + "'/></td>";
|
||||||
|
}
|
||||||
|
markup += "<td class='movie-info'><div class='movie-title'>" + movie.title + "</div>";
|
||||||
|
if (movie.critics_consensus !== undefined) {
|
||||||
|
markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
|
||||||
|
}
|
||||||
|
else if (movie.synopsis !== undefined) {
|
||||||
|
markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
|
||||||
|
}
|
||||||
|
markup += "</td></tr></table>"
|
||||||
|
return markup;
|
||||||
|
}
|
||||||
|
|
||||||
|
function movieFormatSelection(movie) {
|
||||||
|
return movie.title;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script id="script_e6">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("#e6").select2({
|
||||||
|
placeholder: {title: "Search for a movie", id: ""},
|
||||||
|
minimumInputLength: 1,
|
||||||
|
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
|
||||||
|
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
|
||||||
|
dataType: 'jsonp',
|
||||||
|
data: function (term, page) {
|
||||||
|
return {
|
||||||
|
q: term, // search term
|
||||||
|
page_limit: 10,
|
||||||
|
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
|
||||||
|
};
|
||||||
|
},
|
||||||
|
results: function (data, page) { // parse the results into the format expected by Select2.
|
||||||
|
// since we are using custom formatting functions we do not need to alter remote JSON data
|
||||||
|
return {results: data.movies};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
|
||||||
|
formatSelection: movieFormatSelection // omitted for brevity, see the source of this page
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script id="script_e7">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("#e7").select2({
|
||||||
|
placeholder: {title: "Search for a movie", id: ""},
|
||||||
|
minimumInputLength: 3,
|
||||||
|
ajax: {
|
||||||
|
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
|
||||||
|
dataType: 'jsonp',
|
||||||
|
quietMillis: 100,
|
||||||
|
data: function (term, page) { // page is the one-based page number tracked by Select2
|
||||||
|
return {
|
||||||
|
q: term, //search term
|
||||||
|
page_limit: 10, // page size
|
||||||
|
page: page, // page number
|
||||||
|
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
|
||||||
|
};
|
||||||
|
},
|
||||||
|
results: function (data, page) {
|
||||||
|
var more = (page * 10) < data.total; // whether or not there are more results available
|
||||||
|
|
||||||
|
// notice we return the value of more so Select2 knows if more results can be loaded
|
||||||
|
return {results: data.movies, more: more};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
|
||||||
|
formatSelection: movieFormatSelection // omitted for brevity, see the source of this page
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script id="script_e9">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("#e9").select2();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script id="script_e10">
|
||||||
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
$("#e10").select2({
|
||||||
|
data:[{id:0,text:'enhancement'},{id:1,text:'bug'},{id:2,text:'duplicate'},{id:3,text:'invalid'},{id:4,text:'wontfix'}]
|
||||||
|
});
|
||||||
|
|
||||||
|
var data=[{id:0,tag:'enhancement'},{id:1,tag:'bug'},{id:2,tag:'duplicate'},{id:3,tag:'invalid'},{id:4,tag:'wontfix'}];
|
||||||
|
function format(item) { return item.tag; };
|
||||||
|
|
||||||
|
$("#e10_2").select2({
|
||||||
|
data:{ results: data, text: 'tag' },
|
||||||
|
formatSelection: format,
|
||||||
|
formatResult: format
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#e10_3").select2({
|
||||||
|
data:{ results: data, text: function(item) { console.log('called with', item); return item.tag; } },
|
||||||
|
formatSelection: format,
|
||||||
|
formatResult: format
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12">
|
||||||
|
<div class="alert alert-block alert-error">
|
||||||
|
<h4 class="alert-heading">Warning!</h4>
|
||||||
|
This page refers to an unreleased version of Select2 which may be unstable. For the latest stable
|
||||||
|
and previous versions please see links at the top. The code for this version is only available in the <a
|
||||||
|
href="https://github.com/ivaynberg/select2">master branch.</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<header class="jumbotron subhead">
|
||||||
|
<div class="subnav">
|
||||||
|
<ul class="nav nav-pills">
|
||||||
|
<li><a href="#changelog">Changelog</a></li>
|
||||||
|
<li class="dropdown">
|
||||||
|
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Examples <b class="caret"></b></a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#basics">Basics</a></li>
|
||||||
|
<li><a href="#multi">Multi-Value</a></li>
|
||||||
|
<li><a href="#placeholders">Placeholders</a></li>
|
||||||
|
<li><a href="#minimum">Minimum Input Length</a></li>
|
||||||
|
<li><a href="#templating">Templating</a></li>
|
||||||
|
<li><a href="#data">Loading Data</a></li>
|
||||||
|
<li><a href="#data_array">Array Data</a></li>
|
||||||
|
<li><a href="#ajax">Remote/AJAX Data</a></li>
|
||||||
|
<li><a href="#infinite">Infinite Scrolling of Remote/AJAX data</a></li>
|
||||||
|
<li><a href="#tags">Tagging Support</a></li>
|
||||||
|
<li><a href="#pragmatic">Pragmatic control</a></li>
|
||||||
|
<li><a href="#event_change">Events: Change</a></li>
|
||||||
|
<li><a href="#event_ext_change">Events: Reacting to External Changes</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="#documentation">Documentation</a></li>
|
||||||
|
<li><a href="#about">About</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<section id="changelog">
|
||||||
|
<h2>Changelog from 2.0</h2>
|
||||||
|
<div class="row"><div class="span12">
|
||||||
|
<ul>
|
||||||
|
<li>Support for selection of multiple values. See <code>multiple</code> option in the docs.</li>
|
||||||
|
<li>Built-in tagging support. See the <strong>Tagging</strong> example.</li>
|
||||||
|
<li>Ability to reset back to placeholder once a selection has been made. See <code>allowClear</code> option in the docs.</li>
|
||||||
|
<li>Simplified paging of remote datasets by tracking the page number automatically.</li>
|
||||||
|
<li>Minimum required jQuery version changed from 1.7+ to 1.4.2</li>
|
||||||
|
</ul>
|
||||||
|
</div></div>
|
||||||
|
</section>
|
||||||
|
-->
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12">
|
||||||
|
<h2>Examples</h2>
|
||||||
|
<hr/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="row" id="basics">
|
||||||
|
<div class="span4">
|
||||||
|
<h3>The Basics</h3>
|
||||||
|
<p>Select2 can take a regular select box like this:</p>
|
||||||
|
<p><select style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select></p>
|
||||||
|
<p>and turns it into:</p>
|
||||||
|
<p>
|
||||||
|
<select id="e1" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
|
||||||
|
</p>
|
||||||
|
<p>with support for quick option filtering via a search box</p>
|
||||||
|
</div>
|
||||||
|
<div class="span8">
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e1">
|
||||||
|
<head>
|
||||||
|
<link href="select2.css" rel="stylesheet"/>
|
||||||
|
<script src="select2.js"></script>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function() { $("#e1").select2(); });
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<select id="e1">
|
||||||
|
<option value="AL">Alabama</option>
|
||||||
|
...
|
||||||
|
<option value="WY">Wyoming</option>
|
||||||
|
</select>
|
||||||
|
</body>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="zebra row" id="multi">
|
||||||
|
<div class="span4">
|
||||||
|
<h3>Multi-Value Select Boxes</h3>
|
||||||
|
<p>Select2 also supports multi-value select boxes. The <code>select</code> below is declared with the <code>multiple</code> attribute. Select2 automatially picks up on this:</p>
|
||||||
|
<p>
|
||||||
|
<select multiple name="e9" id="e9" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="span8">
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e9">
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
<article class="row" id="placeholders">
|
||||||
|
<script id="script_e2">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("#e2").select2({
|
||||||
|
placeholder: "Select a State",
|
||||||
|
allowClear: true
|
||||||
|
});
|
||||||
|
$("#e2_2").select2({
|
||||||
|
placeholder: "Select a State"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<div class="span4">
|
||||||
|
<h3>Placeholders</h3>
|
||||||
|
<p>A placeholder value can be defined and will be displayed until a selection is made:</p>
|
||||||
|
<p>
|
||||||
|
<select id="e2" style="width:300px"><option></option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<select id="e2_2" multiple="multiple" style="width:300px"><option></option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
|
||||||
|
</p>
|
||||||
|
<p>The placeholder can be declared via a <code>data-placeholder</code> attribute attached to the <code>select</code>, or via the <code>placeholder</code> configuration element as seen in the example code</p>
|
||||||
|
<p>Optionally, a clear button (visible once a selection is made) is available to reset the select box back to the placeholder value.</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="span8">
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e2">
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="zebra row" id="minimum">
|
||||||
|
<div class="span4">
|
||||||
|
<h3>Minimum Input</h3>
|
||||||
|
<p>Select2 supports a minimum input setting which is useful for large remote datasets where short search terms are not very useful:</p>
|
||||||
|
<p>
|
||||||
|
<select id="e3" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="span8">
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e3"></pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="row" id="templating">
|
||||||
|
<div class="span4">
|
||||||
|
<h3>Templating</h3>
|
||||||
|
<p>Various display options of the Select2 component can be changed:</p>
|
||||||
|
<p>
|
||||||
|
<select id="e4" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="span8">
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e4"></pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="zebra row" id="data">
|
||||||
|
<div class="span4">
|
||||||
|
<h3>Loading Data</h3>
|
||||||
|
<p>Select2 uses a function to load result data. Here is a trivial example that creates choices that consist of user's input repeated a number of times:</p>
|
||||||
|
<p>
|
||||||
|
<input type="hidden" id="e5" style="width:300px"/>
|
||||||
|
</p>
|
||||||
|
<p>In order to take advantage of custom data loading Select2 should be attached to an <code>input type='hidden'</code> tag, otherwise data is parsed from <code>select</code>'s <code>option</code> tags.</code></p>
|
||||||
|
</div>
|
||||||
|
<div class="span8">
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e5">
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="row" id="data_array">
|
||||||
|
<div class="span4">
|
||||||
|
<h3>Loading Array Data</h3>
|
||||||
|
<p>Select2 provides some shortcuts that make it easy to access local data stored in an array instead of having to write a <code>query</code> function mentioned in the example above.</p>
|
||||||
|
<p>Example below inlines the data by specifying an array in the <code>data</code> element. Items in such an array must have <code>id</code> and <code>text</code> keys.</p>
|
||||||
|
<p>
|
||||||
|
<input type="hidden" id="e10" style="width:300px"/>
|
||||||
|
</p>
|
||||||
|
<p>If your data does not have a <code>text</code> key, an alternative key can be specified as a string:</p>
|
||||||
|
<p>
|
||||||
|
<input type="hidden" id="e10_2" style="width:300px"/>
|
||||||
|
</p>
|
||||||
|
<p>or as a function:</p>
|
||||||
|
<p>
|
||||||
|
<input type="hidden" id="e10_3" style="width:300px"/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="span8">
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e10">
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="zebra row" id="ajax">
|
||||||
|
<div class="span12">
|
||||||
|
<h3>Loading Remote Data</h3>
|
||||||
|
<p>Select2 comes with AJAX/JSONP support built in. In this example we will search for a movie using Rotten Tomatoes API:</p>
|
||||||
|
<p>
|
||||||
|
<input type="hidden" class="bigdrop" id="e6" style="width:600px"/>
|
||||||
|
</p>
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e6"></pre>
|
||||||
|
<p>Select2 uses jQuery's <code>$.ajax</code> function to execute the remote call by default. An alternative <code>transport</code> function can be specified in the ajax settings, or an entirely custom implementation can be built by providing a custom <code>query</code> function instead of using the <code>ajax</code> helper</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="row" id="infinite">
|
||||||
|
<div class="span12">
|
||||||
|
<h3>Infinite Scroll with Remote Data</h3>
|
||||||
|
<p>Select2 supports lazy-appending of results when the result list is scrolled to the end.
|
||||||
|
In order to enable the remote service must support some sort of a paging mechanism and
|
||||||
|
the query function given to Select2 must take advantage of it. The following example demonstrates
|
||||||
|
how this can be set up. Search for some keyword and then scroll the result list to the end to
|
||||||
|
see more results load:</p>
|
||||||
|
<p>
|
||||||
|
<input type="hidden" class="bigdrop" id="e7" style="width:600px"/>
|
||||||
|
</p>
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e7"></pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="zebra row" id="pragmatic">
|
||||||
|
<script id="script_e8">
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("#e8").select2();
|
||||||
|
$("#e8_get").click(function () { alert("Selected value is: "+$("#e8").select2("val"));});
|
||||||
|
$("#e8_set").click(function () { $("#e8").select2("val", "CA"); });
|
||||||
|
$("#e8_open").click(function () { $("#e8").select2("open"); });
|
||||||
|
$("#e8_close").click(function () { $("#e8").select2("close"); });
|
||||||
|
$("#e8_2").select2();
|
||||||
|
$("#e8_2_get").click(function () { alert("Selected value is: "+$("#e8_2").select2("val"));});
|
||||||
|
$("#e8_2_set").click(function () { $("#e8_2").select2("val", ["CA","MA"]); });
|
||||||
|
$("#e8_2_open").click(function () { $("#e8_2").select2("open"); });
|
||||||
|
$("#e8_2_close").click(function () { $("#e8_2").select2("close"); });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<div class="span4">
|
||||||
|
<h3>Pragmatic Access</h3>
|
||||||
|
<p>Select2 supports methods that allow pragmatic control of the componentL</p>
|
||||||
|
<p>
|
||||||
|
<input type="button" class="btn-primary" id="e8_get" value="Alert selected value"/>
|
||||||
|
<input type="button" class="btn-info" id="e8_set" value="Set to California"/>
|
||||||
|
<input type="button" class="btn-warning" id="e8_open" value="Open"/>
|
||||||
|
<input type="button" class="btn-warning" id="e8_close" value="Close"/>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<select id="e8" style="width:300px"><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<input type="button" class="btn-primary" id="e8_2_get" value="Alert selected value"/>
|
||||||
|
<input type="button" class="btn-info" id="e8_2_set" value="Set to California and Massachusetts"/>
|
||||||
|
<input type="button" class="btn-warning" id="e8_2_open" value="Open"/>
|
||||||
|
<input type="button" class="btn-warning" id="e8_2_close" value="Close"/>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<select id="e8_2" multiple style="width:300px"><option value="AL" selected>Alabama</option><option value="AK">Alaska</option><option value="AZ" selected>Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="span8">
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e8"></pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="row" id="event_change">
|
||||||
|
<script id="script_e11">
|
||||||
|
$(document).ready(function () {
|
||||||
|
$("#e11").select2({
|
||||||
|
placeholder: "Select report type",
|
||||||
|
allowClear: true,
|
||||||
|
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
|
||||||
|
});
|
||||||
|
$("#e11_2").select2({
|
||||||
|
createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} },
|
||||||
|
multiple: true,
|
||||||
|
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
|
||||||
|
});
|
||||||
|
function show() {
|
||||||
|
var e=$("<div style='background-color:yellow;'>change fired</div>");
|
||||||
|
$("#events_11").append(e);
|
||||||
|
e.animate({opacity:0}, 1000, 'linear', function() { e.remove(); });
|
||||||
|
};
|
||||||
|
$("#e11").bind("change", show);
|
||||||
|
$("#e11_2").bind("change", show);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<div class="span4">
|
||||||
|
<h3>Change Event</h3>
|
||||||
|
|
||||||
|
<p>Select2 triggers the <code>change</code> event on the original element whenever its value is changed by
|
||||||
|
the user</p>
|
||||||
|
|
||||||
|
<p><input type="hidden" id="e11" style="width:300px"/></p>
|
||||||
|
|
||||||
|
<p><input type="hidden" id="e11_2" style="width:300px"/></p>
|
||||||
|
|
||||||
|
<p id="events_11"></p>
|
||||||
|
</div>
|
||||||
|
<div class="span8">
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e11">
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<article class="row zebra" id="tags">
|
||||||
|
<script id="script_e12">
|
||||||
|
$(document).ready(function () {
|
||||||
|
$("#e12").select2({tags:["red", "green", "blue"]});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<div class="span4">
|
||||||
|
<h3>Tagging Support</h3>
|
||||||
|
|
||||||
|
<p>Select2 can be used to quickly set up fields used for tagging</p>
|
||||||
|
|
||||||
|
<p><input type="hidden" id="e12" style="width:300px" value="brown, red, green"/></p>
|
||||||
|
<p>Note that when tagging is enabled the user can select from pre-existing tags or create a new tag by
|
||||||
|
picking the first choice which is what the user has typed into the search box so far.</p>
|
||||||
|
</div>
|
||||||
|
<div class="span8">
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e12">
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="row" id="event_ext_change">
|
||||||
|
<script id="script_e13">
|
||||||
|
$(document).ready(function () {
|
||||||
|
$("#e13").select2();
|
||||||
|
$("#e13_ca").click(function() { $("#e13").val("CA").trigger("change"); });
|
||||||
|
$("#e13_ak_co").click(function() { $("#e13").val(["AK","CO"]).trigger("change"); });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<div class="span4">
|
||||||
|
<h3>Reacting to external value changes</h3>
|
||||||
|
|
||||||
|
<p>Select2 can react to external value changes and keep its selection in-sync. This feature allows
|
||||||
|
Select2 to work seamlessly with front-end frameworks that use data binding between ui components
|
||||||
|
and model values.</p>
|
||||||
|
<p><select id="e13" multiple style="width:300px"><option value="AL" selected>Alabama</option><option value="AK">Alaska</option><option value="AZ" selected>Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/></p>
|
||||||
|
<p><input type="button" id="e13_ca" class="btn btn-primary" value="Select California"/> <input type="button" id="e13_ak_co" class="btn btn-primary"value="Select Alaska and Colorado"/></p>
|
||||||
|
<p class="alert alert-alert">This feature is only available when initSelection() function is provided in
|
||||||
|
the options. This function is needed to map the choice ids set on the element to objects used by
|
||||||
|
Select2. This function is set by default when Select2 is attached to a <code>select</code> or when
|
||||||
|
the <code>tags</code> helper function is used.</p>
|
||||||
|
</div>
|
||||||
|
<div class="span8">
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e13">
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="row zebra" id="lifecycle">
|
||||||
|
<script id="script_e14">
|
||||||
|
$(document).ready(function () {
|
||||||
|
$("#e14").select2();
|
||||||
|
$("#e14_init").click(function() { $("#e14").select2(); });
|
||||||
|
$("#e14_destroy").click(function() { $("#e14").select2("destroy"); });
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<div class="span4">
|
||||||
|
<h3>Select2 Lifecycle</h3>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
|
||||||
|
</p>
|
||||||
|
<p><select id="e14" multiple style="width:300px"><option value="AL" selected>Alabama</option><option value="AK">Alaska</option><option value="AZ" selected>Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select><br/></p>
|
||||||
|
<p><input type="button" id="e14_init" class="btn btn-primary" value="Init"/> <input type="button" id="e14_destroy" class="btn btn-warning"value="Destroy"/></p>
|
||||||
|
</div>
|
||||||
|
<div class="span8">
|
||||||
|
<h3>Example Code</h3>
|
||||||
|
<pre class="prettyprint linenums" id="code_e14">
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- -->
|
||||||
|
<!-- DOCUMENTATION -->
|
||||||
|
<!-- -->
|
||||||
|
|
||||||
|
|
||||||
|
<section id="documentation">
|
||||||
|
|
||||||
|
<div class="row" style="padding-top: 20px;">
|
||||||
|
<div class="span12"><h2>Documentation</h2><hr/></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12"><h3>Constructor</h3></div>
|
||||||
|
</div>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr>
|
||||||
|
<th>Parameter</th><th>Type</th><th>Description</th>
|
||||||
|
</tr>
|
||||||
|
<tr><td>minimumInputLength</td><td>int</td><td>Number of characters necessary to start a search</td></tr>
|
||||||
|
<tr><td>minimumResultsForSearch</td><td>int</td><td>
|
||||||
|
<p>
|
||||||
|
The minimum number of results that must be initially (after opening the dropdown for the first time)
|
||||||
|
populated in order to keep the search field. This
|
||||||
|
is useful for cases where local data is used with just a few results, in which case the search box
|
||||||
|
is not very useful and wastes screen space.
|
||||||
|
</p>
|
||||||
|
<p class="alert alert-info">Only applies to single-value select boxes</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr><td>placeholder</td><td>object/string</td><td>
|
||||||
|
<p>Initial value that is selected if no other selection is made.</p>
|
||||||
|
<p>
|
||||||
|
The value can be specified either as an <code>object</code> or as a <code>string</code>. If
|
||||||
|
specified as a <code>string</code> any custom <code>formatSelection</code> function will be
|
||||||
|
bypassed and the string value will be rendered directly.
|
||||||
|
</p>
|
||||||
|
<p>The placeholder can also be specified as a <code>data-placeholder</code> attribute on the <code>select</code>
|
||||||
|
or <code>input</code> element that Select2 is attached to. In this case only <code>string</code>
|
||||||
|
values are supported
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="alert alert-warning">Note that because browsers assume the first <code>option</code> element
|
||||||
|
is selected in
|
||||||
|
non-multi-value select boxes an empty first <code>option</code> element must be provided (<code><option></option></code>)
|
||||||
|
for the placeholder to work.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="alert alert-warning">When Select2 is used in multi-select mode the placeholder must be a string.</p>
|
||||||
|
</td></tr>
|
||||||
|
<tr>
|
||||||
|
<td>allowClear</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>
|
||||||
|
<p>
|
||||||
|
Whether or not a clear button is displayed when the select box has a selection. The
|
||||||
|
button,
|
||||||
|
when clicked, resets the value of the select box back to the placeholder, thus this option is
|
||||||
|
only
|
||||||
|
available when the placeholder is specified.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Also, note that this option only works with
|
||||||
|
non-multi-value based selects because multi-value selects always provide such a button for every
|
||||||
|
selected option.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>multiple</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>
|
||||||
|
<p>
|
||||||
|
Whether or not Select2 allows selection of multiple values.
|
||||||
|
</p>
|
||||||
|
<p>When Select2 is attached to a <code>select</code> element this value will be ignored and <code>select</code>'s
|
||||||
|
<code>multiple</code> attribute will be used instead.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>closeOnSelect</td>
|
||||||
|
<td>boolean</td>
|
||||||
|
<td>
|
||||||
|
<p>
|
||||||
|
If set to true the dropdown is not closed after a selection is made, allowing for rapid selection of multiple items. By default this option is disabled.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p class="alert alert-info">
|
||||||
|
Only applies when configured in multi-select mode.
|
||||||
|
</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr><td>id</td><td>function</td><td>
|
||||||
|
Function used to get the id from the choice object or a string representing the key under which the id is stored.
|
||||||
|
<pre>id(object)</pre>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||||
|
<tr><td>object</td><td>object</td><td>A choice object</td></tr>
|
||||||
|
<tr><td><returns></td><td>string</td><td>the id of the object</td></tr>
|
||||||
|
</table>
|
||||||
|
The default implementation expects the object to have a <code>id</code> property that is returned.
|
||||||
|
</td></tr>
|
||||||
|
<tr><td>formatSelection</td><td>function</td><td>
|
||||||
|
Function used to render the current selection.
|
||||||
|
<pre>formatSelection(object)</pre>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||||
|
<tr><td>object</td><td>object</td><td>The selected result object returned from the <code>query</code> function</td></tr>
|
||||||
|
<tr><td><returns></td><td>string</td><td>Html that represents the selection</td></tr>
|
||||||
|
</table>
|
||||||
|
The default implementation expects the object to have a <code>text</code> property that is returned.
|
||||||
|
</td></tr>
|
||||||
|
<tr><td>formatResult</td><td>function</td><td>
|
||||||
|
Function used to render a result that the user can select.
|
||||||
|
<pre>formatResult(object)</pre>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||||
|
<tr><td>object</td><td>object</td><td>One of the result objects returned from the <code>query</code> function</td></tr>
|
||||||
|
<tr><td><returns></td><td>string</td><td>Html that represents the result</td></tr>
|
||||||
|
</table>
|
||||||
|
The default implementation expects the object to have a <code>text</code> property that is returned.
|
||||||
|
</td></tr>
|
||||||
|
<tr><td>formatNoMatches</td><td>function</td><td>
|
||||||
|
Function used to render the "No matches" message
|
||||||
|
<pre>formatNoMatches(term)</pre>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||||
|
<tr><td>term</td><td>string</td><td>Search string entered by user</td></tr>
|
||||||
|
<tr><td><returns></td><td>string</td><td>Message html</td></tr>
|
||||||
|
</table>
|
||||||
|
</td></tr>
|
||||||
|
<tr><td>formatInputTooShort</td><td>function</td><td>
|
||||||
|
Function used to render the "Search input too short" message
|
||||||
|
<pre>formatInputTooShort(term, minLength)</pre>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||||
|
<tr><td>term</td><td>string</td><td>Search string entered by user</td></tr>
|
||||||
|
<tr><td>minLength</td><td>int</td><td>Minimum required term length</td></tr>
|
||||||
|
<tr><td><returns></td><td>string</td><td>Message html</td></tr>
|
||||||
|
</table>
|
||||||
|
</td></tr>
|
||||||
|
<tr><td>createSearchChoice</td><td>function</td><td>
|
||||||
|
Creates a new selectable choice from user's search term. Allows creation of choices not available via the query
|
||||||
|
function. Useful when the user can create choices on the fly, eg for the 'tagging' usecase.
|
||||||
|
<pre>createSearchChoice(term)</pre>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||||
|
<tr><td>term</td><td>string</td><td>Search string entered by user</td></tr>
|
||||||
|
<tr><td><returns></td><td>object (optional)</td><td>Object representing the new choice.
|
||||||
|
Must at least contain an <code>id</code> attribute.</td></tr>
|
||||||
|
</table>
|
||||||
|
If the function returns <code>undefined</code> or <code>null</code> no choice will be created. If a new
|
||||||
|
choice is created it is displayed first in the selection list so that user may select it by simply pressing
|
||||||
|
<code>enter</code>.
|
||||||
|
|
||||||
|
<p class="alert alert-warning">When used in combination with <code>input[type=hidden]</code> tag care
|
||||||
|
must be taken to sanitize the <code>id</code> attribute of the choice object, especially stripping
|
||||||
|
<code>,</code> as it is used as a value separator</p>
|
||||||
|
</td></tr>
|
||||||
|
<tr><td>initSelection</td><td>function</td><td>
|
||||||
|
Called when Select2 is created to allow the user to initialize the selection based on the value of the
|
||||||
|
element select2 is attached to.
|
||||||
|
<p>
|
||||||
|
Essentially this is an <code>id->object</code> mapping function.
|
||||||
|
</p>
|
||||||
|
<pre>initSelection(element)</pre>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||||
|
<tr><td>element</td><td>jQuery array</td><td>element Select2 is attached to</td></tr>
|
||||||
|
<tr><td><returns></td><td>object or array of objects</td><td><code>Object</code> representing the choice
|
||||||
|
to be selected, or an <code>array</code> of such objects in case Select2 is in multi mode.</td></tr>
|
||||||
|
</table>
|
||||||
|
<p class="alert alert-info">This function will only be called when there is initial input to be processed.</p>
|
||||||
|
Here is an example implementation used for tags. Tags are the simplest form of data where the id is also
|
||||||
|
the text:
|
||||||
|
<pre class="prettyprint">
|
||||||
|
$("#tags").select2({
|
||||||
|
initSelection : function (element) {
|
||||||
|
var data = [];
|
||||||
|
$(element.val().split(",")).each(function () {
|
||||||
|
data.push({id: this, text: this});
|
||||||
|
});
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</pre>
|
||||||
|
</td></tr>
|
||||||
|
<tr>
|
||||||
|
<td>query</td>
|
||||||
|
<td>function</td>
|
||||||
|
<td>
|
||||||
|
Function used to query results for the search term.
|
||||||
|
<pre>query(options)</pre>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||||
|
<tr><td>options.term</td><td>string</td><td>Search string entered by user</td></tr>
|
||||||
|
<tr><td>options.page</td><td>int</td><td>1-based page number tracked by Select2 for use with infinite scrolling of results</td></tr>
|
||||||
|
<tr><td>options.callback</td><td>function</td>
|
||||||
|
<td>Callback function that should be called with the <code>result</code> object. The result object:
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||||
|
<tr><td>result.results</td><td>[object]</td><td>Array of result objects. The default renderers expect objects with <code>id</code> and <code>text</code> keys</code>. The <code>id</code> attribute is required</code>, even if custom renderers are used.</td></tr>
|
||||||
|
<tr><td>result.more</td><td>boolean</td><td><code>true</code>if more results are available for the current search term</td></tr>
|
||||||
|
</table>
|
||||||
|
</td></tr>
|
||||||
|
</table>
|
||||||
|
<p class="alert alert-warning">In order for this function to work Select2 should be attached to a <code>input type='hidden'</code> tag instead of a <code>select</code>.</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr><td>ajax</td><td>object</td><td>
|
||||||
|
Options for the built in ajax query function. This object acts as a shortcut for having to manually write a function that performs ajax requests. The built-in function supports more advanced features such as throttling and dropping out-of-order responses.
|
||||||
|
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||||
|
<tr><td>transport</td><td>function</td><td>Function that will be used to perform the ajax request. Must be parameter-compatible with <code>$.ajax</code>. Defaults to <code>$.ajax</code> if not specified.
|
||||||
|
Allows the use of various ajax wrapper libraries such as: <a href="http://www.protofunc.com/scripts/jquery/ajaxManager/">AjaxManager</a>. </td></tr>
|
||||||
|
<tr><td>url</td><td>string</td><td>Ajax url</td></tr>
|
||||||
|
<tr><td>dataType</td><td>stringt</td><td>Data type for the request. <code>ajax</code>, <code>jsonp</code>, other formats supported by jquery</td></tr>
|
||||||
|
<tr><td>quietMillis</td><td>int</td><td>Number of milliseconds to wait for the user to stop typing before issuing the ajax request</td></tr>
|
||||||
|
<tr><td>data</td><td>function</td><td>
|
||||||
|
Function to generate query parameters for the ajax request.
|
||||||
|
<pre>data(term, page)</pre>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||||
|
<tr><td>term</td><td>string</td><td>Search term</td></tr>
|
||||||
|
<tr><td>page</td><td>int</td><td>1-based page number tracked by Select2 for use with infinite scrolling of results</td></tr>
|
||||||
|
<tr><td><returns></td><td>object</td><td>Object containing url paramters</td></tr>
|
||||||
|
</table>
|
||||||
|
</td></tr>
|
||||||
|
<tr><td>results</td><td>function</td><td>
|
||||||
|
Function used to build the query results object from the ajax response
|
||||||
|
<pre>results(data, page)</pre>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr><th>Parameter</th><th>Type</th><th>Description</th></tr>
|
||||||
|
<tr><td>data</td><td>object</td><td>Retrieved data</td></tr>
|
||||||
|
<tr><td>page</td><td>int</td><td>Page number that was passed into the <code>data</code> function above</td></tr>
|
||||||
|
<tr><td><returns></td><td>object</td><td>Results object. See "options.callback" in the "query" function for format.</td></tr>
|
||||||
|
</table>
|
||||||
|
</td></tr>
|
||||||
|
</table>
|
||||||
|
<p class="alert alert-warning">In order for this function to work Select2 should be attached to a <code>input type='hidden'</code> tag instead of a <code>select</code>.</p>
|
||||||
|
</td></tr>
|
||||||
|
<tr><td>data</td><td>array/object</td><td>
|
||||||
|
Options for the built in query function that works with arrays.
|
||||||
|
<p>If this element contains an array, each element in the array must contain <code>id</code> and <code>text</code> keys</p>
|
||||||
|
<p>Alternatively, this element can be specified as an object in which <code>results</code> key must contain the data as an array and a <code>text</code> key can either be the name of the key in data items that contains text or a function that retrieves the text given a data element from the array</p>
|
||||||
|
</td></tr>
|
||||||
|
<tr><td>tags</td><td>array/function</td><td>
|
||||||
|
Puts Select2 into 'tagging'mode where the user can add new choices and pre-existing tags are provided via
|
||||||
|
this options attribute which is either an <code>array</code> or a <code>function</code> that returns an
|
||||||
|
array of <code>objects</code> or <code>strings</code>. If <code>strings</code> are used instead of <code>objects</code>
|
||||||
|
they will be converted into an object that has an <code>id</code> and <code>text</code> attribute equal
|
||||||
|
to the value of the <code>string</code>.
|
||||||
|
</td></tr>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12"><h3>val</h3></div>
|
||||||
|
</div>
|
||||||
|
<p>Gets or sets the selection. If the <code>value</code> parameter is not specified, the <code>id</code> attribute of the currently selected element is returned. If the <code>value</code> parameter is specified it will become the current selection.</code></p>
|
||||||
|
<table class="table table-bordered table-striped">
|
||||||
|
<tr>
|
||||||
|
<th>Parameter</th><th>Type</th><th>Description</th>
|
||||||
|
</tr>
|
||||||
|
<tr><td>value (optional)</td><td>object</td><td>
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th></th><th>Single-Valued</th><th>Multi-Valued</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Attached to <code>select</code></th>
|
||||||
|
<td>Value of the <code>value</code> attribute of the <code>option</code> that should be selected</td>
|
||||||
|
<td>Array of values specified to the left. <code>null</code> for empty.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>Attached to <code>input[type=hidden]</code></th>
|
||||||
|
<td>An object representing the selection. Should at least contain an <code>id</code> key. The rest of the keys should be determined by the custom rendering function, the default rendering function only needs an additional <code>text</code> key</td>
|
||||||
|
<td>Array of objects specified to the left. <code>null</code> for empty.</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
</td></tr>
|
||||||
|
</table>
|
||||||
|
Example: <pre class="prettyprint">alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", {id:"CA", text:"Califoria"});</pre>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12"><h3>destroy</h3></div>
|
||||||
|
</div>
|
||||||
|
<p>Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.</p>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12"><h3>open</h3></div>
|
||||||
|
</div>
|
||||||
|
<p>Opens the dropdown</p>
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12"><h3>close</h3></div>
|
||||||
|
</div>
|
||||||
|
<p>Closes the dropdown</p>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12"><h2>Events</h2></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="span12">
|
||||||
|
<h3>change</h3>
|
||||||
|
<p>Fired when selection is changed.</p>
|
||||||
|
<p class="alert alert-info">This event is not fired when the selection is changed using Select2's <code>val()</code> method.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
Loading…
Reference in New Issue
Block a user