当前位置：文江博客话题详情

JavaScript youtube-api seekbar

我如何在 javascript 中创建一个搜索栏

发布于 2024-09-03 03:56:49 字数 99 浏览 5 评论 0原文

我正在开发一个网络应用程序，用于使用 chromeless 和它的 js api 观看 youtube 视频，

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

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

攒一口袋星星 2024-09-10 03:56:49

您可以使用/自定义 jQuery UI 提供的 slider 控件来解决您的问题

更新：代码您在评论中请求的示例。相同的示例上传到 http://elangovanr.com/samples/jquery/slider.html< /a>

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

you can use/customize the slider control provided by jQuery UI to solve your problem

update: the code sample that you have requested in comment. The same sample is uploaded in 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 原文

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

22 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文