html5 input type="range"实现拖拉滑条功能
2015-04-28 15:30
531 查看
本文是最新的html5技术 实现拖拉条功能。实现如下图所示效果
主要功能实现是在拖拉滑动条后，在后台处理textbox中相应的值。但是有的浏览器在拖动滑动条是，textbox里面的值一直变化，会频繁触发textchanged事件（注意jquery 在客户端给textbox赋值是并不会引起回发，即不会触发textchanged事件，需使用jquery 条用change()事件，以引起回发。）
下面贴出代码。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<script src="js/jquery-1.11.0.min.js"></script>
<link href="css/StyleSheet.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
sliderRange();
addEndRequestHandle();
});
function sliderRange() {
var trackBar = document.getElementsByClassName("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.WebForms.PageRequestManager.getInstance().add_endRequest(sliderRange); //此处是为了ajax异步刷新，js失效做的处理，使其每次异步回发亦调用sliderRange函数。
}
</script>
<style type="text/css">
.colorTextBox {
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<div>
<asp:TextBox ID="TextBox1" CssClass="colorTextBox" runat="server" OnTextChanged="TextBox_TextChanged" AutoPostBack="True"></asp:TextBox>
<input runat="server" type="range" name="colorRange1" class="rangeColor" id="TextBox1_trackBar1" min="0" max="255" step="1" value="1" />
<br />
</div>
<div>
<asp:TextBox ID="TextBox2" CssClass="colorTextBox" runat="server" ClientIDMode="Static" OnTextChanged="TextBox_TextChanged" AutoPostBack="True"></asp:TextBox>
<input runat="server" type="range" name="colorRange2" class="rangeColor" id="TextBox2_trackBar2" min="0" max="255" step="1" value="1" />
<br />
</div>
<div>
<asp:TextBox ID="TextBox3" CssClass="colorTextBox" runat="server" ClientIDMode="Static" OnTextChanged="TextBox_TextChanged" AutoPostBack="True"></asp:TextBox>
<input runat="server" type="range" name="colorRange3" class="rangeColor" id="TextBox3_trackBar3" min="0" max="255" step="1" value="1" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
主要功能实现是在拖拉滑动条后，在后台处理textbox中相应的值。但是有的浏览器在拖动滑动条是，textbox里面的值一直变化，会频繁触发textchanged事件（注意jquery 在客户端给textbox赋值是并不会引起回发，即不会触发textchanged事件，需使用jquery 条用change()事件，以引起回发。）
下面贴出代码。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<script src="js/jquery-1.11.0.min.js"></script>
<link href="css/StyleSheet.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
sliderRange();
addEndRequestHandle();
});
function sliderRange() {
var trackBar = document.getElementsByClassName("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.WebForms.PageRequestManager.getInstance().add_endRequest(sliderRange); //此处是为了ajax异步刷新，js失效做的处理，使其每次异步回发亦调用sliderRange函数。
}
</script>
<style type="text/css">
.colorTextBox {
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<div>
<asp:TextBox ID="TextBox1" CssClass="colorTextBox" runat="server" OnTextChanged="TextBox_TextChanged" AutoPostBack="True"></asp:TextBox>
<input runat="server" type="range" name="colorRange1" class="rangeColor" id="TextBox1_trackBar1" min="0" max="255" step="1" value="1" />
<br />
</div>
<div>
<asp:TextBox ID="TextBox2" CssClass="colorTextBox" runat="server" ClientIDMode="Static" OnTextChanged="TextBox_TextChanged" AutoPostBack="True"></asp:TextBox>
<input runat="server" type="range" name="colorRange2" class="rangeColor" id="TextBox2_trackBar2" min="0" max="255" step="1" value="1" />
<br />
</div>
<div>
<asp:TextBox ID="TextBox3" CssClass="colorTextBox" runat="server" ClientIDMode="Static" OnTextChanged="TextBox_TextChanged" AutoPostBack="True"></asp:TextBox>
<input runat="server" type="range" name="colorRange3" class="rangeColor" id="TextBox3_trackBar3" min="0" max="255" step="1" value="1" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html5实现滑块功能之------type="range"属性
- 使用<input type="file">实现文件上传
- 移除HTML5 input在type="number"时的上下小箭头
- 简单代码autocomplete="off"实现禁用input输入框的自动提示功能
- asp.net/c# 用<input type="file" />实现文件上传,multipart/form-data
- 关于Html5中<input type="number" name="points" min="1" max="10" />只能输入整数的问题
- html5中的input(type="file")的multiple属性，实现多文件上传，并用js控制文件大小，数量
- 关于JSP中单击任意标签弹出文件选择框(<input type="file"/>)的实现方法
- Android：让WebView支持<input type="file"…>元素，实现文件上传
- js在repeater控件内每一行<input type="checkbox"/>实现全选，全不选，然后获取每一行的ID删除
- input[type="range"]是html5中的input标签新属性，样子如下：
- html5自带滑动条(input type=range)实现实时显示滑动值
- 移除HTML5 input在type="number"时的上下小箭头
- HTML5中input[type='date']自定义样式&日历校验功能
- <input type="text" value="">实现输入提示
- 移除HTML5 input在type="number"时的上下小箭头
- input type = "range"滑块和output的使用
- 屏蔽 文件上传框 input type='file' 的输入功能
- HTML5 <input type="number" max="11" />
- ... 作为 input type="button/submit/reset"的一个代替者,功能更强大, 标签的语义也更明确 是实际开发中推荐使用的一个html标签.