Html页面和文件一起显示，但不显示在服务器上
我有一个非常奇怪的问题：如果我通过路径在浏览器中访问HTML页面，它会正确显示，但是如果我从本地主机访问它，它看起来很糟糕。我知道这是一个非常大的话题，但这可能是什么原因呢？我正在使用WampServer。我在chrome、Firefox和IE上试过，结果是一样的。如果需要，我可以提供源代码，但是它非常大（主代码有700行，加上许多依赖项） 我只是想知道是否有一个通常的原因可能会引发这种行为 通过路径： 通过服务器：Html页面和文件一起显示，但不显示在服务器上,html,wamp,Html,Wamp,我有一个非常奇怪的问题：如果我通过路径在浏览器中访问HTML页面，它会正确显示，但是如果我从本地主机访问它，它看起来很糟糕。我知道这是一个非常大的话题，但这可能是什么原因呢？我正在使用WampServer。我在chrome、Firefox和IE上试过，结果是一样的。如果需要，我可以提供源代码，但是它非常大（主代码有700行，加上许多依赖项） 我只是想知道是否有一个通常的原因可能会引发这种行为 通过路径： 通过服务器： <!DOCTYPE html> <html> <
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Calendar</title>
<!-- Include CSS for JQuery Frontier Calendar plugin (Required for calendar plugin) -->
<link rel="stylesheet" type="text/css" href="css/frontierCalendar/jquery-frontier-cal-1.3.2.css" />
<!-- Include CSS for color picker plugin (Not required for calendar plugin. Used for example.) -->
<link rel="stylesheet" type="text/css" href="css/colorpicker/colorpicker.css" />
<!-- Include CSS for JQuery UI (Required for calendar plugin.) -->
<link rel="stylesheet" type="text/css" href="css/jquery-ui/smoothness/jquery-ui-1.8.1.custom.css" />
<!--
Include JQuery Core (Required for calendar plugin)
** This is our IE fix version which enables drag-and-drop to work correctly in IE. See README file in js/jquery-core folder. **
-->
<script type="text/javascript" src="js/jquery-core/jquery-1.4.2-ie-fix.min.js"></script>
<!-- Include JQuery UI (Required for calendar plugin.) -->
<script type="text/javascript" src="js/jquery-ui/smoothness/jquery-ui-1.8.1.custom.min.js"></script>
<!-- Include color picker plugin (Not required for calendar plu gin. Used for example.) -->
<script type="text/javascript" src="js/colorpicker/colorpicker.js"></script>
<!-- Include jquery tooltip plugin (Not required for calendar plugin. Used for example.) -->
<script type="text/javascript" src="js/jquery-qtip-1.0.0-rc3140944/jquery.qtip-1.0.js"></script>
<!--
(Required for plugin)
Dependancies for JQuery Frontier Calendar plugin.
** THESE MUST BE INCLUDED BEFORE THE FRONTIER CALENDAR PLUGIN. **
-->
<script type="text/javascript" src="js/lib/jshashtable-2.1.js"></script>
<!-- Include JQuery Frontier Calendar plugin -->
<script type="text/javascript" src="js/frontierCalendar/jquery-frontier-cal-1.3.2.min.js"></script>
</head>
<body style="background: url(background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;">
<!-- Some CSS for our example. (Not required for calendar plugin. Used for example.)-->
<style type="text/css" media="screen">
/*
Default font-size on the default ThemeRoller theme is set in ems, and with a value that when combined
with body { font-size: 62.5%; } will align pixels with ems, so 11px=1.1em, 14px=1.4em. If setting the
body font-size to 62.5% isn't an option, or not one you want, you can set the font-size in ThemeRoller
to 1em or set it to px.
http://osdir.com/ml/jquery-ui/2009-04/msg00071.html
*/
body {
font-size: 62.5%;
}
#mycal {
opacity:0.9;
}
.shadow {
-moz-box-shadow: 3px 3px 4px #aaaaaa;
-webkit-box-shadow: 3px 3px 4px #aaaaaa;
box-shadow: 3px 3px 4px #aaaaaa;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#aaaaaa')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#aaaaaa');
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var clickDate = "";
var clickAgendaItem = "";
/**
* Initializes calendar with current year & month
* specifies the callbacks for day click & agenda item click events
* then returns instance of plugin object
*/
var jfcalplugin = $("#mycal").jFrontierCal({
date: new Date(),
dayClickCallback: myDayClickHandler,
agendaClickCallback: myAgendaClickHandler,
agendaDropCallback: myAgendaDropHandler,
agendaMouseoverCallback: myAgendaMouseoverHandler,
applyAgendaTooltipCallback: myApplyTooltip,
agendaDragStartCallback : myAgendaDragStart,
agendaDragStopCallback : myAgendaDragStop,
dragAndDropEnabled: true
}).data("plugin");
/**
* Do something when dragging starts on agenda div
*/
function myAgendaDragStart(eventObj,divElm,agendaItem){
// destroy our qtip tooltip
if(divElm.data("qtip")){
divElm.qtip("destroy");
}
};
/**
* Do something when dragging stops on agenda div
*/
function myAgendaDragStop(eventObj,divElm,agendaItem){
//alert("drag stop");
};
0
/**
* Custom tooltip - use any tooltip library you want to display the agenda data.
* for this example we use qTip - http://craigsworks.com/projects/qtip/
*
* @param divElm - jquery object for agenda div element
* @param agendaItem - javascript object containing agenda data.
*/
function myApplyTooltip(divElm,agendaItem){
// Destroy currrent tooltip if present
if(divElm.data("qtip")){
divElm.qtip("destroy");
}
var displayData = "";
var title = agendaItem.title;
var startDate = agendaItem.startDate;
var endDate = agendaItem.startDate;
var allDay = agendaItem.allDay;
var data = agendaItem.data;
displayData += "<br><b>" + title+ "</b><br><br>";
if(allDay){
displayData += "(All day event)<br><br>";
}else{
displayData += "<b>Starts:</b> " + startDate + "<br>" + "<b>Ends:</b> " + endDate + "<br><br>";
}
for (var propertyName in data) {
displayData += "<b>" + propertyName + ":</b> " + data[propertyName] + "<br>"
}
// use the user specified colors from the agenda item.
var backgroundColor = agendaItem.displayProp.backgroundColor;
var foregroundColor = agendaItem.displayProp.foregroundColor;
var myStyle = {
border: {
width: 5,
radius: 10
},
padding: 10,
textAlign: "left",
tip: true,
name: "dark" // other style properties are inherited from dark theme
};
if(backgroundColor != null && backgroundColor != ""){
myStyle["backgroundColor"] = backgroundColor;
}
if(foregroundColor != null && foregroundColor != ""){
myStyle["color"] = foregroundColor;
}
// apply tooltip
divElm.qtip({
content: displayData,
position: {
corner: {
tooltip: "bottomMiddle",
target: "topMiddle"
},
adjust: {
mouse: true,
x: 0,
y: -15
},
target: "mouse"
},
show: {
when: {
event: 'mouseover'
}
},
style: myStyle
});
};
/**
* Make the day cells roughly 3/4th as tall as they are wide. this makes our calendar wider than it is tall.
*/
jfcalplugin.setAspectRatio("#mycal",0.75);
/**
* Called when user clicks day cell
* use reference to plugin object to add agenda item
*/
function myDayClickHandler(eventObj){
// Get the Date of the day that was clicked from the event object
var date = eventObj.data.calDayDate;
// store date in our global js variable for access later
clickDate = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
// open our add event dialog
$('#add-event-form').dialog('open');
};
/**
* Called when user clicks and agenda item
* use reference to plugin object to edit agenda item
*/
function myAgendaClickHandler(eventObj){
// Get ID of the agenda item from the event object
var agendaId = eventObj.data.agendaId;
// pull agenda item from calendar
var agendaItem = jfcalplugin.getAgendaItemById("#mycal",agendaId);
clickAgendaItem = agendaItem;
$("#display-event-form").dialog('open');
};
/**
* Called when user drops an agenda item into a day cell.
*/
function myAgendaDropHandler(eventObj){
// Get ID of the agenda item from the event object
var agendaId = eventObj.data.agendaId;
// date agenda item was dropped onto
var date = eventObj.data.calDayDate;
// Pull agenda item from calendar
var agendaItem = jfcalplugin.getAgendaItemById("#mycal",agendaId);
alert("You dropped agenda item " + agendaItem.title +
" onto " + date.toString() + ". Here is where you can make an AJAX call to update your database.");
};
/**
* Called when a user mouses over an agenda item
*/
function myAgendaMouseoverHandler(eventObj){
var agendaId = eventObj.data.agendaId;
var agendaItem = jfcalplugin.getAgendaItemById("#mycal",agendaId);
//alert("You moused over agenda item " + agendaItem.title + " at location (X=" + eventObj.pageX + ", Y=" + eventObj.pageY + ")");
};
/**
* Initialize jquery ui datepicker. set date format to yyyy-mm-dd for easy parsing
*/
$("#dateSelect").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy-mm-dd'
});
/**
* Set datepicker to current date
*/
$("#dateSelect").datepicker('setDate', new Date());
/**
* Use reference to plugin object to a specific year/month
*/
$("#dateSelect").bind('change', function() {
var selectedDate = $("#dateSelect").val();
var dtArray = selectedDate.split("-");
var year = dtArray[0];
// jquery datepicker months start at 1 (1=January)
var month = dtArray[1];
// strip any preceeding 0's
month = month.replace(/^[0]+/g,"")
var day = dtArray[2];
// plugin uses 0-based months so we subtrac 1
jfcalplugin.showMonth("#mycal",year,parseInt(month-1).toString());
});
/**
* Initialize previous month button
*/
$("#BtnPreviousMonth").button();
$("#BtnPreviousMonth").click(function() {
jfcalplugin.showPreviousMonth("#mycal");
// update the jQuery datepicker value
var calDate = jfcalplugin.getCurrentDate("#mycal"); // returns Date object
var cyear = calDate.getFullYear();
// Date month 0-based (0=January)
var cmonth = calDate.getMonth();
var cday = calDate.getDate();
// jquery datepicker month starts at 1 (1=January) so we add 1
$("#dateSelect").datepicker("setDate",cyear+"-"+(cmonth+1)+"-"+cday);
return false;
});
/**
* Initialize next month button
*/
$("#BtnNextMonth").button();
$("#BtnNextMonth").click(function() {
jfcalplugin.showNextMonth("#mycal");
// update the jQuery datepicker value
var calDate = jfcalplugin.getCurrentDate("#mycal"); // returns Date object
var cyear = calDate.getFullYear();
// Date month 0-based (0=January)
var cmonth = calDate.getMonth();
var cday = calDate.getDate();
// jquery datepicker month starts at 1 (1=January) so we add 1
$("#dateSelect").datepicker("setDate",cyear+"-"+(cmonth+1)+"-"+cday);
return false;
});
/**
* Initialize delete all agenda items button
*/
$("#BtnDeleteAll").button();
$("#BtnDeleteAll").click(function() {
jfcalplugin.deleteAllAgendaItems("#mycal");
return false;
});
/**
* Initialize add event modal form
*/
$("#add-event-form").dialog({
autoOpen: false,
height: 400,
width: 400,
modal: true,
buttons: {
'Add Event': function() {
var what = jQuery.trim($("#what").val());
if(what == ""){
alert("Please enter a short event description into the \"what\" field.");
}else{
var startDate = $("#startDate").val();
var startDtArray = startDate.split("-");
var startYear = startDtArray[0];
// jquery datepicker months start at 1 (1=January)
var startMonth = startDtArray[1];
var startDay = startDtArray[2];
// strip any preceeding 0's
startMonth = startMonth.replace(/^[0]+/g,"");
startDay = startDay.replace(/^[0]+/g,"");
var startHour = jQuery.trim($("#startHour").val());
var startMin = jQuery.trim($("#startMin").val());
var startMeridiem = jQuery.trim($("#startMeridiem").val());
startHour = parseInt(startHour.replace(/^[0]+/g,""));
if(startMin == "0" || startMin == "00"){
startMin = 0;
}else{
startMin = parseInt(startMin.replace(/^[0]+/g,""));
}
if(startMeridiem == "AM" && startHour == 12){
startHour = 0;
}else if(startMeridiem == "PM" && startHour < 12){
startHour = parseInt(startHour) + 12;
}
var endDate = $("#startDate").val();
var endDtArray = endDate.split("-");
var endYear = endDtArray[0];
// jquery datepicker months start at 1 (1=January)
var endMonth = endDtArray[1];
var endDay = endDtArray[2];
// strip any preceeding 0's
endMonth = endMonth.replace(/^[0]+/g,"");
endDay = endDay.replace(/^[0]+/g,"");
var endHour = jQuery.trim($("#startHour").val());
var endMin = jQuery.trim($("#startMin").val());
var endMeridiem = jQuery.trim($("#startMeridiem").val());
endHour = parseInt(endHour.replace(/^[0]+/g,""));
if(endMin == "0" || endMin == "00"){
endMin = 0;
}else{
endMin = parseInt(endMin.replace(/^[0]+/g,""));
}
if(endMeridiem == "AM" && endHour == 12){
endHour = 0;
}else if(endMeridiem == "PM" && endHour < 12){
endHour = parseInt(endHour) + 12;
}
//alert("Start time: " + startHour + ":" + startMin + " " + startMeridiem + ", End time: " + endHour + ":" + endMin + " " + endMeridiem);
// Dates use integers
var startDateObj = new Date(parseInt(startYear),parseInt(startMonth)-1,parseInt(startDay),startHour,startMin,0,0);
var endDateObj = new Date(parseInt(startYear),parseInt(startMonth)-1,parseInt(startDay),startHour,startMin,0,0);
// add new event to the calendar
jfcalplugin.addAgendaItem(
"#mycal",
what,
startDateObj,
endDateObj,
false,
{
fname: "Santa",
lname: "Claus",
leadReindeer: "Rudolph",
myDate: new Date(),
myNum: 42
},
{
backgroundColor: $("#colorBackground").val(),
foregroundColor: $("#colorForeground").val()
}
);
$(this).dialog('close');
}
},
Cancel: function() {
$(this).dialog('close');
}
},
open: function(event, ui){
// initialize start date picker
$("#startDate").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy-mm-dd'
});
// initialize end date picker
/* $("#endDate").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy-mm-dd'
});*/
// initialize with the date that was clicked
$("#startDate").val(clickDate);
$("#endDate").val(clickDate);
// initialize color pickers
$("#colorSelectorBackground").ColorPicker({
color: "#333333",
onShow: function (colpkr) {
$(colpkr).css("z-index","10000");
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$("#colorSelectorBackground div").css("backgroundColor", "#" + hex);
$("#colorBackground").val("#" + hex);
}
});
//$("#colorBackground").val("#1040b0");
$("#colorSelectorForeground").ColorPicker({
color: "#ffffff",
onShow: function (colpkr) {
$(colpkr).css("z-index","10000");
$(colpkr).fadeIn(500);
return false;
},
onHide: function (colpkr) {
$(colpkr).fadeOut(500);
return false;
},
onChange: function (hsb, hex, rgb) {
$("#colorSelectorForeground div").css("backgroundColor", "#" + hex);
$("#colorForeground").val("#" + hex);
}
});
//$("#colorForeground").val("#ffffff");
// put focus on first form input element
$("#what").focus();
},
close: function() {
// reset form elements when we close so they are fresh when the dialog is opened again.
$("#startDate").datepicker("destroy");
$("#endDate").datepicker("destroy");
$("#startDate").val("");
$("#endDate").val("");
$("#startHour option:eq(0)").attr("selected", "selected");
$("#startMin option:eq(0)").attr("selected", "selected");
$("#startMeridiem option:eq(0)").attr("selected", "selected");
$("#endHour option:eq(0)").attr("selected", "selected");
$("#endMin option:eq(0)").attr("selected", "selected");
$("#endMeridiem option:eq(0)").attr("selected", "selected");
$("#what").val("");
//$("#colorBackground").val("#1040b0");
//$("#colorForeground").val("#ffffff");
}
});
/**
* Initialize display event form.
*/
$("#display-event-form").dialog({
autoOpen: false,
height: 400,
width: 400,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Edit': function() {
alert("Make your own edit screen or dialog!");
},
'Delete': function() {
if(confirm("Are you sure you want to delete this agenda item?")){
if(clickAgendaItem != null){
jfcalplugin.deleteAgendaItemById("#mycal",clickAgendaItem.agendaId);
//jfcalplugin.deleteAgendaItemByDataAttr("#mycal","myNum",42);
}
$(this).dialog('close');
}
}
},
open: function(event, ui){
if(clickAgendaItem != null){
var title = clickAgendaItem.title;
var startDate = clickAgendaItem.startDate;
var endDate = clickAgendaItem.endDate;
var allDay = clickAgendaItem.allDay;
var data = clickAgendaItem.data;
// in our example add agenda modal form we put some fake data in the agenda data. we can retrieve it here.
$("#display-event-form").append(
"<br><b>" + title+ "</b><br><br>"
);
if(allDay){
$("#display-event-form").append(
"(All day event)<br><br>"
);
}else{
$("#display-event-form").append(
"<b>Starts:</b> " + startDate + "<br>" +
"<b>Ends:</b> " + endDate + "<br><br>"
);
}
for (var propertyName in data) {
$("#display-event-form").append("<b>" + propertyName + ":</b> " + data[propertyName] + "<br>");
}
}
},
close: function() {
// clear agenda data
$("#display-event-form").html("");
}
});
/**
* Initialize our tabs
*/
$("#tabs").tabs({
/*
* Our calendar is initialized in a closed tab so we need to resize it when the example tab opens.
*/
show: function(event, ui){
if(ui.index == 1){
jfcalplugin.doResize("#mycal");
}
}
});
});
</script>
<div id="tabs-2">
<div id="example" style="margin: auto; width:80%;">
<div id="toolbar" class="ui-widget-header ui-corner-all" style="padding:3px; vertical-align: middle; white-space:nowrap; overflow: hidden;">
<button id="BtnPreviousMonth">Previous Month</button>
<button id="BtnNextMonth">Next Month</button>
Date: <input type="text" id="dateSelect" size="20"/>
<button id="BtnDeleteAll">Delete All</button>
</div>
<br>
<!--
You can use pixel widths or percentages. Calendar will auto resize all sub elements.
Height will be calculated by aspect ratio. Basically all day cells will be as tall
as they are wide.
-->
<div id="mycal"></div>
</div>
<!-- debugging-->
<div id="calDebug"></div>
<!-- Add event modal form -->
<style type="text/css">
//label, input.text, select { display:block; }
fieldset { padding:0; border:0; margin-top:25px; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<div id="add-event-form" title="Add New Event">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">What?</label>
<input type="text" name="what" id="what" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"/>
<table style="width:100%; padding:5px;">
<tr>
<td>
<label>Start Date</label>
<input type="text" name="startDate" id="startDate" value="" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"/>
</td>
<td> </td>
<td>
<label>Start Hour</label>
<select id="startHour" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;">
<option value="12" SELECTED>12</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
<td>
<td>
<label>Start Minute</label>
<select id="startMin" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;">
<option value="00" SELECTED>00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<td>
<td>
<label>Start AM/PM</label>
<select id="startMeridiem" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;">
<option value="AM" SELECTED>AM</option>
<option value="PM">PM</option>
</select>
</td>
</tr>
<!-- <tr>
<td>
<label>End Date</label>
<input type="text" name="endDate" id="endDate" value="" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;"/>
</td>
<td>
<label>End Hour</label>
<select id="endHour" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;">
<option value="12" SELECTED>12</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
<td>
<td>
<label>End Minute</label>
<select id="endMin" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;">
<option value="00" SELECTED>00</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select>
<td>
<td>
<label>End AM/PM</label>
<select id="endMeridiem" class="text ui-widget-content ui-corner-all" style="margin-bottom:12px; width:95%; padding: .4em;">
<option value="AM" SELECTED>AM</option>
<option value="PM">PM</option>
</select>
</td>
</tr>-->
</table>
<table>
<tr>
<td>
<label>Background Color</label>
</td>
<td>
<div id="colorSelectorBackground"><div style="background-color: #333333; width:30px; height:30px; border: 2px solid #000000;"></div></div>
<input type="hidden" id="colorBackground" value="#333333">
</td>
<td>
<label>Text Color</label>
</td>
<td>
<div id="colorSelectorForeground"><div style="background-color: #ffffff; width:30px; height:30px; border: 2px solid #000000;"></div></div>
<input type="hidden" id="colorForeground" value="#ffffff">
</td>
</tr>
</table>
</fieldset>
</form>
</div>
<div id="display-event-form" title="View Agenda Item">
</div>
</div>
</body>
</html>
历法
/*
默认ThemeRoller主题的默认字体大小是在ems中设置的，其值在组合时为
使用body{font size:62.5%；}将像素与ems对齐，因此11px=1.1em，14px=1.4em。如果设置
正文字体大小为62.5%不是一个选项，或者不是您想要的，您可以在浏览器中设置字体大小
设置为1em或设置为px。
http://osdir.com/ml/jquery-ui/2009-04/msg00071.html
*/
正文{
字体大小：62.5%；
}
#麦卡尔{
不透明度：0.9；
}
.影子{
-莫兹盒阴影：3px 3px 4px#aaaaa；
-网络工具包盒影：3px 3px 4px#aaaaa；
箱形阴影：3px 3px 4px#aaaa；
/*对于IE 8*/
-ms过滤器：“progid:DXImageTransform.Microsoft.Shadow（强度=4，方向=135，颜色='#aaaaaa'）”；
/*对于IE 5.5-7*/
过滤器：progid:DXImageTransform.Microsoft.Shadow（强度=4，方向=135，颜色=AAAAA）；
}
$（文档）.ready（函数（）{
var clickDate=“”；
var clickAgendaItem=“”；
/**
*使用当前年份和月份初始化日历
*指定日期单击和议程项目单击事件的回调
*然后返回插件对象的实例
*/
var jfcalplugin=$（“#mycal”）.jFrontierCal({
日期：新日期（），
dayClickCallback:myDayClickHandler，
agendaClickCallback:myAgendaClickHandler，
agendaDropCallback:myAgendaDropHandler，
AgendaMouseCoverllback:myAgendaMouseoverHandler，
APPLYAGENDATOLTIPCALLBACK:myApplyTooltip，
agendaDragStartCallback:myAgendaDragStart，
agendaDragStopCallback:myAgendaDragStop，
dragAndDropEnabled:真
}).数据（“插件”）；
/**
*拖动议程div上的开始时执行某些操作
*/
函数myAgendaDragStart（eventObj、divElm、agendaItem）{
//摧毁我们的qtip工具提示
if（分割数据（“qtip”））{
divElm.qtip（“销毁”）；
}
};
/**
*在议程div上拖动停止时执行某些操作
*/
函数myAgendaDragStop（eventObj、divElm、agendaItem）{
//警报（“拖动停止”）；
};
0
/**
*自定义工具提示-使用任何要显示议程数据的工具提示库。
*在本例中，我们使用qTip-http://craigsworks.com/projects/qtip/
*
*@param divElm-议程div元素的jquery对象
*@param agendaItem-包含议程数据的javascript对象。
*/
函数myApplyTooltip（divElm，agendaItem）{
//销毁当前工具提示（如果存在）
if（分割数据（“qtip”））{
divElm.qtip（“销毁”）；
}
var displayData=“”；
var title=agendaItem.title；
var startDate=agendaItem.startDate；
var endDate=agendaItem.startDate；
var allDay=agendaItem.allDay；
var数据=agendaItem.data；
显示数据+=“
”+标题+”
”；
如果（全天）{
displayData+=“（全天事件）
”；
}否则{
displayData+=“开始：”+startDate+”
“+”结束：“+endDate+”
”；
}
for（数据中的var propertyName）{
displayData+=“”+propertyName+”：“+data[propertyName]+”
”
}
//使用议程项目中用户指定的颜色。
var backgroundColor=agendaItem.displayProp.backgroundColor；
var foregroundColor=agendaItem.displayProp.foregroundColor；
var myStyle={
边界：{
宽度：5，
半径：10
},
填充：10，
textAlign：“左”，
提示：没错，
名称：“深色”//其他样式属性继承自深色主题
};
if（backgroundColor！=null&&backgroundColor！=“”）{
myStyle[“backgroundColor”]=背景色；
}
如果（foregroundColor！=null&&foregroundColor！=“”）{
myStyle[“color”]=前底色；
}
//应用工具提示
divElm.qtip({
内容：显示数据，
职位：{
角落：{
工具提示：“底部中间”，
目标：“中上”
},
调整：{
老鼠：是的，
x:0,，
y:-15
},
目标：“鼠标”
},
显示：{
何时：{
事件：“鼠标悬停”
}
},
风格：myStyle
});
};
/**
*使日单元格的高度大约为其宽度的3/4。这使我们的日历比它的高度更宽。
*/
jfcalplugin.setAspectRatio（“mycal”，0.75）；
/**
*当用户单击日单元格时调用
*使用对插件对象的引用添加议程项目
*/
函数myDayClickHandler（eventObj）{
//获取从事件对象单击的日期
var date=eventObj.data.calDayDate；
//将日期存储在全局js变量中，以便以后访问
单击日期=日期。getFullYear（）+“-”+（日期。getMonth（）+1）+“-”+日期。getDate（）；
//打开“添加事件”对话框
$（'#添加事件表单'）。对话框（'打开'）；
};
/**
*当用户单击并删除议程项目时调用
*使用对插件对象的引用编辑议程项目
*/
函数myAgendaClickHandler（eventObj）{
//获取th的ID