我是JavaScript和jQuery的新手,虽然我经常使用jQuery UI组件,但我之前几乎没有做过任何修改。在本例中,我需要调整jQuery Slider来调整日期,我创建了如下内容:http://jsfiddle.net/ryn_90/Tq7xK/6/。
我很高兴到目前为止,现在我得到了滑块工作,因为我想它,我希望能够绑定一个c# HiddenValue从JavaScript属性或从HTML,所以我可以保存我的日期。除非有更好的方法将这个值传递到后端…
到目前为止,我已经能够从c#变量绑定一个JavaScript值,但还没有发现如何做它的另一种方式。
这是我的javascript代码: <script>
$(function () {
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
jQuery(function() {
var dlg = jQuery("#sliderPopup").dialog({
draggable: true,
resizable: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
},
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
dlg.parent().appendTo(jQuery("form"));
});
$("#popupOpener").click(function () {
$("#dialog").dialog("open");
});
$("#sliderPopupOpener").click(function () {
$("#sliderPopup").dialog("open");
});
});
$(function () {
$("#slider").slider({
max: 30,
min: -30,
value: 0,
slide: function (event, ui) {
$("#days").val(ui.value);
$("#date").text(addDaysToDate(parseInt($("#days").val())));
},
create: function (event, ui) {
$("#date").text(addDaysToDate(parseInt($("#days").val())));
}
});
});
$("#days").val($("#slider").slider("value"));
$("#days").change(function (event) {
var data = $("#days").val();
if (data.length > -30) {
if (parseInt(data) >= 0 && parseInt(data) <= 30) {
$("#slider").slider("option", "value", data);
}
else {
if (parseInt(data) < -30) {
$("#days").val("-30");
$("#slider").slider("option", "value", "-30");
}
if (parseInt(data) > 30) {
$("#days").val("30");
$("#slider").slider("option", "value", "30");
}
}
}
else {
$("#slider").slider("option", "value", "0");
}
$("#date").text(addDaysToDate(parseInt($("#days").val())));
});
function addDaysToDate(days) {
var mths = new Array("Jan", "Feb", "Mar",
"Apr", "May", "Jun", "Jul", "Aug", "Sep",
"Oct", "Nov", "Dec");
var d = new Date(<%=deadlineYear%>, <%=deadlineMonth%>, <%=deadlineDay%>);
d.setHours(d.getHours() + (24 * days));
var currD = d.getDate();
var currM = d.getMonth();
var currY = d.getFullYear();
return mths[currM] + " " + currD + ", " + currY;
}
jQuery(function() {
var dlg = jQuery("#sliderPopup").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
dlg.parent().appendTo(jQuery("form"));
});
</script>
这是asp。NET代码:
<div id="sliderPopup" title="Modify Deadline">
<div id="slider"></div>
<input type="text" id="days" value="0"/>
<div id="date"></div>
<asp:HiddenField ID="ModifiedDeadlineDateFromSlider" />
<asp:Button ID="DeadlineDateSave" Text="Save Deadline" runat="server" OnClick="saveDeadline" />
</div>
如果你需要更多的信息,请告诉我。
您可以通过添加一行代码将日期值设置为隐藏字段。在滑动事件和的创建事件中添加以下代码。滑块函数
$("#ModifiedDeadlineDateFromSlider").val(addDaysToDate(parseInt($("#days").val())));
或
$("#ModifiedDeadlineDateFromSlider").val($("#date").text());
修改后你的。slider函数看起来是这样的:
$(function () {
$("#slider").slider({
max: 30,
min: -30,
value: 0,
slide: function (event, ui) {
$("#days").val(ui.value);
$("#date").text(addDaysToDate(parseInt($("#days").val())));
$("#ModifiedDeadlineDateFromSlider").val($("#date").text());
},
create: function (event, ui) {
$("#date").text(addDaysToDate(parseInt($("#days").val())));
$("#ModifiedDeadlineDateFromSlider").val($("#date").text());
}
});
});
注:添加上述代码行来创建事件,只有当你想在创建滑块时设置隐藏字段值的日期。如果你想设置只有当日期发生变化时,只需在幻灯片事件中添加该代码。
注意:在这个特殊的场景中,它也不能与更改一起工作。经过讨论和几次试验,我们发现了另一件事,这是次要的,但造成了问题。asp隐藏字段的属性ClientIDMode没有设置为静态,因为它的ID在渲染过程中被改变了,结果值在
后面的代码中不可用希望有帮助!
将javascript的值传递给c#:
<script type="text/javascript">
function abc()
{
var str = "yourValue";
document.getElementById("HiddenField1").value = str;
}
</script>
,然后访问HiddenField1。值
将c#变量传递给javascript,你可以像这样绑定公共变量:
<%=this.YourVariable%>