Location: PHPKode > projects > Runemaster > docs/element.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>第5章 エレメント</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="generator" content="DocBook XSL Stylesheets V1.73.2">
<link rel="start" href="index.html" title="Runemaster マニュアル">
<link rel="up" href="index.html" title="Runemaster マニュアル">
<link rel="prev" href="template.form.hidden.element.html" title="4.3. Hidden (隠し) データ">
<link rel="next" href="node.html" title="第6章 ノード">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<div class="navheader">
<table width="100%" summary="Navigation header">
<tr><th colspan="3" align="center">第5章 エレメント</th></tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="template.form.hidden.element.html">前のページ</a> </td>
<th width="60%" align="center"> </th>
<td width="20%" align="right"> <a accesskey="n" href="node.html">次のページ</a>
</td>
</tr>
</table>
<hr>
</div>
<div class="chapter" lang="ja">
<div class="titlepage"><div><div><h2 class="title">
<a name="element"></a>第5章 エレメント</h2></div></div></div>
<div class="toc">
<p><b>目次</b></p>
<dl>
<dt><span class="section"><a href="element.html#template.element.attribute">5.1. エレメントの属性</a></span></dt>
<dd><dl><dt><span class="section"><a href="element.html#set.attribute">5.1.1. 属性を追加する</a></span></dt></dl></dd>
</dl>
</div>
<div class="section" lang="ja">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="template.element.attribute"></a>5.1. エレメントの属性</h2></div></div></div>
<div class="section" lang="ja">
<div class="titlepage"><div><div><h3 class="title">
<a name="set.attribute"></a>5.1.1. 属性を追加する</h3></div></div></div>
<p>
      HTML コンテンツ内におけるエレメントとして示されるドキュメントは、
      その要素（タグ）内に様々な「属性」をあわせて所持することで、
      特定の意味を持つ内容として表現されます。
      例えば次のような、H1 要素に id 属性を付与し（そしてそれがスタイルを適応する情報として利用されて）タイトルとして表現されたものであったり、
      A 要素に href 要素を付与して他のHTTPリソースへのリンクを表現したりといった具合にです。
    </p>
<pre class="programlisting">
&lt;h1 id="title"&gt;Hello, World!&lt;/h1&gt;
&lt;a href="http://example.com/"&gt;Example Link&lt;/a&gt;</pre>
<p>
      Runemaster では指定する特定のエレメントに対して、
      属性の名称および値のセットをまとめて追加することができます。
    </p>
<p>
      この機能を利用するために HTML テンプレートへ何かしらの記述を行う必要は特にありません。
      強いてあげるならば、属性を追加する対象となるエレメントに対して、
      既に HTML ドキュメントとしてのマークアップが施されていることです。
      （ドキュメント内にユニークな存在であろう id 属性を付与する、
      まとめて追加する対象として共通の class 属性を付与する、など。）
    </p>
<p>
      属性の追加を行うには、プログラムより setAttribute メソッドを実行します。
      setAttribute メソッドへは、第一パラメータとして属性を追加したい対象となるエレメントを示す「セレクタルール」（後述します）をセットし、
      第二パラメータには、属性の名称とその値をプロパティおよび値とするオブジェクトをセットします。
    </p>
<p>
      次のコード例では、H1 向け、A 向けにそれぞれ属性セットとなるオブジェクトを作成し、
      setAttribute メソッドで追加処理を行っています。
      １つ目の setAttribute メソッドでは「id="title"」を持つエレメントをセレクタルールで指定しており、
      また２つ目の setAttribute メソッドでは A をもつ全てのエレメントを指定しています。
    </p>
<div class="example">
<a name="id343901"></a><p class="title"><b>例 5.1. エレメントへ属性を追加</b></p>
<div class="example-contents">
<div class="variablelist"><dl>
<dt><span class="term">PHP コード</span></dt>
<dd><pre class="programlisting">
$master = new Rune_Master('/path/to/templateDirectory');

$h1Attribute = new stdClass();
$h1Attribute-&gt;lang = 'ja';

$linkAttribute = new stdClass();
$linkAttribute-&gt;class = 'external';

