ตัวอย่างการใช่งาน bootstrap tags input เบื้องต้น
ขั้นแรก 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
ภาพตัวอย่างการใช้งาน
- tag.png (19.65 KiB) Viewed 1372 times
ตัวอย่าง Code หน้า Index.html
Code: Select all
<!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>
Code: Select all
$('.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" });
Code: Select all
[ { "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/
[b]ตัวอย่างการใช่งาน bootstrap tags input เบื้องต้น[/b]
ขั้นแรก Downloadไฟล์สำหรับการใช้งาน
[attachment=1]bootstrap-tagsinput-master-examples.rar[/attachment]
[b]ไฟล์ ที่เกี่ยวข้องในการใช้งาน เบื้องต้น[/b]
- 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
[b]ภาพตัวอย่างการใช้งาน[/b]
[attachment=0]tag.png[/attachment]
[b]ตัวอย่าง Code หน้า Index.html[/b]
[code]<!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>[/code]
[b]ตัวอย่าง Code หน้า assets/app_bs2.js[/b]
[code]
$('.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" });
[/code]
[b]ตัวอย่าง Code หน้า assets/cities.json[/b]
[code][ { "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" }
][/code]
อ้างอิงจาก
http://timschlechter.github.io/bootstrap-tagsinput/examples/
Log in with LINE