HTML组件(HTML COMPONENTS)之七

===CALENDAR HTC===

 
<HEAD>
<?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/>
<?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>

<PUBLIC:COMPONENT tagName="CALENDAR">
<ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/>
</PUBLIC:COMPONENT>

<SCRIPT LANGUAGE="javascript">
<!--
function fnInit() {
defaults.viewLink = document;
}
// -->
</SCRIPT>

<STYLE>
TD {
background-color:tan;
width:50;
height:50;
}
</STYLE>
</HEAD>

<BODY>
<SCRIPT LANGUAGE="javascript">
<!--

// Copyright 1997 -- Tomer Shiran

setCal();

function leapYear(year) {
if (year % 4 == 0) {// basic rule
return true; // is leap year
}
/* else */ // else not needed when statement is "return"
return false; // is not leap year
}

function getDays(month, year) {
// create array to hold number of days in each month
var ar = new Array(12);
ar[0] = 31; // January
ar[1] = (leapYear(year)) ? 29 : 28; // February
ar[2] = 31; // March
ar[3] = 30; // April
ar[4] = 31; // May
ar[5] = 30; // June
ar[6] = 31; // July
ar[7] = 31; // August
ar[8] = 30; // September
ar[9] = 31; // October
ar[10] = 30; // November
ar[11] = 31; // December

// return number of days in the specified month (parameter)
return ar[month];
}

function getMonthName(month) {
// create array to hold name of each month
var ar = new Array(12);
ar[0] = "January";
ar[1] = "February";
ar[2] = "March";
ar[3] = "April";
ar[4] = "May";
ar[5] = "June";
ar[6] = "July";
ar[7] = "August";
ar[8] = "September";
ar[9] = "October";
ar[10] = "November";
ar[11] = "December";

// return name of specified month (parameter)
return ar[month];
}

function setCal() {
// standard time attributes
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var monthName = getMonthName(month);
var date = now.getDate();
now = null;

// create instance of first day of month, and extract the day on which it occurs
var firstDayInstance = new Date(year, month, 1);
var firstDay = firstDayInstance.getDay();
firstDayInstance = null;

// number of days in current month
var days = getDays(month, year);

// call function to draw calendar
drawCal(firstDay + 1, days, date, monthName, year);
}

function drawCal(firstDay, lastDate, date, monthName, year) {
// constant table settings
file://var headerHeight = 50 // height of the table's header cell
var border = 2; // 3D height of table's border
var cellspacing = 4; // width of table's border
var headerColor = "midnightblue"; // color of table's header
var headerSize = "+3"; // size of tables header font
var colWidth = 60; // width of columns in table
var dayCellHeight = 25; // height of cells containing days of the week
var dayColor = "darkblue"; // color of font representing week days
var cellHeight = 40; // height of cells representing dates in the calendar
var todayColor = "red"; // color specifying today's date in the calendar
var timeColor = "purple"; // color of font representing current time

// create basic table structure
var text = ""; // initialize accumulative variable to empty string
text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>'; // table settings
text += '<TH COLSPAN=7 HEIGHT=' + 10 + '>'; // create table header cell
text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>'; // set font for table header
text += monthName + ' ' + year;
text += '</FONT>'; // close table header's font settings
text += '</TH>'; // close header cell

// variables to hold constant settings
var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>';
openCol += '<FONT COLOR="' + dayColor + '">';
var closeCol = '</FONT></TD>';

// create array of abbreviated day names
var weekDay = new Array(7);
weekDay[0] = "Sun";
weekDay[1] = "Mon";
weekDay[2] = "Tues";
weekDay[3] = "Wed";
weekDay[4] = "Thu";
weekDay[5] = "Fri";
weekDay[6] = "Sat";

// create first row of table to set column width and specify week day
text += '<TR ALIGN="center" VALIGN="center">';
for (var dayNum = 0; dayNum < 7; ++dayNum) {
text += openCol + weekDay[dayNum] + closeCol;
}
text += '</TR>';

// declaration and initialization of two variables to help with tables
var dayOfMonth = 1;
var curCell = 1;

for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) {
text += '<TR ALIGN="right" VALIGN="top">';
for (var col = 1; col <= 7; ++col) {
if ((curCell < firstDay) || (dayOfMonth > lastDate)) {
text += '<TD></TD>';
curCell++
} else {
if (dayOfMonth == date) { // current cell represents today's date
text += '<TD><TODAY:DAY value=' + dayOfMonth + '></TODAY:DAY></TD>';
} else {
text += '<TD><ANYDAY:DAY value=' + dayOfMonth + '></ANYDAY:DAY></TD>';
}
dayOfMonth++;
}
}
text += '</TR>';
}

