javascript - 如何在gentelella模板中初始化离子范围滑块功能
问题描述
我对如何初始化一些基本的 js 组件感到困惑,比如“网格滑块”:
包含在 laravel 的包中: https ://colorlib.com/polygon/gentelella/form_advanced.html
它来自这个插件:http: //ionden.com/a/plugins/ion.rangeSlider/en.html
那是我的代码:
<input type="text" id="test_range" name="example_name" value="" />
$(document).ready(function(e) {
$('#tabS').DataTable();
$("#test_range").ionRangeSlider({
min: 100,
max: 1000,
from: 550});});
我尝试了两种方式:
src="https://cdnjs.cloudflare.com/ajax/libs/ion-angeslider/2.2.0/js/ion.rangeSlider.min.js">
错误类似于:
我怎样才能正确初始化这个组件?
解决方案
您需要这些先决条件:
- 的CSS:
ion.rangeSlider.min.css
- 一个主题:
ion.rangeSlider.skinFlat.min.css
- jQuery
- 和js:
ion.rangeSlider.min.js
ion-rangeslider cdn 来源:https ://cdnjs.com/libraries/ion-rangeslider
工作片段:
$("#range_02").ionRangeSlider({
min: 100,
max: 1000,
from: 550
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinFlat.min.css">
<input id="range_02" class="irs-hidden-input" tabindex="-1" readonly="">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.min.js"></script>
在 的情况下gentelella
,他们在源代码中使用它:
$(".range_time24").ionRangeSlider({
min: +moment().subtract(12, "hours").format("X"),
max: +moment().format("X"),
from: +moment().subtract(6, "hours").format("X"),
grid: true,
force_edges: true,
prettify: function(num) {
var m = moment(num, "X");
return m.format("Do MMMM, HH:mm");
}
});
可以看出,它们大量使用moment
函数,这是一个先决条件。确切地说,时刻 JS 。也导入它,你应该不再有问题
推荐阅读
- ionic-framework - npm WARN 已弃用 browserslist@2.11.3:Browserslist 2 在读取 Browserslist >3.0 时可能会失败
- java - 是否需要开发与 CI、CD 软件相同语言的测试脚本?
- java - Camera2 Api 自动闪光不起作用
- php - 如何将 HTML 和 php 与数据库连接?
- oracle - excel年龄分析
- performance - tar - -to-stdout 如何恢复stdout的内容并将其保存到带有原始目录的文件系统
- python-2.7 - 在Python中的if-else条件之后从两个列表中添加和减去
- sql - 在 Apex Oracle SQL 中创建表/序列/触发器 - ORA-00922 / ORA-00907 / ORA-00922
- php - 如何通过 2 个日期制作搜索栏?laravel 的开始日期和结束日期
- mysql - 使用三表mysql连接查询