- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试将 jQuery UI 进度条分成几个部分。
有人知道我该怎么做吗?
示例:(2 - 视觉设计:03 http://wiki.jqueryui.com/w/page/12138028/Progressbar )
(我目前正在使用背景图像,但这不实用。)
最佳答案
这是我正在制作的原型(prototype)......
CSS:
div { margin:10px 10px 0px 10px; height:24px; }
div.progressContainer { clear:both; display:block; }
label { float:left; width:200px; display:block; }
input { float:left; width:100px; text-align:center; display:inline; }
input[type=button] { margin-right:1.5px; }
HTML:
<!-- Options -->
<div> <!-- Maximum -->
<label> Maximum ProgressBar Value </label>
<input id="max" type="text" value="100" />
</div>
<div> <!-- Initial Value -->
<label> Initial Value </label>
<input id="val" type="text" value="43" />
</div>
<div> <!-- Width -->
<label> ProgressBar Width </label>
<input id="width" type="text" value="304" />
</div>
<div> <!-- Height -->
<label> ProgressBar Height </label>
<input id="height" type="text" value="30" />
</div>
<div> <!-- Multiply -->
<label> Segmented ProgressBar </label>
<input id="seg" type="text" value="4" />
</div>
<!-- Create ProgressBar by given options -->
<div>
<input type="button" value="Create" />
</div>
<!-- ProgressBar Container -->
<div class="progressContainer"> </div>
<!-- Action Buttons -->
<div>
<input type="button" value="Start" /> <input type="button" value="Stop" /> <input type="button" value="Reset" />
</div>
jQuery:
var i; // Define a global counter
var tmr; // Define timer
// Create Function
function create() {
var max = parseInt($("input#max").val(),10),
val = parseInt($("input#val").val(),10),
seg = parseInt($("input#seg").val(),10),
width = parseInt($("input#width").val(),10),
height = parseInt($("input#height").val(),10);
$(".progressContainer").empty().height(height).width(width);
// Get size for each progressbar
var size = max / seg;
// Get width for each progressbar
// -2 for left/right borders of progressbars
// -1 for margin-right
// = -3px each of their width to fit exact location
width = (width / seg) - 3;
for(i=0; i<seg; i++) {
// Create segmented progressbars
$(".progressContainer").append(
'<div class="progress' + i + '"></div>');
// Add their size
$(".progress" + i).progressbar({
max: size, value: 0
}).css({
margin: '0 1px 0 0',
width: width,
height: height,
float:'left'
});
}
// Get initial value
var init = val;
if (init < size) {
// if smaller than size
// than only 1 bar gonna get filled
$(".progress0").progressbar({ value: init });
} else if (init > size) {
// else calgulate how many bars
// gonna be effected
var bars = Math.floor(init / size);
for(i=0; i<bars; i++) {
init = Math.abs(init - size);
$(".progress" + i).progressbar({ value: size });
}
// fill the value left to the last bar
$(".progress" + i).progressbar({ value: init });
}
// Now get the hell out of here!
}
function inc() {
// Define required values
var max = parseInt($("input#max").val(),10),
seg = parseInt($("input#seg").val(),10),
val = parseInt($("input#val").val(),10);
// Get size for each progressbar
var size = max / seg;
// Get initial value
var init = val;
var next = val + 1;
// If progress is at max then reset it
if (init >= max) {
init = 1;
next = 1;
for (i=0;i<seg;i++) {
$(".progress" + i).progressbar({ value: 0 });
}
}
if (init < size) {
// if smaller than size
// than only 1 bar gonna get filled
$(".progress0").progressbar({ value: init });
} else if (init > size) {
// else calgulate how many bars
// gonna be effected
var bars = Math.floor(init / size);
for(i=0; i<bars; i++) {
init = Math.abs(init - size);
$(".progress" + i).progressbar({ value: size });
}
// fill the value left to the last bar
// +1 here is just for making bar look fullfilled
$(".progress" + i).progressbar({ value: init + 1});
}
// Next value
$("input#val").val(next);
// Loop
tmr = setTimeout(inc, 1000);
// Now get the hell out of here!
}
// Start Function
function start() {
// Set's interval to timer and starts
tmr = setTimeout(inc, 1000);
// Now get the hell out of here!
}
// Stop Function
function stop() {
// Stops the timer
clearTimeout(tmr);
// Now get the hell out of here!
}
// Reset Function
function reset() {
var seg = parseInt($("input#seg").val(),10);
// For segmented bars
$("input#val").val(0);
// Get initial value
for(i=0; i<seg; i++) {
$(".progress" + i).progressbar({ value: 0 });
}
// Now get the hell out of here!
}
// Validate Function
function validate(element) {
var obj = $(element);
if(!/[0-9]$/.test(obj.val())) {
// Invalid
obj.css('box-shadow', '0px 0px 8px #FAC3C3');
if(!obj.next().hasClass('error'))
{ obj.after('<span class="error error-keyup-1">Please use numbers only</span>'); }
} else {
// Valid
obj.css('box-shadow', '0px 0px 8px lightgreen');
if(obj.next().hasClass('error'))
{ obj.next().remove(); }
}
// Now get the hell out of here!
}
// Document Ready
$(document).ready(function(){
// Validate Inputs
$("input[type=text]").each(function() {
$(this).keyup(function(){
validate(this);
$(this).focusout(function() {
$(this).css('box-shadow', '0px 0px 0px #ffffff');
});
});
});
// Action Buttons
$("input[type=button]").each(function() {
// alert($(this).val());
$(this).click(function(){
if ($(this).val() == "Create") { create(); }
if ($(this).val() == "Start") { start(); }
if ($(this).val() == "Stop") { stop(); }
if ($(this).val() == "Reset") { reset(); }
});
});
// Now get the hell out of here!
});
关于jquery - 分段进度条(jQuery UI),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13623987/
最近,我读了一本名为Understanding the linux kernel 的书。有一句话让我很困惑。谁能给我解释一下? As stated earlier, the Current Privi
Julia中是否有任何类型的分段/非连续范围的对象类?例如,我可以创建一个常规范围: a = UnitRange(1:5) 但是,如果我想将此与其他范围相结合: b = UnitRange([1:5,
我一直在研究标准输入的修复后计算器,在研究它之后,我最终得到了一个说法“段错误(核心转储)”,它没有说明它发生的位置或导致它的原因,并在寻找解释后我真的找不到任何可以帮助我解决这个问题的东西。所以我决
我对创建应用程序还很陌生,我刚开始使用 Swift 进行 iOS 开发。我真的希望有人能花点时间帮助我,因为我现在很困。所以我正在创建一个带有主从 TableView 的应用程序。我将使用 Alamo
ScrollView 或类似的东西中的 UIView、SegmentedController 和 UIContainerView? 在我的 Storyboard中,我有一个 VC,它在顶部包含一个 U
我需要构建一个具有任意数量的间隔和函数的分段函数,能够对输入的 numpy 数组进行操作。 我可以使用 for 循环和指示符数组来做到这一点,如下面的代码片段所示,但是有没有一种更 Pythonic
我正在尝试按照提交的方式输出我的输出,但它不起作用。比如说,如果我提交一个分为两段的帖子(通过按回车键将它们分开)它不会那样输出。它删除该段落并将帖子显示为一个段落。 显示结果: 我正在尝试按照提交的
我有一个 TableView Controller ,其中按字母顺序列出了美国所有州。单击某个状态会通过 Web 服务调用返回有关该状态的详细信息。这是我第一次尝试分段或分组 TableView ,我
我想创建一个链接节点列表。这个想法是用字母分隔一个单词,并通过每个不同的字母创建一个链接节点列表。我也尝试在最后一个位置添加最后一个节点。 我已经尝试了很多东西,理论上是可行的,但我找不到段错误的根源
这是我正在尝试创建的附加组件: import bpy import os import sys import subprocess import time from threading import
我觉得这应该是一个简单的属性,但我一直在搜索,但找不到答案。 我的表右侧有一个 TableView 索引。选择后,它会使所有内容变灰。我想模仿 iPod 应用程序,当索引本身被选中时,它是半透明的(可
我试图在 OpenCV 中使用 SLIC 分割图像。我正在尝试使用以下功能: void vl_slic_segment ( vl_uint32 * segmentation, flo
我知道在网络中,数据流在第4层被分成不同的段。每个段然后用端口号和IP地址封装。我发现了一些我想问的令人困惑的问题: 谁负责将数据流分成不同的段。是应用程序还是第 4 层? 我知道 UDP 不支持分段
我有一个使用界面生成器制作的分段 Controller ,它看起来像这样 有时我使用它将它设置为四个 [segmentedControl insertSegmentWithTitle:@"Dinner
所以我使用免费托管,我的服务器上几乎没有视频,一切正常,除了视频需要大约 10-20 秒来加载然后开始播放,所以我想使用流媒体。问题是我不知道该字段和托管不支持 node.js,但我认为是 php 7
ViewController 有三个按钮:“ friend ”“日历”“信息”。每个按钮将代表此 viewController 下半部分的不同信息。 我的问题是选择什么来表示这些信息 - 分段 Con
在我的应用程序中,弹出窗口中的 UITableView 会在新数据时重新加载。如果表格未分区,则使用此代码一切都可以完美运行: 通知,启动重新加载: - (void)recieveNotificati
在阅读muduo(C++网络库)的源码时提出了这个问题。 如果客户端发送一个大消息,它将被 TCP 分段,服务器端会发生什么? (服务器是否知道这条消息已经被分段了?) 网络库是否需要等待整个消息并且
我正在重构一个包含大量长头文件的代码库(为了便于使用和简化编译,头文件同时包含接口(interface)和实现)。 代码库避免了像野火一样的多态性,因此它使用宏解析内部存储类型,如下所示: #if d
我正在阅读有关 x86 保护模式工作的信息,因为我已经看到了平面内存模型和分段内存模型。 如果 linux 内核使用平面内存模型,那么它如何保护非特权应用程序对关键数据的访问? 最佳答案 Linux
我是一名优秀的程序员,十分优秀!