4f68a0933c
fixed the resizable text area with IE problem fixed the ad space with IE problem merged the 7.2.0 and 7.1.4 change logs
159 lines
No EOL
4.9 KiB
HTML
159 lines
No EOL
4.9 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
|
|
<title>Yahoo! Calendar Control - Row Highlight Example</title>
|
|
|
|
|
|
<link rel="stylesheet" href="../css/examples.css" type="text/css">
|
|
|
|
<script type="text/javascript" src="../../../build/yahoo/yahoo.js"></script>
|
|
<script type="text/javascript" src="../../../build/event/event.js" ></script>
|
|
<script type="text/javascript" src="../../../build/dom/dom.js" ></script>
|
|
|
|
<link type="text/css" rel="stylesheet" href="../../../build/fonts/fonts.css">
|
|
<link type="text/css" rel="stylesheet" href="../../../build/reset/reset.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../../docs/assets/dpSyntaxHighlighter.css" />
|
|
|
|
<script type="text/javascript" src="../../../build/calendar/calendar.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="../../../build/calendar/assets/calendar.css">
|
|
|
|
<style>
|
|
/* highlight the whole row */
|
|
.yui-calendar tr.hilite-row td.calcell {
|
|
background-color:yellow;
|
|
}
|
|
|
|
/* highlight the current cell in the standard highlight color */
|
|
.yui-calendar tr.hilite-row td.calcellhover {
|
|
cursor:pointer;
|
|
color:#FFF;
|
|
background-color:#FF9900;
|
|
border:1px solid #FF9900;
|
|
}
|
|
|
|
/* make sure out of month cells don't highlight too */
|
|
.yui-calendar tr.hilite-row td.calcell.oom {
|
|
cursor:default;
|
|
color:#999;
|
|
background-color:#EEE;
|
|
border:1px solid #E0E0E0;
|
|
}
|
|
</style>
|
|
|
|
<script language="javascript">
|
|
YAHOO.namespace("example.calendar");
|
|
|
|
function init() {
|
|
YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
|
|
|
|
/* Override the doCellMouseOver function (used for IE) to add row highlighting) */
|
|
YAHOO.example.calendar.cal1.doCellMouseOver = function(e, cal) {
|
|
var cell = this;
|
|
var row = cell.parentNode;
|
|
|
|
YAHOO.util.Dom.addClass(this, cal.Style.CSS_CELL_HOVER);
|
|
YAHOO.util.Dom.addClass(row, "hilite-row");
|
|
}
|
|
|
|
/* Override the doCellMouseOut function (used for IE) to remove row highlighting) */
|
|
YAHOO.example.calendar.cal1.doCellMouseOut = function(e, cal) {
|
|
var cell = this;
|
|
var row = cell.parentNode;
|
|
|
|
YAHOO.util.Dom.removeClass(this, cal.Style.CSS_CELL_HOVER);
|
|
YAHOO.util.Dom.removeClass(row, "hilite-row");
|
|
}
|
|
|
|
YAHOO.example.calendar.cal1.render();
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
</head>
|
|
|
|
<body onload="init()">
|
|
<img id="logo" src="../img/logo.gif"/>
|
|
|
|
<div id="pageTitle">
|
|
<h3>Calendar Control</h3>
|
|
</div>
|
|
|
|
<div class="column left">
|
|
<h4>Row Highlight Implementation</h4>
|
|
|
|
<p>This example shows how to highlight the row of the current hover date, using CSS and some minor JavaScript event changes:</p>
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
<style>
|
|
/* highlight the whole row */
|
|
.yui-calendar tr.hilite-row td.calcell {
|
|
background-color:yellow;
|
|
}
|
|
|
|
/* highlight the current cell in the standard highlight color */
|
|
.yui-calendar tr.hilite-row td.calcellhover {
|
|
cursor:pointer;
|
|
color:#FFF;
|
|
background-color:#FF9900;
|
|
border:1px solid #FF9900;
|
|
}
|
|
|
|
/* make sure out of month cells don't highlight too */
|
|
.yui-calendar tr.hilite-row td.calcell.oom {
|
|
cursor:default;
|
|
color:#999;
|
|
background-color:#EEE;
|
|
border:1px solid #E0E0E0;
|
|
}
|
|
</style>
|
|
|
|
<script language="javascript">
|
|
var cal1;
|
|
|
|
function init() {
|
|
cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
|
|
|
|
/* Override the doCellMouseOver function (used for IE) to add row highlighting) */
|
|
cal1.doCellMouseOver = function(e, cal) {
|
|
var cell = this;
|
|
var row = cell.parentNode;
|
|
|
|
YAHOO.widget.Calendar_Core.prependCssClass(this, cal.Style.CSS_CELL_HOVER);
|
|
YAHOO.widget.Calendar_Core.prependCssClass(row, "hilite-row");
|
|
}
|
|
|
|
/* Override the doCellMouseOut function (used for IE) to remove row highlighting) */
|
|
cal1.doCellMouseOut = function(e, cal) {
|
|
var cell = this;
|
|
var row = cell.parentNode;
|
|
|
|
YAHOO.widget.Calendar_Core.removeCssClass(this, cal.Style.CSS_CELL_HOVER);
|
|
YAHOO.widget.Calendar_Core.removeCssClass(row, "hilite-row");
|
|
}
|
|
|
|
cal1.render();
|
|
}
|
|
</script>
|
|
</textarea>
|
|
</div>
|
|
|
|
|
|
<div class="column right">
|
|
<div style="margin-left:auto;margin-right:auto;width:150px">
|
|
<div id="cal1Container"></div>
|
|
<div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
|
|
<a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
|
|
<a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../../../docs/assets/dpSyntaxHighlighter.js"></script>
|
|
<script language="javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
</body>
|
|
</html> |