【问题标题】:how can i create a seekbar in javascript如何在 javascript 中创建搜索栏
【发布时间】:2010-05-26 05:33:58
【问题描述】:

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

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

【问题讨论】:

    标签: javascript youtube-api seekbar


    【解决方案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>
    

    【讨论】:

    • 我是 jquery 的新手,没听懂。请举个例子
    • 试试这个 ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/…" rel="stylesheet" type="text/css"/>
    • docs.jquery.com/UI/Slider页面中查看演示及其来源,这可能会对您有所帮助
    • 我有一个 seekTo() 函数如何在滑块上实现它
    • 我有一个 seekTo(seconds) 函数如何在滑块上实现它
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-10-15
    • 2018-02-03
    • 1970-01-01
    • 2016-11-18
    • 1970-01-01
    • 2019-03-20
    相关资源
    最近更新 更多