[英]howto init ion-range-slider function in gentelella template
I'm in confusion to how to initialize some basic js components, like the "grid slider": 我对如何初始化一些基本的js组件(例如“网格滑块”)感到困惑:
that is included in the package for laravel: https://colorlib.com/polygon/gentelella/form_advanced.html 包含在laravel软件包中的网址: https ://colorlib.com/polygon/gentelella/form_advanced.html
and it comes from this plugin: http://ionden.com/a/plugins/ion.rangeSlider/en.html 它来自此插件: http : //ionden.com/a/plugins/ion.rangeSlider/en.html
that's my code: 那是我的代码:
<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});});
I've tried 2 way: 我尝试了两种方法:
@stack('script')
" part like: 在子视图中的“ @stack('script')
”部分中导入CDN,如下所示: src="https://cdnjs.cloudflare.com/ajax/libs/ion-angeslider/2.2.0/js/ion.rangeSlider.min.js"> SRC = “https://cdnjs.cloudflare.com/ajax/libs/ion-angeslider/2.2.0/js/ion.rangeSlider.min.js”>
the erros is something like: 错误是这样的:
how can i correctly initialize this component? 我如何正确初始化此组件?
You need these prerequisites: 您需要满足以下先决条件:
ion.rangeSlider.min.css
css: ion.rangeSlider.min.css
ion.rangeSlider.skinFlat.min.css
主题: ion.rangeSlider.skinFlat.min.css
ion.rangeSlider.min.js
和js: ion.rangeSlider.min.js
Source for ion-rangeslider cdn: https://cdnjs.com/libraries/ion-rangeslider ion-rangeslider cdn的来源: https ://cdnjs.com/libraries/ion-rangeslider
Working snippet: 工作片段:
$("#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>
In the case of gentelella
, they use this in the source code: 对于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");
}
});
As can be seen, they heavily make use of moment
function, which is a prerequisite. 可以看出,它们大量使用了moment
函数,这是先决条件。 Moment JS to be exact. 确切地说是JS时刻 。 Import that too and you should no longer have issues 也导入该文件,您应该不再有问题
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.