241 lines
5.8 KiB
JavaScript
241 lines
5.8 KiB
JavaScript
|
|
/*!
|
||
|
|
* Bootstrap 核心功能最小化实现
|
||
|
|
* 专为 Argon 主题优化
|
||
|
|
*/
|
||
|
|
(function($) {
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
// Tooltip 插件
|
||
|
|
var Tooltip = function(element, options) {
|
||
|
|
this.element = element;
|
||
|
|
this.options = $.extend({}, Tooltip.DEFAULTS, options);
|
||
|
|
this.init();
|
||
|
|
};
|
||
|
|
|
||
|
|
Tooltip.DEFAULTS = {
|
||
|
|
placement: 'top',
|
||
|
|
trigger: 'hover focus',
|
||
|
|
title: '',
|
||
|
|
delay: 0,
|
||
|
|
html: false,
|
||
|
|
container: false
|
||
|
|
};
|
||
|
|
|
||
|
|
Tooltip.prototype.init = function() {
|
||
|
|
var $element = $(this.element);
|
||
|
|
var title = $element.attr('title') || $element.data('original-title') || this.options.title;
|
||
|
|
|
||
|
|
if (!title) return;
|
||
|
|
|
||
|
|
$element.attr('data-original-title', title).removeAttr('title');
|
||
|
|
|
||
|
|
var self = this;
|
||
|
|
|
||
|
|
$element.on('mouseenter.tooltip', function() {
|
||
|
|
self.show();
|
||
|
|
});
|
||
|
|
|
||
|
|
$element.on('mouseleave.tooltip', function() {
|
||
|
|
self.hide();
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
Tooltip.prototype.show = function() {
|
||
|
|
var $element = $(this.element);
|
||
|
|
var title = $element.data('original-title');
|
||
|
|
|
||
|
|
if (!title) return;
|
||
|
|
|
||
|
|
var $tooltip = $('<div class="tooltip fade top in"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + title + '</div></div>');
|
||
|
|
$('body').append($tooltip);
|
||
|
|
|
||
|
|
var offset = $element.offset();
|
||
|
|
var elementWidth = $element.outerWidth();
|
||
|
|
var elementHeight = $element.outerHeight();
|
||
|
|
var tooltipWidth = $tooltip.outerWidth();
|
||
|
|
var tooltipHeight = $tooltip.outerHeight();
|
||
|
|
|
||
|
|
var top = offset.top - tooltipHeight - 10;
|
||
|
|
var left = offset.left + (elementWidth - tooltipWidth) / 2;
|
||
|
|
|
||
|
|
$tooltip.css({
|
||
|
|
position: 'absolute',
|
||
|
|
top: top,
|
||
|
|
left: left,
|
||
|
|
zIndex: 1070
|
||
|
|
});
|
||
|
|
|
||
|
|
$element.data('tooltip-element', $tooltip);
|
||
|
|
};
|
||
|
|
|
||
|
|
Tooltip.prototype.hide = function() {
|
||
|
|
var $element = $(this.element);
|
||
|
|
var $tooltip = $element.data('tooltip-element');
|
||
|
|
|
||
|
|
if ($tooltip) {
|
||
|
|
$tooltip.remove();
|
||
|
|
$element.removeData('tooltip-element');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// jQuery 插件定义
|
||
|
|
$.fn.tooltip = function(option) {
|
||
|
|
return this.each(function() {
|
||
|
|
var $this = $(this);
|
||
|
|
var data = $this.data('bs.tooltip');
|
||
|
|
var options = typeof option === 'object' && option;
|
||
|
|
|
||
|
|
if (!data) {
|
||
|
|
$this.data('bs.tooltip', (data = new Tooltip(this, options)));
|
||
|
|
}
|
||
|
|
|
||
|
|
if (typeof option === 'string') {
|
||
|
|
data[option]();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.tooltip.Constructor = Tooltip;
|
||
|
|
|
||
|
|
// Modal 插件
|
||
|
|
var Modal = function(element, options) {
|
||
|
|
this.element = element;
|
||
|
|
this.options = options;
|
||
|
|
};
|
||
|
|
|
||
|
|
Modal.prototype.show = function() {
|
||
|
|
var $element = $(this.element);
|
||
|
|
$element.addClass('show').css('display', 'block');
|
||
|
|
$('body').addClass('modal-open');
|
||
|
|
|
||
|
|
// 添加遮罩层
|
||
|
|
if (!$('.modal-backdrop').length) {
|
||
|
|
$('body').append('<div class="modal-backdrop fade show"></div>');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
Modal.prototype.hide = function() {
|
||
|
|
var $element = $(this.element);
|
||
|
|
$element.removeClass('show').css('display', 'none');
|
||
|
|
$('body').removeClass('modal-open');
|
||
|
|
$('.modal-backdrop').remove();
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.modal = function(option) {
|
||
|
|
return this.each(function() {
|
||
|
|
var $this = $(this);
|
||
|
|
var data = $this.data('bs.modal');
|
||
|
|
var options = typeof option === 'object' && option;
|
||
|
|
|
||
|
|
if (!data) {
|
||
|
|
$this.data('bs.modal', (data = new Modal(this, options)));
|
||
|
|
}
|
||
|
|
|
||
|
|
if (typeof option === 'string') {
|
||
|
|
data[option]();
|
||
|
|
} else if (option === null) {
|
||
|
|
data.show();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
// 自动初始化
|
||
|
|
$(document).on('click.modal.data-api', '[data-toggle="modal"]', function(e) {
|
||
|
|
var $this = $(this);
|
||
|
|
var href = $this.attr('href');
|
||
|
|
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, '')));
|
||
|
|
|
||
|
|
e.preventDefault();
|
||
|
|
$target.modal('show');
|
||
|
|
});
|
||
|
|
|
||
|
|
$(document).on('click.modal.data-api', '[data-dismiss="modal"]', function(e) {
|
||
|
|
$(this).closest('.modal').modal('hide');
|
||
|
|
});
|
||
|
|
|
||
|
|
})(jQuery);
|
||
|
|
|
||
|
|
// 添加必要的 CSS 样式
|
||
|
|
var modalStyles = `
|
||
|
|
<style>
|
||
|
|
.modal {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1050;
|
||
|
|
display: none;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow: hidden;
|
||
|
|
outline: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal.show {
|
||
|
|
display: block !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-backdrop {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1040;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
background-color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-backdrop.fade {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-backdrop.show {
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-open {
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tooltip {
|
||
|
|
position: absolute;
|
||
|
|
z-index: 1070;
|
||
|
|
display: block;
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
|
|
font-size: 0.875rem;
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tooltip.fade.top.in {
|
||
|
|
opacity: 0.9;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tooltip-arrow {
|
||
|
|
position: absolute;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
border-color: transparent;
|
||
|
|
border-style: solid;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tooltip.top .tooltip-arrow {
|
||
|
|
bottom: 0;
|
||
|
|
left: 50%;
|
||
|
|
margin-left: -5px;
|
||
|
|
border-width: 5px 5px 0;
|
||
|
|
border-top-color: #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tooltip-inner {
|
||
|
|
max-width: 200px;
|
||
|
|
padding: 3px 8px;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #000;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
`;
|
||
|
|
|
||
|
|
$(document).ready(function() {
|
||
|
|
$('head').append(modalStyles);
|
||
|
|
});
|