Jsfiddle演示到html页面

-1

我有这个jsfiddle我做了http://jsfiddle.net/yd6xmtvq/，并且想要在html页面上实现这个。我将引导程序的css文件包含在html中，并且它们与html文件位于相同的目录中。这是我的代码是如何设置：Jsfiddle演示到html页面

<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演示到html页面

回答

相关问题