我想在输入字段中实现一个进程栏。 使用 OK 发送输入后,我想转移字段并显示一个简短的过程栏。 我还没有找到任何现有的 jquery 解决方案,但如果有人知道某事......
这是我当前的解决方案,适用于缩放 1px png。 http://jsfiddle.net/kaLbrg6w/
我只想定义一个像这样的字段集,后面没有任何其他 div:
<fieldset>
<input name="name" type="text">
</fieldset>
然后用 css 和 js 做进度条。 有没有更好的方法,也许不加载任何图像,来实现进度条并为其设置动画?
编辑 还没有js。计划是动画化(像这样伪造:http://jsfiddle.net/kaLbrg6w/1/)BG 图像宽度的进度。 我还考虑过在输入字段后面或上方添加一个 div 来为其设置动画,但我想检查一个不需要使用额外元素的解决方案。
最佳答案
这个 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%;}
当然这只是一个例子。
关于javascript - 输入字段的背景作为进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25501275/