谁能给我展示此标签管理器的简单实现,以使其在简单的html文件上运行?
http://welldonethings.com/tags/manager
我确实尝试自己实现它,如下所示,但我无法使其正常工作。
<html>
<head>
<title>tags example</title>
<script type="text/javascript" src="assets/js/bootstrap-tagmanager.js"></script>
<script type="text/javascript" src="assets/css/bootstrap-tagmanager.css"></script>
<script src="assets/js/jquery-1.9.0.min.js" type="text/javascript"></script>
</head>
<body>
<input type="text" name="tags" placeholder="Tags" class="tagsManager"/>
<script src="assets/js/angular/angular.min.js"></script>
<script src="assets/js/angular/angular-resource.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/controllers.js"></script>
<script src="assets/js/jquery-ui-1.10.0.custom.min.js" type="text/javascript"> </script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(".tagManager").tagsManager({
prefilled: ["Pisa", "Rome"],
CapitalizeFirstLetter: true,
preventSubmitOnEnter: true,
typeahead: true,
typeaheadAjaxSource: null,
typeaheadSource: ["Pisa", "Rome", "Milan", "Florence", "New York", "Paris", "Berlin", "London", "Madrid"],
delimeters: [44, 188, 13],
backspace: [8],
blinkBGColor_1: '#FFFF9C',
blinkBGColor_2: '#CDE69C',
hiddenTagListName: 'hiddenTagListA'
});
</script>
</body>
</html>
最佳答案
将此FIDDLE签出,您还没有添加隐藏字段hiddenTagListA
从这里更改您的代码
<script type="text/javascript" src="assets/js/bootstrap-tagmanager.js"></script>
<script type="text/javascript" src="assets/css/bootstrap-tagmanager.css"></script>
<script src="assets/js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(".tagManager").tagsManager({
prefilled: ["Pisa", "Rome"],
CapitalizeFirstLetter: true,
preventSubmitOnEnter: true,
typeahead: true,
typeaheadAjaxSource: null,
typeaheadSource: ["Pisa", "Rome", "Milan", "Florence", "New York", "Paris", "Berlin", "London", "Madrid"],
delimeters: [44, 188, 13],
backspace: [8],
blinkBGColor_1: '#FFFF9C',
blinkBGColor_2: '#CDE69C',
hiddenTagListName: 'hiddenTagListA'
});
</script>
对此
<link href="assets/css/bootstrap-tagmanager.css" rel="stylesheet" type="text/css" />
<script src="assets/js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/js/bootstrap-tagmanager.js"></script>
<script type="text/javascript">
$(function () {
$(".tagsManager").tagsManager({
prefilled: ["Pisa", "Rome"],
CapitalizeFirstLetter: true,
preventSubmitOnEnter: true,
typeahead: true,
typeaheadAjaxSource: null,
typeaheadSource: ["Pisa", "Rome", "Milan", "Florence", "New York", "Paris", "Berlin", "London", "Madrid"],
delimeters: [44, 188, 13],
backspace: [8],
blinkBGColor_1: '#FFFF9C',
blinkBGColor_2: '#CDE69C',
hiddenTagListName: 'hiddenTagListA'
});
});
</script>