Bootstrap Selectpicker merupakan library pendukung dari framework css bootstrap yang mana penggunaannya kusus untuk select box atau yang kita juga kenal combobox. Dengan hanya menggunakan framework bootstrap saja sebenarnya kita sudah bisa melihat perbedaan yang cukup signifikan dari selectbox atau combobox tersebut. Akan tetapi jika kita ingin mendapatkan fitur lebih dari combobox tersebut maka sangat direkomendasikan menggunakan library bootstrap selectpicker ini. Selain mempercantik juga bisa menambahkan fitur-fitur pada selectbox atau combobox tersebut.
Pada contoh dibawah ini saya hanya menampilkan beberapa contoh penggunaan dari bootstrap selectpicker yang mana fungsinya mungkin akan sering digunakan. Namun, jika kalian ingin melihat full dokumentasinya kalain dapat membacanya disini
Ok langsung saja, silahkan siapkan file-file pendukung seperti framework bootstrap, bootstrap selecpicker dan library jquery. Seperti biasa, file tutorial pada artikel ini dapat anda download pada akhir artikel ini. So, kalian bisa download dan langsung praktekkan.
Buat file index.html , kemudian copykan script berikut :
<html>
<head>
<!-- CSS untuk bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<!-- CSS untuk bootstrap selectpicker -->
<link rel="stylesheet" href="css/bootstrap-select.min.css" type="text/css">
</head>
<body>
<br>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label"><small>Combo Box Default Bootstrap : </small></label>
<select name="combo" class="form-control">
<option value="">--Choose Combo--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label"><small>Combo Box Selectpicker : </small></label>
<select name="combo" class="form-control selectpicker">
<option value="">--Choose Combo--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label"><small>Combo Box Dengan Check : </small></label>
<select name="combo" class="form-control selectpicker show-tick">
<option value="">--Choose Combo--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label"><small>Combo Box Live Search : </small></label>
<select name="combo" class="form-control selectpicker show-tick" data-live-search="true">
<option value="">--Choose Combo--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label class="control-label"><small>Combo Box Multiple : </small></label>
<select name="combo" class="form-control selectpicker" data-live-search="true" multiple title="--Choose Combo--">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- js untuk jquery -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- js untuk bootstrap -->
<script src="js/bootstrap.js"></script>
<!-- js untuk bootstrap selectpicker -->
<script src="js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
</body>
</html>
Silahkan simpan, dan coba jalankan di browser.
Adapaun contoh di atas saya hanya mencoba untuk combobox default dari selectpicker, kemudian combobox dengan ceklist, combobox dengan live search dan combobox multiple. Saya Hanya membahas keempat fitur tersebut karena menurut saya dari keempat itu merupakan fitur yang paling sering digunakan, namun jika kalian ingin membaca full dokumentasinya, kalian dapat membuka halaman resminya.
Baca Juga :
Error Bootstrap Selectpicker Saat Menggunakan Ajax
Baca Juga :
Error Bootstrap Selectpicker Saat Menggunakan Ajax
No comments:
Post a Comment