RetailCRM-Mirror/select2
1
0
Fork 0
mirror of synced 2024-11-22 13:06:08 +03:00
Code Issues Projects Releases Wiki Activity

Switched examples to use Jekyll's highlighting

Browse Source 
This fixes some bugs that were present in the old Prettify highlighter
when there was a mix of JavaScript and HTML in the same code block. Now
with Rouge, the highlighter used by Jekyll, these cases are properly
handled and HTML no longer looks strange.

This does not convert all of the code blocks over, because there are
still some code blocks which double as the actual JavaScript code
powering the example that need to be migrated.
This commit is contained in:
Kevin Brown 2016-01-30 18:09:01 -05:00
parent 54441e6a22
commit 74387b9863
12 changed files with 50 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/_includes/examples/basics.html
View File

@ -22,19 +22,19 @@
</p>
</div>
<pre class="code" data-fill-from=".js-code-basic"></pre>
<script type="text/x-example-code" class="js-code-basic">
{% highlight html linenos %}
<script type="text/javascript">
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
<select class="js-example-basic-single">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
</script>
{% endhighlight %}
<h2 id="multiple">Multiple select boxes</h2>
@ -48,18 +48,17 @@ $(document).ready(function() {
</p>
</div>
<pre data-fill-from=".js-code-multiple"></pre>
<script type="text/x-example-code" class="js-code-multiple">
{% highlight html linenos %}
<script type="text/javascript">
$(".js-example-basic-multiple").select2();
</script>
<select class="js-example-basic-multiple" multiple="multiple">
<option value="AL">Alabama</option>
...
<option value="WY">Wyoming</option>
</select>
</script>
{% endhighlight %}
</section>
</section>

37
docs/_includes/examples/data.html
View File

@ -26,9 +26,8 @@
</p>
</div>
<pre data-fill-from=".js-code-data-array"></pre>
<script type="text/x-example-code" class="js-code-data-array">
{% highlight html linenos %}
<script type="text/javascript">
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({
@ -38,13 +37,14 @@ $(".js-example-data-array").select2({
$(".js-example-data-array-selected").select2({
data: data
})
</script>
<select class="js-example-data-array"></select>
<select class="js-example-data-array-selected">
<option value="2" selected="selected">duplicate</option>
</select>
</script>
{% endhighlight %}
<h2 id="data-ajax" >Loading remote data</h2>
@ -67,7 +67,11 @@ $(".js-example-data-array-selected").select2({
that should be displayed.
</p>
<pre data-fill-from=".js-code-data-ajax-html"></pre>
{% highlight html linenos %}
<select class="js-data-example-ajax">
<option value="3620194" selected="selected">select2/select2</option>
</select>
{% endhighlight %}
<p>
You can configure how Select2 searches for remote data using the
@ -76,15 +80,7 @@ $(".js-example-data-array-selected").select2({
<a href="options.html#ajax">options documentation for <code>ajax</code></a>.
</p>
<pre data-fill-from=".js-code-data-ajax"></pre>
<p>
Select2 will pass any options in the <code>ajax</code> object to
jQuery's <code>$.ajax</code> function, or the <code>transport</code>
function you specify.
</p>
<script type="text/x-example-code" class="js-code-data-ajax">
{% highlight js linenos %}
$(".js-data-example-ajax").select2({
ajax: {
url: "https://api.github.com/search/repositories",
@ -117,12 +113,11 @@ $(".js-data-example-ajax").select2({
templateResult: formatRepo, // omitted for brevity, see the source of this page
templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
});
</script>
<script type="text/x-example-code" class="js-code-data-ajax-html">
<select class="js-data-example-ajax">
<option value="3620194" selected="selected">select2/select2</option>
</select>
</script>
{% endhighlight %}
<p>
Select2 will pass any options in the <code>ajax</code> object to
jQuery's <code>$.ajax</code> function, or the <code>transport</code>
function you specify.
</p>
</section>

7
docs/_includes/examples/disabled-results.html
View File

@ -19,14 +19,11 @@
</p>
</div>
<pre data-fill-from=".js-code-disabled-results"></pre>
<script type="text/x-example-code" class="js-code-disabled-results">
{% highlight html linenos %}
<select class="js-example-disabled-results">
<option value="one">First</option>
<option value="two" disabled="disabled">Second (disabled)</option>
<option value="three">Third</option>
</select>
</script>
{% endhighlight %}
</section>

7
docs/_includes/examples/hide-search.html
View File

@ -14,12 +14,9 @@
</p>
</div>
<pre data-fill-from=".js-code-hide-search"></pre>
<script type="text/x-example-code" class="js-code-hide-search">
{% highlight js linenos %}
$(".js-example-basic-hide-search").select2({
minimumResultsForSearch: Infinity
});
</script>
{% endhighlight %}
</section>

20
docs/_includes/examples/localization-rtl-diacritics.html
View File

@ -1,5 +1,4 @@
<section>
<h1 id="localization-rtl-diacritics" class="page-header">
Localization, RTL and diacritics support
</h1>
@ -26,13 +25,11 @@
</p>
</div>
<pre data-fill-from=".js-code-language"></pre>
<script type="text/x-example-code" class="js-code-language">
{% highlight js linenos %}
$(".js-example-language").select2({
language: "es"
});
</script>
{% endhighlight %}
<h2 id="rtl">RTL support</h2>
@ -48,13 +45,11 @@ $(".js-example-language").select2({
</p>
</div>
<pre data-fill-from=".js-code-rtl"></pre>
<script type="text/x-example-code" class="js-code-rtl">
{% highlight js linenos %}
$(".js-example-rtl").select2({
dir: "rtl"
});
</script>
{% endhighlight %}
<h2 id="diacritics">Diacritics support</h2>
@ -81,10 +76,7 @@ $(".js-example-rtl").select2({
</p>
</div>
<pre data-fill-from=".js-code-diacritics"></pre>
<script type="text/x-example-code" class="js-code-diacritics">
{% highlight js linenos %}
$(".js-example-diacritics").select2();
</script>
{% endhighlight %}
</section>

8
docs/_includes/examples/matcher.html
View File

@ -1,5 +1,4 @@
<section>
<h1 id="matcher">Customizing how results are matched</h1>
<p>
@ -22,9 +21,7 @@
</p>
</div>
<pre data-fill-from=".js-code-matcher-start"></pre>
<script type="text/x-example-code" class="js-code-matcher-start">
{% highlight js linenos %}
function matchStart (term, text) {
if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
return true;
@ -38,6 +35,5 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
matcher: oldMatcher(matchStart)
})
});
</script>
{% endhighlight %}
</section>

8
docs/_includes/examples/multiple-max.html
View File

@ -1,5 +1,4 @@
<section>
<h1 id="multiple-max">
Limiting the number of selections
</h1>
@ -17,12 +16,9 @@
</p>
</div>
<pre data-fill-from=".js-code-multiple-limit"></pre>
<script type="text/x-example-code" class="js-code-multiple-limit">
{% highlight js linenos %}
$(".js-example-basic-multiple-limit").select2({
maximumSelectionLength: 2
});
</script>
{% endhighlight %}
</section>

1
docs/_includes/examples/placeholders.html
View File

@ -1,5 +1,4 @@
<section>
<h1 id="placeholders">Placeholders</h1>
<p>

1
docs/_includes/examples/programmatic-control.html
View File

@ -1,5 +1,4 @@
<section>
<h1 id="programmatic-control" class="page-header">
Programmatic control
</h1>

8
docs/_includes/examples/tags.html
View File

@ -1,5 +1,4 @@
<section>
<h1 id="tags">Tagging support</h1>
<p>
@ -22,12 +21,9 @@
</p>
</div>
<pre data-fill-from=".js-code-tags"></pre>
<script type="text/x-example-code" class="js-code-tags">
{% highlight js linenos %}
$(".js-example-tags").select2({
tags: true
})
</script>
{% endhighlight %}
</section>

23
docs/_includes/examples/themes-templating-responsive-design.html
View File

@ -27,9 +27,7 @@
</p>
</div>
<pre data-fill-from=".js-code-theme"></pre>
<script type="text/x-example-code" class="js-code-theme">
{% highlight js linenos %}
$(".js-example-theme-single").select2({
theme: "classic"
});
@ -37,7 +35,7 @@ $(".js-example-theme-single").select2({
$(".js-example-theme-multiple").select2({
theme: "classic"
});
</script>
{% endhighlight %}
<h2 id="templating">Templating</h2>
@ -61,9 +59,7 @@ $(".js-example-theme-multiple").select2({
</p>
</div>
<pre data-fill-from=".js-code-templating"></pre>
<script type="text/x-example-code" class="js-code-templating">
{% highlight js linenos %}
function formatState (state) {
if (!state.id) { return state.text; }
var $state = $(
@ -75,7 +71,7 @@ function formatState (state) {
$(".js-example-templating").select2({
templateResult: formatState
});
</script>
{% endhighlight %}
<h2 id="responsive">Responsive design - Percent width</h2>
@ -94,7 +90,10 @@ $(".js-example-templating").select2({
</p>
</div>
<pre data-fill-from=".js-code-responsive"></pre>
{% highlight html linenos %}
<select class="js-example-responsive" style="width: 50%"></select>
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
{% endhighlight %}
<div class="alert alert-warning">
Select2 will do its best to resolve the percent width specified via a
@ -102,10 +101,4 @@ $(".js-example-templating").select2({
Select2 is using a percent based width is to inline the
<code>style</code> declaration into the tag.
</div>
<script type="text/x-example-code" class="js-code-responsive">
<select class="js-example-responsive" style="width: 50%"></select>
<select class="js-example-responsive" multiple="multiple" style="width: 75%"></select>
</script>
</section>

8
docs/_includes/examples/tokenizer.html
View File

@ -1,5 +1,4 @@
<section>
<h1 id="tokenizer">Automatic tokenization</h1>
<p>
@ -24,13 +23,10 @@
</p>
</div>
<pre data-fill-from=".js-code-tokenizer"></pre>
<script type="text/x-example-code" class="js-code-tokenizer">
{% highlight js linenos %}
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
})
</script>
{% endhighlight %}
</section>