Pages UI
Search…
Selectbox

Default select

Default select depends on classie.js. Make sure it's included inside the <body> before core template script inclusions.
1
<script src="assets/plugins/classie/classie.js" type="text/javascript"></script>
Copied!
Add .cs-select and .cs-skin-slide to any <select> control to add a cool animation effect
1
<select class="cs-select cs-skin-slide" data-init-plugin="cs-select">
2
<option value="Web-safe">Web-safe</option>
3
<option value="Helvetica">Helvetica</option>
4
<option value="SegeoUI">SegeoUI</option>
5
</select>
Copied!

Advance Select

Pages uses Select2 jQuery plugin for advance selects with search facility. Follow these steps to initialize the plugin
Step one
Include the stylesheet select2.css inside the <head> if it's not there already.
1
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-select2/select2.css">
Copied!
Step two
Include the required javascript files inside the <body> before core template script inclusions, if they are not there already.
1
<script src="assets/plugins/bootstrap-select2/select2.min.js" type="text/javascript"></script>
Copied!
Step three
Append data attribute data-init-plugin="select2" to initialize any <select> automatically with basic options. Avoid auto-initializing when you want to have advance options
1
<form role="form">
2
<div class="form-group">
3
<!-- Using data-init-plugin='select2' automatically initializes a basic Select2 -->
4
<select class="full-width" data-init-plugin="select2">
5
<optgroup label="Alaskan/Hawaiian Time Zone">
6
<option value="AK">Alaska</option>
7
<option value="HI">Hawaii</option>
8
</optgroup>
9
<optgroup label="Pacific Time Zone">
10
<option value="CA">California</option>
11
<option value="NV">Nevada</option>
12
<option value="OR">Oregon</option>
13
<option value="WA">Washington</option>
14
</optgroup>
15
</select>
16
</div>
17
18
<div class="form-group">
19
<!-- Element intended to use with advance options -->
20
<input type="hidden" id="mySelect2" class="full-width">
21
</div>
22
</form>
Copied!
Step four
Apply the plugin to your desired element
Make sure you place the following script below all the pre-requisites mentioned in the Step two above.
1
<script>
2
$(document).ready(function() {
3
// Avoid applying plugin to <select> with data-init-plugin="select2"
4
5
// Only apply on elements that don't have data-init-plugin="select2"
6
$("#mySelect2").select2({
7
placeholder: "Select a type",
8
data: [{
9
id: 0,
10
text: 'enhancement'
11
}, {
12
id: 1,
13
text: 'bug'
14
}, {
15
id: 2,
16
text: 'duplicate'
17
}]
18
});
19
});
20
</script>
Copied!
jQuery validation and select2 is not directly compatible. Use the following code to fix it
1
$("#SELECTBOX_ID").change(function(){
2
$(this).trigger("blur");
3
});
Copied!
Last modified 1yr ago