2010-05-26 50 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