1. Потилка инструментов (коробка приглашения)
Файл исходного кода:
Tooltip.js
Tooltip.scss
Принцип реализации:
1. Получите информацию о позиционировании элемента (вверху, слева, внизу, справа, ширина, высота и т. Д.)
2. Рассчитайте положение всплывающей подсказки, которая является одним из вверху, влево, внизу и справа.
3. Затем вычислите значение координаты на основе рассчитанного значения позиции
4. Примените значения координат к выявлению инструментов
Анализ исходного кода:
1. Владелец adocument: документ; Содержит два объекта: <Coctype>, DocumentElement (корневой узел)
2. $ .contains (doma, domb): определить, содержит ли Doma элементы Domb
3. Применяется метод offset.setoffset и используется параметр, поскольку при установке смещения его нельзя округлить.
4. $ ViewPort: отобразить элемент контейнера Tooltipr
5. GetPosition: эта функция получает информацию, связанную с координатами позиционирования элемента, такой как: сверху, слева, внизу, справа, ширина, высота, прокрутка и т. Д.
5.1. Используется метод GetBoundingClientRect, но этот метод может подключить ширину и высоту в IE8.
5.2. Если это тело, ширина и высота будут сброшены в окно
5.3. Исходный код заключается в следующем:
$ element = $ element || это. $ element // Если параметры не передаются, то элемент $ (элемент, который запускает событие подсказки инструментов) - это элемент var el = $ [0] var isbody = el.tagname == 'body' var elrect = el.getBoundingClientRect () if (elrect.width == null) { / /wieptrect in ie -al -spute o somt -so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so so wid null c См. https://github.com/twbs/bootstrap/issues/14093 elrect = $. {top: 0, слева: 0}: $ element.offset () var scroll = {scroll: isbody? document.documentelement.scrolltop || document.body.scrolltop: $ element.scrolltop ()} var outterdims = isbody? {ширина: $ (window) .width (), высота: $ (window) .height ()}: nullreturn $.6. GetCalcalculateOffset: вычисляет значение координаты подсказки, используя принцип ширины и складывания высоты для его реализации
6.1. Нижнее время
6.1.1. Верх - верхняя + высота элемента позиционирования (POS)
6.1.2. Слева - ширина элемента позиционирования (POS) /2 ширина подъема инструментов /2
6.2. Когда вершина
6.2.1. Верх-это высота элемента верхнего типа, который определяет элемент (POS).
6.2.2. Слева - ширина элемента позиционирования (POS) /2 ширина подъема инструментов /2
6.3. Когда осталось
6.3.1. Верх - верхний элемент позиционирования (POS) высота/2 высота подъема инструментов/2
6.3.2. Слева является шириной левого элемента подсказки, который находит элемент (POS).
6.4. Верно
6.4.1. Верх - верхний элемент позиционирования (POS) высота/2 высота подъема инструментов/2
6.4.2. Слева - ширина элемента позиционирования (POS)
6.5. Положение небольшого треугольника, как правило, составляет 50% от элемента. Однако, если подсказка спрятана слева, вверху, справа и внизу, его необходимо пересматривать и отрегулировать. Название метода: getViewPortAdjusteddelta
6.5.1. Сначала рассчитайте ширину или высоту переполнения
6.5.2. Затем вычислите значение Arrowdelta, скрыть значение * 2 Ширина вытягивания инструментов +
6.5.3. Установите значение верхнего или левого процента треугольника
2. Поповер (всплывающая коробка)
Файл исходного кода:
Popover.js
Popover.scss
Принцип реализации:
1. Унаследовать реализацию подсказки
2. С помощью дополнительного заголовка вы также можете настроить контент (интерактивные элементы управления, такие как вход и кнопка, могут быть вставлены в него)
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше приведено в этой статье, я надеюсь, что для всех будет полезно изучить программирование JavaScript.