innov
/
BootstrapAdmin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

增加tooltip

This commit is contained in:
Argo-Lenovo 2016-11-27 16:50:07 +08:00
parent 1d70530626
commit 758c1e906d
12 changed files with 527 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Bootstrap.Admin/Bootstrap.Admin.csproj
View File

@ -125,6 +125,8 @@
<Content Include="Content\css\login.css" />
<Content Include="Content\css\register.css" />
<Content Include="Content\css\tasks.css" />
<Content Include="Content\css\tipso.css" />
<Content Include="Content\css\tipso.min.css" />
<Content Include="Content\html\RegResult.html" />
<Content Include="Content\images\bg.jpg" />
<Content Include="Content\images\loading-sm.gif" />
@ -173,6 +175,8 @@
<Content Include="Content\js\longbow.dataentity.js" />
<Content Include="Content\js\moment-with-locales.js" />
<Content Include="Content\js\fileinput.zh.js" />
<Content Include="Content\js\tipso.js" />
<Content Include="Content\js\tipso.min.js" />
<Content Include="Global.asax" />
<Content Include="Content\fonts\glyphicons-halflings-regular.woff2" />
<Content Include="Content\fonts\glyphicons-halflings-regular.woff" />

72
Bootstrap.Admin/Content/css/tipso.css Normal file
View File

@ -0,0 +1,72 @@
/* Tipso Bubble Styles */
.tipso_bubble, .tipso_bubble > .tipso_arrow {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tipso_bubble {
position: absolute;
text-align: center;
border-radius: 4px;
z-index: 9999;
padding: 10px;
filter: alpha(opacity=80);
opacity: 0.8;
}
.tipso_style {
}
span.tipso_style {
cursor: pointer;
}
/* Tipso Bubble Div */
.tipso_bubble > .tipso_arrow {
position: absolute;
width: 0;
height: 0;
border: 8px solid;
pointer-events: none;
}
.tipso_bubble.top > .tipso_arrow {
border-top-color: #000;
border-right-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
top: 100%;
left: 50%;
margin-left: -8px;
}
.tipso_bubble.bottom > .tipso_arrow {
border-bottom-color: #000;
border-right-color: transparent;
border-left-color: transparent;
border-top-color: transparent;
bottom: 100%;
left: 50%;
margin-left: -8px;
}
.tipso_bubble.left > .tipso_arrow {
border-left-color: #000;
border-top-color: transparent;
border-bottom-color: transparent;
border-right-color: transparent;
top: 50%;
left: 100%;
margin-top: -8px;
}
.tipso_bubble.right > .tipso_arrow {
border-right-color: #000;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
top: 50%;
right: 100%;
margin-top: -8px;
}

1
Bootstrap.Admin/Content/css/tipso.min.css vendored Normal file
View File

@ -0,0 +1 @@
.tipso_bubble,.tipso_bubble>.tipso_arrow{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.tipso_bubble{position:absolute;text-align:center;border-radius:6px;z-index:9999;padding:10px}.tipso_style{cursor:help;border-bottom:1px dotted}.tipso_bubble>.tipso_arrow{position:absolute;width:0;height:0;border:8px solid;pointer-events:none}.tipso_bubble.top>.tipso_arrow{border-color:#000 transparent transparent;top:100%;left:50%;margin-left:-8px}.tipso_bubble.bottom>.tipso_arrow{border-color:transparent transparent #000;bottom:100%;left:50%;margin-left:-8px}.tipso_bubble.left>.tipso_arrow{border-color:transparent transparent transparent #000;top:50%;left:100%;margin-top:-8px}.tipso_bubble.right>.tipso_arrow{border-color:transparent #000 transparent transparent;top:50%;right:100%;margin-top:-8px}

18
Bootstrap.Admin/Content/js/Longbow.Common.js
View File

@ -147,22 +147,18 @@
messages: $.extend({}, messages),
highlight: function (element, errorClass, validClass) {
$(element).parents('.form-group').addClass(errorClass).removeClass(validClass);
$(element).tipso({
useTitle: false,
position: 'top',
background: '#a94442'
});
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents('.form-group').removeClass(errorClass).addClass(validClass);
$(element).popover('destroy');
$(element).tipso('hide').tipso('destroy');
},
errorPlacement: function (label, element) {
$(element).popover('destroy');
$(element).popover({
animation: true,
delay: { "show": 100, "hide": 100 },
container: 'form',
trigger: 'manual',
content: $(label).text(),
placement: 'auto'
});
$(element).popover('show');
$(element).tipso('update', 'content', $(label).text());
}
});
if (handler && $.isArray(handler.button)) {

2
Bootstrap.Admin/Content/js/common-scripts.js
View File

@ -15,7 +15,7 @@
$('#main-content, .content-body, body').animate({
scrollTop: 0
}, 200);
});
}).tipso({ position: 'left', background: '#333' });
// breadcrumb
var arch = $('#nav-accordion').find('a.active').last();

