Документация для разработчиков
Темная тема

Примеры

Простая подсказка

<div id="box" style="background: #fff073; width: 300px; height: 200px;"></div>
<script>
(function() {
	var spotlight = new BX.SpotLight({
		targetElement: BX("box"),
		content: "Текст подсказки",
		targetVertex: "bottom-right"
	});
	spotlight.show();
})();
</script>

Подсветка нового пункта в меню

<button id="menu-button" style="width: 200px; height: 50px; border: 1px solid #ccc;">Меню</button>
<script>
(function() {

	"use strict";

	BX.namespace("BX.MyModule");

	BX.MyModule.MyButton = function()
	{
		this.button = BX("menu-button");
		BX.bind(this.button, "click", this.handleButtonClick.bind(this));

		this.menu = new BX.PopupMenuWindow(
			"mymenu",
			this.button,
			[
				{ text: "Лондон" },
				{ text: "Нью Йорк" },
				{ text: "Торонто" },
				{ text: "Киев" },
				{ text: "Москва" },
				{ text: "Калининград", id: "kaliningrad" }
			],
			{
				events: {
					onAfterPopupShow: this.handleAfterPopupShow.bind(this),
					onPopupClose: this.handlePopupClose.bind(this)
				}
			}
		);

		this.spotlight = new BX.SpotLight({
			targetElement: this.button,
			targetVertex: "middle-right",
			events: {
				onTargetEnter: this.handleTargetEnter.bind(this)
			}
		});

		this.spotlight.show();
	};

	BX.MyModule.MyButton.prototype =
	{
		handleAfterPopupShow: function()
		{
			var targetItem = this.menu.getMenuItem("kaliningrad");
			var item = targetItem.getLayout().item;

			this.spotlight.setTargetElement(item);
			this.spotlight.setTargetVertex("middle-center");
			this.spotlight.adjustPosition();
		},

		handlePopupClose: function()
		{
			this.spotlight.setTargetElement(this.button);
			this.spotlight.setTargetVertex("middle-right");
			this.spotlight.adjustPosition();
		},

		handleButtonClick: function()
		{
			this.menu.show();
		},

		handleTargetEnter: function()
		{
			this.menu.show();
		}
	};

	BX.ready(function() {
		new BX.MyModule.MyButton();
	})

})();
</script>


Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
© «Битрикс», 2001-2024, «1С-Битрикс», 2024
Наверх