mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-12-05 21:50:05 +08:00
!409 feat(#I1SFBY): Scroll 组件更新 js 依赖减小体积
* doc: 更改 Scroll 组件相关文档 * refactor: 更新 Scroll 组件高度更改为 400px * style: 更新 scroll-demo 样式 * refactor: 移除 IsDark 属性 * refactor: 更新滚动条组件 * feat: 更新 Scroll 组件改用 slimscroll 脚本
This commit is contained in:
parent
ac401d3aaf
commit
f139c88d16
3
dist/404.html
vendored
3
dist/404.html
vendored
@ -17,7 +17,6 @@
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor.Shared/css/site.css">
|
||||
@ -64,7 +63,7 @@
|
||||
<script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/slimscroll/jquery.slimscroll.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
|
||||
<script src="_content/BootstrapBlazor.Shared/lib/highlight/highlight.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor.Shared/js/common.js"></script>
|
||||
|
@ -2,5 +2,4 @@
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css" />
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css" />
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css" />
|
||||
|
@ -3,5 +3,5 @@
|
||||
<script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/slimscroll/jquery.slimscroll.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
|
||||
|
@ -22,7 +22,6 @@
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/editor.md/editormd.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
|
||||
@ -50,7 +49,7 @@
|
||||
<script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/slimscroll/jquery.slimscroll.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/editor.md/editormd.js"></script>
|
||||
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
|
||||
<script src="_content/BootstrapBlazor.Shared/lib/highlight/highlight.min.js"></script>
|
||||
|
@ -6,16 +6,16 @@
|
||||
|
||||
<p>由于滚动条组件内部屏蔽了系统的滚动条,设置了 <code>overflow: hidden</code> 所以自身或者其父元素必须拥有固定高度时才可呈现滚动条,可以通过外套元素设置其 <code>height</code> 或者直接设置 <code>Scroll</code> 组件的高度 <code>Height</code> 属性</p>
|
||||
|
||||
<Block Title="普通用法" Introduction="给组件增加滚动条,通过设置 <code>Height</code> 高度值为 400 使内部子元素高度为 1000 时出现滚动条" CodeFile="scroll.1.html">
|
||||
<Scroll Height="200" IsAutoHide="false" IsDark="true" class="scroll-demo">
|
||||
<div style="height: 600px;">Top</div>
|
||||
<Block Title="普通用法" Introduction="给组件增加滚动条,通过设置 <code>Height</code> 高度值为 200px 使内部子元素高度为 400px 时出现滚动条" CodeFile="scroll.1.html">
|
||||
<Scroll class="scroll-demo" IsAutoHide="false" Height="200px">
|
||||
<div style="height: 400px;">Top</div>
|
||||
<div>Bottom</div>
|
||||
</Scroll>
|
||||
</Block>
|
||||
|
||||
<Block Title="自动隐藏" Introduction="鼠标 <code>hover</code> 状态下自动显示滚动条,移开鼠标后滚动条自动隐藏" CodeFile="scroll.2.html">
|
||||
<Scroll Height="200" IsAutoHide="true" Delay="1000" IsDark="true" class="scroll-demo">
|
||||
<div style="height: 600px;">Top</div>
|
||||
<Scroll class="scroll-demo" Height="200px">
|
||||
<div style="height: 400px;">Top</div>
|
||||
<div>Bottom</div>
|
||||
</Scroll>
|
||||
</Block>
|
||||
|
@ -36,26 +36,12 @@ namespace BootstrapBlazor.Shared.Pages
|
||||
ValueList = " — ",
|
||||
DefaultValue = "0"
|
||||
},
|
||||
new AttributeItem() {
|
||||
Name = "IsDark",
|
||||
Description = "是否为暗黑模式",
|
||||
Type = "bool",
|
||||
ValueList = "true|false",
|
||||
DefaultValue = "false"
|
||||
},
|
||||
new AttributeItem() {
|
||||
Name = "IsAutoHide",
|
||||
Description = "是否自动隐藏",
|
||||
Type = "true",
|
||||
ValueList = "true|false",
|
||||
DefaultValue = "true"
|
||||
},
|
||||
new AttributeItem() {
|
||||
Name = "Delay",
|
||||
Description = "自动隐藏延时时间",
|
||||
Type = "int",
|
||||
ValueList = "—",
|
||||
DefaultValue = "1000"
|
||||
}
|
||||
};
|
||||
}
|
||||
|
@ -3,7 +3,7 @@
|
||||
|
||||
<section class="section">
|
||||
<div class="sidebar">
|
||||
<Scroll IsDark="true">
|
||||
<Scroll>
|
||||
<NavMenu />
|
||||
</Scroll>
|
||||
</div>
|
||||
|
@ -898,8 +898,9 @@ section {
|
||||
z-index: 1080 !important;
|
||||
}
|
||||
|
||||
.scroll-demo.scroll.os-theme-dark > .os-scrollbar > .os-scrollbar-track {
|
||||
background-color: #f1f1f1;
|
||||
.scroll-demo {
|
||||
border: solid 1px #f1f1f1;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.coms-cate {
|
||||
|
@ -17,7 +17,6 @@
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/font-awesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/chartjs/Chart.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/lib/overlayscrollbars/OverlayScrollbars.min.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor/css/bootstrap.blazor.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor.Shared/lib/highlight/vs.css">
|
||||
<link rel="stylesheet" href="_content/BootstrapBlazor.Shared/css/site.css">
|
||||
@ -64,7 +63,7 @@
|
||||
<script src="_content/BootstrapBlazor/lib/chartjs/Chart.bundle.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/summernote/summernote-bs4.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/summernote/summernote-zh-CN.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/overlayscrollbars/jquery.overlayScrollbars.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/lib/slimscroll/jquery.slimscroll.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor/js/bootstrap.blazor.js"></script>
|
||||
<script src="_content/BootstrapBlazor.Shared/lib/highlight/highlight.min.js"></script>
|
||||
<script src="_content/BootstrapBlazor.Shared/js/common.js"></script>
|
||||
|
@ -1,6 +1,6 @@
|
||||
@namespace BootstrapBlazor.Components
|
||||
@inherits ScrollBase
|
||||
|
||||
<div @attributes="AdditionalAttributes" class="@ClassString" style="@StyleString" data-dark="@IsDarkString" data-hide="@AutoHideString" data-delay="@Delay" @ref="ScrollElement">
|
||||
<div @attributes="AdditionalAttributes" class="@ClassString" data-height="@Height" data-width="@Width" data-hide="@AutoHideString" @ref="ScrollElement">
|
||||
@ChildContent
|
||||
</div>
|
@ -20,25 +20,11 @@ namespace BootstrapBlazor.Components
|
||||
.AddClassFromAttributes(AdditionalAttributes)
|
||||
.Build();
|
||||
|
||||
/// <summary>
|
||||
/// 获得 组件 Style
|
||||
/// </summary>
|
||||
protected string? StyleString => CssBuilder.Default()
|
||||
.AddClass($"height: {Height}px", Height > 0)
|
||||
.AddClass($"width: {Width}px", Width > 0)
|
||||
.AddStyleFromAttributes(AdditionalAttributes)
|
||||
.Build();
|
||||
|
||||
/// <summary>
|
||||
/// 获得 是否自动隐藏
|
||||
/// </summary>
|
||||
protected string? AutoHideString => IsAutoHide ? "true" : "false";
|
||||
|
||||
/// <summary>
|
||||
/// 获得 滚动条样式
|
||||
/// </summary>
|
||||
protected string? IsDarkString => IsDark ? "true" : "false";
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 子组件
|
||||
/// </summary>
|
||||
@ -49,13 +35,13 @@ namespace BootstrapBlazor.Components
|
||||
/// 获得/设置 组件高度
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public int Height { get; set; }
|
||||
public string Height { get; set; } = "auto";
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 组件宽度
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public int Width { get; set; }
|
||||
public string Width { get; set; } = "auto";
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 是否自动隐藏
|
||||
@ -63,18 +49,6 @@ namespace BootstrapBlazor.Components
|
||||
[Parameter]
|
||||
public bool IsAutoHide { get; set; } = true;
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 自动隐藏延时时间 默认 1000 毫秒
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public int Delay { get; set; } = 1000;
|
||||
|
||||
/// <summary>
|
||||
/// 获得/设置 是否为暗黑模式
|
||||
/// </summary>
|
||||
[Parameter]
|
||||
public bool IsDark { get; set; }
|
||||
|
||||
/// <summary>
|
||||
/// OnAfterRenderAsync 方法
|
||||
/// </summary>
|
||||
@ -86,7 +60,7 @@ namespace BootstrapBlazor.Components
|
||||
|
||||
if (firstRender && JSRuntime != null)
|
||||
{
|
||||
await JSRuntime.Invoke(ScrollElement, "scroll");
|
||||
await JSRuntime.Invoke(ScrollElement, "bb_scroll");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1602,7 +1602,7 @@
|
||||
|
||||
calcWindow();
|
||||
},
|
||||
scroll: function (el) {
|
||||
bb_scroll: function (el) {
|
||||
var $el = $(el);
|
||||
|
||||
// 移动端不需要修改滚动条
|
||||
@ -1610,28 +1610,17 @@
|
||||
var mac = navigator.userAgent.match(/iPhone/i);
|
||||
if (!mac) {
|
||||
var autoHide = $el.attr('data-hide');
|
||||
var delay = parseInt($el.attr('data-delay'));
|
||||
var dark = $el.attr('data-dark');
|
||||
var className = 'os-theme-light';
|
||||
if (dark === 'true') {
|
||||
className = 'os-theme-dark';
|
||||
}
|
||||
var scrollbars = {
|
||||
className: className
|
||||
var height = $el.attr('data-height');
|
||||
var width = $el.attr('data-width');
|
||||
|
||||
var option = {
|
||||
alwaysVisible: autoHide !== "true",
|
||||
};
|
||||
if (autoHide === 'true') {
|
||||
if (isNaN(delay)) {
|
||||
delay = 1000;
|
||||
}
|
||||
scrollbars = {
|
||||
autoHide: 'leave',
|
||||
autoHideDelay: delay
|
||||
}
|
||||
}
|
||||
$el.overlayScrollbars({
|
||||
className: className,
|
||||
scrollbars: scrollbars
|
||||
});
|
||||
|
||||
if (!height) height = "auto";
|
||||
if (height !== "") option.height = height;
|
||||
if (!width) option.width = width;
|
||||
$el.slimScroll(option);
|
||||
}
|
||||
else {
|
||||
$el.addClass('is-phone');
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
16
src/BootstrapBlazor/wwwroot/lib/slimscroll/jquery.slimscroll.min.js
vendored
Normal file
16
src/BootstrapBlazor/wwwroot/lib/slimscroll/jquery.slimscroll.min.js
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
/*! 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(e){e.fn.extend({slimScroll:function(f){var a=e.extend({width:"auto",height:"250px",size:"7px",color:"#000",position:"right",distance:"1px",start:"top",opacity:.4,alwaysVisible:!1,disableFadeOut:!1,railVisible:!1,railColor:"#333",railOpacity:.2,railDraggable:!0,railClass:"slimScrollRail",barClass:"slimScrollBar",wrapperClass:"slimScrollDiv",allowPageScroll:!1,wheelStep:20,touchScrollStep:200,borderRadius:"7px",railBorderRadius:"7px"},f);this.each(function(){function v(d){if(r){d=d||window.event;
|
||||
var c=0;d.wheelDelta&&(c=-d.wheelDelta/120);d.detail&&(c=d.detail/3);e(d.target||d.srcTarget||d.srcElement).closest("."+a.wrapperClass).is(b.parent())&&n(c,!0);d.preventDefault&&!k&&d.preventDefault();k||(d.returnValue=!1)}}function n(d,g,e){k=!1;var f=b.outerHeight()-c.outerHeight();g&&(g=parseInt(c.css("top"))+d*parseInt(a.wheelStep)/100*c.outerHeight(),g=Math.min(Math.max(g,0),f),g=0<d?Math.ceil(g):Math.floor(g),c.css({top:g+"px"}));l=parseInt(c.css("top"))/(b.outerHeight()-c.outerHeight());g=
|
||||
l*(b[0].scrollHeight-b.outerHeight());e&&(g=d,d=g/b[0].scrollHeight*b.outerHeight(),d=Math.min(Math.max(d,0),f),c.css({top:d+"px"}));b.scrollTop(g);b.trigger("slimscrolling",~~g);w();p()}function x(){u=Math.max(b.outerHeight()/b[0].scrollHeight*b.outerHeight(),30);c.css({height:u+"px"});var a=u==b.outerHeight()?"none":"block";c.css({display:a})}function w(){x();clearTimeout(B);l==~~l?(k=a.allowPageScroll,C!=l&&b.trigger("slimscroll",0==~~l?"top":"bottom")):k=!1;C=l;u>=b.outerHeight()?k=!0:(c.stop(!0,
|
||||
!0).fadeIn("fast"),a.railVisible&&m.stop(!0,!0).fadeIn("fast"))}function p(){a.alwaysVisible||(B=setTimeout(function(){a.disableFadeOut&&r||y||z||(c.fadeOut("slow"),m.fadeOut("slow"))},1E3))}var r,y,z,B,A,u,l,C,k=!1,b=e(this);if(b.parent().hasClass(a.wrapperClass)){var q=b.scrollTop(),c=b.siblings("."+a.barClass),m=b.siblings("."+a.railClass);x();if(e.isPlainObject(f)){if("height"in f&&"auto"==f.height){b.parent().css("height","auto");b.css("height","auto");var h=b.parent().parent().height();b.parent().css("height",
|
||||
h);b.css("height",h)}else"height"in f&&(h=f.height,b.parent().css("height",h),b.css("height",h));if("scrollTo"in f)q=parseInt(a.scrollTo);else if("scrollBy"in f)q+=parseInt(a.scrollBy);else if("destroy"in f){c.remove();m.remove();b.unwrap();return}n(q,!1,!0)}}else if(!(e.isPlainObject(f)&&"destroy"in f)){a.height="auto"==a.height?b.parent().height():a.height;q=e("<div></div>").addClass(a.wrapperClass).css({position:"relative",overflow:"hidden",width:a.width,height:a.height});b.css({overflow:"hidden",
|
||||
width:a.width,height:a.height});var m=e("<div></div>").addClass(a.railClass).css({width:a.size,height:"100%",position:"absolute",top:0,display:a.alwaysVisible&&a.railVisible?"block":"none","border-radius":a.railBorderRadius,background:a.railColor,opacity:a.railOpacity,zIndex:90}),c=e("<div></div>").addClass(a.barClass).css({background:a.color,width:a.size,position:"absolute",top:0,opacity:a.opacity,display:a.alwaysVisible?"block":"none","border-radius":a.borderRadius,BorderRadius:a.borderRadius,MozBorderRadius:a.borderRadius,
|
||||
WebkitBorderRadius:a.borderRadius,zIndex:99}),h="right"==a.position?{right:a.distance}:{left:a.distance};m.css(h);c.css(h);b.wrap(q);b.parent().append(c);b.parent().append(m);a.railDraggable&&c.bind("mousedown",function(a){var b=e(document);z=!0;t=parseFloat(c.css("top"));pageY=a.pageY;b.bind("mousemove.slimscroll",function(a){currTop=t+a.pageY-pageY;c.css("top",currTop);n(0,c.position().top,!1)});b.bind("mouseup.slimscroll",function(a){z=!1;p();b.unbind(".slimscroll")});return!1}).bind("selectstart.slimscroll",
|
||||
function(a){a.stopPropagation();a.preventDefault();return!1});m.hover(function(){w()},function(){p()});c.hover(function(){y=!0},function(){y=!1});b.hover(function(){r=!0;w();p()},function(){r=!1;p()});b.bind("touchstart",function(a,b){a.originalEvent.touches.length&&(A=a.originalEvent.touches[0].pageY)});b.bind("touchmove",function(b){k||b.originalEvent.preventDefault();b.originalEvent.touches.length&&(n((A-b.originalEvent.touches[0].pageY)/a.touchScrollStep,!0),A=b.originalEvent.touches[0].pageY)});
|
||||
x();"bottom"===a.start?(c.css({top:b.outerHeight()-c.outerHeight()}),n(0,!0)):"top"!==a.start&&(n(e(a.start).position().top,null,!0),a.alwaysVisible||c.hide());window.addEventListener?(this.addEventListener("DOMMouseScroll",v,!1),this.addEventListener("mousewheel",v,!1)):document.attachEvent("onmousewheel",v)}});return this}});e.fn.extend({slimscroll:e.fn.slimScroll})})(jQuery);
|
Loading…
Reference in New Issue
Block a user