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頁面

回答

相關問題