2010-05-26 36 views
2

我在web應用程序的工作使用邊框觀看YouTube視頻搜索條,它JS API如何創建在JavaScript

我可以輕鬆,但不知道如何創建搜索條實現播放,暫停,靜音等

回答

1

可以使用/自定義的jQuery UI提供的slider控制來解決問題

更新:您所請求的評論的代碼示例。同一樣品被上傳在http://elangovanr.com/samples/jquery/slider.html


<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <style type="text/css"> 
    #slider { margin: 10px; } 
    </style> 
    <script> 
     $(document).ready(function() { 
      $("#slider").slider(
      { 
       min: 0, 
       max: 100, 
       step: 1, 
       change: showValue 

      }); 
      $("#update").click(function() { 
       $("#slider").slider("option", "value", $("#seekTo").val()); 

      }); 
      function showValue(event, ui) { 
       $("#val").html(ui.value); 
      } 
     }); 
    </script> 
</head> 
<body style="font-size:62.5%;"> 
    <p> 
    The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys. 
    </p> 
    <p> 
    This sample demonstrates the simple usage of the slider seek to function. 
    For more information about slider, please procedd to http://docs.jquery.com/UI/Slider 
    </p> 
<div id="slider"></div> 
Seek To : <input id="seekTo" type="text" value="10" /> 
<input id="update" type="button" value="Update" /> 
Current Value : <span id="val">0</span> 
</body> 
</html> 
+0

我是新來的jQuery,沒有得到你。 任何例子請 – atinder 2010-05-26 08:10:46

+0

試試這個<!DOCTYPE HTML> <鏈接HREF = 「http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css」 rel =「stylesheet」type =「text/css」/> <體風格= 「字體大小:62.5%;」>

Elangovan 2010-05-26 08:16:42

+0

檢查演示和它在頁源http://docs.jquery.com/UI/Slider這可能會幫助你 – Elangovan 2010-05-26 08:17:52