html故乡:拖动滑块效果
首页地址:
http://www.dhtmlgoodies.com
进度条页面:
http://www.dhtmlgoodies.com/scripts/form_widget_amount_slider/form_widget_amount_slider.html
导入页面的元素:
在head中导入
<script src="scripts/dhtml/dhtmlgoodies_slider.js" language="javascript"></script>
拖动滑块的javascript
<link href="styles/dhtml/dhtmlgoodies_slider.css" rel="stylesheet" type="text/css" />
拖动滑块的css
<td valign="top">侦测等级</td>
<td id="slider_target6"></td>
<td valign="top">
<input type="text" name="detectGrade" size="2" value="<%=detectGrade%>" id="detectGrade" readonly />
</td>
第一个TD里面是名称
第二个TD里面会生成拖动的滑块效果
第三个TD显示滑块的值
页面下面调用js初始化以上三个TD
<script language="javascript">
<!--
form_widget_amount_slider('slider_target6',document.getElementById('detectGrade'),160,1,6);
//第一个参数 形成滑块效果的TD
//第二个参数 第二个值的对象
//第三个参数 滑块的总长
//第四个参数 滑块的开始值
//第五个参数 滑块的结束值
//本来还可以给滑块添加事件,我省略了
//-->
</script>
dhtmlgoodies_slider.css文件内容如下:
.form_widget_amount_slider {
border-top: 1px solid #9d9c99;
border-left: 1px solid #9d9c99;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
background-color: #f0ede0;
height: 3px;
position: absolute;
bottom: 0px;
}
dhtmlgoodies_slider.js文件内容如下:
var form_widget_amount_slider_handle = 'images/dhtml/slider_handle.gif';
var slider_handle_image_obj = false;
var sliderObjectArray = new Array();
var slider_counter = 0;
var slideInProgress = false;
var handle_start_x;
var event_start_x;
var currentSliderIndex;
var sliderHandleWidth = 9;
function form_widget_cancel_event()
{
return false;
}
function getImageSliderHeight(){
if(!slider_handle_image_obj){
slider_handle_image_obj = new Image();
slider_handle_image_obj.src = form_widget_amount_slider_handle;
}
if(slider_handle_image_obj.width>0){
return;
}else{
setTimeout('getImageSliderHeight()',50);
}
}
function positionSliderImage(e,theIndex)
{
if(!theIndex)theIndex = this.getAttribute('sliderIndex');
var theValue = sliderObjectArray[theIndex]['formTarget'].value;
if(!theValue.match(/^[0-9]*$/g))theValue=sliderObjectArray[theIndex]['min'] +'';
if(theValue/1>sliderObjectArray[theIndex]['max'])theValue = sliderObjectArray[theIndex]['max'];
if(theValue/1<sliderObjectArray[theIndex]['min'])theValue = sliderObjectArray[theIndex]['min'];
sliderObjectArray[theIndex]['formTarget'].value = theValue;
var handleImg = document.getElementById('slider_handle' + theIndex);
var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
var currentValue = sliderObjectArray[theIndex]['formTarget'].value-sliderObjectArray[theIndex]['min'];
handleImg.style.left = Math.round(currentValue * ratio) + 'px';
}
function adjustFormValue(theIndex)
{
var handleImg = document.getElementById('slider_handle' + theIndex);
var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
var currentPos = handleImg.style.left.replace('px','');
sliderObjectArray[theIndex]['formTarget'].value = Math.round(currentPos / ratio) + sliderObjectArray[theIndex]['min'];
}
function initMoveSlider(e)
{
if(document.all)e = event;
slideInProgress = true;
event_start_x = e.clientX;
handle_start_x = this.style.left.replace('px','');
currentSliderIndex = this.id.replace(/[^\d]/g,'');
return false;
}
function startMoveSlider(e)
{
if(document.all)e = event;
if(!slideInProgress)return;
var leftPos = handle_start_x/1 + e.clientX/1 - event_start_x;
if(leftPos<0)leftPos = 0;
if(leftPos/1>sliderObjectArray[currentSliderIndex]['width'])leftPos = sliderObjectArray[currentSliderIndex]['width'];
document.getElementById('slider_handle' + currentSliderIndex).style.left = leftPos + 'px';
adjustFormValue(currentSliderIndex);
if(sliderObjectArray[currentSliderIndex]['onchangeAction']){
eval(sliderObjectArray[currentSliderIndex]['onchangeAction']);
}
}
function stopMoveSlider()
{
slideInProgress = false;
}
function form_widget_amount_slider(targetElId,formTarget,width,min,max,onchangeAction)
{
if(!slider_handle_image_obj){
getImageSliderHeight();
}
slider_counter = slider_counter +1;
sliderObjectArray[slider_counter] = new Array();
sliderObjectArray[slider_counter] = {"width":width - sliderHandleWidth,"min":min,"max":max,"formTarget":formTarget,"onchangeAction":onchangeAction};
formTarget.setAttribute('sliderIndex',slider_counter);
formTarget.onchange = positionSliderImage;
var parentObj = document.createElement('DIV');
parentObj.style.height = '12px'; // The height of the image
parentObj.style.position = 'relative';
parentObj.id = 'slider_container' + slider_counter;
document.getElementById(targetElId).appendChild(parentObj);
var obj = document.createElement('DIV');
obj.className = 'form_widget_amount_slider';
obj.innerHTML = '<span></span>';
obj.style.width = width + 'px';
obj.id = 'slider_slider' + slider_counter;
obj.style.position = 'absolute';
obj.style.bottom = '0px';
parentObj.appendChild(obj);
var handleImg = document.createElement('IMG');
handleImg.style.position = 'absolute';
handleImg.style.left = '0px';
handleImg.style.zIndex = 5;
handleImg.src = slider_handle_image_obj.src;
handleImg.id = 'slider_handle' + slider_counter;
handleImg.onmousedown = initMoveSlider;
parentObj.style.width = obj.offsetWidth + 'px';
if(document.body.onmouseup){
if(document.body.onmouseup.toString().indexOf('stopMoveSlider')==-1){
alert('You allready have an onmouseup event assigned to the body tag');
}
}else{
document.body.onmouseup = stopMoveSlider;
document.body.onmousemove = startMoveSlider;
}
handleImg.ondragstart = form_widget_cancel_event;
parentObj.appendChild(handleImg);
positionSliderImage(false,slider_counter);
}
首页地址:
http://www.dhtmlgoodies.com
进度条页面:
http://www.dhtmlgoodies.com/scripts/form_widget_amount_slider/form_widget_amount_slider.html
导入页面的元素:
在head中导入
<script src="scripts/dhtml/dhtmlgoodies_slider.js" language="javascript"></script>
拖动滑块的javascript
<link href="styles/dhtml/dhtmlgoodies_slider.css" rel="stylesheet" type="text/css" />
拖动滑块的css
<td valign="top">侦测等级</td>
<td id="slider_target6"></td>
<td valign="top">
<input type="text" name="detectGrade" size="2" value="<%=detectGrade%>" id="detectGrade" readonly />
</td>
第一个TD里面是名称
第二个TD里面会生成拖动的滑块效果
第三个TD显示滑块的值
页面下面调用js初始化以上三个TD
<script language="javascript">
<!--
form_widget_amount_slider('slider_target6',document.getElementById('detectGrade'),160,1,6);
//第一个参数 形成滑块效果的TD
//第二个参数 第二个值的对象
//第三个参数 滑块的总长
//第四个参数 滑块的开始值
//第五个参数 滑块的结束值
//本来还可以给滑块添加事件,我省略了
//-->
</script>
dhtmlgoodies_slider.css文件内容如下:
.form_widget_amount_slider {
border-top: 1px solid #9d9c99;
border-left: 1px solid #9d9c99;
border-bottom: 1px solid #eee;
border-right: 1px solid #eee;
background-color: #f0ede0;
height: 3px;
position: absolute;
bottom: 0px;
}
dhtmlgoodies_slider.js文件内容如下:
var form_widget_amount_slider_handle = 'images/dhtml/slider_handle.gif';
var slider_handle_image_obj = false;
var sliderObjectArray = new Array();
var slider_counter = 0;
var slideInProgress = false;
var handle_start_x;
var event_start_x;
var currentSliderIndex;
var sliderHandleWidth = 9;
function form_widget_cancel_event()
{
return false;
}
function getImageSliderHeight(){
if(!slider_handle_image_obj){
slider_handle_image_obj = new Image();
slider_handle_image_obj.src = form_widget_amount_slider_handle;
}
if(slider_handle_image_obj.width>0){
return;
}else{
setTimeout('getImageSliderHeight()',50);
}
}
function positionSliderImage(e,theIndex)
{
if(!theIndex)theIndex = this.getAttribute('sliderIndex');
var theValue = sliderObjectArray[theIndex]['formTarget'].value;
if(!theValue.match(/^[0-9]*$/g))theValue=sliderObjectArray[theIndex]['min'] +'';
if(theValue/1>sliderObjectArray[theIndex]['max'])theValue = sliderObjectArray[theIndex]['max'];
if(theValue/1<sliderObjectArray[theIndex]['min'])theValue = sliderObjectArray[theIndex]['min'];
sliderObjectArray[theIndex]['formTarget'].value = theValue;
var handleImg = document.getElementById('slider_handle' + theIndex);
var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
var currentValue = sliderObjectArray[theIndex]['formTarget'].value-sliderObjectArray[theIndex]['min'];
handleImg.style.left = Math.round(currentValue * ratio) + 'px';
}
function adjustFormValue(theIndex)
{
var handleImg = document.getElementById('slider_handle' + theIndex);
var ratio = sliderObjectArray[theIndex]['width'] / (sliderObjectArray[theIndex]['max']-sliderObjectArray[theIndex]['min']);
var currentPos = handleImg.style.left.replace('px','');
sliderObjectArray[theIndex]['formTarget'].value = Math.round(currentPos / ratio) + sliderObjectArray[theIndex]['min'];
}
function initMoveSlider(e)
{
if(document.all)e = event;
slideInProgress = true;
event_start_x = e.clientX;
handle_start_x = this.style.left.replace('px','');
currentSliderIndex = this.id.replace(/[^\d]/g,'');
return false;
}
function startMoveSlider(e)
{
if(document.all)e = event;
if(!slideInProgress)return;
var leftPos = handle_start_x/1 + e.clientX/1 - event_start_x;
if(leftPos<0)leftPos = 0;
if(leftPos/1>sliderObjectArray[currentSliderIndex]['width'])leftPos = sliderObjectArray[currentSliderIndex]['width'];
document.getElementById('slider_handle' + currentSliderIndex).style.left = leftPos + 'px';
adjustFormValue(currentSliderIndex);
if(sliderObjectArray[currentSliderIndex]['onchangeAction']){
eval(sliderObjectArray[currentSliderIndex]['onchangeAction']);
}
}
function stopMoveSlider()
{
slideInProgress = false;
}
function form_widget_amount_slider(targetElId,formTarget,width,min,max,onchangeAction)
{
if(!slider_handle_image_obj){
getImageSliderHeight();
}
slider_counter = slider_counter +1;
sliderObjectArray[slider_counter] = new Array();
sliderObjectArray[slider_counter] = {"width":width - sliderHandleWidth,"min":min,"max":max,"formTarget":formTarget,"onchangeAction":onchangeAction};
formTarget.setAttribute('sliderIndex',slider_counter);
formTarget.onchange = positionSliderImage;
var parentObj = document.createElement('DIV');
parentObj.style.height = '12px'; // The height of the image
parentObj.style.position = 'relative';
parentObj.id = 'slider_container' + slider_counter;
document.getElementById(targetElId).appendChild(parentObj);
var obj = document.createElement('DIV');
obj.className = 'form_widget_amount_slider';
obj.innerHTML = '<span></span>';
obj.style.width = width + 'px';
obj.id = 'slider_slider' + slider_counter;
obj.style.position = 'absolute';
obj.style.bottom = '0px';
parentObj.appendChild(obj);
var handleImg = document.createElement('IMG');
handleImg.style.position = 'absolute';
handleImg.style.left = '0px';
handleImg.style.zIndex = 5;
handleImg.src = slider_handle_image_obj.src;
handleImg.id = 'slider_handle' + slider_counter;
handleImg.onmousedown = initMoveSlider;
parentObj.style.width = obj.offsetWidth + 'px';
if(document.body.onmouseup){
if(document.body.onmouseup.toString().indexOf('stopMoveSlider')==-1){
alert('You allready have an onmouseup event assigned to the body tag');
}
}else{
document.body.onmouseup = stopMoveSlider;
document.body.onmousemove = startMoveSlider;
}
handleImg.ondragstart = form_widget_cancel_event;
parentObj.appendChild(handleImg);
positionSliderImage(false,slider_counter);
}