5
Bootstrap.Admin/Content/js/framework.js
View File

@ -35,7 +35,10 @@
if (that.options.validateForm && that.options.validateForm.constructor === String) {
var v = $('#' + that.options.validateForm);
var vf = v.validate();
vf.currentElements.each(function () { $(this).popover('destroy'); })
vf.currentElements.each(function () {
var $this = $(this);
if ($this.hasClass('tipso_style')) $this.tipso('hide').tipso('destroy');
})
vf.resetForm();
v.find('div.form-group').removeClass("has-error has-success");
}

423
Bootstrap.Admin/Content/js/tipso.js Normal file
View File

@ -0,0 +1,423 @@
/*!
* tipso - A Lightweight Responsive jQuery Tooltip Plugin v1.0.1
* Copyright (c) 2014 Bojan Petkovski
* http://tipso.object505.com
* Licensed under the MIT license
* http://object505.mit-license.org/
*/
; (function ($, window, document, undefined) {
var pluginName = "tipso",
defaults = {
speed: 400,
background: '#55b555',
color: '#ffffff',
position: 'top',
width: 200,
delay: 200,
offsetX: 0,
offsetY: 0,
content: null,
ajaxContentUrl: null,
useTitle: true,
onBeforeShow: null,
onShow: null,
onHide: null
};
function Plugin(element, options) {
this.element = $(element);
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this._title = this.element.attr('title');
this.mode = 'hide';
this.init();
}
$.extend(Plugin.prototype, {
init: function () {
var obj = this,
$e = this.element;
$e.addClass('tipso_style').removeAttr('title');
if (isTouchSupported()) {
$e.on('click' + '.' + pluginName, function (e) {
obj.mode == 'hide' ? obj.show() : obj.hide();
e.stopPropagation();
});
$(document).on('click', function () {
if (obj.mode == 'show') {
obj.hide();
}
});
} else {
$e.on('mouseover' + '.' + pluginName, function () {
obj.show();
});
$e.on('mouseout' + '.' + pluginName, function () {
obj.hide();
});
}
},
tooltip: function () {
if (!this.tipso_bubble) {
this.tipso_bubble = $(
'<div class="tipso_bubble"><div class="tipso_content"></div><div class="tipso_arrow"></div></div>'
);
}
return this.tipso_bubble;
},
show: function () {
var tipso_bubble = this.tooltip(),
obj = this,
$win = $(window);
if ($.isFunction(obj.settings.onBeforeShow)) {
obj.settings.onBeforeShow($(this));
}
tipso_bubble.css({
background: obj.settings.background,
color: obj.settings.color,
width: obj.settings.width
}).hide();
tipso_bubble.find('.tipso_content').html(obj.content());
reposition(obj);
$win.resize(function () {
reposition(obj);
});
obj.timeout = window.setTimeout(function () {
tipso_bubble.appendTo('body').stop(true, true).fadeIn(obj.settings
.speed, function () {
obj.mode = 'show';
if ($.isFunction(obj.settings.onShow)) {
obj.settings.onShow($(this));
}
});
}, obj.settings.delay);
},
hide: function () {
var obj = this,
tipso_bubble = this.tooltip();
window.clearTimeout(obj.timeout);
obj.timeout = null;
tipso_bubble.stop(true, true).fadeOut(obj.settings.speed,
function () {
$(this).remove();
if ($.isFunction(obj.settings.onHide) && obj.mode == 'show') {
obj.settings.onHide($(this));
}
obj.mode = 'hide';
});
},
destroy: function () {
var $e = this.element;
$e.off('.' + pluginName);
$e.removeData(pluginName);
$e.removeClass('tipso_style').attr('title', this._title);
},
content: function () {
var content,
$e = this.element,
obj = this,
title = this._title;
if (obj.settings.ajaxContentUrl) {
content = $.ajax({
type: "GET",
url: obj.settings.ajaxContentUrl,
async: false
}).responseText;
} else if (obj.settings.content) {
content = obj.settings.content;
} else {
if (obj.settings.useTitle === true) {
content = title;
} else {
content = $e.data('tipso');
}
}
return content;
},
update: function (key, value) {
var obj = this;
if (value) {
obj.settings[key] = value;
} else {
return obj.settings[key];
}
}
});
function isTouchSupported() {
var msTouchEnabled = window.navigator.msMaxTouchPoints;
var generalTouchEnabled = "ontouchstart" in document.createElement(
"div");
if (msTouchEnabled || generalTouchEnabled) {
return true;
}
return false;
}
function realHeight(obj) {
var clone = obj.clone();
clone.css("visibility", "hidden");
$('body').append(clone);
var height = clone.outerHeight();
clone.remove();
return height;
}
function reposition(thisthat) {
var tipso_bubble = thisthat.tooltip(),
$e = thisthat.element,
obj = thisthat,
$win = $(window),
arrow = 10,
pos_top, pos_left, diff;
switch (obj.settings.position) {
case 'top':
pos_left = $e.offset().left + ($e.outerWidth() / 2) - (tipso_bubble
.outerWidth() / 2);
pos_top = $e.offset().top - realHeight(tipso_bubble) - arrow;
tipso_bubble.find('.tipso_arrow').css({
marginLeft: -8
});
if (pos_top < $win.scrollTop()) {
pos_top = $e.offset().top + $e.outerHeight() + arrow;
tipso_bubble.find('.tipso_arrow').css({
'border-bottom-color': obj.settings.background,
'border-top-color': 'transparent'
});
tipso_bubble.removeClass('top bottom left right');
tipso_bubble.addClass('bottom');
} else {
tipso_bubble.find('.tipso_arrow').css({
'border-top-color': obj.settings.background,
'border-bottom-color': 'transparent'
});
tipso_bubble.removeClass('top bottom left right');
tipso_bubble.addClass('top');
}
break;
case 'bottom':
pos_left = $e.offset().left + ($e.outerWidth() / 2) - (tipso_bubble
.outerWidth() / 2);
pos_top = $e.offset().top + $e.outerHeight() + arrow;
tipso_bubble.find('.tipso_arrow').css({
marginLeft: -8
});
if (pos_top + realHeight(tipso_bubble) > $win.scrollTop() + $win.outerHeight()) {
pos_top = $e.offset().top - realHeight(tipso_bubble) - arrow;
tipso_bubble.find('.tipso_arrow').css({
'border-top-color': obj.settings.background,
'border-bottom-color': 'transparent'
});
tipso_bubble.removeClass('top bottom left right');
tipso_bubble.addClass('top');
} else {
tipso_bubble.find('.tipso_arrow').css({
'border-bottom-color': obj.settings.background,
'border-top-color': 'transparent'
});
tipso_bubble.removeClass('top bottom left right');
tipso_bubble.addClass(obj.settings.position);
}
break;
case 'left':
pos_left = $e.offset().left - tipso_bubble.outerWidth() - arrow;
pos_top = $e.offset().top + ($e.outerHeight() / 2) - (realHeight(
tipso_bubble) / 2);
tipso_bubble.find('.tipso_arrow').css({
marginTop: -8,
marginLeft: ''
});
if (pos_left < $win.scrollLeft()) {
pos_left = $e.offset().left + $e.outerWidth() + arrow;
tipso_bubble.find('.tipso_arrow').css({
'border-right-color': obj.settings.background,
'border-left-color': 'transparent',
'border-top-color': 'transparent',
'border-bottom-color': 'transparent'
});
tipso_bubble.removeClass('top bottom left right');
tipso_bubble.addClass('right');
} else {
tipso_bubble.find('.tipso_arrow').css({
'border-left-color': obj.settings.background,
'border-right-color': 'transparent',
'border-top-color': 'transparent',
'border-bottom-color': 'transparent'
});
tipso_bubble.removeClass('top bottom left right');
tipso_bubble.addClass(obj.settings.position);
}
break;
case 'right':
pos_left = $e.offset().left + $e.outerWidth() + arrow;
pos_top = $e.offset().top + ($e.outerHeight() / 2) - (realHeight(
tipso_bubble) / 2);
tipso_bubble.find('.tipso_arrow').css({
marginTop: -8,
marginLeft: ''
});
if (pos_left + arrow + obj.settings.width > $win.scrollLeft() +
$win.outerWidth()) {
pos_left = $e.offset().left - tipso_bubble.outerWidth() - arrow;
tipso_bubble.find('.tipso_arrow').css({
'border-left-color': obj.settings.background,
'border-right-color': 'transparent',
'border-top-color': 'transparent',
'border-bottom-color': 'transparent'
});
tipso_bubble.removeClass('top bottom left right');
tipso_bubble.addClass('left');
} else {
tipso_bubble.find('.tipso_arrow').css({
'border-right-color': obj.settings.background,
'border-left-color': 'transparent',
'border-top-color': 'transparent',
'border-bottom-color': 'transparent'
});
tipso_bubble.removeClass('top bottom left right');
tipso_bubble.addClass(obj.settings.position);
}
break;
}
if (pos_left < $win.scrollLeft() && (obj.settings.position == 'bottom' ||
obj.settings.position == 'top')) {
tipso_bubble.find('.tipso_arrow').css({
marginLeft: pos_left - 8
});
pos_left = 0;
}
if (pos_left + obj.settings.width > $win.outerWidth() && (obj.settings.position ==
'bottom' || obj.settings.position == 'top')) {
diff = $win.outerWidth() - (pos_left + obj.settings.width);
tipso_bubble.find('.tipso_arrow').css({
marginLeft: -diff - 8,
marginTop: ''
});
pos_left = pos_left + diff;
}
if (pos_left < $win.scrollLeft() && (obj.settings.position == 'left' ||
obj.settings.position == 'right')) {
pos_left = $e.offset().left + ($e.outerWidth() / 2) - (tipso_bubble.outerWidth() /
2);
tipso_bubble.find('.tipso_arrow').css({
marginLeft: -8,
marginTop: ''
});
pos_top = $e.offset().top - realHeight(tipso_bubble) - arrow;
if (pos_top < $win.scrollTop()) {
pos_top = $e.offset().top + $e.outerHeight() + arrow;
tipso_bubble.find('.tipso_arrow').css({
'border-bottom-color': obj.settings.background,
'border-top-color': 'transparent',
'border-left-color': 'transparent',
'border-right-color': 'transparent'
});
tipso_bubble.removeClass('top bottom left right');
tipso_bubble.addClass('bottom');
} else {
tipso_bubble.find('.tipso_arrow').css({
'border-top-color': obj.settings.background,
'border-bottom-color': 'transparent',
'border-left-color': 'transparent',
'border-right-color': 'transparent'
});
tipso_bubble.removeClass('top bottom left right');
tipso_bubble.addClass('top');
}
if (pos_left + obj.settings.width > $win.outerWidth()) {
diff = $win.outerWidth() - (pos_left + obj.settings.width);
tipso_bubble.find('.tipso_arrow').css({
marginLeft: -diff - 8,
marginTop: ''
});
pos_left = pos_left + diff;
}
if (pos_left < $win.scrollLeft()) {
tipso_bubble.find('.tipso_arrow').css({
marginLeft: pos_left - 8
});
pos_left = 0;
}
}
if (pos_left + obj.settings.width > $win.outerWidth() && (obj.settings.position ==
'left' || obj.settings.position == 'right')) {
pos_left = $e.offset().left + ($e.outerWidth() / 2) - (tipso_bubble.outerWidth() /
2);
tipso_bubble.find('.tipso_arrow').css({
marginLeft: -8,
marginTop: ''
});
pos_top = $e.offset().top - realHeight(tipso_bubble) - arrow;
if (pos_top < $win.scrollTop()) {
pos_top = $e.offset().top + $e.outerHeight() + arrow;
tipso_bubble.find('.tipso_arrow').css({
'border-bottom-color': obj.settings.background,
'border-top-color': 'transparent',
'border-left-color': 'transparent',
'border-right-color': 'transparent'
});
tipso_bubble.removeClass('top bottom left right');
tipso_bubble.addClass('bottom');
} else {
tipso_bubble.find('.tipso_arrow').css({
'border-top-color': obj.settings.background,
'border-bottom-color': 'transparent',
'border-left-color': 'transparent',
'border-right-color': 'transparent'
});
tipso_bubble.removeClass('top bottom left right');
tipso_bubble.addClass('top');
}
if (pos_left + obj.settings.width > $win.outerWidth()) {
diff = $win.outerWidth() - (pos_left + obj.settings.width);
tipso_bubble.find('.tipso_arrow').css({
marginLeft: -diff - 8,
marginTop: ''
});
pos_left = pos_left + diff;
}
if (pos_left < $win.scrollLeft()) {
tipso_bubble.find('.tipso_arrow').css({
marginLeft: pos_left - 8
});
pos_left = 0;
}
}
tipso_bubble.css({
left: pos_left + obj.settings.offsetX,
top: pos_top + obj.settings.offsetY
});
}
$[pluginName] = $.fn[pluginName] = function (options) {
var args = arguments;
if (options === undefined || typeof options === 'object') {
if (!(this instanceof $)) {
$.extend(defaults, options);
}
return this.each(function () {
if (!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
} else if (typeof options === 'string' && options[0] !== '_' && options !==
'init') {
var returns;
this.each(function () {
var instance = $.data(this, 'plugin_' + pluginName);
if (!instance) {
instance = $.data(this, 'plugin_' + pluginName, new Plugin(
this, options));
}
if (instance instanceof Plugin && typeof instance[options] ===
'function') {
returns = instance[options].apply(instance, Array.prototype.slice
.call(args, 1));
}
if (options === 'destroy') {
$.data(this, 'plugin_' + pluginName, null);
}
});
return returns !== undefined ? returns : this;
}
};
})(jQuery, window, document);

8
Bootstrap.Admin/Content/js/tipso.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

9
Bootstrap.Admin/Scripts/Profiles.js
View File

@ -90,7 +90,7 @@
if (result && options.key == '') {
result = $.parseJSON(result);
if ($.isArray(result)) {
var html = '<li class="{4}"><i class="fa fa-ellipsis-v"></i><div class="task-title"><span class="task-title-sp tooltips" data-placement="right" title="{1}">{2}</span><span class="badge badge-sm label-success">{0}</span><span class="task-value tooltips" data-placement="top" data-original-title="{3}">{3}</span><div class="pull-right hidden-phone"><button class="btn btn-danger btn-xs fa fa-trash-o" data-key="{1}" data-url="{5}"></button></div></div></li>';
var html = '<li class="{4}"><i class="fa fa-ellipsis-v"></i><div class="task-title"><span class="task-title-sp tipso_style" title="{1}">{2}</span><span class="badge badge-sm label-success">{0}</span><span class="task-value tipso_style" title="{3}">{3}</span><div class="pull-right hidden-phone"><button class="btn btn-danger btn-xs fa fa-trash-o" data-key="{1}" data-url="{5}"></button></div></div></li>';
var content = result.sort(function (x, y) {
return x.Key > y.Key ? 1 : -1;
}).map(function (ele) {
@ -134,15 +134,14 @@
}).join('');
$sortable.append($.format('<li class="title">{0}-{1}</li>', options.item.Desc, options.item.Key));
$sortable.append(content);
$('.tooltips').tooltip('destroy');
$('.tooltips').tooltip();
$('.tipso_style').tipso();
}
}
}
});
}
$('#refreshCache').click(function () { listCacheUrl(); }).trigger('click');
$('#clearCache').click(function () { listCacheUrl({ clear: true }); });
$('#refreshCache').tipso({ position: 'left' }).click(function () { listCacheUrl(); }).trigger('click');
$('#clearCache').tipso({ position: 'left' }).click(function () { listCacheUrl({ clear: true }); });
$sortable.on('click', '.btn', function () {
console.log($(this).attr('data-key'));
listCache({ key: $(this).attr('data-key'), url: $(this).attr('data-url') });

BIN
Bootstrap.Admin/Scripts/_references.js
View File

Binary file not shown.

2
Bootstrap.Admin/Views/Shared/Footer.cshtml
View File

@ -2,7 +2,7 @@
<footer class="site-footer">
<div class="text-center">
<span id="websiteFooter"></span>
<a id="gotoTop" href="#" class="go-top tooltips" data-placement="left" data-original-title="返回顶部">
<a id="gotoTop" href="#" class="go-top" title="返回顶部">
<i class="fa fa-angle-up"></i>
</a>
</div>

2
Bootstrap.Admin/Views/Shared/_Admin.cshtml
View File

@ -2,6 +2,7 @@
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section css {
<link href="~/Content/css/tipso.css" rel="stylesheet" />
<link href="~/Content/css/font-awesome.css" rel="stylesheet" />
<link href="~/Content/css/site.css" rel="stylesheet" />
<link href="~/Content/css/admin.css" rel="stylesheet" />
@ -13,6 +14,7 @@
<script src="~/Content/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="~/Content/js/jquery.scrollTo.js"></script>
<script src="~/Content/js/jquery.nicescroll.min.js"></script>
<script src="~/Content/js/tipso.js"></script>
<script src="~/Content/js/common-scripts.js"></script>
<script src="~/Content/js/log.js"></script>
<script src="~/Content/js/framework.js"></script>