Question

任何人都可以向我展示这个标签管理器的简单实现，使其适用于简单的html文件吗？

我确实尝试自己实现它，如下所示，但我无法让它工作。

<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>

Answer 1

检查此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>

如何使用标签管理器？

1 个答案: