axure灯箱
I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox. At first this was a daunting task since controlling the rendered dates with a link to the event seemed out of reach, well, once I sat down and started working, it was actually a simple task. There are a few examples of using a database to create event dates, but I never found one that created a pop-up of the events. Lets quickly walk through it.
最近，我在使用数据库跟踪可选日期的基础上，完成了事件日历控件的创建过程，其中一项要求是在一个简单的灯箱中弹出选定的日期。 起初这是一项艰巨的任务，因为通过事件链接控制渲染日期似乎遥不可及，好吧，一旦我坐下来开始工作，这实际上是一个简单的任务。 有一些使用数据库创建事件日期的示例，但是我从未找到创建事件弹出窗口的示例。 让我们快速浏览一下。
First, lets create a database of the necessary data. I used Access in this example but can be easily migrated to your preferred database. Create a table with the following columns and data-types, (sample data included);
首先，让我们创建必要数据的数据库。 在此示例中，我使用了Access，但可以轻松地迁移到您的首选数据库。 创建具有以下列和数据类型的表（包括示例数据）；
ID eventDate eventName EventData eventLink
ID eventDate eventName EventData eventLink
2 10/21/2010 New Event Testing a new event http://www.mgfic.com
2 10/21/2010新事件测试新事件http://www.mgfic.com
ID: AutoNumber
ID：自动编号
eventDate: Date/Number
eventDate：日期/数字
eventName: Text
eventName：文本
eventData: Memo
eventData：备注
eventLink: Text
eventLink：文本
Once the database has been created and saved in the appropriate directory, (I'll use _database in this example), lets create a page with the Calendar Control embedded and the required CSS and JavaScript calls.
一旦创建数据库并将其保存在适当的目录中（在此示例中，我将使用_database），就可以创建一个页面，其中嵌入了Calendar Control以及必需CSS和JavaScript调用。
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="../css/mediaboxAdvBlack21.css" type="text/css" media="screen" />
<script src="../js/mootools.js" type="text/javascript"></script>
<script src="../js/mediaboxAdv-1.3.4.js" type="text/javascript"></script>
<title>Calendar</title>
</head>
<body>
<script type="text/javascript" src="../js/wz_tooltip.js"></script>
<script type="text/javascript" src="../js/tip_balloon.js"></script>
<form id="form1" runat="server">
<div>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White"
BorderColor="Black" BorderWidth="1px" Font-Names="Segoe UI" Font-Size="9pt"
ForeColor="Black" Height="180px" NextPrevFormat="FullMonth" Width="260px"
SelectionMode="None" BorderStyle="Solid"
Caption="Calendar of Events" CaptionAlign="Top" ToolTip=" ">
<SelectedDayStyle BackColor="White" ForeColor="White" />
<SelectorStyle Font-Bold="False" />
<TodayDayStyle BackColor="White" Font-Bold="True"
Font-Names="Segoe UI" Font-Size="14px" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#F9F9D2"
VerticalAlign="Bottom" />
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" BackColor="#F9F9D2"
BorderStyle="Solid" BorderWidth="0px" />
<TitleStyle BackColor="#931D1D" BorderColor="Black" BorderWidth="1px"
Font-Bold="True" Font-Size="13pt" ForeColor="White"
BorderStyle="Ridge" />
</asp:Calendar>
</div>
</form>
</body>
</html>
There are a number of styles set in the above .aspx page that are not necessary in your control, I used them to show the possible customization available. You will also notice that the file "Default.aspx.vb" is called as the CodeFile, this is where all the work takes place to connect to the database and creating the necessary HREF tags using the DayRender event. Some of this code comes from Microsoft. Lets take a look at this vb;
上面的.aspx页中设置了许多样式，这些样式在您的控件中不是必需的，我使用它们来显示可能的自定义。 您还将注意到文件“ Default.aspx.vb”被称为CodeFile，这是所有工作连接到数据库并使用DayRender事件创建必要的HREF标记的地方。 其中一些代码来自Microsoft。 让我们看一下这个vb；
Imports System.Data
Imports System.Data.OleDb
Partial Class _Default
Inherits System.Web.UI.Page
Protected dsEvents As DataSet
Protected Sub Page_Load(ByVal sender As Object, _
ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Calendar1.VisibleDate = DateTime.Today
FillDataset()
End If
End Sub
Protected Sub FillDataset()
Dim firstDate As New DateTime(Calendar1.VisibleDate.Year, Calendar1.VisibleDate.Month, 1)
Dim lastDate As DateTime = GetFirstDayOfNextMonth()
dsEvents = GetCurrentMonthData(firstDate, lastDate)
End Sub
Protected Function GetFirstDayOfNextMonth() As DateTime
Dim monthNumber, yearNumber As Integer
If Calendar1.VisibleDate.Month = 12 Then
monthNumber = 1
yearNumber = Calendar1.VisibleDate.Year + 1
Else
monthNumber = Calendar1.VisibleDate.Month + 1
yearNumber = Calendar1.VisibleDate.Year
End If
Dim lastDate As New DateTime(yearNumber, monthNumber, 1)
Return lastDate
End Function
Protected Sub Calendar1_VisibleMonthChanged(ByVal sender As Object, _
ByVal e As System.Web.UI.WebControls.MonthChangedEventArgs) _
Handles Calendar1.VisibleMonthChanged
FillDataset()
End Sub
Function GetCurrentMonthData(ByVal firstDate As DateTime, ByVal lastDate As DateTime) As DataSet
Dim sConnectionString, sSQL As String
'SQL Connection String
sConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("/_database/CalendarDb.mdb") & ";User Id=admin;Password=;"
Dim objConnection As New OleDbConnection(sConnectionString)
'SQL parameters
sSQL = "SELECT * FROM tblEvents WHERE eventDate >= #" & firstDate & "# And eventDate < #" & lastDate & "#"
Dim Table As New DataSet
Dim Adpt As New OleDbDataAdapter(sSQL, objConnection)
Table.Clear()
Try
Adpt.Fill(Table)
Catch
End Try
' return the recordset as an array
Return Table
End Function
Protected Sub Calendar1_DayRender(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DayRenderEventArgs) Handles Calendar1.DayRender
Dim nextDate As DateTime
' Checks to see if there are any dates that need to be returned
If Not dsEvents Is Nothing Then
' if there is, then draw them
For Each dr As DataRow In dsEvents.Tables(0).Rows ' this array will be full of your db data
nextDate = CType(dr("eventDate"), DateTime)
If nextDate = e.Day.Date Then
'e.Cell.BackColor = System.Drawing.Color.Pink ' changes the background color
e.Day.IsSelectable = True ' makes the date selectable
e.Cell.Font.Bold = True
e.Cell.Controls.Clear()
Dim iLink As New HyperLink() ' Create a hyperlink of the date
iLink.Text = e.Day.Date.Day '& "<br>" & dr(2) ' sets the date as a link
iLink.ForeColor = Drawing.ColorTranslator.FromHtml("#931D1D") ' give it a cool color
iLink.Font.Underline = True ' underline it
' Here is where we create a nice ToolTip when the mouseOver event fires
iLink.Attributes.Add("onmouseover", "Tip('" & dr(2) & "', BALLOON, true, ABOVE, true, OFFSETX, -20)")
iLink.ToolTip = dr(2)
' Lets create the link to fire the Lightbox
iLink.NavigateUrl = Server.UrlPathEncode("javascript:this.onclick(Mediabox.open('#mb_inline" & dr(0) & "', '" & dr(2) & "', '360 180'));") ' the URL
e.Cell.Controls.Add(iLink) 'Add the link
buildDivTags(dr(0), dr(2), dr(3), dr(4))
End If
Next
End If
End Sub
' We need to create <Div> tags to control the output of the Lightbox contents
Private Sub buildDivTags(ByRef id As String, ByRef title As String, ByRef data As String, ByRef link As String)
Response.Write(vbCrLf & "<div id='mb_inline" & id & "' style='display: none;'>" & vbCrLf)
Response.Write("<span style='color: #fff; text-align: center;'><A href='" & link & "' target='_blank' id='mbTitleLink'>" & title & "</a><br/><br/>" & vbCrLf)
Response.Write(data & "<br/><br/>" & vbCrLf)
Response.Write("<a href='' style='color: #dcdcdc;' onclick='Mediabox.close();return false;'>Close</a></span></div>" & vbCrLf)
End Sub
End Class
It's important to note that this page uses MooTools and MediaBoxAdvanced as the Lightbox and the now difficult to find ToolTip by Walter Zorn, All the required .js files can be found here.
重要的是要注意，此页面使用MooTools和MediaBoxAdvanced作为Lightbox，而Walter Zorn现在很难找到它的工具提示。所有必需的.js文件都可以在这里找到。
If you want to see a working example of this code, you can CLICK HERE.
如果要查看此代码的有效示例，请单击此处 。
The entire code can be downloaded, including a sample database, the .aspx, the .vb, the .css and the .js files by clicking HERE.
单击此处 ，可以下载整个代码，包括示例数据库，.aspx，.vb，.css和.js文件。
If you have any problems with the code or any suggestions, please let me know. I tested this code across FireFox and IE 7 and 8 with no issues. Enjoy!
如果您对代码有任何疑问或建议，请告诉我。 我在FireFox和IE 7和8上测试了此代码，没有任何问题。 请享用！
axure灯箱
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
