移动进度条

时间:2013-05-24 07:24:59

标签: jquery html css jquery-mobile progress-bar

我正在搜索进度条(或没有拇指的滑块,不会启用交互)。

我想在带有jQuery mobile for iOS / Android / Windows mobile的HTML5项目中使用它。在移动浏览器上,目前不支持progress

有没有人有代码或知道插件(我不想只为该元素集成jQuery UI)

3 个答案:

答案 0 :(得分:12)

简介

jQuery Mobile仍然可以用于此,主要是因为这样的样式可以保持不变。

实施例

工作示例:http://jsfiddle.net/Gajotres/mFqUd/

示例有一个工作演示,所以看一看。如果这是你需要的,我将创建一个插件。

代码

此代码将在put和滑块按钮中创建没有可见的滑块:

$('<input>').appendTo('[ data-role="content"]').attr({'name':'slider','id':'slider','data-highlight':'true','min':'0','max':'100','value':'50','type':'range'}).slider({
    create: function( event, ui ) {
        $(this).parent().find('input').hide();
        $(this).parent().find('input').css('margin-left','-9999px'); // Fix for some FF versions
        $(this).parent().find('.ui-slider-track').css('margin','0 15px 0 15px');
        $(this).parent().find('.ui-slider-handle').hide();
    }
}).slider("refresh");  

必须在 .appendTo().... 部分中设置进度条父容器。

然后,此函数用于更改进度条值并更改其视觉样式:

var progressBar = {
    setValue:function(id, value) {
        $(id).val(value);
        $(id).slider("refresh");
    }
}

id 是进度条ID, value 是需要的值。滑块设置为0到100之间,因此任何整数值都将计为百分比值。

答案 1 :(得分:6)

Gajotres的上述答案帮助我找到了完美的解决方案。

首先,只需在页面中添加一个jQuery Mobile Slider元素

<input type="range" name="slider-2" id="slider-2" data-highlight="true" min="0" max="100" value="50">

然后jQuery发生了魔术:

$( "#page-progress" ).on( "pagebeforeshow", function( event ) {
    $("input").remove();
    $(".ui-slider-handle").remove();
    $('.ui-slider-track').css('margin','0 15px 0 15px').css('pointer-events','none');
});

这将导致进度静态进度条,您可以通过编程方式进行更改。用户输入已禁用,因此用户无法拖动进度条。

这对我很有用,因为我想要显示静态进度条(不是加载栏)。需要额外的工作来以编程方式进行动画或更改。享受!

答案 2 :(得分:1)

我曾经使用过这些......只有css-tricks

检查这是否是您需要的