Решил создать полосу загрузки такую как в HTML5 <progress>
При создании я использовал две свои маленькие функции
dsjs.objStyles=function(styles){
for(var i=1; i<arguments.length; i++)
for(var key in styles)
arguments[i].style[key]=styles[key];
}
dsjs.workCSS3=function(obj,sty,value){
var masp=['Webkit','Moz','O','Khtml','Ms'];
if(typeof obj.style[sty]=='string'&&1)obj.style[sty]=value;
else
for(var i=0;i<masp.length; i++)
if(typeof obj.style[masp[i]+sty.charAt(0).toUpperCase()+sty.substring(1,sty.length)]=='string')
obj.style[masp[i]+sty.charAt(0).toUpperCase()+sty.substring(1,sty.length)]=value;
}
Сам код:
dsjs.createProgress=function(setting){
var config={},px='px',options={};
//Значение по умолчанию
if(typeof setting!='object')setting={};
if(!setting.height)setting.height=23;
if(!setting.width)setting.width=104;
if(!setting.max)setting.max=100;
if(!setting.value)setting.value=0;
//Создание Елементов
var progress=document.createElement('div');
var progressBorder=document.createElement('div');
var progressBorderTop=document.createElement('div');
var progressBorderBottom=document.createElement('div');
var progressTop=document.createElement('div');
var progressBottom=document.createElement('div');
//Соединение елементов
progress.appendChild(progressBorder);
progressBorder.appendChild(progressBorderTop);
progressBorder.appendChild(progressBorderBottom);
progressBorderTop.appendChild(progressTop);
progressBorderBottom.appendChild(progressBottom);
//Параметры по умолчанию
dsjs.objStyles({padding:'1px',backgroundColor:'rgb(168, 162, 156)',fontSize:'0px'},progress);
dsjs.objStyles({border:'1px solid black',borderColor:'rgb(248, 247, 246) rgb(207, 200, 193) rgb(207, 199, 192) rgb(207, 200, 193)'},progressBorder);
dsjs.objStyles({backgroundColor:'rgb(221, 217, 213)'},progressBorderTop);
dsjs.objStyles({backgroundColor:'rgb(203, 195, 189)'},progressBorderBottom);
dsjs.objStyles({backgroundColor:'rgb(175, 156, 151)'},progressTop);
dsjs.objStyles({backgroundColor:'rgb(139, 123, 119)'},progressBottom);
dsjs.workCSS3(progress,'borderRadius','3px');
dsjs.workCSS3(progressBorder,'borderRadius','2px');
dsjs.workCSS3(progressTop,'borderRadius','1px 1px 0px 0px');
dsjs.workCSS3(progressBorderTop,'borderRadius','1px 1px 0px 0px');
dsjs.workCSS3(progressBottom,'borderRadius','0px 0px 1px 1px');
dsjs.workCSS3(progressBorderBottom,'borderRadius','0px 0px 1px 1px');
//Функции
config.height=function(valueHeight){
setting.height=valueHeight;
progress.style.height=valueHeight-2+px;
progressBorder.style.height=valueHeight-4+px;
dsjs.objStyles({height:Math.ceil((valueHeight-4)/2)+px},progressBorderTop,progressTop);
dsjs.objStyles({height:Math.floor((valueHeight-4)/2)+px},progressBorderBottom,progressBottom);
return config;
}
config.width=function(valueWidth){
setting.width=valueWidth;
progress.style.width=valueWidth-2+px;
dsjs.objStyles({width:valueWidth-4+px},progressBorder,progressBorderTop,progressBorderBottom);
config.value(setting.value);
return config;
}
config.value=function(valueProgress){
setting.value=valueProgress;
progressTop.style.width=progressBottom.style.width=Math.round(((setting.width-4)/setting.max)*valueProgress)+px;
return config;
}
config.max=function(valueMax){
setting.max=valueMax;
config.value(setting.value);
return config;
}
config.dom=progress;
config.height(setting.height).width(setting.width);
return config;
}
Пример создания
var p1=dsjs.createProgress(false).width(204).height(23).value(50).max(100);
document.body.appendChild(p1.dom);
Весь код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progress</title>
<script type="text/javascript">
var dsjs={}
dsjs.objStyles=function(styles){
for(var i=1; i<arguments.length; i++)
for(var key in styles)
arguments[i].style[key]=styles[key];
}
dsjs.workCSS3=function(obj,sty,value){
var masp=['Webkit','Moz','O','Khtml','Ms'];
if(typeof obj.style[sty]=='string'&&1)obj.style[sty]=value;
else
for(var i=0;i<masp.length; i++)
if(typeof obj.style[masp[i]+sty.charAt(0).toUpperCase()+sty.substring(1,sty.length)]=='string')
obj.style[masp[i]+sty.charAt(0).toUpperCase()+sty.substring(1,sty.length)]=value;
}
</script>
<script type="text/javascript">
dsjs.createProgress=function(setting){
var config={},px='px',options={};
//Значение по умолчанию
if(typeof setting!='object')setting={};
if(!setting.height)setting.height=23;
if(!setting.width)setting.width=104;
if(!setting.max)setting.max=100;
if(!setting.value)setting.value=0;
//Создание элементов
var progress=document.createElement('div');
var progressBorder=document.createElement('div');
var progressBorderTop=document.createElement('div');
var progressBorderBottom=document.createElement('div');
var progressTop=document.createElement('div');
var progressBottom=document.createElement('div');
//Соединение елементов
progress.appendChild(progressBorder);
progressBorder.appendChild(progressBorderTop);
progressBorder.appendChild(progressBorderBottom);
progressBorderTop.appendChild(progressTop);
progressBorderBottom.appendChild(progressBottom);
//Параметры по умолчанию
dsjs.objStyles({padding:'1px',backgroundColor:'rgb(168, 162, 156)',fontSize:'0px'},progress);
dsjs.objStyles({border:'1px solid black',borderColor:'rgb(248, 247, 246) rgb(207, 200, 193) rgb(207, 199, 192) rgb(207, 200, 193)'},progressBorder);
dsjs.objStyles({backgroundColor:'rgb(221, 217, 213)'},progressBorderTop);
dsjs.objStyles({backgroundColor:'rgb(203, 195, 189)'},progressBorderBottom);
dsjs.objStyles({backgroundColor:'rgb(175, 156, 151)'},progressTop);
dsjs.objStyles({backgroundColor:'rgb(139, 123, 119)'},progressBottom);
dsjs.workCSS3(progress,'borderRadius','3px');
dsjs.workCSS3(progressBorder,'borderRadius','2px');
dsjs.workCSS3(progressTop,'borderRadius','1px 1px 0px 0px');
dsjs.workCSS3(progressBorderTop,'borderRadius','1px 1px 0px 0px');
dsjs.workCSS3(progressBottom,'borderRadius','0px 0px 1px 1px');
dsjs.workCSS3(progressBorderBottom,'borderRadius','0px 0px 1px 1px');
//Функции
config.height=function(valueHeight){
setting.height=valueHeight;
progress.style.height=valueHeight-2+px;
progressBorder.style.height=valueHeight-4+px;
dsjs.objStyles({height:Math.ceil((valueHeight-4)/2)+px},progressBorderTop,progressTop);
dsjs.objStyles({height:Math.floor((valueHeight-4)/2)+px},progressBorderBottom,progressBottom);
return config;
}
config.width=function(valueWidth){
setting.width=valueWidth;
progress.style.width=valueWidth-2+px;
dsjs.objStyles({width:valueWidth-4+px},progressBorder,progressBorderTop,progressBorderBottom);
config.value(setting.value);
return config;
}
config.value=function(valueProgress){
setting.value=valueProgress;
progressTop.style.width=progressBottom.style.width=Math.round(((setting.width-4)/setting.max)*valueProgress)+px;
return config;
}
config.max=function(valueMax){
setting.max=valueMax;
config.value(setting.value);
return config;
}
config.dom=progress;
config.height(setting.height).width(setting.width);
return config;
}
p1=dsjs.createProgress(false).width(204).height(23).value(50).max(100);
onload=function(){document.body.appendChild(p1.dom);}
document.onmousemove=function(event){
if(!event)event=window.event;
p1.value(event.clientY);
}
</script>
</head>
<body>
</body>
</html>
