ขั้นแรก Downloadไฟล์สำหรับการใช้งาน ไฟล์ ที่เกี่ยวข้องในการใช้งาน เบื้องต้น
- bootstrap-2.3.2/css/bootstrap.min.css
- bootstrap-2.3.2/css/docs.css
- bootstrap-tagsinput.css
- bower_components/jquery/jquery.min.js
- bootstrap-2.3.2/js/bootstrap.min.js
- bootstrap-tagsinput.js
- bootstrap-tagsinput-angular.js
- assets/app_bs2.js
- assets/cities.json
- index.html
ภาพตัวอย่างการใช้งาน ตัวอย่าง Code หน้า Index.html
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Tags Input</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="bootstrap-2.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-2.3.2/css/docs.css">
<link rel="stylesheet" href="bootstrap-tagsinput.css">
<style>
.accordion { margin-top:-19px; }
</style>
</head>
<body>
<div class="example example_objects_as_tags">
<div class="bs-docs-example">
<input type="text" />
</div>
<div class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" href="#accordion_example_objects_as_tags">
Show code
</a>
</div>
<div id="accordion_example_objects_as_tags" class="accordion-body collapse">
<div class="accordion-inner">
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/jquery.min.js"></script>
<script src="bootstrap-2.3.2/js/bootstrap.min.js"></script>
<script src="bootstrap-tagsinput.js"></script>
<script src="bootstrap-tagsinput-angular.js"></script>
<script src="assets/app_bs2.js"></script>
</body>
</html>
โค้ด: เลือกทั้งหมด
$('.example_objects_as_tags > > input').tagsinput({
itemValue: 'value',
itemText: 'text',
typeahead: {
source: function(query) {
return $.getJSON('assets/cities.json');
}
}
});
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 1 , "text": "Amsterdam" , "continent": "Europe" });
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 4 , "text": "Washington" , "continent": "America" });
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 7 , "text": "Sydney" , "continent": "Australia" });
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 10, "text": "Beijing" , "continent": "Asia" });
$('.example_objects_as_tags > > input').tagsinput('add', { "value": 13, "text": "Cairo" , "continent": "Africa" });
โค้ด: เลือกทั้งหมด
[ { "value": 1 , "text": "Amsterdam" , "continent": "Europe" },
{ "value": 2 , "text": "London" , "continent": "Europe" },
{ "value": 3 , "text": "Paris" , "continent": "Europe" },
{ "value": 4 , "text": "Washington" , "continent": "America" },
{ "value": 5 , "text": "Mexico City" , "continent": "America" },
{ "value": 6 , "text": "Buenos Aires", "continent": "America" },
{ "value": 7 , "text": "Sydney" , "continent": "Australia" },
{ "value": 8 , "text": "Wellington" , "continent": "Australia" },
{ "value": 9 , "text": "Canberra" , "continent": "Australia" },
{ "value": 10, "text": "Beijing" , "continent": "Asia" },
{ "value": 11, "text": "New Delhi" , "continent": "Asia" },
{ "value": 12, "text": "Kathmandu" , "continent": "Asia" },
{ "value": 13, "text": "Cairo" , "continent": "Africa" },
{ "value": 14, "text": "Cape Town" , "continent": "Africa" },
{ "value": 99, "text": "NPK" , "continent": "Africa" },
{ "value": 15, "text": "Kinshasa" , "continent": "Africa" }
]
http://timschlechter.github.io/bootstra ... /examples/