f6e211e4
 Administrator
finish work part 1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<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>
<pre data-fill-from=".js-code-theme"></pre>
<script type="text/x-example-code" class="js-code-theme">
$(".js-example-theme-single").select2({
theme: "classic"
});
$(".js-example-theme-multiple").select2({
theme: "classic"
});
</script>
<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>
<pre data-fill-from=".js-code-templating"></pre>
<script type="text/x-example-code" class="js-code-templating">
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
});
</script>
<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>
<pre data-fill-from=".js-code-responsive"></pre>
<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>
<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>
|
