Где найти изображения плагинов jstree jquery? - PullRequest
1 голос
/ 16 августа 2010

Я пробую jstree, плагин jquery для создания дерева. Это работает хорошо, но я не могу понять некоторые внутренние механизмы этого. И одна (казалось бы) простая вещь беспокоит меня, как сумасшедшего: откуда берутся изображения для значков папок и т. Д.? Я имею в виду, что даже если я не определяю тему, в результатах все равно остаются значки по умолчанию для папок. И если я изменю тему, скажем, на apple, значки меняются. Но я понятия не имею, откуда эти изображения. Я бы ожидал найти ссылки на них в файлах css темы, но я не могу.

Если кто-нибудь может объяснить это, и, желательно, указать мне на них и как ссылаться и изменять их, я был бы признателен! В частности, я хочу иметь возможность изменять значки, чтобы один значок был для закрытой папки, а другой - для открытой папки.

1 Ответ

3 голосов
/ 16 августа 2010

jsTree внедряет основной CSS в страницу, если вы просматриваете источник, вы увидите его ... по умолчанию он использует тему по умолчанию и находит изображения, относящиеся к расположению .js.

Вы можете видеть это, делая это в источнике здесь http://code.google.com/p/jstree/source/browse/trunk/jquery.jstree.js#259

Также в источнике вы увидите различные плагины, устанавливающие иконки, просто просмотрите источник для url(, чтобы увидеть, где все это происходит.


Что касается самих изображений, всегда есть один файл изображения с именем d.png для значков тем, все значки взяты отсюда, это, например, карта спрайтов 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-спрайты: вы используете одно изображение и просматриваете его небольшой раздел ... разные значки - это один и тот же маленький раздел размером с значок, который начинается с другой позиции вобраз.

...