【新特性速递】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:;
top:;
background-attachment: fixed;
width: 100%;
height: 100%;
z-index:;
background-color: rgba(0,0,0,.3);
}
这里面主要有三部分:
- 显示隐藏左侧菜单的样式: .showsidebar
- 隐藏模式下让分隔条不可见: .sidebarregion
- 菜单显示模式下,显示主区域的遮罩层:.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) {
// 应用布局,代码省略
}
}
两行代码启用视图视图:
- 给body节点添加 mobileview 样式
- 设置 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节点的事件处理,都是在移动视图下才会执行的,分别是:
- 遮罩层的点击事件:点击遮罩层,会隐藏左侧菜单
- 左侧菜单项的点击事件:点击菜单项会在主区域打开IFRAME页面,并隐藏左侧菜单
注意事项
- 本文介绍的内容会在FineUIPro/Mvc/Core v5.5.0 中实现。
- 由于移动端支持是企业版功能,所以本效果在基础版中不可用。
【新特性速递】FineUIPro/Mvc/Core 全新移动端访问体验(示例首页)!的更多相关文章
- 【新特性速递】树控件结构由单层 TR 改为 TR-TD-TABLE 层级嵌套
FineUIPro/Mvc/Core的下个版本(v6.1.0),我们对树控件进行了优化,由原来的单层 TR 改为 TR-TD-TABLE 层级嵌套,从而做到表里如一. 上个版本(v6.0.0),我们对 ...
- 【新特性速递】CSS3动画增强
FineUIPro/Mvc/Core的下个版本(v6.1.0),我们对多个地方的CSS3动画进行了增强,使得用户体验更好. 1. 树控件启用EnableSingleExpand时,使得展开动画和折叠其 ...
- 【新特性速递】优化Shift/Ctrl行多选逻辑,和Windows的文件资源管理器保持一致!
别告诉我你不知道 别告诉我你不知道可以使用键盘的 Shift 和 Ctrl 来多选表格行,因为这个在 Windows 文件资源管理器中的常用操作,此时的画风是这样的: 这个动图中进行了如下操作: 1. ...
- 【新特性速递】单元格导航(上下左右键,TAB键和ENTER键)
上下左右按键 其实单元格导航(上下左右按键,需要启用表格的ShowSelectedCell属性)一直都存在,只不过之前的版本(v5.5.0)有一些小的BUG. BUG1 比如锁定列存在时,上下左右键只 ...
- 【新特性速递】树表格结构由单层 TR 改为 TR-TD-TABLE 层级嵌套!
由于历史原因,在之前实现树表格时,我们有点偷懒,本来应该是层级嵌套的树结构,被我们硬生生的拉平了,请看: 可以看到,basic目录的子节点和basic是在同一级别的,因为此目录尚未展开,所以这些子节点 ...
- 【新特性速递】F.doPostBack的说明文档
FineUIPro/Mvc/Core的下个版本(v6.1.0),我们对客户端JS函数 F.doPostBack 进行了增强,并增加说明文档. 如果你还没有查阅过FineUI的客户端文档,可以收藏下这个 ...
- ActiveReports 11 新特性速递
又到了一年一度,翘首期盼的ActiveReports11 即将发布,ActiveReports 10 表控件横空出世,成为中国式复杂报表的救星后,ActiveReports11 又会有哪些令人惊奇的新 ...
- FineUIMvc新特性速递(大间距模式,隐藏菜单垂直滚动条)
即将发布的 FineUIMvc 新版本会引入两个重要的特性,用来提升用户体验,现在就来先睹为快吧: 大间距模式 我们已经支持的显示模式有:紧凑模式,普通模式,大字体模式. 紧凑模式: 普通模式: 大字 ...
- FineUIPro/Mvc/Core v6.1.0 发布了!
FineUIPro/Mvc/Core v6.1.0 正式发布了(2019-12-25),这个版本主要是BUG修正,并增加了一些新特性,建议升级到此版本. 在列举新版本特性之前,我们先来回顾下每次发布大 ...
随机推荐
- EF和Dapper之争的关键
突然发现园子里为EF和Dapper的事闹翻了天.(学Java的同学大概就是Hibernate和MyBatis之争了) 讲到EF对Mysql的支持,我在一边偷着乐:还好我用的是NHibernate,对M ...
- Android框架式编程之RxJava(一):HelloWorld
Hello World 源码: import android.graphics.Bitmap; import android.graphics.BitmapFactory; import androi ...
- 如何以编程方式签署应用程序包(C ++)
了解如何使用SignerSignEx2函数对应用包进行签名. 如果要使用Packaging API以编程方式创建Windows应用商店应用包,则还需要在部署之前对应用包进行签名.Packaging A ...
- [Swift]动态变化顶部状态栏(statusBar)的颜色
顶部状态栏(statusBar)的两种样式: (1).default 样式:黑色. (2).light 样式:白色 一.无导航栏情况 如果没有使用导航控制器 UINavigationControlle ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js
前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这 ...
- springboot~如何去掌握它(新手可以看看)
springboot~如何去掌握它 主讲:仓储大叔 每讲40分钟 架构图 graph LR App-->A Web-->A A(zuul proxy)-->B(eureka serv ...
- 学习ASP.NET Core Razor 编程系列十七——分组
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
- SpringBoot实用小技巧之动态设置SpringBoot日志级别
有时线上问题我们用打日志的方式来观察错误或埋点参数,但由于这些日志如果都打出来会占用大量存储空间而且覆盖了一些有效信息,所以线上级别一般设置INFO,调试级别用作特殊情况下.此时如果线上想查看调试级别 ...
- 【Golang笔记】Golang工具包Cobra安装记录
0.环境信息 系统:Win10_x64 Go版本:go version go1.8.1 windows/amd64 Git版本:git version 2.17.0.windows.1 1.安装Go运 ...
- 搞懂MySQL InnoDB B+树索引
一.InnoDB索引 InnoDB支持以下几种索引: B+树索引 全文索引 哈希索引 本文将着重介绍B+树索引.其他两个全文索引和哈希索引只是做简单介绍一笔带过. 哈希索引是自适应的,也就是说这个不能 ...