CN108509133A - 搜索组件展示方法和装置 - Google Patents

搜索组件展示方法和装置 Download PDF

Info

Publication number
CN108509133A
CN108509133A CN201710109612.8A CN201710109612A CN108509133A CN 108509133 A CN108509133 A CN 108509133A CN 201710109612 A CN201710109612 A CN 201710109612A CN 108509133 A CN108509133 A CN 108509133A
Authority
CN
China
Prior art keywords
component
described search
page
search component
event
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201710109612.8A
Other languages
English (en)
Other versions
CN108509133B (zh
Inventor
童可
范跃伟
刘秀芳
甄石
陈彬
陈善彪
兰慧
金刚铭
吕家明
黄珏
曹梅
吴雷
吕雪
孙晓雨
周民
周一民
罗先东
王阳阳
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201710109612.8A priority Critical patent/CN108509133B/zh
Priority to PCT/CN2018/074982 priority patent/WO2018153232A1/zh
Publication of CN108509133A publication Critical patent/CN108509133A/zh
Application granted granted Critical
Publication of CN108509133B publication Critical patent/CN108509133B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0486—Drag-and-drop
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明涉及一种搜索组件展示方法和装置。所述方法包括：监测到对页面上搜索组件的触发事件，根据所述触发事件将所述搜索组件设置为可移动状态；检测到对所述搜索组件的移动事件，根据所述移动事件控制所述搜索组件在所述页面上移动；检测到对所述搜索组件的抬起事件，获取所述抬起事件发生时所述搜索组件在所述页面上的最后拖动位置；根据所述搜索组件的最后拖动位置确定所述搜索组件在所述页面上的目标展示位置；将所述搜索组件在所述目标展示位置上进行展示。上述搜索组件展示方法和装置，实现了灵活控制搜索组件在页面上的展示位置，提高了搜索效率，防止搜索流量丢失。

Description

搜索组件展示方法和装置
技术领域
本发明涉及计算机应用领域，特别是涉及一种搜索组件展示方法和装置。
背景技术
随着移动终端的普及，越来越多的用户使用移动终端，通过移动终端上安装的浏览器搜索信息。因移动终端的屏幕越来越大，通常搜索组件位于浏览器的页面顶部，操作不便，降低了搜索效率，导致搜索流量流失。
发明内容
本发明实施例提供一种搜索组件展示方法和装置，可以灵活的控制搜索组件在页面的位置，提高了搜索效率，防止搜索流量流失。
一种搜索组件展示方法，包括：
监测到对页面上搜索组件的触发事件，根据所述触发事件将所述搜索组件设置为可移动状态；
检测到对所述搜索组件的移动事件，根据所述移动事件控制所述搜索组件在所述页面上移动；
检测到对所述搜索组件的抬起事件，获取所述抬起事件发生时所述搜索组件在所述页面上的最后拖动位置；
根据所述搜索组件的最后拖动位置确定所述搜索组件在所述页面上的目标展示位置；
将所述搜索组件在所述目标展示位置上进行展示。
一种搜索组件展示装置，包括：
状态变更模块，用于监测到对页面上搜索组件的触发事件，根据所述触发事件将所述搜索组件设置为可移动状态；
移动控制模块，用于检测到对所述搜索组件的移动事件，根据所述移动事件控制所述搜索组件在所述页面上移动；
坐标位置获取模块，用于检测到对所述搜索组件的抬起事件，获取所述抬起事件发生时所述搜索组件在所述页面上的最后拖动位置；
位置确定模块，用于根据所述搜索组件的最后拖动位置确定所述搜索组件在所述页面上的目标展示位置；
展示模块，用于将所述搜索组件在所述目标展示位置上进行展示。
本发明实施例中搜索组件展示方法和装置，检测到对搜索组件的触发事件，将所述搜索组件设置为可移动状态，检测到移动事件，根据所述移动事件控制所述搜索组件在页面上移动，在检测到抬起事件时，根据抬起事件获取搜索组件的最后拖动位置，根据最后拖动位置确定搜索组件在页面上的目标展示位置，将搜索组件展示在目标展示位置，实现了灵活控制搜索组件在页面上的展示位置，提高了搜索效率，防止搜索流量丢失。
附图说明
图1为一个实施例中搜索组件展示方法的应用环境示意图；
图2为一个实施例中终端的内部结构示意图；
图3为一个实施例中搜索组件展示方法的流程图；
图4为另一个实施例中搜索组件展示方法的流程图；
图5为搜索框从浏览器页面的顶部移动到底部的过程示意图；
图6为另一个实施例中搜索组件展示方法的流程图；
图7为搜索组件从搜索框变为悬浮搜索按钮的示意图；
图8为另一个实施例中搜索组件展示方法的流程图；
图9为一个实施例中搜索组件展示装置的结构框图；
图10为另一个实施例中搜索组件展示装置的结构框图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
可以理解，本发明所使用的术语“第一”、“第二”等可在本文中用于描述各种元件，但这些元件不受这些术语限制。这些术语仅用于将第一个元件与另一个元件区分。举例来说，在不脱离本发明的范围的情况下，可以将第一指定位置称为第二指定位置，且类似地，可将第二指定位置称为第一指定位置。第一指定位置和第二指定位置两者都是指定位置，但其不是同一指定位置。
图1为一个实施例中搜索组件展示方法的应用环境示意图。如图1所示，该应用环境包括终端110。终端110上显示包含搜索组件的页面，监测到用户对页面上搜索组件的触发事件，将搜索组件设置为可移动状态；检测到移动事件，控制所述搜索组件跟随手指等移动而移动；检测到抬起事件，则获取抬起事件发生时所述搜索组件在所述页面上最后拖动位置，根据最后拖动位置确定搜索组件在所述页面上的目标展示位置，将所述搜索组件展示在所述目标展示位置。可灵活的控制搜索组件在页面上展示的位置，提高搜索效率，防止搜索流量丢失。
图2为一个实施例中终端的内部结构示意图。如图2所示，该终端包括通过系统总线连接的处理器、非易失性存储介质、内存储器、网络接口、显示屏和输入装置。其中，终端的非易失性存储介质存储有操作系统，还包括一种搜索组件展示装置，该搜索组件展示装置用于实现一种搜索组件展示方法。该处理器用于提供计算和控制能力，支撑整个终端的运行。终端中的内存储器为非易失性存储介质中的搜索组件展示装置的运行提供环境，该内存储器中可储存有计算机可读指令，该计算机可读指令被所述处理器执行时，可使得所述处理器执行一种搜索组件展示方法。网络接口用于与服务器进行网络通信，如发送搜索请求至服务器，接收服务器返回的搜索结果等。终端的显示屏可以是液晶显示屏或者电子墨水显示屏等，输入装置可以是显示屏上覆盖的触摸层，也可以是终端外壳上设置的按键、轨迹球或触控板，也可以是外接的键盘、触控板或鼠标等。该终端可以是手机、平板电脑、个人数字助理或穿戴式设备等。本领域技术人员可以理解，图2中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的终端的限定，具体的终端可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
图3为一个实施例中搜索组件展示方法的流程图。如图3所示，一种搜索组件展示方法，包括：
步骤302，监测到对页面上搜索组件的触发事件，根据所述触发事件将所述搜索组件设置为可移动状态。
具体地，监测到对页面上搜索组件的触发事件后，检测所述触发事件是否为指定事件，若是指定事件，则根据触发事件将所述搜索组件设置为可移动状态，若否，则结束。
页面可为浏览器页面、阅读器页面、PDF页面等。搜索组件是指具有搜索功能的控件。对搜索组件的触发事件可为对搜索组件的按压事件。指定事件可为用户通过手指或触控笔等操作对象长按所述搜索组件。长按是指按压时间超过预设时长的按压操作。此外，页面也可为二次搜索页面。二次搜索页面是指在一次搜索得到搜索结果后继续搜索的页面。
若所述触发事件为指定事件，可将搜索组件由不可移动状态变为可移动状态。
搜索组件可以搜索框、悬浮框或悬浮按钮形式显示。
在一个实施例中，指定事件可以为双击所述搜索组件，或者按压的压力超过压力阈值的按压事件。
步骤304，检测到对所述搜索组件的移动事件，根据所述移动事件控制所述搜索组件在所述页面上移动。
具体地，检测到对所述搜索组件的移动事件，即检测到拖动所述搜索组件移动，则控制搜索组件跟随操作对象的移动轨迹而移动。
步骤306，检测到对所述搜索组件的抬起事件，获取所述抬起事件发生时所述搜索组件在所述页面上的最后拖动位置。
具体地，检测到对搜索组件的抬起事件是指检测到操作对象离开终端的屏幕。搜索组件在页面上的最后拖动位置是指操作对象离开终端的屏幕时搜索组件在页面上的位置。搜索组件在页面上的最后拖动位置可采用搜索组件的指定点坐标、搜索组件的长和宽等参数表示。所述搜索组件的指定点可为搜索组件的中心定位点或者搜索组件的左上角定位点或搜索组件的右下角定位点等。
步骤308，根据所述搜索组件的最后拖动位置确定所述搜索组件在所述页面上的目标展示位置。
具体地，目标展示位置可为页面上的指定位置或者最后拖动位置。
步骤310，将所述搜索组件在所述目标展示位置上进行展示。
本发明实施例中搜索组件展示方法，检测到对搜索组件的触发事件，将所述搜索组件设置为可移动状态，检测到移动事件，根据所述移动事件控制所述搜索组件在页面上移动，在检测到抬起事件时，根据抬起事件获取搜索组件的最后拖动位置，根据最后拖动位置确定搜索组件在页面上的目标展示位置，将搜索组件展示在目标展示位置，实现了灵活控制搜索组件在页面上的展示位置，提高了搜索效率，防止搜索流量丢失。
在一个实施例中，所述根据所述移动事件控制所述搜索组件在所述页面上移动，包括：根据所述移动事件记录移动前和移动后的坐标位置；根据所述移动前和移动后的坐标位置得到偏移量；根据所述偏移量控制所述搜索组件在所述页面上移动。
具体地，检测到对搜索组件的移动事件，可实时记录操作对象的坐标位置。记录了操作对象移动前和移动后的坐标位置，根据操作对象移动前和移动后的坐标位置可得到偏移量。获取到搜索组件在操作对象移动前的坐标位置，结合偏移量可得到搜索组件在操作对象移动后的坐标位置，从而控制搜索组件移动到搜索组件在操作对象移动后的坐标位置上。例如，操作对象为手指，手指在移动前的坐标为(x1,y1)，移动后的坐标为(x2,y2)，则手指水平和垂直方向的位移分别为Fx＝x2-x1，Fy＝y2-y1。
在一个实施例中，所述根据所述搜索组件的最后拖动位置确定所述搜索组件在所述页面上的目标展示位置，包括：将所述搜索组件的最后拖动位置的坐标与坐标阈值进行比较，若小于或等于坐标阈值，则确定第一指定位置为所述搜索组件在所述页面上的目标展示位置，若大于所述坐标阈值，则确定第二指定位置为所述搜索组件在所述页面上的目标展示位置。
搜索组件的最后拖动位置的坐标可采用搜索组件的指定点坐标表示。坐标阈值可为终端的屏幕尺寸的二分之一。第一指定位置可为屏幕上半部分的某一位置。第二指定位置可为屏幕下半部分的某一位置。例如第一指定位置可为屏幕上页面的顶部，第二指定位置可为屏幕上页面的底部。
可通过系统接口函数获取屏幕高度，将在最后拖动位置时，搜索组件的中心定位点的纵坐标与屏幕高度的二分之一进行比较，若搜索组件的中心定位点的纵坐标小于或等于屏幕高度的二分之一，则将搜索组件放置在屏幕上页面的顶部，若搜索组件的中心定位点的纵坐标大于屏幕高度的二分之一，则将搜索组件放置在屏幕上页面的底部。
在一个实施例中，根据所述偏移量控制所述搜索组件在所述页面上移动，包括：根据所述偏移量确定所述搜索组件移动时将超出所述页面边界，则调整所述搜索组件移动的偏移量以使所述搜索组件在所述页面内移动。
具体地，根据偏移量确定搜索组件移动时超出页面边界，则以搜索组件的中心为定位点，中心的新位置距离左右两边距离不能小于搜索组件的宽度的二分之一，小于搜索组件的宽度的二分之一，则将搜索组件的宽度调整为搜索组件的宽度的二分之一。中心的新位置距离上下两边距离不能小于搜索组件的高度的二分之一，若小于，则将搜索组件的高度调整为搜索组件的高度的二分之一。
在一个实施例中，本发明实施例中的搜索组件展示方法还包括：将所述搜索组件在所述第一指定位置以搜索框、悬浮框或悬浮按钮形式展示；将所述搜索组件在所述第二指定位置以搜索框、悬浮框或悬浮按钮形式展示。
在一个实施例中，在所述将所述搜索组件在所述目标展示位置上进行展示之后，所述方法还包括：将所述搜索组件设置为不可移动状态。将搜索组件设置为不可移动状态，可固定搜索组件，防止随意移动。下次再拖动搜索组件需要重新激活搜索组件，将搜索组件设置为可移动状态。
下面结合具体的应用场景描述搜索组件展示方法的流程。如图4所示，搜索组件为搜索框，页面为浏览器页面，指定事件为对搜索框的长按事件。如图4所示，一种搜索组件展示方法，包括：
步骤402，监听对搜索框的触发事件。
通过系统接口函数监听对搜索框的触发事件。
步骤404，若监听到对搜索框的长按事件，则激活搜索框，并将搜索框设置为可移动状态。
通过系统接口函数监听到对搜索框的触发事件为长按事件，则激活搜索框，将搜索框的不可移动状态设置为可移动状态。
可移动状态标志可采用一个参数表示，该参数为真时，搜索框可跟随浏览器内部移动位置。
步骤406，监测到对搜索框的移动事件。
通过系统接口函数监听对搜索框的移动事件。
步骤408，判断搜索框是否为可移动状态，若是，则执行步骤410，若否，结束。
通过系统接口函数获取表示搜索框的可移动状态标志的值是否为真，若是，则搜索框为可移动状态，若否，则搜索框为不可移动状态。
步骤410，监测操作对象的移动。
具体地，操作对象可为手指或触控笔等。监测手指或触控笔的移动轨迹。
步骤412，记录操作对象移动前和移动后的坐标位置。
具体地，实时记录操作对象移动的坐标位置。
步骤414，判断是否结束移动，若是，则执行步骤420，若否，执行步骤416。
通过系统函数接口判断是否检测到操作对象的抬起事件，若检测到操作对象的抬起事件，则表示结束移动。
步骤416，根据操作对象移动前和移动后的坐标位置计算偏移量。
步骤418，根据偏移量控制搜索框在浏览器页面上移动，再继续执行步骤410。
具体地，搜索框的位置可采用3个参数记录，左上角定位点坐标(或者中心定位点坐标)、搜索框的长度width、搜索框的高度height，搜索框在移动过程中，通过3个参数可以定位到在浏览器中的位置。获取到搜索框在操作对象移动前的坐标位置，根据偏移量可得到搜索框在操作对象移动后的坐标位置。
步骤420，获取搜索框的最后拖动位置，根据最后拖动位置确定搜索框在浏览器页面上的停靠位置。
具体地，获取搜索框的最后拖动位置，获取搜索框的中心定位点坐标，若判断中心定位点的纵坐标小于屏幕高度的二分之一，则停靠在顶部位置，回到原来初始状态，即搜索框左上角坐标与浏览器左上角位置重合，左上角坐标(0，0)，x＝0，y＝0；若搜索框中心的纵坐标大于屏幕高度的二分之一，则停靠在底部位置，停靠在浏览器工具栏上方，搜索框左上角坐标为x＝0，y＝浏览器高度-工具栏高度-搜索框高度。停靠位置是指目标展示位置。
步骤422，将搜索框移动到停靠位置进行展示，并将搜索框设置为不可移动状态。
具体地，将搜索框移动到停靠位置进行展示，将搜索框的可移动状态变为不可移动状态。
在将搜索框设置为不可移动状态后，若用户想重新放置搜索框，则需要长按激活搜索框为可移动状态，搜索框变为可移动状态后，才可被拖动。
上述搜索组件展示方法，通过监测到对搜索框的触发事件，监测到触发事件为长按事件，则将搜索框设置为可移动状态，监测到操作对象的移动，根据操作对象移动前和移动后的坐标位置计算偏移量，根据偏移量控制搜索框在浏览器页面上移动，在检测到结束移动时，获取搜索框的最后拖动位置，根据最后拖动位置确定了搜索框在浏览器页面上的停靠位置，将搜索框在停靠位置进行展示，实现了灵活的展示搜索框，方便用户使用搜索框进行搜索，提高了搜索效率，防止搜索流量丢失。
图5为搜索框从浏览器页面的顶部移动到底部的过程示意图。如图5所示，第一幅图上搜索框停留在浏览器页面的顶部位置，接收到用户手指的长按激活变为可移动状态，手指拖动搜索框；在第二幅图中，手指拖动搜索框移动超过了浏览器页面的二分之一位置；在第三幅图中，搜索框停靠在浏览器页面的底部位置。
图6为另一个实施例中搜索组件展示方法的流程图。如图6所示，搜索组件在浏览器顶部为搜索框形式，页面为浏览器页面，指定事件为对搜索框的长按事件，搜索组件在浏览器底部为悬浮按钮形式。一种搜索组件展示方法，包括：
步骤602，在页面上显示搜索框。
步骤604，监听对搜索框的触发事件。
步骤606，若监听到对搜索框的长按事件，则激活搜索框，并将搜索框变为悬浮搜索按钮，以及将搜索框设置为可移动状态。
通过系统接口函数监听到对搜索框的触发事件为长按事件，则激活搜索框，将搜索框的不可移动状态设置为可移动状态。
可移动状态标志可采用一个参数表示，该参数为真时，搜索框可跟随浏览器内部移动位置。
步骤608，监测到对搜索框的移动事件。
通过系统接口函数监听对搜索框的移动事件。
步骤610，判断搜索框是否为可移动状态，若是，则执行步骤612，若否，结束。
通过系统接口函数获取表示搜索框的可移动状态标志的值是否为真，若是，则搜索框为可移动状态，若否，则搜索框为不可移动状态。
步骤612，监测操作对象的移动。
具体地，操作对象可为手指或触控笔等。监测手指或触控笔的移动轨迹。
步骤614，记录操作对象移动前和移动后的坐标位置。
具体地，实时记录操作对象移动的坐标位置。
步骤616，判断是否结束移动，若是，则执行步骤622，若否，执行步骤618。
通过系统函数接口判断是否检测到操作对象的抬起事件，若检测到操作对象的抬起事件，则表示结束移动。
步骤618，根据操作对象移动前和移动后的坐标位置计算偏移量。
步骤620，根据偏移量控制悬浮搜索按钮在浏览器页面上移动，再继续执行步骤612。
具体地，悬浮搜索按钮的位置可采用悬浮搜索按钮的中心定位点坐标定位到在浏览器页面中的位置。获取到悬浮搜索按钮在操作对象移动前的坐标位置，根据偏移量可得到悬浮搜索按钮在操作对象移动后的坐标位置。
步骤622，获取悬浮搜索按钮的最后拖动位置，根据最后拖动位置确定悬浮搜索按钮在浏览器页面上的停靠位置在浏览器的底部。
具体地，获取悬浮搜索按钮的最后拖动位置，获取悬浮搜索按钮的中心定位点坐标，若判断中心定位点的纵坐标小于屏幕高度的二分之一，则停靠在顶部位置，回到原来初始状态，即悬浮搜索按钮恢复为搜索框，在浏览器左上角位置展示，左上角坐标(0，0)，x＝0，y＝0；若悬浮搜索按钮中心的纵坐标大于屏幕高度的二分之一，则停靠在底部位置，停靠在浏览器工具栏上方。停靠位置是指目标展示位置。
步骤624，将悬浮搜索按钮移动到停靠位置进行展示，并将搜索框设置为不可移动状态。
具体地，将搜索框移动到停靠位置进行展示，将搜索框的可移动状态变为不可移动状态。
上述搜索组件展示方法，通过监测到对搜索框的触发事件，监测到触发事件为长按事件，则将搜索框设置为可移动状态，以及将搜索框变为悬浮搜索按钮，节省空间，监测到操作对象的移动，根据操作对象移动前和移动后的坐标位置计算偏移量，根据偏移量控制搜索框在浏览器页面上移动，在检测到结束移动时，获取搜索框的最后拖动位置，根据最后拖动位置确定了搜索框在浏览器页面上的停靠位置，将搜索框在停靠位置进行展示，实现了灵活的展示搜索框，方便用户使用搜索框进行搜索，提高了搜索效率，防止搜索流量丢失。
图7为搜索组件从搜索框变为悬浮搜索按钮的示意图。如图7所示，在第一幅图中，在浏览器页面上显示搜索框，接收到手指长按搜索框，激活搜索框变为悬浮搜索按钮；在第二幅图中，手指拖动悬浮搜索按钮移动超过浏览器页面的中间位置，则将悬浮搜索按钮停靠在浏览器页面底部的工具栏上方；在第三幅图中，悬浮搜索按钮停靠在浏览器页面底部的工具栏上方。
图8为另一个实施例中搜索组件展示方法的流程图。如图8所示，搜索组件在浏览器顶部为搜索框形式，页面为浏览器页面，指定事件为对搜索框的长按事件，搜索组件在浏览器底部为悬浮按钮形式。一种搜索组件展示方法，包括：
步骤802，在页面上显示悬浮搜索按钮。
步骤804，监听对悬浮搜索按钮的触发事件。
步骤806，若监听到对悬浮搜索按钮的长按事件，则激活悬浮搜索按钮，并将悬浮搜索按钮设置为可移动状态。
步骤808，监测到对悬浮搜索按钮的移动事件。
通过系统接口函数监听对搜索框的移动事件。
步骤810，判断悬浮搜索按钮是否为可移动状态，若是，则执行步骤812，若否，结束。
通过系统接口函数获取表示悬浮搜索按钮的可移动状态标志的值是否为真，若是，则悬浮搜索按钮为可移动状态，若否，则悬浮搜索按钮为不可移动状态。
步骤812，监测操作对象的移动。
具体地，操作对象可为手指或触控笔等。监测手指或触控笔的移动轨迹。
步骤814，记录操作对象移动前和移动后的坐标位置。
具体地，实时记录操作对象移动的坐标位置。
步骤816，判断是否结束移动，若是，则执行步骤822，若否，执行步骤818。
通过系统函数接口判断是否检测到操作对象的抬起事件，若检测到操作对象的抬起事件，则表示结束移动。
步骤818，根据操作对象移动前和移动后的坐标位置计算偏移量。
步骤820，根据偏移量控制悬浮搜索按钮在浏览器页面上移动，再继续执行步骤812。
具体地，悬浮搜索按钮的位置可采用悬浮搜索按钮的中心定位点坐标定位到在浏览器页面中的位置。获取到悬浮搜索按钮在操作对象移动前的坐标位置，根据偏移量可得到悬浮搜索按钮在操作对象移动后的坐标位置。
步骤822，获取悬浮搜索按钮的最后拖动位置，根据最后拖动位置确定悬浮搜索按钮在浏览器页面上的停靠位置在浏览器的顶部。
具体地，获取悬浮搜索按钮的最后拖动位置，获取悬浮搜索按钮的中心定位点坐标，若判断中心定位点的纵坐标小于屏幕高度的二分之一，则停靠在顶部位置，回到原来初始状态，即悬浮搜索按钮恢复为搜索框，在浏览器左上角位置展示，左上角坐标(0，0)，x＝0，y＝0；若悬浮搜索按钮中心的纵坐标大于屏幕高度的二分之一，则停靠在底部位置，停靠在浏览器工具栏上方。停靠位置是指目标展示位置。
步骤824，将悬浮搜索按钮移动到停靠位置，变为搜索框进行展示，并将搜索框设置为不可移动状态。
具体地，将搜索框移动到停靠位置进行展示，将搜索框的可移动状态变为不可移动状态。
上述搜索组件展示方法，通过监测到对搜索框的触发事件，监测到触发事件为长按事件，则将搜索框设置为可移动状态，以及将搜索框变为悬浮搜索按钮，节省空间，监测到操作对象的移动，根据操作对象移动前和移动后的坐标位置计算偏移量，根据偏移量控制搜索框在浏览器页面上移动，在检测到结束移动时，获取搜索框的最后拖动位置，根据最后拖动位置确定了搜索框在浏览器页面上的停靠位置，将搜索框在停靠位置进行展示，实现了灵活的展示搜索框，方便用户使用搜索框进行搜索，提高了搜索效率，防止搜索流量丢失。
图9为一个实施例中搜索组件展示装置的结构框图。如图9所示，一种搜索组件展示装置，包括状态变更模块902、移动控制模块904、坐标位置获取模块906、位置确定模块908和展示模块910。其中：
状态变更模块902用于监测到对页面上搜索组件的触发事件，根据所述触发事件将所述搜索组件设置为可移动状态。
移动控制模块904用于检测到对所述搜索组件的移动事件，根据所述移动事件控制所述搜索组件在所述页面上移动。
坐标位置获取模块906用于检测到对所述搜索组件的抬起事件，获取所述抬起事件发生时所述搜索组件在所述页面上的停靠位置。
位置确定模块908用于根据所述搜索组件的停靠位置确定所述搜索组件在所述页面上的目标展示位置。
展示模块910用于将所述搜索组件在所述目标展示位置上进行展示。
本发明实施例中搜索组件展示装置，检测到对搜索组件的触发事件，将所述搜索组件设置为可移动状态，检测到移动事件，根据所述移动事件控制所述搜索组件在页面上移动，在检测到抬起事件时，根据抬起事件获取搜索组件的最后拖动位置，根据最后拖动位置确定搜索组件在页面上的目标展示位置，将搜索组件展示在目标展示位置，实现了灵活控制搜索组件在页面上的展示位置，提高了搜索效率，防止搜索流量丢失。
在一个实施例中，所述移动控制模块904还用于根据所述移动事件记录移动前和移动后的坐标位置；根据所述移动前和移动后的坐标位置得到偏移量；以及根据所述偏移量控制所述搜索组件在所述页面上移动。
在一个实施例中，所述移动控制模块还用于根据所述偏移量确定所述搜索组件移动时将超出所述页面边界，则调整所述搜索组件移动的偏移量以使所述搜索组件在所述页面内移动。
图10为另一个实施例中搜索组件展示装置的结构框图。如图10所示，一种搜索组件展示装置，除了包括状态变更模块902、移动控制模块904、坐标位置获取模块906、位置确定模块908和展示模块910，还包括判断模块912。
判断模块912用于在监测到对页面上搜索组件的触发事件之后，检测所述触发事件是否为指定事件。
所述状态变更模块902还用于若所述触发事件为指定事件，则根据所述触发事件将所述搜索组件设置为可移动状态。
在一个实施例中，所述位置确定模块908还用于将所述搜索组件的停靠位置与坐标阈值进行比较，若小于或等于坐标阈值，则确定第一指定位置为所述搜索组件在所述页面上的目标展示位置，若大于所述坐标阈值，则确定第二指定位置为所述搜索组件在所述页面上的目标展示位置。
在一个实施例中，所述展示模块910还用于将所述搜索组件在所述第一指定位置以搜索框、悬浮框或悬浮按钮形式展示；以及将所述搜索组件在所述第二指定位置以搜索框、悬浮框或悬浮按钮形式展示。
在一个实施例中，所述状态变更模块902还用于在所述将所述搜索组件在所述目标展示位置上进行展示之后，将所述搜索组件设置为不可移动状态。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等。
以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (14)

1.一种搜索组件展示方法，包括：
监测到对页面上搜索组件的触发事件，根据所述触发事件将所述搜索组件设置为可移动状态；
检测到对所述搜索组件的移动事件，根据所述移动事件控制所述搜索组件在所述页面上移动；
检测到对所述搜索组件的抬起事件，获取所述抬起事件发生时所述搜索组件在所述页面上的最后拖动位置；
根据所述搜索组件的最后拖动位置确定所述搜索组件在所述页面上的目标展示位置；
将所述搜索组件在所述目标展示位置上进行展示。
2.根据权利要求1所述的方法，其特征在于，所述根据所述移动事件控制所述搜索组件在所述页面上移动，包括：
根据所述移动事件记录移动前和移动后的坐标位置；
根据所述移动前和移动后的坐标位置得到偏移量；
根据所述偏移量控制所述搜索组件在所述页面上移动。
3.根据权利要求2所述的方法，其特征在于，根据所述偏移量控制所述搜索组件在所述页面上移动，包括：
根据所述偏移量确定所述搜索组件移动时将超出所述页面边界，则调整所述搜索组件移动的偏移量以使所述搜索组件在所述页面内移动。
4.根据权利要求1所述的方法，其特征在于，所述在所述监测到对页面上搜索组件的触发事件之后，所述方法还包括：
检测所述触发事件是否为指定事件，若所述触发事件为指定事件，则根据所述触发事件将所述搜索组件设置为可移动状态。
5.根据权利要求1所述的方法，其特征在于，所述根据所述搜索组件的最后拖动位置确定所述搜索组件在所述页面上的目标展示位置，包括：
将所述搜索组件的最后拖动位置的坐标与坐标阈值进行比较，若小于或等于坐标阈值，则确定第一指定位置为所述搜索组件在所述页面上的目标展示位置，若大于所述坐标阈值，则确定第二指定位置为所述搜索组件在所述页面上的目标展示位置。
6.根据权利要求5所述的方法，其特征在于，所述方法还包括：
将所述搜索组件在所述第一指定位置以搜索框、悬浮框或悬浮按钮形式展示；
将所述搜索组件在所述第二指定位置以搜索框、悬浮框或悬浮按钮形式展示。
7.根据权利要求1至6中任一项所述的方法，其特征在于，在所述将所述搜索组件在所述目标展示位置上进行展示之后，所述方法还包括：
将所述搜索组件设置为不可移动状态。
8.一种搜索组件展示装置，其特征在于，包括：
状态变更模块，用于监测到对页面上搜索组件的触发事件，根据所述触发事件将所述搜索组件设置为可移动状态；
移动控制模块，用于检测到对所述搜索组件的移动事件，根据所述移动事件控制所述搜索组件在所述页面上移动；
坐标位置获取模块，用于检测到对所述搜索组件的抬起事件，获取所述抬起事件发生时所述搜索组件在所述页面上的最后拖动位置；
位置确定模块，用于根据所述搜索组件的最后拖动位置确定所述搜索组件在所述页面上的目标展示位置；
展示模块，用于将所述搜索组件在所述目标展示位置上进行展示。
9.根据权利要求8所述的装置，其特征在于，所述移动控制模块还用于根据所述移动事件记录移动前和移动后的坐标位置；根据所述移动前和移动后的坐标位置得到偏移量；以及根据所述偏移量控制所述搜索组件在所述页面上移动。
10.根据权利要求9所述的装置，其特征在于，所述移动控制模块还用于根据所述偏移量确定所述搜索组件移动时将超出所述页面边界，则调整所述搜索组件移动的偏移量以使所述搜索组件在所述页面内移动。
11.根据权利要求8所述的装置，其特征在于，所述装置包括：
判断模块，用于在监测到对页面上搜索组件的触发事件之后，检测所述触发事件是否为指定事件；
所述状态变更模块还用于若所述触发事件为指定事件，则根据所述触发事件将所述搜索组件设置为可移动状态。
12.根据权利要求8所述的装置，其特征在于，所述位置确定模块还用于将所述搜索组件的最后拖动位置的坐标与坐标阈值进行比较，若小于或等于坐标阈值，则确定第一指定位置为所述搜索组件在所述页面上的目标展示位置，若大于所述坐标阈值，则确定第二指定位置为所述搜索组件在所述页面上的目标展示位置。
13.根据权利要求12所述的装置，其特征在于，所述展示模块还用于将所述搜索组件在所述第一指定位置以搜索框、悬浮框或悬浮按钮形式展示；以及将所述搜索组件在所述第二指定位置以搜索框、悬浮框或悬浮按钮形式展示。
14.根据权利要求8至13中任一项所述的装置，其特征在于，所述状态变更模块还用于在所述将所述搜索组件在所述目标展示位置上进行展示之后，将所述搜索组件设置为不可移动状态。
CN201710109612.8A 2017-02-27 2017-02-27 搜索组件展示方法和装置 Active CN108509133B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN201710109612.8A CN108509133B (zh) 2017-02-27 2017-02-27 搜索组件展示方法和装置
PCT/CN2018/074982 WO2018153232A1 (zh) 2017-02-27 2018-02-01 搜索组件展示方法、电子设备和计算机非易失性存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710109612.8A CN108509133B (zh) 2017-02-27 2017-02-27 搜索组件展示方法和装置

Publications (2)

Publication Number Publication Date
CN108509133A true CN108509133A (zh) 2018-09-07
CN108509133B CN108509133B (zh) 2023-05-02

Family

ID=63252382

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710109612.8A Active CN108509133B (zh) 2017-02-27 2017-02-27 搜索组件展示方法和装置

Country Status (2)

Country Link
CN (1) CN108509133B (zh)
WO (1) WO2018153232A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110399073A (zh) * 2019-06-30 2019-11-01 联想(北京)有限公司 一种处理方法、电子设备及存储介质
CN114579003A (zh) * 2022-03-03 2022-06-03 阿维塔科技(重庆)有限公司 一种车机屏的操作方法及相关组件
CN115857779A (zh) * 2022-12-27 2023-03-28 北京新纽科技有限公司 一种拖拉式管理页面按钮和消息的组件系统

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110554821A (zh) * 2019-08-30 2019-12-10 苏州浪潮智能科技有限公司 一种用于查询条件筛选的悬浮框的显示方法、系统及设备
CN113792237B (zh) * 2021-09-13 2024-05-31 山石网科通信技术股份有限公司 卡片式布局的优化方法、装置、存储介质及处理器

Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1808423A (zh) * 2005-01-17 2006-07-26 佳能信息技术（北京）有限公司 网页搜索的显示方法及其客户端设备
EP1993032A2 (en) * 2007-05-15 2008-11-19 High Tech Computer Corp. (HTC) Electronic devices with touch-sensitive navigational mechanisms, and associated methods
CN103888840A (zh) * 2014-03-27 2014-06-25 电子科技大学 一种视频移动终端实时拖动与缩放的方法及装置
CN104156157A (zh) * 2014-08-04 2014-11-19 中国蓝星（集团）股份有限公司 在网页中呈现功能框的方法及装置
CN104281374A (zh) * 2013-07-01 2015-01-14 博雅网络游戏开发（深圳）有限公司 滑动列表组件的实现方法和系统
CN104407876A (zh) * 2014-12-15 2015-03-11 北京国双科技有限公司 显示标注控件的方法及装置
CN104699439A (zh) * 2015-03-30 2015-06-10 三星电子（中国）研发中心 用于移动终端的画面显示方法、装置和移动终端
US20150268744A1 (en) * 2014-03-18 2015-09-24 City University Of Hong Kong Target acquisition system for use in touch screen graphical interface
US20150278922A1 (en) * 2014-03-31 2015-10-01 Monticello Enterprises LLC System and method for providing a single input field having multiple processing possibilities
CN105068716A (zh) * 2015-08-11 2015-11-18 广东欧珀移动通信有限公司 信息搜索方法及装置

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20090293019A1 (en) * 2008-05-22 2009-11-26 Keith Raffel User interface having slider controls for weighted parameters in searching or decision making processes
KR101882724B1 (ko) * 2011-12-21 2018-08-27 삼성전자 주식회사 카테고리 검색 방법 및 이를 지원하는 단말기
CN104933090A (zh) * 2015-05-18 2015-09-23 深圳市金立通信设备有限公司 一种信息搜索方法及终端
CN105426086A (zh) * 2015-12-23 2016-03-23 小米科技有限责任公司 页面中搜索功能框的显示处理方法及装置
CN105975190B (zh) * 2016-05-20 2020-05-12 腾讯科技（深圳）有限公司 一种图形界面的处理方法、装置及系统

Patent Citations (10)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1808423A (zh) * 2005-01-17 2006-07-26 佳能信息技术（北京）有限公司 网页搜索的显示方法及其客户端设备
EP1993032A2 (en) * 2007-05-15 2008-11-19 High Tech Computer Corp. (HTC) Electronic devices with touch-sensitive navigational mechanisms, and associated methods
CN104281374A (zh) * 2013-07-01 2015-01-14 博雅网络游戏开发（深圳）有限公司 滑动列表组件的实现方法和系统
US20150268744A1 (en) * 2014-03-18 2015-09-24 City University Of Hong Kong Target acquisition system for use in touch screen graphical interface
CN103888840A (zh) * 2014-03-27 2014-06-25 电子科技大学 一种视频移动终端实时拖动与缩放的方法及装置
US20150278922A1 (en) * 2014-03-31 2015-10-01 Monticello Enterprises LLC System and method for providing a single input field having multiple processing possibilities
CN104156157A (zh) * 2014-08-04 2014-11-19 中国蓝星（集团）股份有限公司 在网页中呈现功能框的方法及装置
CN104407876A (zh) * 2014-12-15 2015-03-11 北京国双科技有限公司 显示标注控件的方法及装置
CN104699439A (zh) * 2015-03-30 2015-06-10 三星电子（中国）研发中心 用于移动终端的画面显示方法、装置和移动终端
CN105068716A (zh) * 2015-08-11 2015-11-18 广东欧珀移动通信有限公司 信息搜索方法及装置

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110399073A (zh) * 2019-06-30 2019-11-01 联想(北京)有限公司 一种处理方法、电子设备及存储介质
CN110399073B (zh) * 2019-06-30 2021-09-14 联想(北京)有限公司 一种处理方法、电子设备及存储介质
CN114579003A (zh) * 2022-03-03 2022-06-03 阿维塔科技(重庆)有限公司 一种车机屏的操作方法及相关组件
CN115857779A (zh) * 2022-12-27 2023-03-28 北京新纽科技有限公司 一种拖拉式管理页面按钮和消息的组件系统

Also Published As

Publication number Publication date
CN108509133B (zh) 2023-05-02
WO2018153232A1 (zh) 2018-08-30

Similar Documents

Publication Publication Date Title
CN108509133A (zh) 搜索组件展示方法和装置
US11747956B2 (en) Multi-dimensional object rearrangement
US9141405B2 (en) User interface construction
US9898180B2 (en) Flexible touch-based scrolling
KR101735902B1 (ko) 터치 스크린 장치에 사용되는 사용자 인터페이스의 인터랙션 방법, 장치, 터치 스크린 장치, 프로그램 및 기록매체
KR102001849B1 (ko) 디바이스 화면에서의 애플리케이션 아이콘들의 디스플레이 영역의 조정
CA3040356C (en) Screen display method and terminal
KR20100041006A (ko) 3차원 멀티 터치를 이용한 사용자 인터페이스 제어방법
JP5664147B2 (ja) 情報処理装置、情報処理方法、及びプログラム
KR20190039521A (ko) 호버를 사용한 디바이스 조작
TW200939105A (en) Arranging display areas utilizing enhanced window states
KR20130090138A (ko) 다중 터치 패널 운용 방법 및 이를 지원하는 단말기
JP2014529138A (ja) タッチ入力を用いたマルチセル選択
US20200097164A1 (en) Linking Multiple Windows in a User Interface Display
CN106293345A (zh) 一种应用图标显示方法及终端
CN106775213A (zh) 一种切换桌面的方法及终端
CN108228024A (zh) 一种应用控制的方法、终端及计算机可读介质
KR20160019449A (ko) 간접 입력의 명확화 기법
CN103870195A (zh) 一种信息提示方法及电子设备
JP6197559B2 (ja) オブジェクト操作システム及びオブジェクト操作制御プログラム並びにオブジェクト操作制御方法
US20130067403A1 (en) Electronic device and method for displaying user interface
KR102296968B1 (ko) 즐겨찾기모드 조작방법 및 이를 수행하는 터치 스크린을 포함하는 장치
KR20100107611A (ko) 단말 제어 장치 및 방법
CN105867596A (zh) 一种显示方法及电子设备
US20140035876A1 (en) Command of a Computing Device

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant