虽然 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); }
这里面主要有三部分：
- 显示隐藏左侧菜单的样式： .showsidebar
- 隐藏模式下让分隔条不可见： .sidebarregion
- 菜单显示模式下，显示主区域的遮罩层：.showsidebar-mask
3. 自定义JS代码
这部分有点复杂，关键代码如下：
3.1 判断何时启用移动视图的函数
functionisSmallWindowWidth() { var windowWidth =$(window).width(); return windowWidth < 992; }
可以看到，我们是以页面宽度作为边界条件，如果页面小于992px，则启用移动视图
3.2 如何启用移动视图
functioncheckMobileView(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) { //应用布局，代码省略 } }
两行代码启用视图视图：
- 给body节点添加 mobileview 样式
- 设置 F.viewPortExtraWidth=260，也就是告诉FineUIPro将视口的宽度多扩展260px，以便左移后刚好隐藏左侧菜单
注：简单设置 F.viewPortExtraWidth 没有任何效果，必须在 F.ready 运行之前设置，或者设置之后调用面板的doLayout函数！
3.3 点击折叠按钮图标
//点击折叠/展开按钮 functiononFoldClick(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节点的事件处理，都是在移动视图下才会执行的，分别是：
- 遮罩层的点击事件：点击遮罩层，会隐藏左侧菜单
- 左侧菜单项的点击事件：点击菜单项会在主区域打开IFRAME页面，并隐藏左侧菜单
- 本文介绍的内容会在FineUIPro/Mvc/Core v5.5.0 中实现。
- 由于移动端支持是企业版功能，所以本效果在基础版中不可用。