Question

如果我使用这个脚本和css文件

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>progressbar</title> 
    <link href="../../Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"    /> 
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui.min.js")">     </script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert('hi');
            $("#progressbar").progressbar({ value: 70 });
        });
    </script>
</head>
<body>
   <div id="progressbar"> 
   </div>
</body>
</html>

这很好用。但在这里我使用其他css文件因为我正在为手机工作。我的项目包含这是样式和脚本

    <html>
     <head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/jquery.mobile-1.0rc2.css")" rel="stylesheet" type="text/css" />  
    <script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script> 
    <script src="@Url.Content("~/Scripts/jquery.mobile-1.0rc2.js")" type="text/javascript"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            alert('hi');
            $("#progressbar").progressbar({ value: 70 });
        });
</script>
</head>
<body>
    <div id="progressbar"> 
     </div>
</body>
</html>

我正在使用 jquery.mobile-1.0rc2.css 作为样式， jquery.mobile-1.0rc2.js < / strong>对于jquery。所以我观察了以前的css文件中的样式为

.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; } .ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; } .ui-progressbar { height:2em; text-align: left; } .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }

这些样式用于进度条。所以我将它们复制到 jquery.mobile-1.0rc2.css

但是在 jquery-ui.min.js 中进行了一些调用以应用进度条样式。

所以如何在不添加这些文件的情况下完成此任务。

任何帮助？

提前致谢。

Answer 1

请通过以下示例进行操作。您可以在任何事件上调用这些函数。这只是为了填充移动平台上的进度条，您可以根据需要自定义它。此外，您还需要添加2个JS和一个CSS来填充进度条。

http://docs.jquery.com/UI/Progressbar

您可以导入上面链接中给出的JS和CSS文件，然后您可以在Android WebApp上使用以下代码。

    $(function() {

        $("#progressbar").progressbar({ value: 10 });
        setTimeout(updateProgress, 500);

        });

        function updateProgress() {
          var progress;
          progress = $("#progressbar")
            .progressbar("option","value");
          if (progress < 100) {
              $("#progressbar")
                .progressbar("option", "value", progress + 5);
              setTimeout(updateProgress, 500);
          }
        }

这会在延迟半秒后以5的增量移动进度。您可以根据需要进行修改。

希望这会对你有所帮助

亲切的问候，

Summved

如何触发进度条事件jquery mobile

1 个答案: