添加一個帶onchange屬性的文本字段到一個滑塊

我已經得到了這個滑塊一些在哪裏的互聯網，我想添加一個文本框到這個滑塊，所以在這個滑塊內部的值改變時，滑塊將自身設置爲在文本框中給出的值。添加一個帶onchange屬性的文本字段到一個滑塊

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Papermashup.com | jQuery UI Slider Demo</title> 
    <link href="../style.css" 
    rel="stylesheet" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 
    <style type="text/css"> 
     #container { 
      background:url(bg.jpg)!important; 
      padding:100px 50px 0px 50px; 
     } 
     /*the slider background*/ 
     .slider { 
      width:230px; 
      height:11px; 
      background:url(slider-bg.png); 
      position:relative; 
      margin:0; 
      padding:0 10px; 
     } 
     /*Style for the slider button*/ 
     .ui-slider-handle { 
      width:24px; 
      height:24px; 
      position:absolute; 
      top:-7px; 
      margin-left:-12px; 
      z-index:200; 
      background:url(slider-button.png); 
     } 
     /*Result div where the slider value is displayed*/ 
     #slider-result { 
      font-size:50px; 
      height:200px; 
      font-family:Arial, Helvetica, sans-serif; 
      color:#fff; 
      width:250px; 
      text-align:center; 
      text-shadow:0 1px 1px #000; 
      font-weight:700; 
      padding:20px 0; 
     } 
     /*This is the fill bar colour*/ 
     .ui-widget-header { 
      background:url(fill.png) no-repeat left; 
      height:8px; 
      left:1px; 
      top:1px; 
      position:absolute; 
     } 
     a { 
      outline:none; 
      -moz-outline-style:none; 
     } 
    </style> 
</head> 
<body> 
    <div class="slider"></div> 
    <div id="slider-result">50</div> 
    <div class="ui-widget-header"></div> 
    <input type="hidden" id="hidden" /> 
    <script> 
     $(".slider").slider({ 
      animate: true, 
      range: "min", 
      value: 50, 
      min: 0, 
      max: 80, 
      step: 1, 
      //this gets a live reading of the value and prints it on the page 
      slide: function (event, ui) { 
       $("#slider-result").html(ui.value); 
      }, 
      //this updates the hidden form field so we can submit the data using a form 
      change: function (event, ui) { 
       $('#hidden').attr('value', ui.value); 
      } 
     }); 
    </script> 
</body> 

</html>

希望我解釋得夠好。

來源

2012-06-05 Siwa

只需添加您的文本框，無論你想它，G它是一個ID，並擴展幻燈片：函數與文本字段和.val（ui.value）的ID; – Rufinus

@Rufinus tnx。以及我必須給文本框中的onchange帶來什麼價值？ – Siwa

那麼你使用的是jQuery UI。與您複製的腳本類似，您可以在此部分的評論中閱讀：

slide: function (event, ui) { 
       $("#slider-result").html(ui.value); 
}

您的結果實時更新。

所以，如果你做了一點修改：

添加此HTML：

<input type="text" id="showslider" />

和修改現場滑動的事情/

slide: function (event, ui) { 
    $("#slider-result").html(ui.value); 
    $("#showslider").val(ui.value); 
}

那麼事情應該工作。

編輯：

你可以添加一個事件偵聽器添加到您的每個用戶正在打字，或當他按下Enter鍵（這是你想要的）這樣的一個例子時間更改值文本框：

$("#showslider").keyup(function (e){ 
    $(".slider").slider("value", $("#showslider").val()); 
}

更多信息可以在這裏找到：

http://jqueryui.com/demos/slider/

來源

2012-06-05 15:34:10

tnx的提示。但我想要的是「showslider」這是一個文本框，也控制滑塊。我希望能夠通過「showslider」設置滑塊。 – Siwa

@Siwa編輯帖子。 –

添加一個帶onchange屬性的文本字段到一個滑塊

回答

相關問題