【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!

时间:2022-01-01 17:02:24

移动端支持

虽然 FineUIPro 早在 2016 年就已经完成对移动端的适配工作,并新增了 50 多个官网示例。

【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!

并且,我们也新增了一个移动端的首页 http://pro.fineui.com/mobile/main.aspx ,通过手机浏览器打开这个页面,看到的效果还是很不错的:

【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!

菜单的层次切换也是典型的左右滑动效果,看下动图:

【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!

示例首页的移动端支持

但是官网示例首页一直没有对移动端做适配,表现在你通过手机访问 http://pro.fineui.com/ 时,看到的和PC端的显示效果一模一样:

【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!

给人的感觉就是文字很小,很模糊,也不好点击,只有手工放大才行。

这个体验其实很糟糕,尽管我们一直在说,对于管理系统而言,PC端的显示效果一般不能直接用于移动端,毕竟移动端的屏幕尺寸有限,你不可能把PC端的20列的表格直接照搬到手机端显示。

但是,如果能够赏心悦目的在手机上查看官网示例首页,又何乐而不为呢?很多时候,我们只是没想到,实现起来并不是难事。

来看下新版官网示例首页的移动端效果(从 FineUIPro v5.5.0 开始支持):

【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!

由于手机端屏幕尺寸有限,所以默认左侧菜单是折叠起来的,当点击折叠按钮时,整体页面右移,显示左侧菜单。动起来的效果更迷人:

【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!

实现原理分析

如果仔细观察上面的动图,可以清楚的看到,默认左侧菜单是【折叠】的,只不过这个折叠并不是真正意义的折叠,而只是隐藏在左侧而已。

换句话说,初始页面加载时,整体页面左移了260px(也即是左侧菜单的宽度),点击折叠按钮时,整体页面右移260px像素而已,道理很简单吧。

下面的图片就更直观了,初始页面加载后:

【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!

可以看到最外层的 mainPanel 是应用了 CSS3 样式:-webkit-transform: translate3d(-260px,0,0);

这个样式让整体页面左移了 260px,为了看到隐藏的内容,我们把 -260px 改为 -130px,让左侧露出半个脑袋:

【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!

全露出来:

【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!

其实在点击折叠按钮时,FineUIPro内部就是通过改变这个CSS样式来实现的左侧菜单的显示隐藏效果的。

是不是很简单!

实现代码一瞥

1. Web.config增加配置项(MobileAdaption="true")

完整的FineUIPro节点如下所示:

<FineUIPro DebugMode="true" CustomTheme="pure_black" EnableAnimation="true" MobileAdaption="true" JSLibrary="All" />

2. 自定义CSS样式

body.mobileview .mainpanel {
transition: all .3s;
-webkit-transition: all .3s;
transform: translate3d(-260px,0,0);
-webkit-transform: translate3d(-260px,0,0);
} body.mobileview .mainpanel.showsidebar {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
} body.mobileview .mainpanel .f-region-split {
display: none !important;
} body.mobileview .mainpanel .sidebarregion {
box-shadow: none;
} body.mobileview .mainpanel .bodyregion .showsidebar-mask {
position: absolute;
left:;
top:;
background-attachment: fixed;
width: 100%;
height: 100%;
z-index:;
background-color: rgba(0,0,0,.3);
}

这里面主要有三部分:

  1. 显示隐藏左侧菜单的样式: .showsidebar
  2. 隐藏模式下让分隔条不可见: .sidebarregion
  3. 菜单显示模式下,显示主区域的遮罩层:.showsidebar-mask

3. 自定义JS代码

这部分有点复杂,关键代码如下:

3.1 判断何时启用移动视图的函数

function isSmallWindowWidth() {
var windowWidth = $(window).width();
return windowWidth < 992;
}

可以看到,我们是以页面宽度作为边界条件,如果页面小于992px,则启用移动视图

3.2 如何启用移动视图

function checkMobileView(shouldLayout) {
var isMobileView = $('body').hasClass("mobileview");
var needLayout = false; // 如果窗体宽度小于992px,则启用移动视图
if (isSmallWindowWidth()) {
if (!isMobileView) {
$('body').addClass("mobileview");
F.viewPortExtraWidth = SIDEBAR_WIDTH_CONSTANT;
needLayout = true;
}
} else {
if (isMobileView) {
$('body').removeClass("mobileview");
F.viewPortExtraWidth = 0;
needLayout = true;
}
} if (needLayout && shouldLayout) {
// 应用布局,代码省略
}
}

两行代码启用视图视图:

  1. 给body节点添加 mobileview 样式
  2. 设置 F.viewPortExtraWidth=260,也就是告诉FineUIPro将视口的宽度多扩展260px,以便左移后刚好隐藏左侧菜单

注:简单设置 F.viewPortExtraWidth 没有任何效果,必须在 F.ready 运行之前设置,或者设置之后调用面板的doLayout函数!

3.3 点击折叠按钮图标

// 点击折叠/展开按钮
function onFoldClick(event) {
if (isSmallWindowWidth()) {
var sidebarregionEl = $('.sidebarregion');
var bodyregionEl = $('.bodyregion'); // 创建遮罩层
var maskEl = bodyregionEl.find('.showsidebar-mask');
if (!maskEl.length) {
maskEl = $('<div class="showsidebar-mask"></div>').appendTo(bodyregionEl.find('>.f-panel-bodyct'));
maskEl.on('click', function () {
if (isSmallWindowWidth()) {
hideSidebarAndMask();
}
}); sidebarregionEl.on('click', '.leftregion a.f-tree-cell-text', function () {
if (isSmallWindowWidth()) {
hideSidebarAndMask();
}
});
} if (getFoldButtonStatus()) {
showSidebarAndMask();
} else {
hideSidebarAndMask();
} } else {
toggleSidebar();
}
}

这里面有两个DOM节点的事件处理,都是在移动视图下才会执行的,分别是:

  1. 遮罩层的点击事件:点击遮罩层,会隐藏左侧菜单
  2. 左侧菜单项的点击事件:点击菜单项会在主区域打开IFRAME页面,并隐藏左侧菜单

注意事项

  1. 本文介绍的内容会在FineUIPro/Mvc/Core v5.5.0 中实现。
  2. 由于移动端支持是企业版功能,所以本效果在基础版中不可用。