リビジョンの比較

tree

リビジョン 48950:

リビジョン 48950 (編集者: Marsf / 編集日時:

リビジョン 48951:

リビジョン 48951 (編集者: woby / 編集日時:

タイトル:
tree
tree
URL スラッグ:
XUL/tree
XUL/tree
タグ:
"XUL Reference", "XUL Elements"
"XUL Reference", "XUL Elements"
内容:

リビジョン 48950
リビジョン 48951
n11      表のような要素、あるいは階層的な要素の行を保持するために使用するコンテナ。tree は行と列をいくつでも含みます。trn11      表のような要素、あるいは階層的な要素の行を保持するために使用するコンテナ。tree は行と列をいくつでも含みます。tr
>ee の各行は、親から字下げして表示される子の行を含みます。他の要素と異なり、tree 内に表示るデータはタグを使って指定される>ee の各行は、親から字下げして表示される子の行を含みます。他の要素と異なり、tree 内に表示されるデータはタグを使って指定され
>のではなく、View オブジェクトによって確定されます。View オブジェクトは {{ interface("nsITreeVie>るのではなく、View オブジェクトから決定されます。View オブジェクトは {{ interface("nsITreeView
>w") }} インタフェースを実装しています。View は tree に表示するデータのために検索されます。tree の使用方法は>") }} インタフェースを実装しています。tree にデータを表示するために、View を検索します。tree の使用方法は、下
>、下の一覧のようにいくつかあります。2 列目はその tree の {{ XULProp("view") }} プロパティ経由で利用>の一覧のようにいくつかあります。2 列目はその tree の {{ XULProp("view") }} プロパティ経由で利用可能
>可能なインタフェースの一覧です。3 列目は {{ XULElem("treeitem") }} 要素が使われるかどうかを示します。>なインタフェースの一覧です。3 列目は {{ XULElem("treeitem") }} 要素が使われるかどうかを示します。
n43            このツリーは {{ XULElem("treechildren") }} 要素のなかにおかれる {{ XUn43            このツリーは {{ XULElem("treechildren") }} 要素のなかに {{ XULEle
>LElem("treeitem") }} 要素を持ちます。この場合、より専門化した種類のビューであるコンテントビュー(インターフェ>m("treeitem") }} 要素を持ちます。この場合、より化した種類のビューであるコンテントビュー( {{ interfa
>ース {{ interface("nsITreeContentView") }} を実装しています) は {{ XULElem(">ce("nsITreeContentView") }} インターフェースを実装しています) は {{ XULElem("treei
>treeitem") }} 要素とそれらの子孫をツリーに表示されるデータを定義するために使用します。しかし、ツリーアイテムが直接表>tem") }} 要素とそれらの子孫をツリーに表示されるデータを定義するために使用します。しかし、ツリーアイテムが直接表示される
>示されるわけではありません。それらはコンテントビューのデータとしてのみ使われます。しかし、ツリーアイテムが変更されると、コンテント>わけではありません。それらはコンテントビューのデータとしてのみ使われます。しかし、ツリーアイテムが変更されると、コンテントビューは
>ビューは自動的にツリーを更新するでしょう。>自動的にツリーを更新するでしょう。
n57            このツリーは RDF データソースから生成されます。{{ XULAttr("datasources") }n57            このツリーは RDF データソースから生成されます。{{ XULAttr("datasources") }
>} 属性をもち {{ XULAttr("flags") }} 属性に <code>dont-build-content</code>} 属性をもち {{ XULAttr("flags") }} 属性に <code>dont-build-content</code
>> が指定されたとき、それが使われます。このツリーではデータは RDF データソースから直接ます。DOM {{ XULElem(>> が指定されたとき、それが使われます。このツリーでは RDF データソースのデータを直接使います。DOM {{ XULElem(
>"treeitem") }} は作られません。テンプレートが treeitem 要素をコンテントを定義するために使っていたとして>"treeitem") }} は作られません。テンプレートが treeitem 要素をコンテントを定義するために使っていたとしても
>も、それらの DOM ノードは作られません。これは RDF によって生成された大量の行をもつツリーに使われるべきタイプです。>、それらの DOM ノードは作られません。これは RDF によって生成された大量の行をもつツリーに使われるべきタイプです。
n71            このツリーは RDF データソースから作られます。そrは前のタイプに似ていますが、ツリーが属性にをもっていn71            このツリーは RDF データソースから作られます。前の種類に似ていますが、ツリーが {{ XULAttr(
>ないときに使われます。DOm は作られうため、データに RDF 関数か DOM 関数でアクセスできます。このタイプは RDF で生>"flags") }} 属性に <code>dont-build-content</code> をもっていないときに使われます。D
>成される究めて少しの行しかもたないツリーに最適です。>OM {{ XULElem("treeitem") }} が作られるため、データに RDF 関数や DOM 関数でアクセスできます
 >。このタイプは RDF で生成される、ごく少数の行しかもたないツリーに最適です。
n85            このツリーのためには {{ interface("nsITreeView") }} インタフェースを自身でn85            このツリーに対しては {{ interface("nsITreeView") }} インタフェースを自身で
>実装します。このツリーのデータはこのカスタムビューから読み出されます。カスタムビューはツリーの {{ XULProp("view">実装します。このツリーのデータはこのカスタムビューから読み出されます。カスタムビューはツリーの {{ XULProp("view"
>) }} プロパティを設定することでツリーに加えらべきです。>) }} プロパティを設定することでツリーにべきです。
nn123    <div>
124      {{ 英語版章題("Examples") }}
125    </div>
nn129    <div>
130      {{ 英語版章題("A tree with several columns") }}
131    </div>
nn163    <p>
164      {{ 英語版章題("A tree with several columns and nested items") }}
165    </p>
nn204    <div>
205      {{ 英語版章題("Attributes") }}
206    </div>
nn213    <div>
214      {{ 英語版章題("Properties") }}
215    </div>
nn222    <div>
223      {{ 英語版章題("Methods") }}
224    </div>
nn231    <div>
232      {{ 英語版章題("Related") }}
233    </div>
nn251    <div>
252      {{ 英語版章題("Script Examples") }}
253    </div>
tt308        チェックボックスを選択し、そのセルのテキストを表示するには、次のようにします。
309      </p>
310      <p>
311        XUL (treeの):
312      </p>
313      <pre class="deki-transform">
314&lt;?xml version="1.0"?&gt;
315&lt;?xml-stylesheet href="chrome://global/skin/" type="text/css"?
 >&gt;
316&lt;?xml-stylesheet href="file://C:/main.css" type="text/css"?&gt
 >;                                    
317&lt;window xmlns="http://www.mozilla.org/keymaster/gatekeeper/the
 >re.is.only.xul"&gt;
318 
319&lt;row&gt;&lt;button label="GetRowValues" oncommand="getrowcellv
 >alues();"/&gt;&lt;/row&gt;
320 &lt;tree flex="1" editable="true" id="mytree"&gt;
321 
322  &lt;treecols&gt;
323    &lt;treecol label="Active" type="checkbox" editable="true" /&
 >gt;
324    &lt;treecol label="Name" flex="1" id="name"/&gt;
325  &lt;/treecols&gt;
326 
327  &lt;treechildren&gt;
328    &lt;treeitem&gt;
329      &lt;treerow&gt;
330        &lt;treecell value="false"/&gt;
331        &lt;treecell label="Alice"/&gt;
332      &lt;/treerow&gt;
333    &lt;/treeitem&gt;
334    &lt;treeitem&gt;
335      &lt;treerow&gt;
336        &lt;treecell value="false"/&gt;
337        &lt;treecell label="Bob"/&gt;
338      &lt;/treerow&gt;
339    &lt;/treeitem&gt;
340  &lt;/treechildren&gt;
341 
342&lt;/tree&gt;
343 
344&lt;/window&gt;
345</pre>
346      <p>
347        CSS:
348      </p>
349      <pre class="deki-transform">
350treechildren::-moz-tree-checkbox {
351  /* 選択されていないチェックボックスのtreecell。*必ず* treechildren::-moz-tree-check
 >box(checked)より前に指定すること。そうしないと効果がなくなる。 */
352  list-style-image: url("")
353}
354treechildren::-moz-tree-checkbox(checked) {
355  /* 選択されたチェックボックスのtreecell。cbox-check.gifは、Mac OS XのFirefox 1~3で
 >は使えない。自身の拡張機能などの画像のURLを指定すべき。 */
356  list-style-image: url("chrome://global/skin/checkbox/cbox-check
 >.gif");
357}
358treechildren::-moz-tree-checkbox(disabled) {
359  /* 無効なチェックボックスのtreecell。cbox-check-dis.gifも、Mac OS XのFirefox 1~
 >3では使えない。 */
360  list-style-image: url("chrome://global/skin/checkbox/cbox-check
 >-dis.gif")
361}
362 
363treechildren::-moz-tree-row(selected)            { background-col
 >or: #FFFFAA; }
364treechildren::-moz-tree-row(odd)                 { background-col
 >or: #EEEEEE; }
365treechildren::-moz-tree-row(odd, selected)       { background-col
 >or: #FFFFAA; }
366treechildren::-moz-tree-cell-text(selected)      { color: #000000
 >; }
367treechildren::-moz-tree-cell-text(odd, selected) { color: #000000
 >; }
368treechildren::-moz-tree-row(hover) {background-color: #FFFFAA !im
 >portant;}
369 
370treechildren:-moz-tree-column {
371  border-right:1px solid rgb(220,220,220) !important;
372}
373</pre>
374      <p>
375        JavaScript (選択された列のテキストを取得する):
376      </p>
377      <div>
378        <pre class="script deki-transform">
379function getrowcellvalues() {
380  var tree = document.getElementById('mytree');
381  for (var i = 0; i &lt; tree.view.rowCount; i++) {
382    if (tree.view.getCellValue(i, tree.columns.getColumnAt(0)) ==
 > 'true'){
383      alert(tree.view.getCellText(i, tree.columns.getNamedColumn(
 >"name")));
384    }
385  }
386}
387</pre>
388      </div>
389      <p>
390        この方法で、選択されたチェックボックスと対応する列のtreecellの値を取得できます。
391      </p>
392      <p>

前に戻る