Html5 Slider的技术升级改造
代码1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!--Plugin CSS file with desired skin--> <link rel="stylesheet" href="./css/ion.rangeSlider.css" /> <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/> --> <!--jQuery--> <script src="./js/jquery-1.11.0.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> --> <!--Plugin JavaScript file--> <script src="./js/ion.rangeSlider.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script> --> </head> <body> <input id="r1" type="text" class="js-range-slider" name="my_range" value="" /> <script> $(function () { function my_prettify(n) { var tip = "不及格"; if (n <= 0) { tip = "不及格"; } else if (n <= 25) { tip = "及格"; } else if (n < 50) { tip = "中等"; } else if (n < 50) { tip = "良好"; } else { tip = "优秀"; } return n + " : " + tip; } $("#r1").ionRangeSlider({ skin: "big", grid: true, min: 0, max: 100, from: 0, step: 25, prettify: my_prettify, }); }); </script> </body> </html>
代码2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> --> <!--Plugin CSS file with desired skin--> <!-- <link rel="stylesheet" href="./css/ion.rangeSlider.css" /> --> <link rel="stylesheet" href="./css/jquery.mobile-1.1.0.css" /> <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/> --> <!--jQuery--> <!-- <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> --> <script src="./js/jquery-1.7.1.js"></script> <script src="./js/jquery.mobile-1.1.0.js"></script> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> --> <!--Plugin JavaScript file--> <!-- <script src="./js/ion.rangeSlider.js"></script> --> <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script> --> </head> <body> <div data-role="page"> <form> <label for="s1"> Input slider: <span id="tip1"></span></label> <input type="range" name="slider" id="s1" value="60" min="0" max="100" step="25" data-highlight="true" /> <label for="s2"> Input slider: <span id="tip2"></span></label> <input type="range" name="slider" id="s2" value="60" min="0" max="200" step="50" data-highlight="true" /> </form> </div> <script> $(function () { $("input").each(function () { $(this).bind("change", function (event, ui) { var id = $(this).attr("id"); var num = id.substr(1, 1); var score = $(this).val(); // console.log(score); // var fscore = parseFloat(score); // console.log(fscore); var max = $(this).attr("max"); // var fmax = parseFloat(max); var frate = score / max; var tip = ""; switch (frate) { case 0: tip = "未评"; break; case 0.25: tip = "差评"; break; case 0.5: tip = "及格"; break; case 0.75: tip = "良好"; break; case 1: tip = "优秀"; break; } $("#tip" + num).html(tip); }); }); $("input").slider("refresh"); }); </script> </body> </html>