-1

我想在此页面上使用 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

1 回答 1

0

这对我有用: plunker

如果滑块根本不显示,请检查:

  1. jquery 和 jquery-ui 已加载。
  2. jquery-ui 在 jquery 之后加载
于 2013-10-28T13:45:19.923 回答