zoukankan      html  css  js  c++  java
  • 【新特性速递】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. 由于移动端支持是企业版功能,所以本效果在基础版中不可用。
  • 相关阅读:
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    Security and Cryptography in Python
    微信小程序TodoList
    C语言88案例-找出数列中的最大值和最小值
    C语言88案例-使用指针的指针输出字符串
  • 原文地址:https://www.cnblogs.com/sanshi/p/10636546.html
Copyright © 2011-2022 走看看