html5可滑动的⽂本框,html5inputtype=range实现拖拉滑条功
能
本⽂是最新的html5技术 实现拖拉条功能。实现如下图所⽰效果
主要功能实现是在拖拉滑动条后，在后台处理textbox中相应的值。但是有的浏览器在拖动滑动条是，textbox⾥⾯的值⼀直变化，会频繁触发textchanged事件(注意jquery 在客户端给textbox赋值是并不会引起回发，即不会触发textchanged事件，需使⽤jquery 条⽤change()事件，以引起回发。)
html内容文本框下⾯贴出代码。
$(document).ready(function () {
sliderRange();
addEndRequestHandle();
});
function sliderRange() {
var trackBar = ElementsByClassName("rangeColor");
for (i = 0 ; i < trackBar.length; ++i) {
var traB = trackBar[i];
$(traB).mouseup(function () {
var tbid = this.id.split('_')[0];
$("#" + tbid).change();
});        //该函数功能是为了textbox内容改变的情况下，且mouseUP时，引起回发 触发textbox的textchanged事件。
traB.addEventListener("change", function () {
var tbid = this.id.split('_')[0];
$("#" + tbid).val(this.value);
}, false);//该函数功能是在拖拉滑动条时，在textbox动态更新滑动条的值。
}
}
function addEndRequestHandle() {
Sys.Instance().add_endRequest(sliderRange); //此处是为了ajax异步刷新，js失效做的处理，使其每次异步回发亦调⽤sliderRange函数。
}
.colorTextBox {
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。