Question

我想在输入字段中实现一个进程条。使用OK发送输入后，我想传输字段并显示一个简短的处理栏。我还没有找到任何现有的jquery解决方案，但如果有人知道的话......

这是我目前的解决方案，可用于缩放1px png。 http://jsfiddle.net/kaLbrg6w/

我想在没有任何其他div的情况下定义这样的字段集：

<fieldset>
    <input name="name" type="text">
</fieldset>

然后用css和js做进度条。是否有更好的方法，可能没有加载任何图像，以实现进度条和动画？

修改的还没有js。计划是以BG图像宽度为动画（假如：http://jsfiddle.net/kaLbrg6w/1/）。我还考虑在输入字段后面或上面添加一个div来动画它，但我想检查一个解决方案，我不必使用额外的元素。

Answer 1

这个jQuery将模拟1100毫秒的进度，在服务器的响应回来之前，它几乎会一直停留在最后。

    $('#myForm').on('submit', function(){
        $("#bar").show();
        var w = $('#bar').width() - 20;
        $('#progress').animate({ width: w }, 1000);
        $.post(YOURAJAX).success(function(r){
            $('#progress').animate({ width: w+20 }, 100);
            //code
        });
    });

使用这种HTML：

<fieldset>
   <div id="bar">
      <div id="progress"></div>
   </div>
   <input name="name" type="text">
</fieldset>

和css：

#bar { display:none;width: 500px; position: relative; overflow: hidden; height: 20px;}
#progress {width: 0px; background-color: blue; height: 100%;}

这只是一个例子。

输入字段的背景作为进度条

1 个答案: