ホームページ > 記事 > ウェブフロントエンド > HTMLコンポーネント(HTML COMPONENTS) 3つ
HTMLコンポーネント(HTML COMPONENTS) 3つ
- 黄舟オリジナル
- 2016-12-17 13:48:211200ブラウズ
===トップページ===
次に、カレンダー アプリケーションの例に焦点を当てます。このアプリケーションには 4 つの異なるページが含まれており、canlendar.html は、calendar.htc を含む最上位の HTML ドキュメントです。
HTC、そして canlendar.htc には、他の 2 つの 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 で定義された名前空間を使用する必要があります。canlendar.htc の名前空間は MYCAL であるため、XMLNS タグは 6a74014ee44f5deb5894267f99b68016 タグ内に存在する必要があります。
f442b94949c0d646ac360291f638c46f タグは、他の通常のタグと区別するために疑問符で始まります。このタグでは、ブラウザーが指定された HTC をインポートする必要があります。HTC には複数の名前空間があるため、その名前空間を指定する必要があります。インポート時に使用される名前空間 (MYCAL):
d1da7a5118e510a4595ed5b5805823e1
HTC の主な利点の 1 つは、すべての入力ファイルがインポートされるまでブラウザーがページの解析を一時停止することです。ページ処理の非同期メカニズムにより、ブラウザーは要素が完全に表示されるまで待機せずにページの解析を開始します。たとえば、オブジェクトを作成し、ページの下部にあるメソッドにアクセスします。何らかの理由でオブジェクトが存在しない、またはオブジェクトがアクセスしたいメソッドをサポートしていないことを示すエラーが表示されることがあります。とにかく、?IMPORT
これは同期的であり、ブラウザはページがインポートされてコンテンツの準備ができるまで待機します。
ページ上の唯一かつ重要な行は、カスタム タグ MYCAL:CALENDAR を呼び出すことです。
f815752b699473ba4718f31ac0c9b58ac315d85ac7fc8f273e9e4963bb4dd146
ページはすでにインポートされているため、この呼び出しにより、calendar.htc で指定されているカレンダーが作成されます。
HTC には他の HTC を含めることができることにお気付きかもしれません。上位 15 行:
<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> 最初の行は、HTC が使用する XML 名前空間にあります。これらの名前空間には、このページ自体で使用される名前空間と、ページが呼び出す必要がある名前空間 (ANYDAY および TODAY) が含まれます。
)、名前空間は HTC ファイル名と同じである必要はないことに注意してください。次に、これらの HTC をインポートします:
<?IMPORT NAMESPACE="ANYDAY" IMPLEMENTATION="day.htc"/> <?IMPORT NAMESPACE="TODAY" IMPLEMENTATION="today.htc"/>
これらの行を解析すると、ブラウザは、インポートされるファイルがインポートされるまで待機してから、ページの解析 (同期インポート) を続行します。
次に、CALENDAR カスタム タグを定義します。
<PUBLIC:COMPONENT tagName="CALENDAR"> <ATTACH EVENT="oncontentready" ONEVENT="fnInit()"/> </PUBLIC:COMPONENT>
PUBLIC:COMPONENT を使用して、開始タグと終了タグの間に、イベント oncontentready をカレンダーに追加できます。 .htc ファイルをすべてインポートして解析する場合、処理時間は Javascript で定義された関数: fnInit():
<SCRIPT LANGUAGE="JavaScript">
<!--
function
fnInit()
{
defaults.viewLink = document;
}
// -->
</SCRIPT> で指定される値が非常に重要であり、HTML コンポーネントの根幹となります。 HTML コンポーネント ページの場合、デフォルト オブジェクトには他の属性があり、別の場所でオーバーライドされます。この接続により、HTC コンポーネントとの間の相互アクセスを確立できます。を含むページ。
カレンダーのレイヤーについては後ほど説明します。カレンダーの当月の日ボックスには他の日ボックスや空のボックスとは異なるスタイルがありますが、優先順位ルールを使用してそれを含むページ内でそれを実現し、HTML コンポーネントは競合するスタイル定義を無視することに注意してください。 Calendar.htc のスタイル定義は次のとおりです。
<STYLE>
TD {
background-color:tan;
width:50;
height:50;
}
</STYLE> 次に、この定義をカレンダーと比較します。空のボックスの色のみが黄褐色になっています。呼び出した HTC はこれらの定義を無視し、呼び出されたページにはページのカスタマイズが組み込まれています。次の呼び出しは TODAY:DAY
HTML コンポーネント:
d61cf43a855e052a93cad934d5c1e329df6879774f7e535618eec112bf43935a
ANYDAY:DAY への同じ呼び出しも単に月の日を渡します。
上記は HTML、コンポーネント、および COMPONENTS の内容です。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。