74387b9863
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.
65 lines
1.3 KiB
HTML
65 lines
1.3 KiB
HTML
<section>
|
|
|
|
<h1 id="basics" class="page-header">The basics</h1>
|
|
|
|
<h2 id="single">Single select boxes</h2>
|
|
|
|
<p>
|
|
Select2 can take a regular select box like this...
|
|
</p>
|
|
|
|
<p>
|
|
<select class="js-states form-control"></select>
|
|
</p>
|
|
|
|
<p>
|
|
and turn it into this...
|
|
</p>
|
|
|
|
<div class="s2-example">
|
|
<p>
|
|
<select class="js-example-basic-single js-states form-control"></select>
|
|
</p>
|
|
</div>
|
|
|
|
{% 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>
|
|
{% endhighlight %}
|
|
|
|
<h2 id="multiple">Multiple select boxes</h2>
|
|
|
|
<p>
|
|
Select2 also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute.
|
|
</p>
|
|
|
|
<div class="s2-example">
|
|
<p>
|
|
<select class="js-example-basic-multiple js-states form-control" multiple="multiple"></select>
|
|
</p>
|
|
</div>
|
|
|
|
{% 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>
|
|
{% endhighlight %}
|
|
</section>
|
|
|
|
</section>
|