首页 专利交易 科技果 科技人才 科技服务 国际服务 商标交易 会员权益 IP管家助手 需求市场 关于龙图腾
 /  免费注册
到顶部 到底部
清空 搜索

适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质 

买专利卖专利找龙图腾,真高效! 查专利查商标用IPTOP,全免费!专利年费监控用IP管家,真方便!

申请/专利权人:北京洞悉网络有限公司

摘要:本发明公开了一种适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质,涉及表单页面展示技术领域。该方法是先实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件,若触发,则依次获取表单展示屏的当前屏幕宽度、表单页面的内容区域宽度、单行表单元素可展示数目和单个表单元素可展示宽度,根据表单页面的表单元素总数与单行可展示表单元素数目的比较结果,判断表单页面的所有表单元素是否需要换行展示,在需要时根据单个表单元素可展示宽度,使用弹性盒子在所述表单展示屏中换行展示所有表单元素,如此可使表单页面能够随着表单展示屏的尺寸大小变化情况而进行自动适配展示,保障用户对表单数据的感知体验。

主权项:1.一种适用于左右双屏的表单页面自适配展示方法,其特征在于,包括:实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件,具体包括:基于window.matchMedia函数,实时监听在左右双屏中的表单展示屏是否触发屏幕尺寸变化事件,其中,所述表单展示屏是指用于展示表单页面的屏幕;在确定在左右双屏中的表单展示屏触发屏幕尺寸变化事件时,获取所述表单展示屏的当前屏幕宽度,具体包括:基于document.body.clientWidth命令检测得到所述表单展示屏的当前屏幕宽度;根据所述当前屏幕宽度,确定当前的且所述表单页面的内容区域宽度,具体包括:判断所述表单页面是否具有左侧边栏;若是,则确定当前的且所述表单页面的内容区域宽度等于所述当前屏幕宽度减去所述左侧边栏的固定宽度;若否,则确定当前的且所述表单页面的内容区域宽度等于所述当前屏幕宽度;根据所述内容区域宽度,确定当前的且在所述表单展示屏中的单行表单元素可展示数目以及单个表单元素可展示宽度,具体包括:获取用户自定义的单行表单元素可展示数目Nuer;根据所述内容区域宽度,按照如下公式计算得到单行表单元素最多可展示数目Nmax:式中,CW表示所述内容区域宽度,cwmin表示单个表单元素的最窄可展示宽度,floor表示向下取整函数;判断所述单行表单元素最多可展示数目Nmax是否大于等于Nuer;若是,则确定当前的且在所述表单展示屏中的单行表单元素可展示数目等于Nuer,以及确定当前的且在所述表单展示屏中的单个表单元素可展示宽度等于所述内容区域宽度除以Nuer;根据所述表单页面的表单元素总数与所述单行可展示表单元素数目的比较结果,判断所述表单页面的所有表单元素是否需要换行展示,具体包括:在所述表单元素总数小于等于所述单行可展示表单元素数目时,判定不需要换行展示,而在所述表单元素总数大于所述单行可展示表单元素数目时,判定需要换行展示;若需要,则根据所述单个表单元素可展示宽度,使用弹性盒display:flex布局模式的伸缩换行flex-wrap属性在所述表单展示屏中换行展示所述所有表单元素。

全文数据:

权利要求:

百度查询: 北京洞悉网络有限公司 适用于左右双屏的表单页面自适配展示方法、装置、计算机设备及计算机可读存储介质

免责声明
1、本报告根据公开、合法渠道获得相关数据和信息,力求客观、公正,但并不保证数据的最终完整性和准确性。
2、报告中的分析和结论仅反映本公司于发布本报告当日的职业理解,仅供参考使用,不能作为本公司承担任何法律责任的依据或者凭证。