【新特性速遞】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/