1
0
mirror of synced 2025-03-10 22:56:12 +03:00

fix spacing of examples.

This commit is contained in:
Zubair 2015-01-13 13:49:27 -05:00
parent 160abdc54e
commit bc71ad4880

View File

@ -33,7 +33,7 @@ slug: examples
<pre class="code" data-fill-from=".js-code-basic"></pre> <pre class="code" data-fill-from=".js-code-basic"></pre>
<script type="text/x-example-code" class="js-code-basic"> <script type="text/x-example-code" class="js-code-basic">
$(document).ready(function() { $(document).ready(function() {
$(".js-example-basic-single").select2(); $(".js-example-basic-single").select2();
}); });
@ -64,7 +64,7 @@ $(document).ready(function() {
<pre data-fill-from=".js-code-multiple"></pre> <pre data-fill-from=".js-code-multiple"></pre>
<script type="text/x-example-code" class="js-code-multiple"> <script type="text/x-example-code" class="js-code-multiple">
$(".js-example-basic-multiple").select2(); $(".js-example-basic-multiple").select2();
<select class="js-example-basic-multiple" multiple="multiple"> <select class="js-example-basic-multiple" multiple="multiple">
@ -105,16 +105,16 @@ $(".js-example-basic-multiple").select2();
<pre data-fill-from=".js-code-placeholder"></pre> <pre data-fill-from=".js-code-placeholder"></pre>
<script type="text/javascript" class="js-code-placeholder"> <script type="text/javascript" class="js-code-placeholder">
$(".js-example-placeholder-single").select2({ $(".js-example-placeholder-single").select2({
placeholder: "Select a state", placeholder: "Select a state",
allowClear: true allowClear: true
}); });
$(".js-example-placeholder-multiple").select2({ $(".js-example-placeholder-multiple").select2({
placeholder: "Select a state" placeholder: "Select a state"
}); });
</script> </script>
</div> </div>
</section> </section>
@ -147,7 +147,7 @@ $(".js-example-basic-multiple").select2();
<pre data-fill-from=".js-code-data-array"></pre> <pre data-fill-from=".js-code-data-array"></pre>
<script type="text/x-example-code" class="js-code-data-array"> <script type="text/x-example-code" class="js-code-data-array">
var 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, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$(".js-example-data-array").select2({ $(".js-example-data-array").select2({
@ -207,7 +207,7 @@ $(".js-example-data-array-selected").select2({
function you specify. function you specify.
</p> </p>
<script type="text/x-example-code" class="js-code-data-ajax"> <script type="text/x-example-code" class="js-code-data-ajax">
$(".js-data-example-ajax").select2({ $(".js-data-example-ajax").select2({
ajax: { ajax: {
url: "https://api.github.com/search/repositories", url: "https://api.github.com/search/repositories",
@ -235,7 +235,7 @@ $(".js-data-example-ajax").select2({
}); });
</script> </script>
<script type="text/x-example-code" class="js-code-data-ajax-html"> <script type="text/x-example-code" class="js-code-data-ajax-html">
<select class="js-data-example-ajax"> <select class="js-data-example-ajax">
<option value="select2/select2" selected="selected">select2/select2</option> <option value="select2/select2" selected="selected">select2/select2</option>
</select> </select>
@ -275,17 +275,17 @@ $(".js-data-example-ajax").select2({
<pre data-fill-from=".js-code-disabled"></pre> <pre data-fill-from=".js-code-disabled"></pre>
<script type="text/javascript" class="js-code-disabled"> <script type="text/javascript" class="js-code-disabled">
$(".js-programmatic-enable").on("click", function () { $(".js-programmatic-enable").on("click", function () {
$(".js-example-disabled").prop("disabled", false); $(".js-example-disabled").prop("disabled", false);
$(".js-example-disabled-multi").prop("disabled", false); $(".js-example-disabled-multi").prop("disabled", false);
}); });
$(".js-programmatic-disable").on("click", function () { $(".js-programmatic-disable").on("click", function () {
$(".js-example-disabled").prop("disabled", true); $(".js-example-disabled").prop("disabled", true);
$(".js-example-disabled-multi").prop("disabled", true); $(".js-example-disabled-multi").prop("disabled", true);
}); });
</script> </script>
</div> </div>
</section> </section>
@ -313,7 +313,7 @@ $(".js-data-example-ajax").select2({
<pre data-fill-from=".js-code-disabled-results"></pre> <pre data-fill-from=".js-code-disabled-results"></pre>
<script type="text/x-example-code" class="js-code-disabled-results"> <script type="text/x-example-code" class="js-code-disabled-results">
<select class="js-example-disabled-results"> <select class="js-example-disabled-results">
<option value="one">First</option> <option value="one">First</option>
<option value="two" disabled="disabled">Second (disabled)</option> <option value="two" disabled="disabled">Second (disabled)</option>
@ -378,21 +378,21 @@ $(".js-data-example-ajax").select2({
<pre data-fill-from=".js-code-programmatic"></pre> <pre data-fill-from=".js-code-programmatic"></pre>
<script type="text/javascript" class="js-code-programmatic"> <script type="text/javascript" class="js-code-programmatic">
var $example = $(".js-example-programmatic"); var $example = $(".js-example-programmatic");
var $exampleMulti = $(".js-example-programmatic-multi"); var $exampleMulti = $(".js-example-programmatic-multi");
$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); }); $(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
$(".js-programmatic-open").on("click", function () { $example.select2("open"); }); $(".js-programmatic-open").on("click", function () { $example.select2("open"); });
$(".js-programmatic-close").on("click", function () { $example.select2("close"); }); $(".js-programmatic-close").on("click", function () { $example.select2("close"); });
$(".js-programmatic-init").on("click", function () { $example.select2(); }); $(".js-programmatic-init").on("click", function () { $example.select2(); });
$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); }); $(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); }); $(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); }); $(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
</script> </script>
</div> </div>
</section> </section>
<section id="multiple_max" class="row"> <section id="multiple_max" class="row">
@ -410,7 +410,7 @@ $(".js-data-example-ajax").select2({
<pre data-fill-from=".js-code-multiple-limit"></pre> <pre data-fill-from=".js-code-multiple-limit"></pre>
<script type="text/x-example-code" class="js-code-multiple-limit"> <script type="text/x-example-code" class="js-code-multiple-limit">
$(".js-example-basic-multiple-limit").select2({ $(".js-example-basic-multiple-limit").select2({
maximumSelectionLength: 2 maximumSelectionLength: 2
}); });
@ -510,7 +510,7 @@ function log (name, args) {
<pre data-fill-from=".js-code-tags"></pre> <pre data-fill-from=".js-code-tags"></pre>
<script type="text/x-example-code" class="js-code-tags"> <script type="text/x-example-code" class="js-code-tags">
$(".js-example-tags").select2({ $(".js-example-tags").select2({
tags: true tags: true
}) })
@ -548,7 +548,7 @@ $(".js-example-tags").select2({
<pre data-fill-from=".js-code-tokenizer"></pre> <pre data-fill-from=".js-code-tokenizer"></pre>
<script type="text/x-example-code" class="js-code-tokenizer"> <script type="text/x-example-code" class="js-code-tokenizer">
$(".js-example-tokenizer").select2({ $(".js-example-tokenizer").select2({
tags: true, tags: true,
tokenSeparators: [',', ' '] tokenSeparators: [',', ' ']
@ -584,7 +584,7 @@ $(".js-example-tokenizer").select2({
<pre data-fill-from=".js-code-matcher-start"></pre> <pre data-fill-from=".js-code-matcher-start"></pre>
<script type="text/x-example-code" class="js-code-matcher-start"> <script type="text/x-example-code" class="js-code-matcher-start">
function matchStart (term, text) { function matchStart (term, text) {
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) { if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
return true; return true;
@ -632,7 +632,7 @@ $.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
<pre data-fill-from=".js-code-diacritics"></pre> <pre data-fill-from=".js-code-diacritics"></pre>
<script type="text/x-example-code" class="js-code-diacritics"> <script type="text/x-example-code" class="js-code-diacritics">
$(".js-example-diacritics").select2(); $(".js-example-diacritics").select2();
</script> </script>
</div> </div>
@ -665,7 +665,7 @@ $(".js-example-diacritics").select2();
<pre data-fill-from=".js-code-language"></pre> <pre data-fill-from=".js-code-language"></pre>
<script type="text/x-example-code" class="js-code-language"> <script type="text/x-example-code" class="js-code-language">
$(".js-example-language").select2({ $(".js-example-language").select2({
language: "es" language: "es"
}); });
@ -702,7 +702,7 @@ $(".js-example-language").select2({
<pre data-fill-from=".js-code-theme"></pre> <pre data-fill-from=".js-code-theme"></pre>
<script type="text/x-example-code" class="js-code-theme"> <script type="text/x-example-code" class="js-code-theme">
$(".js-example-theme-single").select2({ $(".js-example-theme-single").select2({
theme: "classic" theme: "classic"
}); });
@ -736,7 +736,7 @@ $(".js-example-theme-multiple").select2({
<pre data-fill-from=".js-code-rtl"></pre> <pre data-fill-from=".js-code-rtl"></pre>
<script type="text/x-example-code" class="js-code-rtl"> <script type="text/x-example-code" class="js-code-rtl">
$(".js-example-rtl").select2({ $(".js-example-rtl").select2({
dir: "rtl" dir: "rtl"
}); });
@ -809,163 +809,163 @@ $(".js-example-rtl").select2({
</select> </select>
<script type="text/javascript"> <script type="text/javascript">
var $states = $(".js-source-states"); var $states = $(".js-source-states");
var statesOptions = $states.html(); var statesOptions = $states.html();
$states.remove(); $states.remove();
$(".js-states").append(statesOptions); $(".js-states").append(statesOptions);
$("[data-fill-from]").each(function () { $("[data-fill-from]").each(function () {
var $this = $(this); var $this = $(this);
var codeContainer = $this.data("fill-from"); var codeContainer = $this.data("fill-from");
var $container = $(codeContainer); var $container = $(codeContainer);
var code = $.trim($container.html()); var code = $.trim($container.html());
$this.text(code); $this.text(code);
$this.addClass("prettyprint linenums"); $this.addClass("prettyprint linenums");
});
prettyPrint();
$.fn.select2.amd.require(
["select2/core", "select2/utils", "select2/compat/matcher"],
function (Select2, Utils, oldMatcher) {
var $basicSingle = $(".js-example-basic-single");
var $basicMultiple = $(".js-example-basic-multiple");
var $limitMultiple = $(".js-example-basic-multiple-limit");
var $dataArray = $(".js-example-data-array");
var $dataArraySelected = $(".js-example-data-array-selected");
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
var $ajax = $(".js-example-data-ajax");
var $disabledResults = $(".js-example-disabled-results");
var $tags = $(".js-example-tags");
var $matcherStart = $('.js-example-matcher-start');
var $diacritics = $(".js-example-diacritics");
var $language = $(".js-example-language");
$basicSingle.select2();
$basicMultiple.select2();
$limitMultiple.select2({
maximumSelectionLength: 2
}); });
prettyPrint(); $dataArray.select2({
data: data
});
$.fn.select2.amd.require( $dataArraySelected.select2({
["select2/core", "select2/utils", "select2/compat/matcher"], data: data
function (Select2, Utils, oldMatcher) { });
var $basicSingle = $(".js-example-basic-single");
var $basicMultiple = $(".js-example-basic-multiple");
var $limitMultiple = $(".js-example-basic-multiple-limit");
var $dataArray = $(".js-example-data-array"); $ajax.select2({
var $dataArraySelected = $(".js-example-data-array-selected"); ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }]; return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
minimumInputLength: 1,
templateResult: function (repo) {
if (repo.loading) return repo.text;
var $ajax = $(".js-example-data-ajax"); var markup = '<div class="clearfix">' +
'<div class="col-sm-1">' +
'<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
'</div>' +
'<div clas="col-sm-10">' +
'<div class="clearfix">' +
'<div class="col-sm-6">' + repo.full_name + '</div>' +
'<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
'<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
'</div>';
var $disabledResults = $(".js-example-disabled-results"); if (repo.description) {
markup += '<div>' + repo.description + '</div>';
}
var $tags = $(".js-example-tags"); markup += '</div></div>';
var $matcherStart = $('.js-example-matcher-start'); return markup;
},
templateSelection: function (repo) {
return repo.full_name || repo.text;
}
});
var $diacritics = $(".js-example-diacritics"); $(".js-example-disabled").select2();
var $language = $(".js-example-language"); $(".js-example-disabled-multi").select2();
$basicSingle.select2(); $disabledResults.select2();
$basicMultiple.select2();
$limitMultiple.select2({
maximumSelectionLength: 2
});
$dataArray.select2({ $(".js-example-programmatic").select2();
data: data $(".js-example-programmatic-multi").select2();
});
$dataArraySelected.select2({ //$eventSelect.select2();
data: data
});
$ajax.select2({ $tags.select2({
ajax: { tags: ['red', 'blue', 'green']
url: "https://api.github.com/search/repositories", });
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;
return { $(".js-example-tokenizer").select2({
results: data.items, tags: true,
pagination: { tokenSeparators: [',', ' ']
more: (params.page * 30) < data.total_count });
}
};
},
cache: true
},
minimumInputLength: 1,
templateResult: function (repo) {
if (repo.loading) return repo.text;
var markup = '<div class="clearfix">' + function matchStart (term, text) {
'<div class="col-sm-1">' + if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
'<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' + return true;
'</div>' + }
'<div clas="col-sm-10">' +
'<div class="clearfix">' +
'<div class="col-sm-6">' + repo.full_name + '</div>' +
'<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
'<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
'</div>';
if (repo.description) { return false;
markup += '<div>' + repo.description + '</div>'; }
}
markup += '</div></div>'; $matcherStart.select2({
matcher: oldMatcher(matchStart)
});
return markup; $diacritics.select2();
},
templateSelection: function (repo) {
return repo.full_name || repo.text;
}
});
$(".js-example-disabled").select2(); $language.select2({
$(".js-example-disabled-multi").select2(); language: "es"
});
$disabledResults.select2(); $(".js-example-theme-single").select2({
theme: "classic"
});
$(".js-example-programmatic").select2(); $(".js-example-theme-multiple").select2({
$(".js-example-programmatic-multi").select2(); theme: "classic"
});
//$eventSelect.select2(); $(".js-example-rtl").select2();
});
$tags.select2({
tags: ['red', 'blue', 'green']
});
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
});
function matchStart (term, text) {
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
return true;
}
return false;
}
$matcherStart.select2({
matcher: oldMatcher(matchStart)
});
$diacritics.select2();
$language.select2({
language: "es"
});
$(".js-example-theme-single").select2({
theme: "classic"
});
$(".js-example-theme-multiple").select2({
theme: "classic"
});
$(".js-example-rtl").select2();
});
</script> </script>