发布于 2017-04-20 22:57:44 | 337 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例，程序狗速度看过来！

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

---

学校日历有以下几个特点：1显示本周是本学期的第几周；2显示今日事件；3特殊显示有事件的日期，点击该日期显示本日事件。
截图:

controller代码：
代码

 
public ActionResult CalendarDisplay() 
{ 
BL.DateEventBL de = new BL.DateEventBL(); 
//获取当日日期,使用能被javascript转换成日期的格式 
DateTimeFormatInfo myDTFI = new CultureInfo("en-US", false).DateTimeFormat; 
string utcTime = DateTime.Now.ToString("MMM dd,yyyy HH:mm:ss", myDTFI); 
ViewData["currentDay"] = utcTime; 
//获取当月有事件的日期 
List<DateTime> dateHaveEvent = de.GetTimeHaveEvent(DateTime.Now.Year, DateTime.Now.Month); 
List<String> dates=dateHaveEvent.Select(u=>u.ToString("MMM dd,yyyy HH:mm:ss", myDTFI)).ToList(); 
ViewData["datesHaveEvent"] = dates; 
//获取当日事件 
List<BL.CDateEvent> deInfos = de.GetDE(DateTime.Now, new Guid("00000000-0000-0000-0000-000000000001")); 
//获取当前周 
BL.DateSpanBL ds = new BL.DateSpanBL(); 
int currentWeek = ds.GetCurrentWeek(DateTime.Now, new Guid("00000000-0000-0000-0000-000000000002")); 
ViewData["currentWeek"] = currentWeek; 
return View(deInfos); 
} 

partialview(局部视图)：
代码

 
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<BL.CDateEvent>>" %> 
<%string json = ""; List<String> datesHaveEvent = ViewData["datesHaveEvent"] as List<String>; %> 
<% 
if (datesHaveEvent != null && datesHaveEvent.Count > 0) 
{ 
json = "["; 
for (int i = 0; i < datesHaveEvent.Count;i++) 
{ 
if (i == datesHaveEvent.Count - 1) 
{ 
json += "{\"time\":\"" + datesHaveEvent.ElementAt(i) + "\"}"; // 最后一项 
} 
else 
{ 
json += "{\"time\":\"" + datesHaveEvent.ElementAt(i) + "\"},"; // 
} 
} 
json += "]"; 
} 
%> 
<div id="datePicker"></div> 
<br /> 
当前是第 <span style="color:Red; font-size:14px;"><%=ViewData["currentWeek"]%> </span> 周 
<br /> 
<%=DateTime.Now.ToShortDateString() %> 
<br /> 
<% 
foreach(var item in Model) 
{ 
%> 
<%=Html.Encode(item.Content) %> 
<% 
} 
%> 
<br /> 
<div id="otherEvent" style=" width:300px;"></div> 

javascript(脚本):
代码

 
///服务器与客户端当前时间的转换 
var a='<%= ViewData["currentDay"]%>'; 
var b = Date.parse(a); 
var serviceDate = new Date(b); 
var clientDate = new Date(); 
var yearOffset = serviceDate.getYear() - clientDate.getYear(); 
var monthOffset = serviceDate.getMonth() - clientDate.getMonth(); 
var dayOffset = serviceDate.getDate() - clientDate.getDate(); 
///获取日期列表 
var jsn = eval('<%=json %>'); 
$(function() { 
var options = { 
prevText: "上一月", //跳转到上一页的提示文本 
nextText: '下一月', //跳转到下一页的提示文本 
minDate: -30, 
maxDate: 30, 
hideIfNoPrevNext: false, 
defaultDate: "+" + yearOffset + "y +" + monthOffset + "m +" + dayOffset + "d", 
beforeShowDay: DisplayDayHaveEvent, //显示每个日期之前的操作 
onSelect: select // 选择一个日期的回调函数 
}; 
function DisplayDayHaveEvent(date) { 
for (var i = 0; i < jsn.length; i++) { 
var cc = Date.parse(jsn[i].time); 
var time = new Date(cc); 
if (date.getMonth() == time.getMonth() && date.getDate() == time.getDate()) { 
return [true, ""] 
} 
} 
return [false, ""]; 
} 
function select(dateText, inst) { 
$('#otherEvent').load("http://www.phperz.com/Calendar/EventDetail?date=" + dateText); 
return false; 
} 
//初始化日期控件 
$('#datePicker').datepicker(options); 
})