hi , today we go with slider,we try to explain the greneral three aspects mean 'css, js and HTML'
slider consist of two main parts which are the backbone and the slide part,
hi , today we go with slider,we try to explain the greneral three aspects mean 'css, js and HTML'
slider consist of two main parts which are the backbone and the slide part,
![](https://images.cnblogs.com/cnblogs_com/ammar/sliders.png)
tow parts can be separated in to tow images ,
here is the css code :
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
.Hslider
{
width:55px;
height:10px;
margin-left:0px;
margin-top:0px;
position:absolute;
background-image:url('images/HbackBone.png');
background-repeat:no-repeat;
background-position:left;
}
.Hslider span
{
position:absolute;
width:5px;
height:10px;
margin-top:0px;
margin-left:0px;
background-position:center;
background-repeat:no-repeat;
background-image:url('images/Hslide.png');
}
.Vslider
{
width:9px;
height:55px;
margin-left:0px;
margin-top:0px;
position:absolute;
background-image:url('images/VbackBone.png');
background-repeat:no-repeat;
background-position:center;
border:1px red solid;
}
.Vslider span
{
position:absolute;
width:10px;
height:5px;
margin-top:25px;
margin-left:0px;
background-position:center;
background-repeat:no-repeat;
background-image:url('images/Vslide.png');
}
.ttt
{
width:0px;
position:absolute;
margin:0px;
color:red;
font-size:x-small;
}
from js point we jsut consider the returned value , in other hand the poisiton of the slide part can be controled by the object left property if the slide bar is horizintally otherwise the we consider the top property for the object that is becuase the slide bar will be vertically layouted, the tooltiptext for the slide that is to show where it slided now.
here the code for slide object:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
function SlidetttHtmlCode(parentId)
{
var newLable = document.createElement('span');
newLable.className='ttt';
newLable.id=parentId+'Label';
var parent=document.getElementById(parentId);
parent.appendChild(newLable);
}
function STTT(ParentId)
{
var left;
var top;
var width;
var height;
SlidetttHtmlCode(ParentId);
var txtId=ParentId+"Label";
var txtObject=document.getElementById(txtId);
var pObject=document.getElementById(ParentId);
this.setText=function(val)
{
document.getElementById(txtId).innerHTML=val;
}
this.getText=function()
{
return (document.getElementById(txtId).innerHTML);
}
this.getWidth=function(){return width;}
this.setHeight=function(value)
{
pObject.style.height=value
txtObject.style.height=value;
height=value;
}
this.getHeight=function(){return height;}
this.setWidth=function(value)
{
if(pObject && txtObject)
{
pObject.style.width=value
txtObject.style.width=value;
width=value;
}
else
{
alert('object is not found ..');
}
}
this.getWidth=function(){return width;}
this.setMarginTop=function(value)
{
pObject.style.marginTop=value;
top=value;
}
this.getMarginTop=function(){return top};
this.setMarginLeft=function(value)
{
pObject.style.marginLeft=value;
left=value;
}
this.getMarginLeft=function(){return left};
}
function CreateSlidebarHTMLCode(pid)
{
var backBone=document.createElement('div');
backBone.id=pid+'Slider';
document.getElementById(pid).appendChild(backBone);
}
function Slider(pid,width,height,left,top)
{
var value;
var ttt=new STTT('body');
var Hslide=false;
var Vslide=false;
var IsMouseClicked=false;
function GetX(oEvent)
{
return oEvent.clientX;
}
function GetY(oEvent)
{
return oEvent.clientY;
}
CreateSlidebarHTMLCode(pid);
var backBoneObject= document.getElementById(pid+'Slider');
backBoneObject.innerHTML="<span id="+pid+"sliderPart></span>";
backBoneObject.style.marginLeft=left;
backBoneObject.style.marginTop=top;
var slidePartId=pid+'sliderPart';
var slidePartObj=document.getElementById(pid+'sliderPart');
// mouse down:
backBoneObject.onmousedown=function()
{
if(Hslide)
{
IsMouseClicked=true;
var ml=GetX(event)-left-15;
if(ml<=width && ml>=0)
{
slidePartObj.style.marginLeft=ml;
value=ml;
}
else if(ml>width)
{
slidePartObj.style.marginLeft=width;
value=width;
}
else if(ml<0)
{
slidePartObj.style.marginLeft=0;
value=0;
}
ttt.setText(value);
ttt.setMarginLeft(GetX(event));
ttt.setMarginTop(GetY(event)-30);
}
}
// mouse up:
backBoneObject.onmouseup=function()
{
IsMouseClicked=false;
}
// mouse move:
backBoneObject.onmousemove=function()
{
if(IsMouseClicked)
{
if(Hslide)
{
var ml=GetX(event)-left-15;
if(ml<=width && ml>=0)
{
slidePartObj.style.marginLeft=ml;
value=ml;
}
else if(ml>width)
{
slidePartObj.style.marginLeft=width;
value=width;
}
else if(ml<0)
{
slidePartObj.style.marginLeft=0;
value=0;
}
ttt.setText(value);
ttt.setMarginLeft(GetX(event));
ttt.setMarginTop(GetY(event)-30);
}
}
}
// mouse out:
backBoneObject.onmouseout=function()
{
ttt.setText('');
}
this.getValue=function(){return value;}
this.setValue=function(val){slidePartObj.style.marginLeft=val;}
this.setType=function(val)
{
if(val=='H')
{
Hslide=true;
Vslide=false;
document.getElementById(pid).style.width=width;
document.getElementById(pid).style.height=height;
backBoneObject.className='Hslider';
}
}
}
now we conside how to call these to headers(js & css) to create full functionall silde bar
include the headers in your html file by
<head>
<link rel="stylesheet" type="text/css" href="Slider.css"/>
<script language="javascript" type="text/javascript" src="Slider.js"></script>
</head>
now add the object where will slide be located
<div id="slide2"></div>
now go with js object for slider
var s2=new Slider('slide2',50,10,200,300);
s2.setType('H');
here is the slide object , In IE.
![](https://images.cnblogs.com/cnblogs_com/ammar/SLOD.png)