【新特性速遞】FineUIPro/Mvc/Core 全新移動端訪問體驗（示例首頁）！

三生石上(FineUI控制元件)發表於2019-04-01
UIMVC

移動端支援

雖然 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/

 

相關文章