Jsfiddle demo to html page

-1

У меня есть этот jsfiddle, который я сделал http://jsfiddle.net/yd6xmtvq/, и хочу реализовать это на странице html. Я включил файлы css bootstrap в html, и они находятся в том же каталоге, что и файл tht html. Это как мой код установки:Jsfiddle demo to html page

<html> 

<head> 

    <!-- Bootstrap Core CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<link href="bootstrap-slider.css" rel="stylesheet"> 
<script src="bootstrap-slider.js"></script> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script> 

var minSliderValue = $("#ex1").data("slider-min"); 
var maxSliderValue = $("#ex1").data("slider-max"); 

$('#ex1').slider({ 
    value : 0, 
    formatter: function(value) { 
     return 'RAM: ' + value + 'GB'; 
    } 
}); 

$('#ex2').slider({ 
    value : 0, 
    formatter: function(value) { 
     return 'Disk Space: ' + value + 'GB'; 
    } 
}); 

$('#ex3').slider({ 
    value : 0, 
    formatter: function(value) { 
     return 'CPU : ' + value + ' Cores'; 
    } 
}); 

// If You want to change input text using slider handler 
$('.slider').on('slide', function(slider){ 

    var val1 = $("#ex1").val(); 
    var val2 = $("#ex2").val(); 
    var val3 = $("#ex3").val(); 
    $("#inputValue").val(parseInt(val1)+ parseInt(val2)+ parseInt(val3)); 

}); 

// If you want to change slider using input text 
$("#inputValue").on("keyup", function() { 
    var val = Math.abs(parseInt(this.value, 10) || minSliderValue); 
    this.value = val > maxSliderValue ? maxSliderValue : val; 
    $('#ex1','ex2','ex3').slider('setValue', val); 
}); 


</script> 


</head> 
<body> 


<div class="wrapper"> 
    <input class="slider" id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" /> 
     <hr /> 

    <input class="slider" id="ex2" data-slider-id='ex1Slider2' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" /> 
     <hr /> 
     <input class="slider" id="ex3" data-slider-id='ex1Slider3' type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" /> 

     <hr /> 

     <input type="text" class="form-control" id="inputValue" value="0" readonly /> 


     </div> 
</body> 
</html>

любая помощь

источник

2016-11-26 ekbayrak2

просто скопировать все в файл и назовите его 'myfile.html'. .. –

'document.ready' за 1е7-й раз на SO –

Скрипты в jsfiddle по умолчанию выполняются на событии' onload'. Вы запускаете свой скрипт до того, как какой-либо элемент в 'body' находится в DOM, поэтому jQuery не может найти ни одного из них во время запуска скрипта. –

Вы должны исправить следующие три вещи.

Вы отправили jQuery после bootstrap-slider.js. JQuery должно быть добавлено до bootstrap-slider.js библиотека.
У вас есть сценарии внутри тега <head>, который должен быть до всех элементов html, в противном случае он должен быть заключен в $(document).ready.
Также вы пропустили второстепенную стиль CSS включить .wrapper { }

рабочей копии:

<html> 
 

 
<head> 
 

 
    <!-- Bootstrap Core CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<link href="http://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet"> 
 
    
 
    <style> 
 
    .wrapper { 
 
    padding: 50px; 
 
    margin-top: 25px; 
 
} 
 

 
    </style> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="http://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script> 
 

 

 

 

 
</head> 
 
<body> 
 

 

 
<div class="wrapper"> 
 
    <input class="slider" id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="10" data-slider-step="1" /> 
 
     <hr /> 
 

 
    <input class="slider" id="ex2" data-slider-id='ex1Slider2' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" /> 
 
     <hr /> 
 
     <input class="slider" id="ex3" data-slider-id='ex1Slider3' type="text" data-slider-min="0" data-slider-max="4" data-slider-step="1" /> 
 

 
     <hr /> 
 

 
     <input type="text" class="form-control" id="inputValue" value="0" readonly /> 
 

 

 
     </div> 
 
    
 
    <script> 
 

 
var minSliderValue = $("#ex1").data("slider-min"); 
 
var maxSliderValue = $("#ex1").data("slider-max"); 
 

 
$('#ex1').slider({ 
 
    value : 0, 
 
    formatter: function(value) { 
 
     return 'RAM: ' + value + 'GB'; 
 
    } 
 
}); 
 

 
$('#ex2').slider({ 
 
    value : 0, 
 
    formatter: function(value) { 
 
     return 'Disk Space: ' + value + 'GB'; 
 
    } 
 
}); 
 

 
$('#ex3').slider({ 
 
    value : 0, 
 
    formatter: function(value) { 
 
     return 'CPU : ' + value + ' Cores'; 
 
    } 
 
}); 
 

 
// If You want to change input text using slider handler 
 
$('.slider').on('slide', function(slider){ 
 

 
    var val1 = $("#ex1").val(); 
 
    var val2 = $("#ex2").val(); 
 
    var val3 = $("#ex3").val(); 
 
    $("#inputValue").val(parseInt(val1)+ parseInt(val2)+ parseInt(val3)); 
 

 
}); 
 

 
// If you want to change slider using input text 
 
$("#inputValue").on("keyup", function() { 
 
    var val = Math.abs(parseInt(this.value, 10) || minSliderValue); 
 
    this.value = val > maxSliderValue ? maxSliderValue : val; 
 
    $('#ex1','ex2','ex3').slider('setValue', val); 
 
}); 
 

 

 
</script> 
 
</body> 
 
</html>

источник

2016-11-26 15:41:11 Aruna

Jsfiddle demo to html page

ответ

Смежные вопросы