1

ツリービューを作成するためのjqueryプラグインであるjstreeを試しています。正常に動作しますが、内部の仕組みの一部を取得できません。そして、1 つの (一見) 単純なことが狂ったように私を悩ませます: フォルダ アイコンなどの画像はどこから来るのですか? つまり、テーマを定義しなくても、結果にはフォルダのデフォルト アイコンが表示されます。テーマをたとえばリンゴに変更すると、アイコンが変わります。しかし、これらの画像がどこから来たのかわかりません。テーマの css ファイルでそれらへの参照を見つけることを期待していましたが、そうではありません。

誰かがこれを説明できれば、できればそれらと、それらを参照して変更する方法を教えていただければ幸いです! 具体的には、アイコンを変更して、閉じたフォルダー用のアイコンと開いているフォルダー用の別のアイコンがあるようにしたいと考えています。

4

1 に答える 1

3

jsTree は、コア CSS をページに挿入します。ソースを表示すると、それが表示されます...デフォルトでは、デフォルトのテーマを使用し、.js場所に関連する画像を見つけます。

ここのソースでこれを行っているのを見ることができますhttp://code.google.com/p/jstree/source/browse/trunk/jquery.jstree.js#259

また、ソースには、アイコンを設定するさまざまなプラグインも表示されます。ソースurl(を参照して、これらすべてがどこで発生するかを確認してください。

画像自体d.pngに関しては、テーマ アイコン用に呼び出される画像ファイルが常に 1 つあります。すべてのアイコンはここから取得されます。これはCSS スプライト マップです。たとえば、リンゴのアイコンを見てみましょう。

.jstree-apple ins { background-image:url("d.png"); background-repeat:no-repeat; }

すべて<ins>の要素に対して背景を設定し、さまざまなタイプのノードに対して、スプライト マップの位置を調整するだけです。次に例を示します。

.jstree-apple .jstree-open > ins { background-position:-72px 0; }
.jstree-apple .jstree-closed > ins { background-position:-54px 0; }
.jstree-apple .jstree-leaf > ins { background-position:-36px 0; }

これが CSS スプライトの仕組みです。1 つの画像を使用して、その小さなセクションを表示します...さまざまなアイコンは、アイコンのサイズの同じ小さなセクションであり、画像内の異なる位置から始まります。

于 2010-08-16T11:24:54.097 に答える