年份和月份选择器的UserControl
介绍
我要讨论弹出日历选择年份和月份，我创建的控制。从这篇文章中，您将了解如何轻松地创建一个弹出窗口，使用有关如何使用ASP.NET用户控件的jQuery以及小。好吧，这不是它。你还可以利用这件事，在你的网页在任何其他语言开发的项目。下面是控制图片。{A}
{A2的}
现在，是一步一步的解释创建的控件，以及如何使用，在您的应用程序的控制。第1步:控制设计即ASCX文件
要创建一个用户控件，你需要对解决方案的左击和点击GT添加新项目; GT比在屏幕上选择WebUserControl如下:
{A3的}
你点击添加按钮后，一个ASCX文件被创建，那么你可以添加下面的代码行，以获得如拳头上图中所示的显示:<%@ Control Language="C#" AutoEventWireup="true" CodeFile="DateBox.ascx.cs"
Inherits="DateBox" %>
<div style="float: left;" runat="server" id="labelContainer">
<asp:label runat="server" id="lblText" />
</div>
<div>
<asp:textbox runat="server" id="txtDate" />
<asp:button text="..." runat="server" id="btnDate">
</asp:button></div>
与控制设计一旦你做，你可以将其粘贴在源代码下面的代码，即cs文件{C}财产LabelText的:用于获取/设置标签控件的文本。TextData资料:用于获取/设置TextBox控件将显示选定日期的文本。方法的Page_Load:这种方法被执行时，页面加载检查，如果没有标签控制文本容器div设置为可见关闭。按钮控件添加客户端脚本，并通过按钮控制本身和TextBox控件将被用来显示选定日期的jQuery / JavaScript的客户端ID。第三步:代码创建弹出日历，即JS文件
与第2步完成后，一个新的JavaScript文件添加到您的解决方案，并粘贴在它的下面的代码:jQuery(document).ready(function ($) {
var divContainer = $("<div style="display: none;" id="window">
</div>
");
var divButtonHolder = $("<div style="padding-removed 5px;
text-align: center;" id="bholder">
</div>
");
var buttonOk = $("<div style="float: left;">
<input type="button" value="Done" 枚nclick="buttonDoneClick()" id="buttonDone" />
</div>
");
var buttonCancel = $("<div style="float: right;">
<input type="button" value="Cancel" 枚nclick="Close_Popup()" id="buttonCancel" />
</div>
");
var divSelectHolder = $("<div id="holder">
Select Month and Year : </div>
");
var ddlmonth = $("<select id="ddlmonth" cellspacing="0"> </select> ");
var ddlyear = $("<select id="ddlyear" cellspacing="0"> </select>");
var i = 0;
var month = 1;
for (i = 1985; i <= 2020; i++) {
ddlyear.append('<option value="' + i + '">' + i + '</option>');
}
i = 0;
for (i = 1; i <= 12; i++) {
if (i < 10) {
month = "0" + month;
}
ddlmonth.append('<option value="' + month + '">' + month + '</option>');
month++;
}
divSelectHolder.append(ddlmonth);
divSelectHolder.append(ddlyear);
divContainer.append(divSelectHolder);
divButtonHolder.append(buttonOk);
divButtonHolder.append(buttonCancel);
divContainer.append(divButtonHolder);
$('body').append(divContainer);
});
var txtDate;
function buttonDoneClick() {
var month = $("#ddlmonth").val();
var year = $("#ddlyear").val();
$(txtDate).val(month + year);
Close_Popup()
}
function buttonClick(obj,id) {
txtDate = ('#' + id);
var position = $(obj).position();
$('#window').css({ top: position.top, left: position.left }).fadeIn('fast');
return false;
}
function Close_Popup() {
$('#window').fadeOut('fast');
}
css文件，你将能够从溶液中添加下面的样式表。{体C3}
风格得到重视与ID称为窗口的div，即弹出窗口。第5步:如何使用ASPX文件在您的项目控制{的C4}
，因此，使用在您的应用程序的控制，你只需要注册用户的控制，需要包括jQuery，创建JS和CSS文件。你可以使用Label属性，以显示与控制的文本。总结
所以这是很容易的创建一个弹出的控制和使用它作为您的应用程序的用户控制。但是，如果你的工作比其他。NET，那么就需要使用js和。css文件，需要创建一个网页上的控制。