<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html,body{
font-size: 12px;
}
.first.ui-slider{
height: 15px;
background: white;
border: 1px solid pink;
position: relative;
left: 0px;
top: 0px;
width: 1000px;
text-align: center;
margin: 0px;
padding: 0px;
z-index: -1000;
}
.first.ui-slider b,em{
z-index: 100;
color: white;
}
.first.ui-slider div{
height: 15px;
background: pink;
position: relative;
left: 0px;
top: -16px;
z-index: -100;
}
.first.ui-slider span{
height: 15px;
width: 20px;
background: #008000;
z-index: 9999;
position: relative;
top: 15px;
}
.second.ui-slider{
background: white;
border: 1px solid pink;
z-index: -1000;
margin: 0;
padding: 0;
height: 15px;
}
.second.ui-slider div{
background: pink;
height: 15px;
z-index: 1;
}
.second.ui-slider span{
height: 15px;
width: 20px;
background: pink;
line-height: 20px;
z-index: 9999;
position: relative;
top: -18px;
color: white;
}
.third{
width: 200px;
height: 15px;
border: 1px solid pink;
}
.ui-progressbar{
background: pink;
height: 15px;
}
</style>
</head>
<body>
<div class="first" data-bind="type: 'slider',data: demo1"></div><br/>
<div class="second" data-bind="type: 'slider',data: demo2"></div><br/>
<div class="third" data-bind="type: 'progressbar',data: demo3"></div>
<script language="javascript">
~(function(){
//在閉包中獲取全域變數
var window=this||(0,eval)('this');
//獲取頁面字體大小，作為創建頁面UI尺寸參照物
var FONTSIZE=function(){
//獲取頁面body元素字體大小并轉化成整數
return parseInt(document.body.currentStyle?document.body.currentStyle['fontSize']:getComputedStyle(document.body,false)['fontSize']);
}();
//視圖模型物件
var VM=function(){
//組件創建策略物件
var Method={
/***
* 進度條組件創建方法
* dom 進度條容器
* data 進度條資料模型
* */
progressbar:function(dom,data){
//進度條進度完成容器
var progress=document.createElement('div'),
//資料模型資料，結構：{position:50}
param=data.data;
//設定進度容器尺寸
progress.style.width=(param.position||100)+'%';
//為進度條組件添加UI樣式
progress.className='ui-progressbar';
//進度完成容器元素插入進度條容器中
dom.appendChild(progress);
},
/***
* 滑動條組件創建方法
* dom 滑動條容器
* data 滑動條資料模型
* */
slider:function(dom,data){
//滑動條撥片
var bar=document.createElement('span'),
//滑動條進度容器
progress=document.createElement('div'),
//滑動條容量提示資訊
totleText=null,
//滑動條撥片提示資訊
progressText=null,
//資料模型資料，結構：{position:60,totle:200}
param=data.data,
//容器元素寬度
width=dom.clientWidth,
//容器元素橫坐標值
left=dom.offsetLeft,
//撥片位置（以模型資料中position資料計算）
realWidth=(param.position||100)*width/100;
//清慷訓動條容器，為創建滑動條做準備
dom.innerHTML='';
//如果模型資料中提供容器總量資訊(param.totle),則創建滾動條提示文案
if(param.totle){
//容器問題提示文案
text=document.createElement('b');
//撥片位置提示文案
progressText=document.createElement('em');
//設定容器總量提示文案
text.innerHTML=param.totle;
//將容器總量提示文案元素添加到滑動條組件中
dom.appendChild(text);
//將撥片位置提示文案元素添加到滑動條組件中
dom.appendChild(progressText);
}
//設定滑動條
setStyle(realWidth);
//為滑動條組件添加UI樣式
dom.className+=' ui-slider';
//將進度容器添加到滑動條組件中
dom.appendChild(progress);
//將撥片添加到滑動條組件中
dom.appendChild(bar);
//設定滑動條
function setStyle(w){
//設定進度容器寬度
progress.style.width=w+'px';
//設定撥片橫坐標
bar.style.left=w-FONTSIZE/2+'px';
bar.innerText='||';
if(progressText){
//設定撥片提示文案橫坐標
progressText.style.left=w-FONTSIZE/2 *2.4 +'px';
//設定撥片提示文案內容
progressText.innerHTML=parseFloat(w/width*100).toFixed(2)+'%';
}
}
//按下滑鼠撥片
bar.onmousedown=function(){
//移動撥片(滑鼠游標在頁面中滑動，事件系結給document是為優化互動體驗，使游標可以在頁面 中自由滑動)
document.onmousemove=function(event){
//獲取事件源
var e =event||window.event;
var w=e.clinetX-left;
setStyle(w<width?(w>0?w:0):width);
}
//阻止頁面滑動選取事件
document.onselectstart=function(){
return false;
};
};
document.onmouseup=function(){
document.onmousemove=null;
document.onselectstart=null;
}
}
}
/***
* 獲取視圖層組件渲染資料的映射資訊
* dom 組件元素
* */
function getBindData(dom){
//獲取組件自定義屬性data-bind值
var data=dom.getAttribute('data-bind');
//將自定義屬性data-bind值轉化為物件
return !!data && (new Function("return ({"+ data +"})"))();
}
//組件實體方法
return function(){
//獲取頁面中所有元素
var doms=document.body.getElementsByTagName('*'),
//元素自定義資料句柄
ctx=null;
//ui處理是會向頁面中插入元素，此時doms.length會改變，此時動態獲取dom.length
for(var i=0;i<doms.length;i++){
ctx=getBindData(doms[i]);
//如果元素是UI組件，則根據自定義屬性組件型別，渲染該組件
ctx.type &&Method[ctx.type]&&Method[ctx.type](doms[i],ctx);
}
}
}();
//將視圖模型物件系結在window上，供外部獲取
window.VM=VM;
})();
var demo1={position:60,totle:200},demo2={position:30},demo3={position:80};
window.onload=function(){
VM();
};
css樣式寫得丑
最后做出來的樣子
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/343154.html
標籤：其他