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.
105 lines
2.8 KiB
HTML
105 lines
2.8 KiB
HTML
<section>
|
|
|
|
<h1 id="themes-templating-responsive-design" class="page-header">
|
|
Themes, templating and responsive design
|
|
</h1>
|
|
|
|
<h2 id="themes">Theme support</h2>
|
|
|
|
<p>
|
|
Select2 supports custom themes using the
|
|
<a href="options.html#theme">theme option</a>
|
|
so you can style Select2 to match the rest of your application.
|
|
</p>
|
|
|
|
<p>
|
|
These are using the <code>classic</code> theme, which matches the old
|
|
look of Select2.
|
|
</p>
|
|
|
|
<div class="s2-example">
|
|
<p>
|
|
<select class="js-example-theme-single js-states form-control">
|
|
</select>
|
|
</p>
|
|
<p>
|
|
<select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
|
|
</p>
|
|
</div>
|
|
|
|
{% highlight js linenos %}
|
|
$(".js-example-theme-single").select2({
|
|
theme: "classic"
|
|
});
|
|
|
|
$(".js-example-theme-multiple").select2({
|
|
theme: "classic"
|
|
});
|
|
{% endhighlight %}
|
|
|
|
<h2 id="templating">Templating</h2>
|
|
|
|
<p>
|
|
Various display options of the Select2 component can be changed:
|
|
You can access the <code><option></code> element
|
|
(or <code><optgroup></code>) and any attributes on those elements
|
|
using <code>.element</code>.
|
|
</p>
|
|
|
|
<p>
|
|
Templating is primarily controlled by the
|
|
<a href="options.html#templateResult"><code>templateResult</code></a>
|
|
and <a href="options.html#templateSelection"><code>templateSelection</code></a>
|
|
options.
|
|
</p>
|
|
|
|
<div class="s2-example">
|
|
<p>
|
|
<select class="js-example-templating js-states form-control"></select>
|
|
</p>
|
|
</div>
|
|
|
|
{% highlight js linenos %}
|
|
function formatState (state) {
|
|
if (!state.id) { return state.text; }
|
|
var $state = $(
|
|
'<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
|
|
);
|
|
return $state;
|
|
};
|
|
|
|
$(".js-example-templating").select2({
|
|
templateResult: formatState
|
|
});
|
|
{% endhighlight %}
|
|
|
|
<h2 id="responsive">Responsive design - Percent width</h2>
|
|
|
|
<p>
|
|
Select2's width can be set to a percentage of its parent to support
|
|
responsive design. The two Select2 boxes below are styled to 50% and 75%
|
|
width respectively.
|
|
</p>
|
|
|
|
<div class="s2-example">
|
|
<p>
|
|
<select class="js-example-responsive js-states" style="width: 50%"></select>
|
|
</p>
|
|
<p>
|
|
<select class="js-example-responsive js-states" multiple="multiple" style="width: 75%"></select>
|
|
</p>
|
|
</div>
|
|
|
|
{% 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
|
|
css class, but it is not always possible. The best way to ensure that
|
|
Select2 is using a percent based width is to inline the
|
|
<code>style</code> declaration into the tag.
|
|
</div>
|
|
</section>
|