2013-10-28 103 views
-1

我想在此页面上使用jQuery UI滑块,但由于某种原因它不起作用。你会看到我忙于“没有鞋子的身高厘米”,我会尽快完成这个表格,一旦我可以解决这个问题。这里是我的代码:jquery ui - 滑块无法正常工作

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Module Health Measurements</title> 
    <link rel="stylesheet" href="jquery-ui-1.10.3/themes/base/jquery.ui.all.css"> 
    <script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script> 
    <script src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script> 
    <script src="jquery-ui-1.10.3/ui/jquery.ui.widget.js"></script> 
    <script src="jquery-ui-1.10.3/ui/jquery.ui.mouse.js"></script> 
    <script src="jquery-ui-1.10.3/ui/jquery.ui.slider.js"></script> 
    <link rel="stylesheet" href="jquery-ui-1.10.3/demos/demos.css"> 

    <script> 
    $(function() { 
     $("#slider-40").slider({ 
      min: 65, 
      max: 240, 
      value: 170, 
      slide: function(event, ui) { 
       $("#40").val(ui.value); 
      } 
     }); 
     $("#40").val($("#slider-40").slider("40")); 
     }); 
    </script> 
    <style type="text/css"> 
/* 
.style2 {font-size: medium} 
*/ 
    </style> 

</head> 
<body> 

<form id="form1" name="form1" method="post" action=""> 

<table width="550" border="1"> 
    <tr> 
    <td colspan="2" bgcolor="#5ACDC7"><h3>Health Measurements</h3></td> 
    </tr> 
    <tr> 
    <td width="332">Height in cm without shoes</td> 
    <td width="202"> 
     <label for="40"><span class="style2">Height</span>:</label> 
     <input type="text" id="40" style="border:0; color:#f6931f; font-weight:bold;" /> 
    </td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    <div id="slider-40" style="height:5px;"></div> 
    </td> 
    </tr> 
    <tr> 
    <td>Weight in kg without shoes</td> 
    <td><label> 
     <input name="41" type="text" id="41" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    </td> 
    </tr> 
    <tr> 
    <td>Hip circumference in cm</td> 
    <td><label> 
     <input name="42" type="text" id="42" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    </td> 
    </tr> 
    <tr> 
    <td>Waist circumference in cm</td> 
    <td><label> 
     <input name="43" type="text" id="43" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    </td> 
    </tr> 
    <tr> 
    <td>Have you eaten in the last 7 hours?</td> 
    <td><label> 
     <select name="44" id="44"> 
     <option>Yes</option> 
     <option>No</option> 
     </select> 
    </label></td> 
    </tr> 
    <tr> 
    <td>Systolic blood pressure mmHg</td> 
    <td><label> 
     <input name="45" type="text" id="45" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    </td> 
    </tr> 
    <tr> 
    <td>Diastolic blood pressure mmHg</td> 
    <td><label> 
     <input name="46" type="text" id="46" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    </td> 
    </tr> 
    <tr> 
    <td>Glucose mmol/l</td> 
    <td><label> 
     <input name="47" type="text" id="47" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    </td> 
    </tr> 
    <tr> 
    <td>Total Cholesterol mmol/l</td> 
    <td><label> 
     <input name="48" type="text" id="48" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    </td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td colspan="2" bgcolor="#5ACDC7"><h5>BP 5 Minute Follow-up</h5></td> 
    </tr> 
    <tr> 
    <td>Systolic blood pressure 5 min</td> 
    <td><label> 
     <input name="51" type="text" id="51" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    </td> 
    </tr> 
    <tr> 
    <td>Diastolic blood pressure 5 min</td> 
    <td><label> 
     <input name="52" type="text" id="52" size="7" maxlength="7" /> 
    </label></td> 
    </tr> 
    <tr> 
    <td colspan="2"> 
    </td> 
    </tr> 
    <tr> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
    <tr> 
    <td><label> 
     <input type="submit" name="button1" id="button1" value="Submit" /> 
    </label></td> 
    <td>&nbsp;</td> 
    </tr> 
</table> 

</form> 

</body> 
</html> 

如果有人能指出,如果你看到一些错误,我将不胜感激?

+4

你会得到什么错误? – j08691

+2

你能创建一个http://jsfiddle.net/来看看它在行动吗? –

+1

什么是'.slider(“40”)'应该这样做? – j08691

回答

0

这个工作对我来说: plunker

如果滑块不会显示在所有请检查:

  1. jQuery和jQuery的UI被加载。
  2. jquery-ui在jquery后加载