【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验（示例首页）！

移动端支持

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

 

而且，咱们也新增了一个移动端的首页 http://pro.fineui.com/mobile/main.aspx ，经过手机浏览器打开这个页面，看到的效果仍是很不错的：

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

 

示例首页的移动端支持

可是官网示例首页一直没有对移动端作适配，表如今你经过手机访问 http://pro.fineui.com/ 时，看到的和PC端的显示效果如出一辙：

给人的感受就是文字很小，很模糊，也很差点击，只有手工放大才行。

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

 

可是，若是可以赏心悦目的在手机上查看官网示例首页，又何乐而不为呢？不少时候，咱们只是没想到，实现起来并非难事。

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

 

因为手机端屏幕尺寸有限，因此默认左侧菜单是折叠起来的，当点击折叠按钮时，总体页面右移，显示左侧菜单。动起来的效果更迷人：

 

实现原理分析

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

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

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

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

这个样式让总体页面左移了 260px，为了看到隐藏的内容，咱们把 -260px 改成 -130px，让左侧露出半个脑壳：

全露出来：

其实在点击折叠按钮时，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: 0;
    top: 0;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    z-index: 20000;
    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. 因为移动端支持是企业版功能，因此本效果在基础版中不可用。
3. 我新建了一个临时网站，能够经过手机浏览器访问测试：http://test1.fineui.com/