如何初始化bootstrap-classify？

Question

我正在尝试制作一个使用此 bootstrap-classify 库的简单静态页面。我试着查看它的几段代码以获取有关如何实现它的提示。我很确定至少需要一个步骤是将 .bs-classify 添加到 HTML 元素，但到目前为止我还没有得到任何有用的东西。我在 js 控制台上没有任何错误，所有资源都在正常加载。

下面是 index.html

中的片段

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" integrity="sha256-G7A4JrJjJlFqP0yamznwPjAApIKPkadeHfyIwiaa9e0=" crossorigin="anonymous"></script>


<script src="js/ism-u.config.js"></script>
<script src="js/ism.js"></script>
<script src="js/bootstrap-classify.js"></script>
<link href="css/bootstrap-classify.css" rel="stylesheet">

Answer 1

查看他们的源代码并尝试对其进行逆向工程，看起来你想要：

$.fn.classify

或

$.fn.classify.Constructor

如果事实并非如此，请告诉我，我会尝试更新此答案。

对于 $.fn.classify，唯一的参数是一个选项 object，它具有以下可能的属性：

格式 - 可以是 "bl" 或 "pm"
没有 - 可能是布尔值
输入 - 可能是布尔值
relto - 看起来像布尔值
fgi - 看起来像布尔值
模式 - 可以是 "modal"
title - 很可能是一个字符串（标题）
容器
视口
选择器 - 看起来像查询选择器
标题
非尼克
btnsize
三字母
四合体
更新
回调 - 很可能是一个函数
fdr - 布尔值

Answer 2

这个答案只是给你一些开始。我没有彻底检查 bs-classify 库代码。因此，我认为该代码还有更多内容。我只是不明白为什么没有记录该代码。

不过，下面的方法很简单。它只是构造一个具有最小配置的分类对象。您需要通读代码的选项以了解代码具有哪些选项。

除此之外，您还必须弄清楚如何使用选项设置分类，因为我无法弄清楚为什么这不起作用。我把它留在了构造函数中，所以你可以看看。尽管如此，答案中真正的分类 setter 代码是 .setClassification() 语句。

此外，我没有尝试使用插件 API。

对于下面的代码，您可以尝试点击主要按钮。

<html>
<head>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  <link href="css/bootstrap-classify.css" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js" integrity="sha256-G7A4JrJjJlFqP0yamznwPjAApIKPkadeHfyIwiaa9e0=" crossorigin="anonymous"></script>

  <script src="js/ism-u.config.js"></script>
  <script src="js/ism.js"></script>
  <script src="js/bootstrap-classify.js"></script>
  <script>
      window.onload = function() {
          var abc = new $.fn.classify.Constructor(document.getElementById("test-1"),
                                                            {classification: ['TS'],
                                                             title: "Classification Box",
                                                             mode: "modal"});
          console.log(abc.getClassification());
          abc.setClassification("TS");
          console.log(abc.getClassification());
      }
  </script>
</head>
<body>

<button type="button" class="btn btn-primary" id="test-1">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>    
</body>
</html>

如何初始化bootstrap-classify？

How to initialize bootstrap-classify?

jquery

html

twitter-bootstrap

underscore.js

single-page-application