// close all basic table tags
text += '</TABLE>';
text += '</CENTER>';

// print accumulative HTML string
document.write(text);
}

// -->
</SCRIPT>
</BODY>
</HTML>

时间: 2024-11-29 08:08:42

HTML组件(HTML COMPONENTS)之七的相关文章

HTML组件(HTML COMPONENTS)之一

HTML 组件(HTML COMPONENTS)是IE5.0的主要扩展之一,其也最具革命性,微软的意图是用HTML组件来取代ACTIVEX控件,和ACTIVE控件一样,HTML组件是自持续封闭对象,可以一次开发任意使用,使用HTML组件有很多好处,本文将给您揭示其中的一些! HTML组件带入了很多新的术语.思想.对象.方法和属性,我将通过一个日历应用给您接受这些,这个日历应用显示当前月的日期.星期并且高亮度显示当前日期. ====HTML行为和HTC行为=== HTML组件封装了HTML内容,并

HTML组件(HTML COMPONENTS)之五

===ANYDAY 和 TODAY HTCs=== ANYDAY组件定义在day,htc中,该组件是日历单元的一个封装.组件的名字是由定义在第一行的XML命名空间决定的. <HTML XMLNS:ANYDAY> 正如canlenar.htc一样,你只有一个命名空间定义,原因是在该页不用调用其他的HTC,也就是说该HCT是叶子HTC,在这里我们定义的自定义标签是DAY,同样我们也定义它的行为,实际上,HTML组件的定义就是自定义标签行为的定义,该行为包括一个属性和一个事件: <PUBLIC

HTML组件(HTML COMPONENTS)之三

===最顶级页面=== 现在我们将我们注视的焦点转向我们的日历应用例子,该应用包括4个不同页面,canlendar.html为最顶级HTML文档,该页包含了calendar.htc HTC,而canlendar.htc有反过来包含两个别的HTC:day.htc和today.htc,calendar.html 内容如下: Click a day in the calendar to add or modify your schedule. <?XML:NAMESPACE PREFIX = MYCA

HTML组件(HTML COMPONENTS)之八

===TODAY HTC===  <HEAD> <PUBLIC:COMPONENT tagName="DAY"> <PROPERTY NAME="value"></PROPERTY> <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"></ATTACH> </PUBLIC:COMPONENT> &

HTML组件(HTML COMPONENTS)之六

====日历主页面===  <head> <title>Calendar Example</title> <?IMPORT NAMESPACE="MYCAL" IMPLEMENTATION="calendar.htc"/> </HEAD> <BODY> <P>Click a day in the calendar to add or modify your schedule.<

HTML组件(HTML COMPONENTS)之四

===编写日历一=== 当calendar.html调用 MYCAL:CALENDAR,当月的日历将会显示在页面中,函数setCal()是主要程序段,它初始化一些变量并调用drawCal()函数.我们也使用了三个别的函数:getMonthName(). getDays() 和 leapYear().让我们从最后一个函数开始: getDays()函数接收哪月值和哪年值,并且建立一个有12个元素的数组,用来存放每月的天数,哪一年用来决定是不是闰年,在闰年中二月是29天,而不是闰年是28天.该函数返回

HTML组件(HTML COMPONENTS)之二

===定义标记和命名空间=== HTC的基础是自定义标记,自定义标记的第一次出现是在IE5.0中,它可以让WEB作者通过与结构关联的一系列样式来定义文挡结构,例如:您可以定义一个新标记<RIGHT>(段落右对其) <HTML XMLNS:DOCJS> <HEAD> <STYLE> @media all { DOCJS\:RIGHT {text-align:right; width:100} } </STYLE> </HEAD> <

以增加收藏夹功能为实例,解析asp.net forums2结构流程及组件设计

asp.net|设计 td id="1" class="ControlPanelTabInactive" align="center" nowrap>            <a href="<%=Globals.GetSiteUrls().MyFavorites%>"><%=ResourceManager.GetString("MyFavorites_Title")%&

Web Components是个什么样的东西

前端组件化这个主题相关的内容已经火了很久很久,angular 刚出来时的 Directive 到 angular2 的 components,还有 React 的components 等等,无一不是前端组件化的一种实现和探索,但是提上议程的 Web Components 标准是个怎样的东西,相关的一些框架或者类库,如 React,Angular2,甚至是 x-tag,polymer 现在实现的组件化的东西和 Web Components 标准差别在哪里?我花时间努力地把现有的 W3C Web C