집 > 기사 > 웹 프론트엔드 > HTML 구성 요소(HTML COMPONENTS) 3개

HTML 구성 요소(HTML COMPONENTS) 3개

黄舟원래의: 2016-12-17 13:48:211207검색

===톱페이지===

이제 캘린더 애플리케이션 예제에 초점을 맞춥니다. 애플리케이션에는 4개의 서로 다른 페이지가 포함되어 있습니다. canlendar.html은 Calendar.htc가 포함된 최상위 HTML 문서입니다. HTC와 canlendar.htc에는 두 개의 다른 HTC인 day.htc와 today.htc, Calendar.html이 포함되어 있습니다.
내용은 다음과 같습니다.

HTML xmlNS:MYCAL> 
<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.</P> 

<MYCAL:CALENDAR></MYCAL:CALENDAR> 

</BODY> 
</HTML>

몇 가지 사항을 확인해야 합니다. 중요 사항: 먼저, 호출하려는 HTC에 정의된 네임스페이스를 사용해야 합니다. MYCAL이므로 6a74014ee44f5deb5894267f99b68016 XMLNS 식별자가 에 나타나야 합니다.
　f442b94949c0d646ac360291f638c46f 태그는 다른 일반 태그와 구별하기 위해 물음표로 시작합니다. 이 태그를 사용하려면 브라우저가 지정된 HTC를 가져와야 합니다. HTC는 여러 네임스페이스를 가질 수 있으므로 시기를 지정해야 합니다. 사용된 네임스페이스 가져오기(MYCAL):

d1da7a5118e510a4595ed5b5805823e1

HTC의 주요 장점 중 하나는 모든 입력 파일을 가져올 때까지 브라우저가 페이지 구문 분석을 일시 중단한다는 것입니다. 페이지 처리의 비동기 메커니즘은 많은 문제를 야기합니다. 브라우저는 페이지 구문 분석을 시작하기 전에 요소가 완전히 표시될 때까지 기다리지 않습니다. 어떤 이유로든 객체가 준비되어 있으면 객체가 존재하지 않거나 객체가 액세스하려는 메서드를 지원하지 않는다는 오류가 발생합니다. 그럼에도 불구하고, ?IMPORT 이는 동기식이며 브라우저는 페이지를 가져오고 콘텐츠가 준비될 때까지 기다립니다.

페이지에서 유일하고 중요한 줄은 사용자 정의 태그 MYCAL:CALENDAR를 호출하는 것입니다.

f815752b699473ba4718f31ac0c9b58ac315d85ac7fc8f273e9e4963bb4dd146

페이지를 이미 가져왔으므로 이 호출은 Calendar.htc에 지정된 캘린더를 생성합니다.

첫 번째 라인에는 HTC가 사용할 XML 네임스페이스가 포함되어 있습니다. 이러한 네임스페이스에는 이 페이지 자체에서 사용되는 네임스페이스와 페이지에서 호출해야 하는 네임스페이스(ANYDAY 및 TODAY)가 포함됩니다. ), 네임스페이스는 HTC 파일 이름과 동일할 필요는 없습니다. 다음으로 다음 HTC를 가져옵니다.

<HTML XMLNS:MYCAL XMLNS:TODAY XMLNS:ANYDAY> 
<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>

이 줄을 구문 분석할 때 브라우저는 페이지 구문 분석(동기 가져오기)을 계속하기 전에 가져올 파일을 가져올 때까지 기다립니다.

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

그런 다음 CALENDAR 사용자 정의 태그를 정의합니다.

PUBLIC:COMPONENT는 CALENDAR 태그를 설명하는 데 사용되며 시작 태그와 종료 태그 사이에 추가할 수 있습니다. 이벤트 CALENDAR 태그에 첨부된 oncontentready 이벤트는 Calendar.htc 파일을 완전히 가져오면 가져오고 구문 분석됩니다. 지정된 처리 시간은 Javascript에 정의된 함수입니다: fnInit():

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

viewLink에 의해 지정된 값은 HTML 구성 요소의 기초이며 HTML 구성 요소를 호출하는 페이지를 연결하며 다른 속성에 HTML을 할당합니다. viewLink 속성. 이 연결로 인해 HTC 구성 요소를 만들고 페이지 액세스를 포함할 수 있습니다.

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

달력의 레이어에 대해서는 나중에 설명하겠습니다. 달력에서 이번 달의 날짜 상자는 다른 날짜 상자 및 빈 상자와 스타일이 다르지만 포함 페이지에서 이를 달성하기 위해 우선순위 규칙을 사용하며 HTML 구성 요소는 충돌하는 스타일 정의를 무시합니다. Calendar.htc의 스타일 정의는 다음과 같습니다.

이제 이 정의를 달력과 비교해 보세요. 빈 상자의 색상만 황갈색입니다. 우리가 호출하는 HTC는 이러한 정의를 무시하며 호출되는 페이지에는 페이지 사용자 정의가 포함되어 있습니다. TODAY:DAY 다음 호출 HTML 구성 요소:

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

edd239074ee3109b7525309e4019561cdf6879774f7e535618eec112bf43935a

ANYDAY:DAY에 대한 동일한 호출도 단순히 해당 월의 날짜를 전달합니다.

bb11d81a527ca49a5b13cd08c89c97177710ec56a4b2af8032401628a11805db

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

성명：

이전 기사：HTML 구성요소 2부다음 기사：HTML 구성요소 2부

HTML 구성 요소(HTML COMPONENTS) 3개

관련 기사