如何初始化bootstrap-classify?
How to initialize bootstrap-classify?
我正在尝试制作一个使用此 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">
查看他们的源代码并尝试对其进行逆向工程,看起来你想要:
$.fn.classify
或
$.fn.classify.Constructor
如果事实并非如此,请告诉我,我会尝试更新此答案。
对于 $.fn.classify
,唯一的参数是一个选项 object,它具有以下可能的属性:
- 格式 - 可以是 "bl" 或 "pm"
- 没有 - 可能是布尔值
- 输入 - 可能是布尔值
- relto - 看起来像布尔值
- fgi - 看起来像布尔值
- 模式 - 可以是 "modal"
- title - 很可能是一个字符串(标题)
- 容器
- 视口
- 选择器 - 看起来像查询选择器
- 标题
- 非尼克
- btnsize
- 三字母
- 四合体
- 更新
- 回调 - 很可能是一个函数
- fdr - 布尔值
这个答案只是给你一些开始。我没有彻底检查 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 库的简单静态页面。我试着查看它的几段代码以获取有关如何实现它的提示。我很确定至少需要一个步骤是将 .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">
查看他们的源代码并尝试对其进行逆向工程,看起来你想要:
$.fn.classify
或
$.fn.classify.Constructor
如果事实并非如此,请告诉我,我会尝试更新此答案。
对于 $.fn.classify
,唯一的参数是一个选项 object,它具有以下可能的属性:
- 格式 - 可以是 "bl" 或 "pm"
- 没有 - 可能是布尔值
- 输入 - 可能是布尔值
- relto - 看起来像布尔值
- fgi - 看起来像布尔值
- 模式 - 可以是 "modal"
- title - 很可能是一个字符串(标题)
- 容器
- 视口
- 选择器 - 看起来像查询选择器
- 标题
- 非尼克
- btnsize
- 三字母
- 四合体
- 更新
- 回调 - 很可能是一个函数
- fdr - 布尔值
这个答案只是给你一些开始。我没有彻底检查 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>