一种响应式大屏展示方法和装置与流程

文档序号:15229774发布日期:2018-08-21 19:15阅读:388来源:国知局

本发明涉及计算机技术领域,特别涉及一种响应式大屏展示方法和装置。



背景技术:

随着信息技术的发展,具有展示功能的终端越来越受到用户的青睐,用户可以通过终端的大屏实时浏览自己感兴趣的资讯。而如何更好地向用户展示资讯,提高用户体验,对技术人员来说是至关重要的。

现有的大屏展示方法一般针对单一的终端类型,例如,仅针对手机端,或仅针对电脑端。该方法无法满足用户通过不同终端浏览页面的需求,导致用户体验较差。



技术实现要素:

本发明实施例提供了一种响应式大屏展示方法和装置,能够提高用户体验。

第一方面,本发明实施例提供了一种响应式大屏展示方法,创建与终端类型相对应的样式文件,还包括:

当检测到针对功能组件的触发时,确定接入的当前终端类型;

确定所述当前终端类型对应的当前样式文件;

根据所述当前样式文件,进行大屏展示。

优选地,

所述创建与终端类型相对应的样式文件,包括:

针对每一种终端类型,均执行:

确定大屏展示页面;

将待展示数据添加到所述大屏展示页面,生成展示原型;

从所述展示原型中提取图片信息;

将所述展示原型转换成html(hypertextmarkuplanguage,超文本标记语言)代码,并插入所述图片信息,得到与当前终端类型相对应的样式文件。

优选地,

进一步包括:预先设置图表插件;

所述根据所述当前样式文件,进行大屏展示,包括:

利用所述图表插件将所述当前样式文件中的图表转换成动态图表;

在大屏上对所述动态图表进行展示。

优选地,

进一步包括:预先设置javascript库;

所述根据所述当前样式文件,进行大屏展示,包括:

利用所述javascript库,在大屏上对所述当前样式文件中的文本数据进行动态展示。

优选地,

进一步包括:预先设置样式库;

所述根据所述当前样式文件,进行大屏展示,包括:

利用所述样式库,使所述当前样式文件在大屏上实现动画效果。

第二方面,本发明实施例提供了一种响应式大屏展示装置,包括:

创建单元,用于创建与终端类型相对应的样式文件;

确定单元,用于当检测到针对功能组件的触发时,确定接入的当前终端类型;确定所述当前终端类型对应的当前样式文件;

展示单元,用于根据所述确定单元确定的所述当前样式文件,进行大屏展示。

优选地,

所述创建单元,用于针对每一种终端类型,均执行:确定大屏展示页面;将待展示数据添加到所述大屏展示页面,生成展示原型;从所述展示原型中提取图片信息;将所述展示原型转换成html代码,并插入所述图片信息,得到与当前终端类型相对应的样式文件。

优选地,

进一步包括:

设置单元,用于设置图表插件;

所述展示单元,用于利用所述设置单元设置的所述图表插件将所述当前样式文件中的图表转换成动态图表;在大屏上对所述动态图表进行展示。

优选地,

所述设置单元,进一步用于设置javascript库;

所述展示单元,用于利用所述设置单元设置的所述javascript库,在大屏上对所述当前样式文件中的文本数据进行动态展示。

优选地,

所述设置单元,进一步用于设置样式库;

所述展示单元,用于利用所述设置单元设置的所述样式库,使所述当前样式文件在大屏上实现动画效果。

本发明实施例提供了一种响应式大屏展示方法和装置,其中,该方法预先创建与不同终端类型相对应的样式文件,能够根据接入的终端类型对应的样式文件,进行大屏展示,提供适应不同终端类型的展示样式。该方法能够提高用户体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。

图1是本发明一个实施例提供的一种响应式大屏展示方法的流程图;

图2是本发明一个实施例提供的一种响应式大屏展示装置的结构示意图;

图3是本发明另一个实施例提供的一种响应式大屏展示装置的结构示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例,基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例,都属于本发明保护的范围。

如图1所示,本发明实施例提供了一种响应式大屏展示方法,该方法可以包括以下步骤:

步骤101:创建与终端类型相对应的样式文件;

步骤102:当检测到针对功能组件的触发时,确定接入的当前终端类型;

步骤103:确定当前终端类型对应的当前样式文件;

步骤104:根据当前样式文件,进行大屏展示。

该方法预先创建与不同终端类型相对应的样式文件,能够根据接入的终端类型对应的样式文件,进行大屏展示,提供适应不同终端类型的展示样式。该方法能够提高用户体验。

其中,终端类型包括:电脑、手机、平板电脑等。

在本发明的一个实施例中,创建与终端类型相对应的样式文件,包括:

针对每一种终端类型,均执行:

确定大屏展示页面;

将待展示数据添加到大屏展示页面,生成展示原型;

从展示原型中提取图片信息;

将展示原型转换成html代码,并插入图片信息,得到与当前终端类型相对应的样式文件。

其中,图片信息中包括图标、背景图片等。

