HTML 구성요소 5부

ANYDAY 컴포넌트는 day, htc에 정의되어 있습니다. 이 컴포넌트는 Calendar 단위를 캡슐화한 것입니다. 구성 요소의 이름은 첫 번째 줄에 정의된 xml 네임스페이스에 따라 결정됩니다.

af8b09d53169814d6ea4623d5b34ab46

canlenar.htc와 마찬가지로 네임스페이스 정의가 하나만 있습니다. 그 이유는 이 페이지에서 다른 HTC를 호출할 필요가 없다는 것입니다. 즉, HCT는 사용자 정의 레이블입니다. 여기서는 DAY를 정의합니다. 실제로 HTML 구성 요소의 정의는 속성과 이벤트를 포함하는 사용자 정의 태그 동작의 정의입니다.

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

이벤트에 유의하세요. 콘텐츠 준비 완료 , 호출자 Calendar.htc가 day.htc 가져오기를 요청하고 완전히 가져오면 이 이벤트가 생성됩니다. 이벤트 처리기는 fnInit()입니다.

function fnInit() { 
document.body.innerHTML = element.value; 
document.body.className = "clsDay"; 
defaults.viewLink = document; 
element.appointments = ""; 
element.date = element.value; 
}

fnInit()는 많은 중요한 HTC 장을 보여줍니다. 첫 번째 줄은 호출 페이지의 innerHTML에 element.value를 할당합니다. 재산. HTML 구성 요소는 항상 요소 개체에 캡슐화됩니다. value 속성은 일반적으로 PROPERTY 태그에 정의되어 있으며 실제 값은 호출 페이지 canlendar.htc에서 전달됩니다.
텍스트 += '04a9424aea79d7e9b86559d6a25ece7cbb11d81a527ca49a5b13cd08c89c97177710ec56a4b2af8032401628a11805db02316988d1129bf85d55319dd82c6742'
셀 스타일은 두 번째 줄에 지정됩니다.

document.body.className = "clsDay"
스타일 클래스 clsDay 정의 이 페이지의 다른 곳:

<STYLE> 
.clsDay { 
width:50; 
height:50; 
background-color:lightyellow; 
align:center; 
text-align:right; 
} 
</STYLE>

달력의 날짜는 밝은 노란색으로 채워져 있으며 이는 HTC 형식의 지정된 모드가 호출자, 즉 달력에 의해 지배된다는 것을 의미합니다. htc.
fninit()의 세 번째 줄은 기본 개체의 viewlink 속성을 설정합니다. viewLink 속성은 HTML 구성 요소의 기초입니다. 이는 HTC 문서(day.htc)를 다른 HTML 구성 요소(calendar.htc)에 표시할 수 있습니다. ). viewLink 설정은 다음과 같습니다.

defaults.viewLink = document;

연결해야 하는 것은 전체 문서 개체라는 점에 유의하세요. fnInit()의 마지막 두 줄은 나중에 설명할 두 개의 내부 속성을 초기화합니다.

element.appointments = ""
element.date = element.value;

는 자체 표시에 사용됩니다. DAY HTML 구성 요소는 마우스 클릭과 관련됩니다:

c202bab475885e36209b21834e00cfc9

날짜를 클릭하면 사용자에게 해당 날짜의 약속을 추가하거나 기존 약속을 수정하라는 알림이 표시됩니다.

function fnShowAppts() { 
newAppointments = prompt("Add your 
appointment:", element.appointments); 
if (newAppointments != null) 
element.appointments = newAppointments; 
document.body.innerHTML = &#39;<FONT 
COLOR="red">&#39; + element.date + &#39;</FONT>&#39; + "<BR>" + &#39;<FONT 
SIZE="1">&#39; + element.appointments + &#39;</FONT>&#39;; 
}

여기서의 입력 메커니즘은 매우 원시적이며 user 약속 사양에 새 행 레이블(82c2f54f4cf245029ffb326befd49b3f)을 추가합니다. 그렇지 않으면 모두 한 줄에 표시됩니다. 마지막으로 innerHTML은 날짜 데이터(element.date)와 약속 지정(element.appointments)입니다. 연결 링크.
오늘 HTML 구성 요소(today.htc)는 ANYDAY 구성 요소(day.htc)와 매우 유사합니다. 유일한 차이점은 스타일 시트의 배경색이 연노란색이 아닌 분홍색이고 글꼴 색상이 빨간색이 아닌 파란색이라는 것입니다.
달력의 현재 날짜는 파란색 텍스트와 함께 분홍색으로 표시됩니다.

위 내용은 HTML COMPONENTS의 다섯 번째 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!