mirror of https://gitee.com/karson/fastadmin.git
启用slimScroll美化滚动条
PPPSCN
parent
a2b80d4113
commit
d6fd33f524
|
|
@ -989,6 +989,20 @@ table.table-nowrap thead > tr > th {
|
|||
.wipecache li a {
|
||||
color: #444444 !important;
|
||||
}
|
||||
div.pre {
|
||||
display: block;
|
||||
padding: 5px;
|
||||
margin: 0 0 5px;
|
||||
font-size: 11px;
|
||||
line-height: 1.42857143;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
color: #333333;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 3px;
|
||||
text-align: left;
|
||||
}
|
||||
/*修正开关关闭下的颜色值*/
|
||||
.btn-switcher.disabled {
|
||||
opacity: .6;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,4 +1,4 @@
|
|||
define(['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, undefined, Toastr, Layer, Lang) {
|
||||
define(['jquery', 'bootstrap', 'toastr', 'layer', 'lang', 'slimscroll'], function ($, undefined, Toastr, Layer, Lang, slimScroll) {
|
||||
var Fast = {
|
||||
config: {
|
||||
//toastr默认配置
|
||||
|
|
@ -6,7 +6,7 @@ define(['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, undefine
|
|||
"closeButton": true,
|
||||
"debug": false,
|
||||
"newestOnTop": false,
|
||||
"progressBar": false,
|
||||
"progressBar": true,
|
||||
"positionClass": "toast-top-center",
|
||||
"preventDuplicates": false,
|
||||
"onclick": null,
|
||||
|
|
@ -315,6 +315,17 @@ define(['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, undefine
|
|||
});
|
||||
|
||||
//公共代码
|
||||
$(function ($) {
|
||||
if (self === top) {
|
||||
$('div[role="main"]').slimScroll({height: $(window).height() + 'px'});
|
||||
} else {
|
||||
var ScrollHeight = $('iframe', parent.document).height();
|
||||
if (!ScrollHeight || ScrollHeight === 100) {
|
||||
ScrollHeight = $('.content-wrapper', parent.document).height();
|
||||
}
|
||||
$('div[role="main"]').slimScroll({height: ScrollHeight + 'px'});
|
||||
}
|
||||
});
|
||||
//配置Toastr的参数
|
||||
Toastr.options = Fast.config.toastr;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -652,7 +652,489 @@ define('../libs/require-css/css.min',[],function(){if("undefined"==typeof window
|
|||
}
|
||||
}));
|
||||
|
||||
define('fast',['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, undefined, Toastr, Layer, Lang) {
|
||||
/*! Copyright (c) 2011 Piotr Rochala (http://rocha.la)
|
||||
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
|
||||
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
|
||||
*
|
||||
* Version: 1.3.8
|
||||
*
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
$.fn.extend({
|
||||
slimScroll: function(options) {
|
||||
|
||||
var defaults = {
|
||||
|
||||
// width in pixels of the visible scroll area
|
||||
width : 'auto',
|
||||
|
||||
// height in pixels of the visible scroll area
|
||||
height : '250px',
|
||||
|
||||
// width in pixels of the scrollbar and rail
|
||||
size : '7px',
|
||||
|
||||
// scrollbar color, accepts any hex/color value
|
||||
color: '#000',
|
||||
|
||||
// scrollbar position - left/right
|
||||
position : 'right',
|
||||
|
||||
// distance in pixels between the side edge and the scrollbar
|
||||
distance : '1px',
|
||||
|
||||
// default scroll position on load - top / bottom / $('selector')
|
||||
start : 'top',
|
||||
|
||||
// sets scrollbar opacity
|
||||
opacity : .4,
|
||||
|
||||
// enables always-on mode for the scrollbar
|
||||
alwaysVisible : false,
|
||||
|
||||
// check if we should hide the scrollbar when user is hovering over
|
||||
disableFadeOut : false,
|
||||
|
||||
// sets visibility of the rail
|
||||
railVisible : false,
|
||||
|
||||
// sets rail color
|
||||
railColor : '#333',
|
||||
|
||||
// sets rail opacity
|
||||
railOpacity : .2,
|
||||
|
||||
// whether we should use jQuery UI Draggable to enable bar dragging
|
||||
railDraggable : true,
|
||||
|
||||
// defautlt CSS class of the slimscroll rail
|
||||
railClass : 'slimScrollRail',
|
||||
|
||||
// defautlt CSS class of the slimscroll bar
|
||||
barClass : 'slimScrollBar',
|
||||
|
||||
// defautlt CSS class of the slimscroll wrapper
|
||||
wrapperClass : 'slimScrollDiv',
|
||||
|
||||
// check if mousewheel should scroll the window if we reach top/bottom
|
||||
allowPageScroll : false,
|
||||
|
||||
// scroll amount applied to each mouse wheel step
|
||||
wheelStep : 20,
|
||||
|
||||
// scroll amount applied when user is using gestures
|
||||
touchScrollStep : 200,
|
||||
|
||||
// sets border radius
|
||||
borderRadius: '7px',
|
||||
|
||||
// sets border radius of the rail
|
||||
railBorderRadius : '7px'
|
||||
};
|
||||
|
||||
var o = $.extend(defaults, options);
|
||||
|
||||
// do it for every element that matches selector
|
||||
this.each(function(){
|
||||
|
||||
var isOverPanel, isOverBar, isDragg, queueHide, touchDif,
|
||||
barHeight, percentScroll, lastScroll,
|
||||
divS = '<div></div>',
|
||||
minBarHeight = 30,
|
||||
releaseScroll = false;
|
||||
|
||||
// used in event handlers and for better minification
|
||||
var me = $(this);
|
||||
|
||||
// ensure we are not binding it again
|
||||
if (me.parent().hasClass(o.wrapperClass))
|
||||
{
|
||||
// start from last bar position
|
||||
var offset = me.scrollTop();
|
||||
|
||||
// find bar and rail
|
||||
bar = me.siblings('.' + o.barClass);
|
||||
rail = me.siblings('.' + o.railClass);
|
||||
|
||||
getBarHeight();
|
||||
|
||||
// check if we should scroll existing instance
|
||||
if ($.isPlainObject(options))
|
||||
{
|
||||
// Pass height: auto to an existing slimscroll object to force a resize after contents have changed
|
||||
if ( 'height' in options && options.height == 'auto' ) {
|
||||
me.parent().css('height', 'auto');
|
||||
me.css('height', 'auto');
|
||||
var height = me.parent().parent().height();
|
||||
me.parent().css('height', height);
|
||||
me.css('height', height);
|
||||
} else if ('height' in options) {
|
||||
var h = options.height;
|
||||
me.parent().css('height', h);
|
||||
me.css('height', h);
|
||||
}
|
||||
|
||||
if ('scrollTo' in options)
|
||||
{
|
||||
// jump to a static point
|
||||
offset = parseInt(o.scrollTo);
|
||||
}
|
||||
else if ('scrollBy' in options)
|
||||
{
|
||||
// jump by value pixels
|
||||
offset += parseInt(o.scrollBy);
|
||||
}
|
||||
else if ('destroy' in options)
|
||||
{
|
||||
// remove slimscroll elements
|
||||
bar.remove();
|
||||
rail.remove();
|
||||
me.unwrap();
|
||||
return;
|
||||
}
|
||||
|
||||
// scroll content by the given offset
|
||||
scrollContent(offset, false, true);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
else if ($.isPlainObject(options))
|
||||
{
|
||||
if ('destroy' in options)
|
||||
{
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// optionally set height to the parent's height
|
||||
o.height = (o.height == 'auto') ? me.parent().height() : o.height;
|
||||
|
||||
// wrap content
|
||||
var wrapper = $(divS)
|
||||
.addClass(o.wrapperClass)
|
||||
.css({
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
width: o.width,
|
||||
height: o.height
|
||||
});
|
||||
|
||||
// update style for the div
|
||||
me.css({
|
||||
overflow: 'hidden',
|
||||
width: o.width,
|
||||
height: o.height
|
||||
});
|
||||
|
||||
// create scrollbar rail
|
||||
var rail = $(divS)
|
||||
.addClass(o.railClass)
|
||||
.css({
|
||||
width: o.size,
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
display: (o.alwaysVisible && o.railVisible) ? 'block' : 'none',
|
||||
'border-radius': o.railBorderRadius,
|
||||
background: o.railColor,
|
||||
opacity: o.railOpacity,
|
||||
zIndex: 90
|
||||
});
|
||||
|
||||
// create scrollbar
|
||||
var bar = $(divS)
|
||||
.addClass(o.barClass)
|
||||
.css({
|
||||
background: o.color,
|
||||
width: o.size,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
opacity: o.opacity,
|
||||
display: o.alwaysVisible ? 'block' : 'none',
|
||||
'border-radius' : o.borderRadius,
|
||||
BorderRadius: o.borderRadius,
|
||||
MozBorderRadius: o.borderRadius,
|
||||
WebkitBorderRadius: o.borderRadius,
|
||||
zIndex: 99
|
||||
});
|
||||
|
||||
// set position
|
||||
var posCss = (o.position == 'right') ? { right: o.distance } : { left: o.distance };
|
||||
rail.css(posCss);
|
||||
bar.css(posCss);
|
||||
|
||||
// wrap it
|
||||
me.wrap(wrapper);
|
||||
|
||||
// append to parent div
|
||||
me.parent().append(bar);
|
||||
me.parent().append(rail);
|
||||
|
||||
// make it draggable and no longer dependent on the jqueryUI
|
||||
if (o.railDraggable){
|
||||
bar.bind("mousedown", function(e) {
|
||||
var $doc = $(document);
|
||||
isDragg = true;
|
||||
t = parseFloat(bar.css('top'));
|
||||
pageY = e.pageY;
|
||||
|
||||
$doc.bind("mousemove.slimscroll", function(e){
|
||||
currTop = t + e.pageY - pageY;
|
||||
bar.css('top', currTop);
|
||||
scrollContent(0, bar.position().top, false);// scroll content
|
||||
});
|
||||
|
||||
$doc.bind("mouseup.slimscroll", function(e) {
|
||||
isDragg = false;hideBar();
|
||||
$doc.unbind('.slimscroll');
|
||||
});
|
||||
return false;
|
||||
}).bind("selectstart.slimscroll", function(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
// on rail over
|
||||
rail.hover(function(){
|
||||
showBar();
|
||||
}, function(){
|
||||
hideBar();
|
||||
});
|
||||
|
||||
// on bar over
|
||||
bar.hover(function(){
|
||||
isOverBar = true;
|
||||
}, function(){
|
||||
isOverBar = false;
|
||||
});
|
||||
|
||||
// show on parent mouseover
|
||||
me.hover(function(){
|
||||
isOverPanel = true;
|
||||
showBar();
|
||||
hideBar();
|
||||
}, function(){
|
||||
isOverPanel = false;
|
||||
hideBar();
|
||||
});
|
||||
|
||||
// support for mobile
|
||||
me.bind('touchstart', function(e,b){
|
||||
if (e.originalEvent.touches.length)
|
||||
{
|
||||
// record where touch started
|
||||
touchDif = e.originalEvent.touches[0].pageY;
|
||||
}
|
||||
});
|
||||
|
||||
me.bind('touchmove', function(e){
|
||||
// prevent scrolling the page if necessary
|
||||
if(!releaseScroll)
|
||||
{
|
||||
e.originalEvent.preventDefault();
|
||||
}
|
||||
if (e.originalEvent.touches.length)
|
||||
{
|
||||
// see how far user swiped
|
||||
var diff = (touchDif - e.originalEvent.touches[0].pageY) / o.touchScrollStep;
|
||||
// scroll content
|
||||
scrollContent(diff, true);
|
||||
touchDif = e.originalEvent.touches[0].pageY;
|
||||
}
|
||||
});
|
||||
|
||||
// set up initial height
|
||||
getBarHeight();
|
||||
|
||||
// check start position
|
||||
if (o.start === 'bottom')
|
||||
{
|
||||
// scroll content to bottom
|
||||
bar.css({ top: me.outerHeight() - bar.outerHeight() });
|
||||
scrollContent(0, true);
|
||||
}
|
||||
else if (o.start !== 'top')
|
||||
{
|
||||
// assume jQuery selector
|
||||
scrollContent($(o.start).position().top, null, true);
|
||||
|
||||
// make sure bar stays hidden
|
||||
if (!o.alwaysVisible) { bar.hide(); }
|
||||
}
|
||||
|
||||
// attach scroll events
|
||||
attachWheel(this);
|
||||
|
||||
function _onWheel(e)
|
||||
{
|
||||
// use mouse wheel only when mouse is over
|
||||
if (!isOverPanel) { return; }
|
||||
|
||||
var e = e || window.event;
|
||||
|
||||
var delta = 0;
|
||||
if (e.wheelDelta) { delta = -e.wheelDelta/120; }
|
||||
if (e.detail) { delta = e.detail / 3; }
|
||||
|
||||
var target = e.target || e.srcTarget || e.srcElement;
|
||||
if ($(target).closest('.' + o.wrapperClass).is(me.parent())) {
|
||||
// scroll content
|
||||
scrollContent(delta, true);
|
||||
}
|
||||
|
||||
// stop window scroll
|
||||
if (e.preventDefault && !releaseScroll) { e.preventDefault(); }
|
||||
if (!releaseScroll) { e.returnValue = false; }
|
||||
}
|
||||
|
||||
function scrollContent(y, isWheel, isJump)
|
||||
{
|
||||
releaseScroll = false;
|
||||
var delta = y;
|
||||
var maxTop = me.outerHeight() - bar.outerHeight();
|
||||
|
||||
if (isWheel)
|
||||
{
|
||||
// move bar with mouse wheel
|
||||
delta = parseInt(bar.css('top')) + y * parseInt(o.wheelStep) / 100 * bar.outerHeight();
|
||||
|
||||
// move bar, make sure it doesn't go out
|
||||
delta = Math.min(Math.max(delta, 0), maxTop);
|
||||
|
||||
// if scrolling down, make sure a fractional change to the
|
||||
// scroll position isn't rounded away when the scrollbar's CSS is set
|
||||
// this flooring of delta would happened automatically when
|
||||
// bar.css is set below, but we floor here for clarity
|
||||
delta = (y > 0) ? Math.ceil(delta) : Math.floor(delta);
|
||||
|
||||
// scroll the scrollbar
|
||||
bar.css({ top: delta + 'px' });
|
||||
}
|
||||
|
||||
// calculate actual scroll amount
|
||||
percentScroll = parseInt(bar.css('top')) / (me.outerHeight() - bar.outerHeight());
|
||||
delta = percentScroll * (me[0].scrollHeight - me.outerHeight());
|
||||
|
||||
if (isJump)
|
||||
{
|
||||
delta = y;
|
||||
var offsetTop = delta / me[0].scrollHeight * me.outerHeight();
|
||||
offsetTop = Math.min(Math.max(offsetTop, 0), maxTop);
|
||||
bar.css({ top: offsetTop + 'px' });
|
||||
}
|
||||
|
||||
// scroll content
|
||||
me.scrollTop(delta);
|
||||
|
||||
// fire scrolling event
|
||||
me.trigger('slimscrolling', ~~delta);
|
||||
|
||||
// ensure bar is visible
|
||||
showBar();
|
||||
|
||||
// trigger hide when scroll is stopped
|
||||
hideBar();
|
||||
}
|
||||
|
||||
function attachWheel(target)
|
||||
{
|
||||
if (window.addEventListener)
|
||||
{
|
||||
target.addEventListener('DOMMouseScroll', _onWheel, false );
|
||||
target.addEventListener('mousewheel', _onWheel, false );
|
||||
}
|
||||
else
|
||||
{
|
||||
document.attachEvent("onmousewheel", _onWheel)
|
||||
}
|
||||
}
|
||||
|
||||
function getBarHeight()
|
||||
{
|
||||
// calculate scrollbar height and make sure it is not too small
|
||||
barHeight = Math.max((me.outerHeight() / me[0].scrollHeight) * me.outerHeight(), minBarHeight);
|
||||
bar.css({ height: barHeight + 'px' });
|
||||
|
||||
// hide scrollbar if content is not long enough
|
||||
var display = barHeight == me.outerHeight() ? 'none' : 'block';
|
||||
bar.css({ display: display });
|
||||
}
|
||||
|
||||
function showBar()
|
||||
{
|
||||
// recalculate bar height
|
||||
getBarHeight();
|
||||
clearTimeout(queueHide);
|
||||
|
||||
// when bar reached top or bottom
|
||||
if (percentScroll == ~~percentScroll)
|
||||
{
|
||||
//release wheel
|
||||
releaseScroll = o.allowPageScroll;
|
||||
|
||||
// publish approporiate event
|
||||
if (lastScroll != percentScroll)
|
||||
{
|
||||
var msg = (~~percentScroll == 0) ? 'top' : 'bottom';
|
||||
me.trigger('slimscroll', msg);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
releaseScroll = false;
|
||||
}
|
||||
lastScroll = percentScroll;
|
||||
|
||||
// show only when required
|
||||
if(barHeight >= me.outerHeight()) {
|
||||
//allow window scroll
|
||||
releaseScroll = true;
|
||||
return;
|
||||
}
|
||||
bar.stop(true,true).fadeIn('fast');
|
||||
if (o.railVisible) { rail.stop(true,true).fadeIn('fast'); }
|
||||
}
|
||||
|
||||
function hideBar()
|
||||
{
|
||||
// only hide when options allow it
|
||||
if (!o.alwaysVisible)
|
||||
{
|
||||
queueHide = setTimeout(function(){
|
||||
if (!(o.disableFadeOut && isOverPanel) && !isOverBar && !isDragg)
|
||||
{
|
||||
bar.fadeOut('slow');
|
||||
rail.fadeOut('slow');
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// maintain chainability
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
$.fn.extend({
|
||||
slimscroll: $.fn.slimScroll
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
define("slimscroll", ["jquery"], (function (global) {
|
||||
return function () {
|
||||
var ret, fn;
|
||||
return ret || global.$.fn.extend;
|
||||
};
|
||||
}(this)));
|
||||
|
||||
define('fast',['jquery', 'bootstrap', 'toastr', 'layer', 'lang', 'slimscroll'], function ($, undefined, Toastr, Layer, Lang, slimScroll) {
|
||||
var Fast = {
|
||||
config: {
|
||||
//toastr默认配置
|
||||
|
|
@ -660,7 +1142,7 @@ define('fast',['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, u
|
|||
"closeButton": true,
|
||||
"debug": false,
|
||||
"newestOnTop": false,
|
||||
"progressBar": false,
|
||||
"progressBar": true,
|
||||
"positionClass": "toast-top-center",
|
||||
"preventDuplicates": false,
|
||||
"onclick": null,
|
||||
|
|
@ -969,6 +1451,17 @@ define('fast',['jquery', 'bootstrap', 'toastr', 'layer', 'lang'], function ($, u
|
|||
});
|
||||
|
||||
//公共代码
|
||||
$(function ($) {
|
||||
if (self === top) {
|
||||
$('div[role="main"]').slimScroll({height: $(window).height() + 'px'});
|
||||
} else {
|
||||
var ScrollHeight = $('iframe', parent.document).height();
|
||||
if (!ScrollHeight || ScrollHeight === 100) {
|
||||
ScrollHeight = $('.content-wrapper', parent.document).height();
|
||||
}
|
||||
$('div[role="main"]').slimScroll({height: ScrollHeight + 'px'});
|
||||
}
|
||||
});
|
||||
//配置Toastr的参数
|
||||
Toastr.options = Fast.config.toastr;
|
||||
}
|
||||
|
|
@ -9889,6 +10382,9 @@ define('table',['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstr
|
|||
}
|
||||
//当内容渲染完成后
|
||||
table.on('post-body.bs.table', function (e, settings, json, xhr) {
|
||||
var ScrollHeight = self == top ? $(window).height() : $('.content-wrapper', parent.document).height();
|
||||
table.closest('#main').height(ScrollHeight);
|
||||
table.closest('.slimScrollDiv').height(ScrollHeight);
|
||||
$(Table.config.refreshbtn, toolbar).find(".fa").removeClass("fa-spin");
|
||||
$(Table.config.disabledbtn, toolbar).toggleClass('disabled', true);
|
||||
if ($(Table.config.firsttd, table).find("input[type='checkbox'][data-index]").size() > 0) {
|
||||
|
|
@ -9918,6 +10414,11 @@ define('table',['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstr
|
|||
});
|
||||
});
|
||||
}
|
||||
if (table.find("div.pre").size() > 0) {
|
||||
require(['slimscroll'], function () {
|
||||
$('div.pre').slimScroll({width: '300px', height: '50px'});
|
||||
});
|
||||
}
|
||||
});
|
||||
// 处理选中筛选框后按钮的状态统一变更
|
||||
table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
|
||||
|
|
|
|||
|
|
@ -131,6 +131,9 @@ define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table
|
|||
}
|
||||
//当内容渲染完成后
|
||||
table.on('post-body.bs.table', function (e, settings, json, xhr) {
|
||||
var ScrollHeight = self == top ? $(window).height() : $('.content-wrapper', parent.document).height();
|
||||
table.closest('#main').height(ScrollHeight);
|
||||
table.closest('.slimScrollDiv').height(ScrollHeight);
|
||||
$(Table.config.refreshbtn, toolbar).find(".fa").removeClass("fa-spin");
|
||||
$(Table.config.disabledbtn, toolbar).toggleClass('disabled', true);
|
||||
if ($(Table.config.firsttd, table).find("input[type='checkbox'][data-index]").size() > 0) {
|
||||
|
|
@ -160,6 +163,11 @@ define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table
|
|||
});
|
||||
});
|
||||
}
|
||||
if (table.find("div.pre").size() > 0) {
|
||||
require(['slimscroll'], function () {
|
||||
$('div.pre').slimScroll({width: '300px', height: '50px'});
|
||||
});
|
||||
}
|
||||
});
|
||||
// 处理选中筛选框后按钮的状态统一变更
|
||||
table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
|
||||
|
|
|
|||
Loading…
Reference in New Issue