在本发明的一个实施例中,为了对图表进行动态展示,该方法还包括:预先设置图表插件;

根据当前样式文件,进行大屏展示,包括:

利用图表插件将当前样式文件中的图表转换成动态图表;

在大屏上对动态图表进行展示。

在本发明的一个实施例中,为了对大屏展示的数据实时更新,该方法还包括:预先设置javascript库;

根据当前样式文件,进行大屏展示,包括:

利用javascript库,在大屏上对当前样式文件中的文本数据进行动态展示。

通过该方法可以实现展示数据的定时刷新、实时获取等功能。

在本发明的一个实施例中,该方法还包括:预先设置样式库;

所述根据所述当前样式文件,进行大屏展示,包括:

利用所述样式库,使所述当前样式文件在大屏上实现动画效果。

如图2所示,本发明实施例提供了一种响应式大屏展示装置,包括:

创建单元201,用于创建与终端类型相对应的样式文件;

确定单元202,用于当检测到针对功能组件的触发时,确定接入的当前终端类型;确定当前终端类型对应的当前样式文件;

展示单元203,用于根据确定单元202确定的当前样式文件,进行大屏展示。

在本发明的一个实施例中,创建单元201,用于针对每一种终端类型,均执行:确定大屏展示页面;将待展示数据添加到大屏展示页面,生成展示原型;从展示原型中提取图片信息;将展示原型转换成html代码,并插入图片信息,得到与当前终端类型相对应的样式文件。

在本发明的一个实施例中,如图3所示,该装置还包括:

设置单元204,用于设置图表插件;

展示单元203,用于利用设置单元204设置的图表插件将当前样式文件中的图表转换成动态图表;在大屏上对动态图表进行展示。

在本发明的一个实施例中,设置单元204,进一步用于设置javascript库;

展示单元203,用于利用设置单元204设置的javascript库,在大屏上对当前样式文件中的文本数据进行动态展示。

在本发明的一个实施例中,设置单元204,进一步用于设置样式库;

展示单元203,用于利用设置单元204设置的样式库,使当前样式文件在大屏上实现动画效果。

在本发明的一个实施例中,实现大屏展示的具体过程如下:

(1)设计响应式大屏系统的展示原型

利用photoshop等设计软件设计相应的响应式大屏展示页面,将要展示的数据添加到页面中。

(2)保存图片

将展示页面中需要的背景图片、图标等从设计原型中提取出来。

(3)搭建环境(建立大屏展示站点)

利用相关软件搭建开发所需要的环境,并初步测试。

(4)引入相关的css(cascadingstylesheets,层叠样式表)和jquery

将开发所用到的css样式库和jquery库引入到开发环境中。

(5)将设计原型转换成html代码

将设计原型转换成对应的html代码,引入保存的图标、背景图片等,使html代码和设计原型外观一致。

(6)引入echarts图表插件

将原型中用到的数据图表通过echarts生成动态的图表,例如,柱状图、折线图、饼状图、关系图等。

(7)引入相关的javascript代码

通过javascript的形式实现原型中数据的动态展示,例如,定时刷新、数据实时获取等。

(8)原型增加动画效果

通过html5和css3中新增的动画属性,给原型增加动画效果。

(9)原型框架兼容性调试

测试框架的兼容性,达到兼容大部分主流浏览器的功能,主要包括:ie、360、谷歌、火狐以及不同终端设备的响应式调试。

本发明实施例提供了一种可读介质,包括执行指令,当存储控制器的处理器执行执行指令时,存储控制器执行上述任一实施例的方法。

本发明实施例提供了一种存储控制器,包括:处理器、存储器和总线;

存储器用于存储执行指令,处理器与存储器通过总线连接,当存储控制器运行时,处理器执行存储器存储的执行指令,以使存储控制器执行上述任一实施例的方法。

上述装置内的各单元之间的信息交互、执行过程等内容,由于与本发明方法实施例基于同一构思,具体内容可参见本发明方法实施例中的叙述,此处不再赘述。

综上,本发明各个实施例至少具有如下效果:

1、在本发明实施例中,该方法预先创建与不同终端类型相对应的样式文件,能够根据接入的终端类型对应的样式文件,进行大屏展示,提供适应不同终端类型的展示样式。该方法能够提高用户体验。

2、在本发明实施例中,创新了大屏展示的效果,实现数据的动态展示,通过html5+css3解决了不同设备的适用性,满足各种终端的展示需求。

需要说明的是,在本文中,诸如第一和第二之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个〃····〃”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同因素。

本领域普通技术人员可以理解:实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成,前述的程序可以存储在计算机可读取的存储介质中,该程序在执行时,执行包括上述方法实施例的步骤;而前述的存储介质包括:rom、ram、磁碟或者光盘等各种可以存储程序代码的介质中。

最后需要说明的是:以上所述仅为本发明的较佳实施例,仅用于说明本发明的技术方案,并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所做的任何修改、等同替换、改进等,均包含在本发明的保护范围内。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1