Question

我正在开发一个webapp，用于使用chromeless和js api

查看YouTube视频

我可以轻松实现播放，暂停，静音等，但不确定如何创建搜索栏

Answer 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>

如何在javascript中创建搜索栏

1 个答案: