移动进度条[关闭]答案

【问题标题】：Mobile progress bar [closed]移动进度条[关闭]
【发布时间】：2013-05-24 07:24:58
【问题描述】：

我正在搜索一个进度条（或没有拇指的滑块，它不会启用交互）。

我想在 HTML5 项目中使用适用于 iOS/Android/Windows 移动设备的 jQuery 移动设备。目前不支持移动浏览器progress。

有没有人有代码或知道插件（我不想只为那个元素集成 jQuery UI）

【问题讨论】：

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

【解决方案1】：

简介

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

示例

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

示例有一个工作演示，因此请看一下。如果这是你需要的，我会用它创建一个插件。

代码

此代码将创建在放置和滑块按钮中不可见的滑块：

$('<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 之间工作，因此任何整数值都将计为百分比值。

【讨论】：

是否可以禁用鼠标与滑块的交互？

【解决方案2】：

上面 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');
});

这将产生一个进度静态进度条，您可以通过编程方式对其进行更改。用户输入被禁用，因此用户无法拖动进度条。

这对我来说非常有用，因为我想显示一个静态进度条（而不是加载条）。需要额外的工作来以编程方式设置动画或更改。享受吧！

【讨论】：

我更改了 $("input").remove() -> $("input").hide() 以便它可以在程序中设置值。
使用 $('.ui-slider-bg').css('width', percent + '%');设置值

【解决方案3】：

我用过一次……只用css-tricks

检查这是不是你需要的

【讨论】：

在安卓和iPhone上都不显示