Places ツリーを作る
tree タグでツリーを作ったときに type="places" とし、スタイルシート content/places/places.css を読み込むと、XBLバインディングで Places ツリー本体の content/places/tree.xml が読み込まれる。Places ツリーには content/places/controller.js と content/places/treeView.js も必要で、それらは content/places/placesOverlay.xul でまとめて読み込める。よって基本は
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<?xml-stylesheet href="chrome://browser/content/places/places.css"?>
<?xml-stylesheet href="chrome://browser/skin/places/places.css"?>
<?xul-overlay href="chrome://browser/content/places/placesOverlay.xul"?>
<window>
<tree id="sample-view"
type="places">
<treecols>
<treecol primary="true"/>
</treecols>
<treechildren view="sample-view"/>
</tree>
</window>
skin の places.css は必ずしも必要では無いが、Firefox 本体と統一感を出すなら読み込むべき。
placesOverlay.xul には標準の右クリックメニューやツールチップも定義されている。
これだけだとまだ Places データと接続されていない。tree の place 属性に
Places URI を指定する。URI が完全に固定化されてるなら XUL に直接書いてもいいが、普通は JavaScript を使用する。
var aTree = document.getElementById("sample-view");
aTree.place = "place:queryType=1&folder=" + PlacesUIUtils.allBookmarksFolderId;
ツリークリック時の動作を設定
tree 要素に onclick 属性を設定する。
<tree id="sample-view"
type="places"
onclick="handleTreeClick(this, event);">
</tree>
function handleTreeClick(aTree, aEvent) {
if (aEvent.button === 2) {
return;
}
// クリックした行、列、オブジェクトを取得
var tbo = aTree.treeBoxObject;
var row = { }, col = { }, obj = { };
tbo.getCellAt(aEvent.clientX, aEvent.clientY, row, col, obj);
// twistyはフォルダ開閉の+画像の事。そこやツリー外をクリックした場合は何もしない。
if (row.value == -1 || obj.value == "twisty") {
return;
}
// クリックしたセル内のアイコンの座標を取得し、
// アイコンより左(文字方向によっては右)をクリックしていた場合は何もしない。
var x = { }, y = { }, w = { }, h = { };
tbo.getCoordsForCellItem(row.value, col.value, "image", x, y, w, h);
var isRTL = window.getComputedStyle(this.tree, null).direction == "rtl";
if (isRTL) {
if (aEvent.clientX > x.value) return;
} else {
if (aEvent.clientX < x.value) return;
}
// あとはお好きなように
var node = aTree.selectedNode;
}
最終更新:2014年11月03日 18:40