Jquery CSS-页面上的随机行
我正在使用一个用于进度条的库,这是一个简单的jQuery插件,允许我显示工作流中的步骤以及它们是否完成 我也在使用引导 本质上,使用这个插件会在页面上造成一条灰线,然而,当使用Chromes inspector时,我根本找不到是什么导致了灰线 更重要的是,十六进制调色板上的行是#cfcfcf,我已经搜索了这个十六进制代码的整个解决方案,但找不到任何与该颜色相关的内容 这是这条线的截图:(对不起,它被放大了,我想弄清楚这条线在哪里) 我的HTML:Jquery CSS-页面上的随机行,jquery,html,css,progress-bar,Jquery,Html,Css,Progress Bar,我正在使用一个用于进度条的库,这是一个简单的jQuery插件,允许我显示工作流中的步骤以及它们是否完成 我也在使用引导 本质上,使用这个插件会在页面上造成一条灰线,然而,当使用Chromes inspector时,我根本找不到是什么导致了灰线 更重要的是,十六进制调色板上的行是#cfcfcf,我已经搜索了这个十六进制代码的整个解决方案,但找不到任何与该颜色相关的内容 这是这条线的截图:(对不起,它被放大了,我想弄清楚这条线在哪里) 我的HTML: <div class="progress-
<div class="progress-bar-wrapper"></div>
JS:
//A wrapper to encapsulate all the code
(function (window) {
function initProgressBar() {
var ProgressBar = {};
ProgressBar.singleStepAnimation = 1000; //default value
// this delay is required as browser will need some time in rendering and then processing css animations.
var renderingWaitDelay = 200;
// A utility function to create an element
var createElement = function (type, className, style, text) {
var elem = document.createElement(type);
elem.className = className;
for (var prop in style) {
elem.style[prop] = style[prop];
}
elem.innerHTML = text;
return elem;
};
var createStatusBar = function(stages, stageWidth, currentStageIndex) {
var statusBar = createElement('div', 'status-bar', {width: 100 - stageWidth + '%'}, '');
var currentStatus = createElement('div', 'current-status', {}, '');
setTimeout(function() {
currentStatus.style.width = (100 * currentStageIndex)/(stages.length - 1)+'%';
currentStatus.style.transition = 'width '+(currentStageIndex * ProgressBar.singleStepAnimation)+'ms linear';
}, renderingWaitDelay);
statusBar.appendChild(currentStatus);
return statusBar;
};
var createCheckPoints = function(stages, stageWidth, currentStageIndex) {
var ul = createElement('ul', 'progress-bar', { }, '');
var animationDelay = renderingWaitDelay;
for (var index = 0; index < stages.length; index++) {
var li = createElement('li', 'section', {width: stageWidth + '%'}, stages[index]);
if(currentStageIndex >= index) {
setTimeout(function(li, currentStageIndex, index) {
li.className+= (currentStageIndex > index)?' visited': ' visited current';
}, animationDelay, li, currentStageIndex, index);
animationDelay+= ProgressBar.singleStepAnimation;
}
ul.appendChild(li);
}
return ul;
};
var createHTML = function (wrapper, stages, currentStage) {
var stageWidth = 100 / stages.length;
var currentStageIndex = stages.indexOf(currentStage);
//create status bar
var statusBar = createStatusBar(stages, stageWidth, currentStageIndex);
wrapper.appendChild(statusBar);
//create checkpoints
var checkpoints = createCheckPoints(stages, stageWidth, currentStageIndex);
wrapper.appendChild(checkpoints);
return wrapper;
};
var validateParameters = function(stages, currentStage, container) {
if(!(typeof stages === 'object' && stages.length && typeof stages[0] === 'string')) {
console.error('Expecting Array of strings for "stages" parameter.');
return false;
}
if(typeof currentStage !== 'string') {
console.error('Expecting string for "current stage" parameter.');
return false;
}
if(typeof container !== 'string' && typeof container !== 'undefined') {
console.error('Expecting string for "container" parameter.');
return false;
}
return true;
};
//exposing this function to user;
ProgressBar.init = function (stages, currentStage, container) {
if(validateParameters(stages, currentStage, container)) {
var wrapper = document.getElementsByClassName(container);
if(wrapper.length > 0) {
wrapper = wrapper[0];
} else {
wrapper = createElement('div', 'progressbar-wrapper', { }, '');
document.body.appendChild(wrapper);
}
createHTML(wrapper, stages, currentStage);
}
};
return ProgressBar;
}
if (typeof ProgressBar === 'undefined') {
window.ProgressBar = initProgressBar();
} else {
console.log('Progress bar loaded');
}
})(window);
我有一个演示,我没有使用引导,也没有下划线/边框等
我只是不知道该从哪里找到这条讨厌的线的来源。当我陷入类似的问题时,它是一些:后或:前样式,带有不同div块的边框 尝试改变各种元素的背景。这会有帮助
最终的方法是:逐个删除Chromes inspector中的子元素,直到线条消失。是“Received”下的灰色线条吗?是的-整个东西下的全宽线条。相当肯定的是,它与UL相反:
//A wrapper to encapsulate all the code
(function (window) {
function initProgressBar() {
var ProgressBar = {};
ProgressBar.singleStepAnimation = 1000; //default value
// this delay is required as browser will need some time in rendering and then processing css animations.
var renderingWaitDelay = 200;
// A utility function to create an element
var createElement = function (type, className, style, text) {
var elem = document.createElement(type);
elem.className = className;
for (var prop in style) {
elem.style[prop] = style[prop];
}
elem.innerHTML = text;
return elem;
};
var createStatusBar = function(stages, stageWidth, currentStageIndex) {
var statusBar = createElement('div', 'status-bar', {width: 100 - stageWidth + '%'}, '');
var currentStatus = createElement('div', 'current-status', {}, '');
setTimeout(function() {
currentStatus.style.width = (100 * currentStageIndex)/(stages.length - 1)+'%';
currentStatus.style.transition = 'width '+(currentStageIndex * ProgressBar.singleStepAnimation)+'ms linear';
}, renderingWaitDelay);
statusBar.appendChild(currentStatus);
return statusBar;
};
var createCheckPoints = function(stages, stageWidth, currentStageIndex) {
var ul = createElement('ul', 'progress-bar', { }, '');
var animationDelay = renderingWaitDelay;
for (var index = 0; index < stages.length; index++) {
var li = createElement('li', 'section', {width: stageWidth + '%'}, stages[index]);
if(currentStageIndex >= index) {
setTimeout(function(li, currentStageIndex, index) {
li.className+= (currentStageIndex > index)?' visited': ' visited current';
}, animationDelay, li, currentStageIndex, index);
animationDelay+= ProgressBar.singleStepAnimation;
}
ul.appendChild(li);
}
return ul;
};
var createHTML = function (wrapper, stages, currentStage) {
var stageWidth = 100 / stages.length;
var currentStageIndex = stages.indexOf(currentStage);
//create status bar
var statusBar = createStatusBar(stages, stageWidth, currentStageIndex);
wrapper.appendChild(statusBar);
//create checkpoints
var checkpoints = createCheckPoints(stages, stageWidth, currentStageIndex);
wrapper.appendChild(checkpoints);
return wrapper;
};
var validateParameters = function(stages, currentStage, container) {
if(!(typeof stages === 'object' && stages.length && typeof stages[0] === 'string')) {
console.error('Expecting Array of strings for "stages" parameter.');
return false;
}
if(typeof currentStage !== 'string') {
console.error('Expecting string for "current stage" parameter.');
return false;
}
if(typeof container !== 'string' && typeof container !== 'undefined') {
console.error('Expecting string for "container" parameter.');
return false;
}
return true;
};
//exposing this function to user;
ProgressBar.init = function (stages, currentStage, container) {
if(validateParameters(stages, currentStage, container)) {
var wrapper = document.getElementsByClassName(container);
if(wrapper.length > 0) {
wrapper = wrapper[0];
} else {
wrapper = createElement('div', 'progressbar-wrapper', { }, '');
document.body.appendChild(wrapper);
}
createHTML(wrapper, stages, currentStage);
}
};
return ProgressBar;
}
if (typeof ProgressBar === 'undefined') {
window.ProgressBar = initProgressBar();
} else {
console.log('Progress bar loaded');
}
})(window);
ProgressBar.singleStepAnimation = 600;
ProgressBar.init(
['Step 1',
'Step 2',
'Step 3',
'Step 4',
'Step 5'
],
'@progressBar',
'progress-bar-wrapper'
);