Jsfiddleデモからhtmlへのページ

-1

私はを作成し、これをHTMLページに実装したいと思っています。ブートストラップのCSSファイルをhtmlに含めました.HTTPファイルと同じディレクトリにあります。これは私のコードが設定されているか：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>

すべてのヘルプは、あなたは、次の3つを修正する必要が

出典

2016-11-26 ekbayrak2

を単にファイルをすべてコピーし、 'myfile.html'という名前を付けます。 .. –

1時07分に 'document.ready' SO –

jsfiddleのスクリプトは、デフォルトで' onload'イベントで実行されます。 'body'要素のいずれかがDOM内にある前にスクリプトを実行するので、jQueryはスクリプトが実行された時点でそれらを見つけることができません。 –

を高く評価しています。

の後にjQueryを追加しました。 JQueryは、bootstrap-slider.jsライブラリの前に追加されたである必要があります。
すべてのhtml要素の下にある<head>タグ内のスクリプトがあります。それ以外の場合は$(document).readyで囲む必要があります。
はまた、あなたが.wrapper { }

作業コピー含まれるようにマイナーなCSSスタイルを逃した：

<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へのページ

答えて

関連する問題