浏览器窗口内分块拉伸方法及装置制造方法及图纸

本发明专利技术提供一种浏览器窗口内分块拉伸方法，所述浏览器窗口内至少包括第一分块和与所述第一分块相邻的第二分块，所述方法包括：在所述第一分块内通过CSS设置拖动条；设置所述第一分块的尺寸随着所述拖动条的尺寸变化而自适应变化；以及设置所述第二分块的尺寸根据所述第一分块的尺寸自适应调整。本发明专利技术还提供一种浏览器窗口内分块拉伸装置。上述浏览器窗口内分块拉伸方法及装置简单可行，所需要的代码量少，节约流量成本。

【技术实现步骤摘要】

本专利技术涉及计算机
，尤其涉及一种浏览器窗口内分块拉伸方法及装置。
技术介绍
随着计算机技术和互联网技术的飞速发展，浏览器逐渐成为人们获取信息、娱乐、工作等的必不可少的工具。用户在其终端设备，如个人电脑、笔记本电脑、平板电脑、手机等中安装浏览器客户端之后即可使用浏览器。经由终端设备的显示屏幕提供的浏览器窗口中可分区域显示各种信息或者界面的分块，比如提供新闻链接的新闻信息分块、提供视频链接的视频信息分块、展现网友评论的评论信息分块、提供给用户输入信息的输入框分块、图片分块等。浏览器窗口内的分块可通过拖动条进行拉伸，从而调整其在窗口中的宽度或者高度比例。目前，浏览器窗口内分块的拉伸效果主要是采用JavaScript脚本语言配合DOM(DocumentObjectModel，文档对象模型)操作来实现。比如，当用户将鼠标按在拖动条上的时候，会触发mousedown事件，处理模块使用mousedown事件记录鼠标的位置；然后鼠标移动的时候，触发mousemove事件，处理模块通过mousemove事件实时记录鼠标的位置，然后通过实时变化的距离调整分块的宽度或高度。然而，采用JavaScript对浏览器窗口内分块进行拉伸需要一定的计算机基础，对用户而言技术门槛较高，并且通过上述方式需要不断计算鼠标的位置并且实时给对应元素赋予宽度值和/或高度值，由于不停地计算，系统的性能损耗比较大，更重要的是计算所需的代码量比较大，如果碰到网页站点访问量大的时候，对分块进行拉伸的操作就会带来相当大的流量成本。
技术实现思路
有鉴于此，本专利技术提供一种浏览器窗口内分块拉伸方法及装置，对用户而言简单可行，所需要的代码量少，节约流量成本。本专利技术实施例提供的一种浏览器窗口内分块拉伸方法，所述浏览器窗口内至少包括第一分块和与所述第一分块相邻的第二分块，所述方法包括：在所述第一分块内通过CSS设置拖动条；设置所述第一分块的尺寸随着所述拖动条的尺寸变化而自适应变化；以及设置所述第二分块的尺寸根据所述第一分块的尺寸自适应调整。本专利技术实施例提供的一种浏览器窗口内分块拉伸装置，所述浏览器窗口内至少包括第一分块和与所述第一分块相邻的第二分块，所述装置包括：第一设置模块，用于在所述第一分块内通过CSS设置拖动条；第二设置模块，用于设置所述第一分块的尺寸随着所述拖动条的尺寸变化而自适应变化；以及第三设置模块，用于设置所述第二分块的尺寸根据所述第一分块的尺寸自适应调整。本专利技术实施例提供的浏览器窗口内分块拉伸方法及装置，通过CSS在第一分块内设置拖动条，通过改变拖动条的尺寸来改变该第一分块的尺寸，同时，使第二分块的尺寸根据该第一分块的尺寸作自适应调整，简单可行，并且CSS代码运转在浏览器的底层，性能高，采用CSS实现浏览器窗口内分块的拉伸功能所需要的代码量也比使用JavaScript少了多个数量级，大大节约了流量成本，此外，后期的维护成本也较低。。为让本专利技术的上述和其他目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附图式，作详细说明如下。附图说明图1为本专利技术实施例提供的浏览器窗口内分块拉伸方法及装置所应用的终端设备的一个实施例的结构框图。图2为本专利技术第一实施例提供的浏览器窗口内分块拉伸方法的流程示意图。图3为图2中步骤S11的主要子步骤的流程示意图。图4为图2中步骤S11的进一步的子步骤的流程示意图。图5为本专利技术第二实施例提供的浏览器窗口内分块拉伸方法的进一步步骤的流程示意图。图6为本专利技术第三实施例提供的浏览器窗口内分块拉伸装置的结构框图。图7为图6中第一设置模块的结构框图。图8为本专利技术第四实施例提供的浏览器窗口内分块拉伸装置的结构框图。图9为图8中保护模块的结构框图。具体实施方式为更进一步阐述本专利技术为实现预定专利技术目的所采取的技术手段及功效，以下结合附图及较佳实施例，对依据本专利技术的具体实施方式、结构、特征及其功效，详细说明如后。本专利技术施例提供的浏览器窗口内分块拉伸方法及装置应用于安装有浏览器客户端的终端设备，其中，该终端设备可为个人电脑、笔记本电脑、平板电脑、手机等。该浏览器窗口包括显示各种信息或者界面的多个分块，比如提供新闻链接的新闻信息分块、提供视频链接的视频信息分块、展现网友评论的评论信息分块、提供给用户输入信息的输入框分块、图片分块等，该多个分块按照一定布局分布在该浏览器窗口内。在本专利技术实施例中，该浏览器窗口内至少包括相邻的两个分块(如第一分块、第二分块)，该两个分块可采用左右并列或者上下并列的方式布局于该浏览器窗口内。请参考图1，图1为本专利技术实施例提供的浏览器窗口内分块拉伸方法及装置所应用的终端设备的一个实施例的结构框图。如图1所示，终端设备100包括存储器102、存储控制器104，一个或多个(图中仅示出一个)处理器106、外设接口108、射频模块110、定位模块112、摄像模块114、音频模块116、显示模块118以及按键模块120。这些组件通过一条或多条通讯总线/信号线122相互通讯。可以理解，图1所示的结构仅为示意，终端设备100还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。其中，存储器102可用于存储软件程序以及模块，如本专利技术实施例中的浏览器窗口内分块拉伸方法及装置对应的程序指令/模块，处理器106通过运行存储在存储器102内的软件程序以及模块，从而执行各种功能应用以及数据处理。存储器102可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器102可进一步包括相对于处理器106远程设置的存储器，这些远程存储器可以通过网络连接至终端设备100。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。处理器106以及其他可能的组件对存储器102的访问可在存储控制器104的控制下进行。外设接口108将各种输入/输出装置耦合至处理器106以及存储器102。处理器106运行存储器102内的各种软件、指令以执行终端设备100的各种功能以及进行数据处理。在一些实施例中，外设接口108，处理器106以及存储控制器104可以在单个芯片中实现，在其他一些实例中，也可以分别由独立的芯片实现。射频模块110用于接收以及发送电磁波，实现电磁波与电信号的相互转换，从而与通讯网络或者其他设备进行通讯。射频模块110可包括各种现有的用于执行这些功能的电路元件，例如，天线、射频收发器、数字信号处理器、加密/解密芯片、用户身份模块(SIM)卡、存储器等等。射频模块110可与各种网络如互联网、企业内部网、无线网络进行通讯或者通过无线网络与其他设备进行通讯。上述的无线网络可包括蜂窝式电话网、无线局域网或者城域网。上述的无线网络可以使用各种通信标准、协议及技术，包括但并不限于全球移动通信系统(GlobalSystemforMobileCommunication,GSM)、增强型移动通信技术(EnhancedDataGSMEnvironment,EDGE),宽带码分多址技术(widebandcodedivisionmultipleaccess,W-CDM本文档来自技高网...

【技术保护点】
一种浏览器窗口内分块拉伸方法，所述浏览器窗口内至少包括第一分块和与所述第一分块相邻的第二分块，其特征在于，所述方法包括：在所述第一分块内通过CSS设置拖动条；设置所述第一分块的尺寸随着所述拖动条的尺寸变化而自适应变化；以及设置所述第二分块的尺寸根据所述第一分块的尺寸自适应调整。

【技术特征摘要】
1.一种浏览器窗口内分块拉伸方法，所述浏览器窗口内至少包括第一分块和与所述第一分块相邻的第二分块，其特征在于，所述方法包括：在所述第一分块内通过CSS设置拖动条；设置所述第一分块的尺寸随着所述拖动条的尺寸变化而自适应变化；以及设置所述第二分块的尺寸根据所述第一分块的尺寸自适应调整。2.根据权利要求1所述的方法，其特征在于，所述在所述第一分块内通过CSS设置拖动条包括：在表示所述第一分块的布局的HTML结构中增加关于所述拖动条的标签；以及对所述拖动条的相关参数进行设置，其中，将CSS的overflow属性设置为scroll或者auto，并将CSS的resize属性设置为非none状态。3.根据权利要求2所述的方法，其特征在于，所述对所属拖动条的相关参数进行设置还包括：设置所述拖动条与所述第一分块始终位于同一行。4.根据权利要求2所述的方法，其特征在于，所述对所述拖动条的相关参数进行设置还包括：设置CSS的transform属性使所述拖动条在拉伸时不覆盖所述第二分块的内容。5.根据权利要求2所述的方法，其特征在于，所述对所述拖动条的相关参数进行设置还包括：设置所述拖动条的尺寸和透明度。6.根据权利要求5所述的方法，其特征在于，所述设置所述拖动条的尺寸和透明度包括：使所述拖动条的高度与所述第一分块的高度一致；以及使所述拖动条为透明状态。7.根据权利要求2所述的方法，其特征在于，所述在所述第一分块内通过CSS设置拖动条还包括：自定义所述拖动条的可拖拽控件的高度为所述拖动条的高度。8.根据权利要求1所述的方法，其特征在于，所述方法还包括：在表示所述第一分块的内容的HTML结构中增加用于保护所述第一分块的内容的标签；以及对所述第一分块的内容的相关参数进行设置。9.根据权利要求8所述的方法，其特征在于，所述对所述第一分块的内容的相关参数进行设置包括：将所述第一分块的内容设置成始终不换行并占满整个所述第一分块；以及对CSS的position属性和z-index属性进行设置使所述第一分块的内容不会被所述拖动条覆盖。10.一种浏览器窗口...

【专利技术属性】
技术研发人员：张鑫旭，
申请(专利权)人：腾讯科技深圳有限公司，
类型：发明
国别省市：广东;44