$master-&gt;setAttribute('#title', $h1Attribute);
$master-&gt;setAttribute('a', $linkAttribute);
$master-&gt;cast('example');</pre></dd>
</dl></div>
<div class="variablelist"><dl>
<dt><span class="term">実行結果</span></dt>
<dd><pre class="programlisting">
&lt;h1 id="title" lang="ja"&gt;Hello, World!&lt;/h1&gt;
&lt;a href="http://example.com/" class="external"&gt;Example Link&lt;/a&gt;</pre></dd>
</dl></div>
</div>
</div>
<br class="example-break"><p>
      エレメントを指定するために利用するセレクタルールは、以下の表のようなものがあります。
      これらセレクタルールは、Runemaster 内で利用されているライブラリである
      PHP Simple HTML DOM Parser (<a class="ulink" href="http://simplehtmldom.sourceforge.net/" target="_top">http://simplehtmldom.sourceforge.net/</a>) の仕組みに基づいたものとなっています。
      そしてそれは、Javascript ライブラリの jQuery (<a class="ulink" href="http://jquery.com/" target="_top">http://jquery.com/</a>) で利用されている「セレクタ」構文に似た仕様となっています。
    </p>
<div class="table">
<a name="id343970"></a><p class="title"><b>表 5.1. セレクタルール例</b></p>
<div class="table-contents"><table summary="セレクタルール例" border="1">
<colgroup>
<col>
<col>
</colgroup>
<thead><tr>
<th align="center">種類</th>
<th align="center">セレクタ例</th>
<th align="center">エレメント例</th>
</tr></thead>
<tbody>
<tr>
<td>
              エレメント（要素、タグ）名称
            </td>
<td>
              span
            </td>
<td>
              ドキュメント内の &lt;span&gt;
            </td>
</tr>
<tr>
<td rowspan="2" valign="top">
              id 属性
            </td>
<td>
              #foo
            </td>
<td>
              id="foo" を持つエレメント
            </td>
</tr>
<tr>
<td>
              span#foo
            </td>
<td>
              id="foo" を持つ &lt;SPAN&gt;
            </td>
</tr>
<tr>
<td rowspan="2" valign="top">
              class 属性
            </td>
<td>
              .foo
            </td>
<td>
              class="foo" を持つエレメント
            </td>
</tr>
<tr>
<td>
              span.foo
            </td>
<td>
              class="foo" を持つ &lt;span&gt;
            </td>
</tr>
<tr>
<td rowspan="2" valign="top">
              指定する属性
            </td>
<td>
              [name]
            </td>
<td>
              name 属性を持つエレメント
            </td>
</tr>
<tr>
<td>
              input[name]
            </td>
<td>
              name 属性を持つ &lt;INPUT&gt;
            </td>
</tr>
<tr>
<td rowspan="5" valign="top">
              指定する属性と値
            </td>
<td>
              [name="foo"]
            </td>
<td>
              name="foo" を持つエレメント
            </td>
</tr>
<tr>
<td>
              [name!="foo"]
            </td>
<td>
              name="foo" を持たないエレメント
            </td>
</tr>
<tr>
<td>
              [name^="foo"]
            </td>
<td>
              foo から始まる name 属性を持つエレメント
            </td>
</tr>
<tr>
<td>
              [name$="foo"]
            </td>
<td>
              foo で終わる name 属性を持つエレメント
            </td>
</tr>
<tr>
<td>
              [name*="foo"]
            </td>
<td>
              foo を含む name 属性を持つエレメント
            </td>
</tr>
<tr>
<td>
              内部のエレメント
            </td>
<td>
              table.foo tr
            </td>
<td>
              &lt;TABLE class="foo"&gt; 内の &lt;TR&gt;
            </td>
</tr>
</tbody>
</table></div>
</div>
<br class="table-break">
</div>
</div>
</div>
<div class="navfooter">
<hr>
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="template.form.hidden.element.html">前のページ</a> </td>
<td width="20%" align="center"> </td>
<td width="40%" align="right"> <a accesskey="n" href="node.html">次のページ</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">4.3. Hidden (隠し) データ </td>
<td width="20%" align="center"><a accesskey="h" href="index.html">ホーム</a></td>
<td width="40%" align="right" valign="top"> 第6章 ノード</td>
</tr>
</table>
</div>
</body>
</html>
100% Free PHP Newsletter Script! Download now!
Return current item: Runemaster