CN110020230A - A kind of adaptive display method and device of navigation bar - Google Patents

A kind of adaptive display method and device of navigation bar Download PDF

Info

Publication number
CN110020230A
CN110020230A CN201710919867.0A CN201710919867A CN110020230A CN 110020230 A CN110020230 A CN 110020230A CN 201710919867 A CN201710919867 A CN 201710919867A CN 110020230 A CN110020230 A CN 110020230A
Authority
CN
China
Prior art keywords
option
navigation bar
display pattern
navigation
target
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
CN201710919867.0A
Other languages
Chinese (zh)
Other versions
CN110020230B (en
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.)
Beijing Gridsum Technology Co Ltd
Original Assignee
Beijing Gridsum Technology 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 Beijing Gridsum Technology Co Ltd filed Critical Beijing Gridsum Technology Co Ltd
Priority to CN201710919867.0A priority Critical patent/CN110020230B/en
Publication of CN110020230A publication Critical patent/CN110020230A/en
Application granted granted Critical
Publication of CN110020230B publication Critical patent/CN110020230B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/954Navigation, e.g. using categorised browsing
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Radar, Positioning & Navigation (AREA)
  • Remote Sensing (AREA)
  • Controls And Circuits For Display Device (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The invention discloses a kind of adaptive display methods of navigation bar to obtain the resolution ratio of the target device, the preset web includes navigation bar, and the navigation bar includes multiple options when target device loads preset web;Target navigation column display pattern of the navigation bar on the target device is determined according to the resolution ratio of the target device;The attribute of a configuration of each of target navigation column display pattern option to be shown is obtained, the attribute of a configuration of the option to be shown indicates the display content of the option to be shown;According to the attribute of a configuration of each of target navigation column display pattern option to be shown, controls the navigation bar and shown on the target device with target navigation column display pattern.It does not need the dom structure on Design Navigation column and writes more set CSS styles, realize adaptive display of the navigation bar in target device, improve the development efficiency of navigation bar.

Description

A kind of adaptive display method and device of navigation bar
Technical field
The present invention relates to Internet technical fields, more particularly to the adaptive display method and dress of a kind of navigation bar It sets.
Background technique
Navigation bar refers at the top of the Webpage or side area, in header banner picture top or following one Row of horizontal option, it plays a part of each page in linked sites or link software.Website using navigation bar be in order to Allow visitor it is apparent it is bright and clear find required resource area, find resource.
With the rapid development of mobile Internet, more and more common using smart phone and plate online computing.Intelligence The equipment such as energy mobile phone, tablet computer, laptop and desktop computer have different resolution ratio, and therefore, same webpage is often It needs to be shown in the equipment of different resolution, so that user accesses.When the quantity mistake of option in web page navigation column When more, page layout entanglement will lead to when being shown in the lower equipment of resolution ratio, user experience is bad.
In order to which the equipment for making navigation bar can adapt to different resolution is rationally shown that the prior art generally requires Dom (the full name in English: Document Object Model, Chinese name: document object mould of navigation bar is finished writing in html file Type) structure, specific class attribute is set to navigation bar, each resolution ratio section then is set to this class attribute CSS (full name in English: Cascading Style Sheets, Chinese name: cascading style sheets) pattern, to make navigation bar not With adaptively showing different patterns in the equipment of resolution ratio.However, this method needs to preset different resolution ratio areas Between, it is easy to there is error, and in navigation bar dom structure and more set CSS styles write also brought for developer it is huge Workload.
Summary of the invention
In view of the above problems, it proposes on the present invention overcomes the above problem or at least be partially solved in order to provide one kind State the adaptive display method and device of a kind of navigation bar of problem.
In order to achieve the above-mentioned object of the invention, specific technical solution provided by the invention is as follows:
A kind of adaptive display method of navigation bar, which comprises
When target device loads preset web, the resolution ratio of the target device is obtained, the preset web includes leading Navigate column, and the navigation bar includes multiple options;
Determine that target navigation column of the navigation bar on the target device is aobvious according to the resolution ratio of the target device Show mode;
Obtain the attribute of a configuration of each of target navigation column display pattern option to be shown, the option to be shown The attribute of a configuration indicate the display content of the option to be shown;
According to the attribute of a configuration of each of target navigation column display pattern option to be shown, the navigation bar is controlled It is shown on the target device with target navigation column display pattern.
Preferably, the resolution ratio according to the target device determines mesh of the navigation bar on the target device Mark navigation bar display pattern, comprising:
Obtain each navigation bar display pattern and the corresponding resolution ratio of each navigation bar display pattern of the navigation bar Section;
According to the corresponding resolution ratio section of the resolution ratio of the target device, determine that the resolution ratio of the target device is corresponding Navigation bar display pattern;
The corresponding navigation bar display pattern of the resolution ratio of the target device is determined as the navigation bar in the target Target navigation column display pattern in equipment.
Preferably, when target navigation column display pattern is the first level display pattern, each choosing to be shown Item is each option in the navigation bar, and the attribute of a configuration of each option to be shown includes: option names, option names word Body, option names font size and option icons;
The attribute of a configuration according to each of target navigation column display pattern option to be shown is led described in control Boat column is shown on the target device with target navigation column display pattern, comprising:
According to the option names font and option names font size of each option to be shown, show it is each it is described to It shows the option names of option, and shows the option icons of each option to be shown.
Preferably, when target navigation column display pattern is the second level display pattern, each choosing to be shown It is higher level's option in the navigation bar in each option group, on the option group includes: higher level's option and is described The corresponding multiple secondary selections of grade option, the attribute of a configuration of each higher level's option includes: higher level's option names, higher level's option names Font, higher level's option names font size, higher level's option icons and the corresponding multiple secondary selections of higher level's option;
The attribute of a configuration according to each of target navigation column display pattern option to be shown is led described in control Boat column is shown on the target device with target navigation column display pattern, comprising:
According to the higher level's option font and higher level's option font size of each higher level's option, each higher level is shown Option names, and show each higher level's option icons, the corresponding multiple secondary selections of each higher level's option are to pull down The form of list hides display.
Preferably, when target navigation column display pattern is icon display mode, each option to be shown is Higher level's option in the navigation bar in each option group, the option group include: higher level's option and higher level choosing The corresponding multiple secondary selections of item, the attribute of a configuration of each higher level's option includes: that higher level's option icons and higher level's option are corresponding Multiple secondary selections;
The attribute of a configuration according to each of target navigation column display pattern option to be shown is led described in control Boat column is shown on the target device with target navigation column display pattern, comprising:
Show each higher level's option icons, the corresponding multiple secondary selections of each higher level's option are with drop-down list Form hide display.
Preferably, the method also includes:
When receiving click commands of the user to any higher level's option, is shown and be clicked in the form of drop-down list The corresponding multiple secondary selections of higher level's option option names and/option icons.
A kind of adaptive display device of navigation bar, which comprises
First acquisition unit, for obtaining the resolution ratio of the target device, institute when target device loads preset web Stating preset web includes navigation bar, and the navigation bar includes multiple options;
Determination unit, for determining the navigation bar on the target device according to the resolution ratio of the target device Target navigation column display pattern;
Second acquisition unit, for obtaining the format category of each of target navigation column display pattern option to be shown Property, the attribute of a configuration of the option to be shown indicates the display content of the option to be shown;
Display unit, for the attribute of a configuration according to each of target navigation column display pattern option to be shown, The navigation bar is controlled to be shown on the target device with target navigation column display pattern.
Preferably, the determination unit includes:
Subelement is obtained, each navigation bar display pattern and each navigation bar for obtaining the navigation bar are shown The corresponding resolution ratio section of mode;
First determines subelement, for the corresponding resolution ratio section of resolution ratio according to the target device, determine described in The corresponding navigation bar display pattern of the resolution ratio of target device;
Second determines subelement, for the corresponding navigation bar display pattern of the resolution ratio of the target device to be determined as institute State target navigation column display pattern of the navigation bar on the target device.
A kind of storage medium, the storage medium include the program of storage,
Wherein, the equipment where the storage medium is controlled when described program is run executes described in any of the above embodiments lead The adaptive display method on boat column.
A kind of processor, the processor are used to run program,
Wherein, the adaptive display method of navigation bar described in any of the above embodiments is executed when described program is run.
By above-mentioned technical proposal, the adaptive display method of navigation bar provided by the invention does not need Design Navigation column Dom structure and write cover CSS styles, only need to be when it includes the preset web of navigation bar that target device, which loads, according to target The target navigation column display pattern of the adaptively selected navigation bar of the resolution ratio of equipment, and control the navigation bar and led with the target Boat column display pattern is shown on the target device, realizes adaptive display of the navigation bar in target device, to leading Boat column is accurately shown, and improves the development efficiency of navigation bar.
The above description is only an overview of the technical scheme of the present invention, in order to better understand the technical means of the present invention, And it can be implemented in accordance with the contents of the specification, and in order to allow above and other objects of the present invention, feature and advantage can It is clearer and more comprehensible, the followings are specific embodiments of the present invention.
Detailed description of the invention
By reading the following detailed description of the preferred embodiment, various other advantages and benefits are common for this field Technical staff will become clear.The drawings are only for the purpose of illustrating a preferred embodiment, and is not considered as to the present invention Limitation.And throughout the drawings, the same reference numbers will be used to refer to the same parts.In the accompanying drawings:
Fig. 1 shows a kind of adaptive display method flow chart of navigation bar disclosed in the embodiment of the present invention;
Fig. 2 shows the adaptive display method flow charts of another kind navigation bar disclosed in the embodiment of the present invention;
Fig. 3 shows a kind of adaptive display device structure schematic diagram of navigation bar disclosed in the embodiment of the present invention.
Specific embodiment
Exemplary embodiments of the present disclosure are described in more detail below with reference to accompanying drawings.Although showing the disclosure in attached drawing Exemplary embodiment, it being understood, however, that may be realized in various forms the disclosure without should be by embodiments set forth here It is limited.On the contrary, these embodiments are provided to facilitate a more thoroughly understanding of the present invention, and can be by the scope of the present disclosure It is fully disclosed to those skilled in the art.
Referring to Fig. 1, Fig. 1 is a kind of adaptive display method flow chart of navigation bar disclosed in the present embodiment, it is specific to wrap Include following steps:
S101: when target device loads preset web, the resolution ratio of the target device, the preset web packet are obtained Navigation bar is included, the navigation bar includes multiple options;
The equipment that target device can surf the Internet for smart phone, tablet computer, laptop and desktop computer etc., Specific setting is not done herein.
Different types of equipment may correspond to different resolution ratio.
Website using navigation bar be in order to allow user it is apparent it is bright and clear find required resource area, find resource. By taking the homepage of some comprehensive website as an example, navigation bar includes the options such as news, finance and economics, science and technology.
S102: target navigation of the navigation bar on the target device is determined according to the resolution ratio of the target device Column display pattern;
The present embodiment has preset a variety of navigation bar display patterns of navigation bar, and e.g., whole options in navigation bar are flat The first level display pattern of display is spread, only shows that the second level of higher level's option in navigation bar in each option group shows mould Formula only shows the icon display mode of icon etc. of higher level's option in navigation bar in each option group.
By taking navigation bar has seven options of ABCDEFG as an example, wherein ABC, DE, FG are respectively the same option group, these three choosings Higher level's option of Xiang Zuzhong is respectively a, b and c.First level display pattern show seven options of ABCDEFG option names and Option icons, the second level display pattern show the option names and option icons of a, b and c, and icon display mode only shows a, b With the option icons of c.
It should also be noted that, option is excessive in the navigation bar, or is based on specific needs, the not office of the layering about option It is limited to 2 layers, can also is multilayer, correspondingly, navigation bar display pattern can also set third level display pattern etc..
The corresponding required resolution ratio of every kind of navigation bar display pattern.
Determine resolution ratio section needed for which kind of navigation bar display pattern is the resolution ratio of the target device meet, just leads this Target navigation column display pattern of the column display pattern of navigating as the navigation bar on the target device.
S103: obtaining the attribute of a configuration of each of target navigation column display pattern option to be shown, described to aobvious Show that the attribute of a configuration of option indicates the display content of the option to be shown;
It should be noted that the attribute of a configuration is big including at least option names, option names font, option names font Any one in small, redirected link, affiliated option group and option icons.
Preferably, the index attributes of navigation bar are configured, the value of index attributes is array, each option is number in navigation bar Element in group.
The value of the attribute of a configuration of each option is object, wherein option names, option names font, option names font Size, redirected link, affiliated option group and option icons are the variable of object.
S104: according to the attribute of a configuration of each of target navigation column display pattern option to be shown, described in control Navigation bar is shown on the target device with target navigation column display pattern.
When target navigation column display pattern is the first level display pattern, each option to be shown is described Each option in navigation bar, the attribute of a configuration of each option to be shown include: option names, option names font, option name Claim font size and option icons;
The attribute of a configuration according to each of target navigation column display pattern option to be shown is led described in control Boat column is shown on the target device with target navigation column display pattern, comprising:
According to the option names font and option names font size of each option to be shown, show it is each it is described to It shows the option names of option, and shows the option icons of each option to be shown.
When target navigation column display pattern is the second level display pattern, each option to be shown is described Higher level's option in navigation bar in each option group, the option group include: higher level's option and higher level's option pair The multiple secondary selections answered, the attribute of a configuration of each higher level's option include: higher level's option names, higher level's option names font, on Grade option names font size, higher level's option icons and the corresponding multiple secondary selections of higher level's option;Wherein, in each option group Middle secondary selection can also correspond to more secondary selection.As higher level's option news can correspond to secondary selection entertainment news in option group And Economic News, and secondary selection Economic News can correspond to more secondary selection domestic economy news and external Economic News.
The attribute of a configuration according to each of target navigation column display pattern option to be shown is led described in control Boat column is shown on the target device with target navigation column display pattern, comprising:
According to the higher level's option font and higher level's option font size of each higher level's option, each higher level is shown Option names, and show each higher level's option icons, the corresponding multiple secondary selections of each higher level's option are to pull down The form of list hides display.
When target navigation column display pattern is icon display mode, each option to be shown is the navigation Higher level's option in column in each option group, the option group include: that higher level's option and higher level's option are corresponding Multiple secondary selections, the attribute of a configuration of each higher level's option include: higher level's option icons and the corresponding multiple secondary of higher level's option Option;
The attribute of a configuration according to each of target navigation column display pattern option to be shown is led described in control Boat column is shown on the target device with target navigation column display pattern, comprising:
Show each higher level's option icons, the corresponding multiple secondary selections of each higher level's option are with drop-down list Form hide display.
In above-mentioned second level display pattern and icon display mode, when receiving user to any higher level's option Click commands when, the option of the corresponding multiple secondary selections of higher level's option being clicked is shown in the form of drop-down list Title and/option icons.
It is understood that then when the resolution ratio of target device allows secondary selection title and option icons are shown simultaneously Show secondary selection title and option icons;When the resolution ratio of target device only allows secondary selection title or option icons only to show Show its a period of time, then shows secondary selection title or option icons.
The adaptive display method of navigation bar disclosed in the present embodiment does not need the dom structure on Design Navigation column and writes More set CSS styles, only need to be adaptive according to the resolution ratio of target device when it includes the preset web of navigation bar that target device, which loads, The target navigation column display pattern of navigation bar should be selected, and controls the navigation bar with target navigation column display pattern in institute It states and is shown on target device, realize adaptive display of the navigation bar in target device, navigation bar is accurately shown, And improve the development efficiency of navigation bar.
Referring to Fig. 2, Fig. 2 is the adaptive display method of another kind navigation bar disclosed in the present embodiment, wherein according to institute The resolution ratio for stating target device determines target navigation column display pattern of the navigation bar on the target device, comprising:
S201: each navigation bar display pattern and each navigation bar display pattern for obtaining the navigation bar are corresponding Resolution ratio section;
When navigation bar display pattern includes: the first level display pattern, the second level display pattern and icon display mode When, every kind of navigation bar display pattern all corresponds to a resolution ratio section.Corresponding navigation bar is aobvious in corresponding resolution ratio section Show that mode can accurately be shown.
Previously according to the option names, option names font size and option icons of each option in the navigation bar, meter Calculate required resolution ratio under the first level display pattern;Specifically, according to the option names and choosing of option each in the navigation bar Item title font size, calculates the required space of each option names;The required space for calculating each option names and accordingly choosing Space needed for term diagram target and value, and required resolution ratio under the first level display pattern is obtained according to described and value.
According to higher level's option names each in the navigation bar, higher level's option names font size and option icons, calculate Required resolution ratio under second level display pattern;Specifically, being selected according to higher level's option names each in the navigation bar and higher level Item title font size, calculates the required space of each higher level's option names;Calculate the required space of each higher level's option names With the required space of respective selection icon and value, and required resolution under the second level display pattern is obtained according to described and value Rate.
According to higher level's option icons each in the navigation bar, required resolution ratio under calculation icon display pattern.Specifically, Calculate each higher level's option icons occupied space and value, and required resolution under icon display mode is obtained according to described and value Rate.
According to resolution ratio needed for above-mentioned different display modes, the corresponding resolution ratio section of available different display modes, Specifically: the first level display pattern correspond to section [resolution ratio needed for the first level display pattern ,+∞), the second level is shown Mode correspond to section [resolution ratio needed for the second level display pattern, resolution ratio needed for the first level display pattern), icon is shown Mode correspond to section [resolution ratio needed for icon display mode, resolution ratio needed for the second level display pattern).
S202: according to the corresponding resolution ratio section of the resolution ratio of the target device, the resolution of the target device is determined The corresponding navigation bar display pattern of rate;
Determine the resolution ratio of target device in which above-mentioned resolution ratio section, so that it may judge which kind of navigation bar show mould with Formula is shown.
S203: the corresponding navigation bar display pattern of the resolution ratio of the target device is determined as the navigation bar described Target navigation column display pattern on target device.
It is corresponding to precalculate every kind of navigation bar display pattern for the adaptive display method of navigation bar disclosed in the present embodiment Resolution ratio section determines the resolution ratio of the target device according to the corresponding resolution ratio section of the resolution ratio of the target device Corresponding navigation bar display pattern, keeps the selection of navigation bar display pattern more accurate, realizes the adaptive accurate of navigation bar Display.
The adaptive display method of disclosed navigation bar based on the above embodiment, referring to Fig. 3, the present embodiment is corresponding open The adaptive display device of navigation bar a kind of, specifically includes:
First acquisition unit 301, for obtaining the resolution of the target device when target device loads preset web Rate, the preset web include navigation bar, and the navigation bar includes multiple options;
Determination unit 302, for determining the navigation bar in the target device according to the resolution ratio of the target device On target navigation column display pattern;
Second acquisition unit 303, for obtaining the lattice of each of target navigation column display pattern option to be shown Formula attribute, the attribute of a configuration of the option to be shown indicate the display content of the option to be shown;
Display unit 104, for the format category according to each of target navigation column display pattern option to be shown Property, it controls the navigation bar and is shown on the target device with target navigation column display pattern.
Preferably, the determination unit 102 includes:
Subelement is obtained, each navigation bar display pattern and each navigation bar for obtaining the navigation bar are shown The corresponding resolution ratio section of mode;
First determines subelement, for the corresponding resolution ratio section of resolution ratio according to the target device, determine described in The corresponding navigation bar display pattern of the resolution ratio of target device;
Second determines subelement, for the corresponding navigation bar display pattern of the resolution ratio of the target device to be determined as institute State target navigation column display pattern of the navigation bar on the target device.
Preferably, the adaptive display device of navigation bar disclosed in the present embodiment carries out real especially by jQuery plug-in unit It is existing.JQuery is the library JavaScript of an outstanding open source, has a variety of excellent characteristics and compatible various browsers.
The adaptive display device of navigation bar disclosed in the present embodiment does not need the dom structure on Design Navigation column and writes More set CSS styles, only need to be adaptive according to the resolution ratio of target device when it includes the preset web of navigation bar that target device, which loads, The target navigation column display pattern of navigation bar should be selected, and controls the navigation bar with target navigation column display pattern in institute It states and is shown on target device, realize adaptive display of the navigation bar in target device, navigation bar is accurately shown, And improve the development efficiency of navigation bar.
The adaptive display device of the navigation bar includes processor and memory, and above-mentioned first acquisition unit determines list Member, second acquisition unit and display unit etc. store in memory as program unit, are stored in by processor execution Above procedure unit in reservoir realizes corresponding function.
Include kernel in processor, is gone in memory to transfer corresponding program unit by kernel.Kernel can be set one Or more, the development efficiency of navigation bar is improved by adjusting kernel parameter.
Memory may include the non-volatile memory in computer-readable medium, random access memory (RAM) and/ Or the forms such as Nonvolatile memory, such as read-only memory (ROM) or flash memory (flashRAM), memory includes at least one storage Chip.
The embodiment of the invention provides a kind of storage mediums, are stored thereon with program, real when which is executed by processor The adaptive display method of the existing navigation bar.
The embodiment of the invention provides a kind of processor, the processor is for running program, wherein described program operation The adaptive display method of navigation bar described in Shi Zhihang.
The embodiment of the invention provides a kind of equipment, equipment include processor, memory and storage on a memory and can The program run on a processor, processor perform the steps of when executing program
When target device loads preset web, the resolution ratio of the target device is obtained, the preset web includes leading Navigate column, and the navigation bar includes multiple options;
Determine that target navigation column of the navigation bar on the target device is aobvious according to the resolution ratio of the target device Show mode;
Obtain the attribute of a configuration of each of target navigation column display pattern option to be shown, the option to be shown The attribute of a configuration indicate the display content of the option to be shown;
According to the attribute of a configuration of each of target navigation column display pattern option to be shown, the navigation bar is controlled It is shown on the target device with target navigation column display pattern.
Equipment herein can be server, PC, PAD, mobile phone etc..
Present invention also provides a kind of computer program products, when executing on data processing equipment, are adapted for carrying out just The program of beginningization there are as below methods step:
When target device loads preset web, the resolution ratio of the target device is obtained, the preset web includes leading Navigate column, and the navigation bar includes multiple options;
Determine that target navigation column of the navigation bar on the target device is aobvious according to the resolution ratio of the target device Show mode;
Obtain the attribute of a configuration of each of target navigation column display pattern option to be shown, the option to be shown The attribute of a configuration indicate the display content of the option to be shown;
According to the attribute of a configuration of each of target navigation column display pattern option to be shown, the navigation bar is controlled It is shown on the target device with target navigation column display pattern.
It should be understood by those skilled in the art that, embodiments herein can provide as method, system or computer program Product.Therefore, complete hardware embodiment, complete software embodiment or reality combining software and hardware aspects can be used in the application Apply the form of example.Moreover, it wherein includes the computer of computer usable program code that the application, which can be used in one or more, The computer program implemented in usable storage medium (including but not limited to magnetic disk storage, CD-ROM, optical memory etc.) produces The form of product.
The application is referring to method, the process of equipment (system) and computer program product according to the embodiment of the present application Figure and/or block diagram describe.It should be understood that every one stream in flowchart and/or the block diagram can be realized by computer program instructions The combination of process and/or box in journey and/or box and flowchart and/or the block diagram.It can provide these computer programs Instruct the processor of general purpose computer, special purpose computer, Embedded Processor or other programmable data processing devices to produce A raw machine, so that being generated by the instruction that computer or the processor of other programmable data processing devices execute for real The device for the function of being specified in present one or more flows of the flowchart and/or one or more blocks of the block diagram.
These computer program instructions, which may also be stored in, is able to guide computer or other programmable data processing devices with spy Determine in the computer-readable memory that mode works, so that it includes referring to that instruction stored in the computer readable memory, which generates, Enable the manufacture of device, the command device realize in one box of one or more flows of the flowchart and/or block diagram or The function of being specified in multiple boxes.
These computer program instructions also can be loaded onto a computer or other programmable data processing device, so that counting Series of operation steps are executed on calculation machine or other programmable devices to generate computer implemented processing, thus in computer or The instruction executed on other programmable devices is provided for realizing in one or more flows of the flowchart and/or block diagram one The step of function of being specified in a box or multiple boxes.
In a typical configuration, calculating equipment includes one or more processors (CPU), input/output interface, net Network interface and memory.
Memory may include the non-volatile memory in computer-readable medium, random access memory (RAM) and/ Or the forms such as Nonvolatile memory, such as read-only memory (ROM) or flash memory (flash RAM).Memory is computer-readable Jie The example of matter.
Computer-readable medium includes permanent and non-permanent, removable and non-removable media can be by any method Or technology come realize information store.Information can be computer readable instructions, data structure, the module of program or other data. The example of the storage medium of computer includes, but are not limited to phase change memory (PRAM), static random access memory (SRAM), moves State random access memory (DRAM), other kinds of random access memory (RAM), read-only memory (ROM), electric erasable Programmable read only memory (EEPROM), flash memory or other memory techniques, read-only disc read only memory (CD-ROM) (CD-ROM), Digital versatile disc (DVD) or other optical storage, magnetic cassettes, tape magnetic disk storage or other magnetic storage devices Or any other non-transmission medium, can be used for storage can be accessed by a computing device information.As defined in this article, it calculates Machine readable medium does not include temporary computer readable media (transitory media), such as the data-signal and carrier wave of modulation.
It should also be noted that, the terms "include", "comprise" or its any other variant are intended to nonexcludability It include so that the process, method, commodity or the equipment that include a series of elements not only include those elements, but also to wrap Include other elements that are not explicitly listed, or further include for this process, method, commodity or equipment intrinsic want Element.In the absence of more restrictions, the element limited by sentence "including a ...", it is not excluded that including element There is also other identical elements in process, method, commodity or equipment.
It will be understood by those skilled in the art that embodiments herein can provide as method, system or computer program product. Therefore, complete hardware embodiment, complete software embodiment or embodiment combining software and hardware aspects can be used in the application Form.It is deposited moreover, the application can be used to can be used in the computer that one or more wherein includes computer usable program code The shape for the computer program product implemented on storage media (including but not limited to magnetic disk storage, CD-ROM, optical memory etc.) Formula.
The above is only embodiments herein, are not intended to limit this application.To those skilled in the art, Various changes and changes are possible in this application.It is all within the spirit and principles of the present application made by any modification, equivalent replacement, Improve etc., it should be included within the scope of the claims of this application.

Claims (10)

1. a kind of adaptive display method of navigation bar, which is characterized in that the described method includes:
When target device loads preset web, the resolution ratio of the target device is obtained, the preset web includes navigation bar, The navigation bar includes multiple options;
Determine that target navigation column of the navigation bar on the target device shows mould according to the resolution ratio of the target device Formula;
Obtain the attribute of a configuration of each of target navigation column display pattern option to be shown, the lattice of the option to be shown Formula attribute indicates the display content of the option to be shown;
According to the attribute of a configuration of each of target navigation column display pattern option to be shown, the navigation bar is controlled with institute Target navigation column display pattern is stated to be shown on the target device.
2. the method according to claim 1, wherein described according to the determination of the resolution ratio of the target device Target navigation column display pattern of the navigation bar on the target device, comprising:
Obtain each navigation bar display pattern and the corresponding resolution ratio area of each navigation bar display pattern of the navigation bar Between;
According to the corresponding resolution ratio section of the resolution ratio of the target device, determines that the resolution ratio of the target device is corresponding and lead Boat column display pattern;
The corresponding navigation bar display pattern of the resolution ratio of the target device is determined as the navigation bar in the target device On target navigation column display pattern.
3. the method according to claim 1, wherein when target navigation column display pattern is aobvious for the first level When showing mode, each option to be shown is each option in the navigation bar, the attribute of a configuration of each option to be shown It include: option names, option names font, option names font size and option icons;
The attribute of a configuration according to each of target navigation column display pattern option to be shown, controls the navigation bar It is shown on the target device with target navigation column display pattern, comprising:
According to the option names font and option names font size of each option to be shown, show each described to be shown The option names of option, and show the option icons of each option to be shown.
4. the method according to claim 1, wherein when target navigation column display pattern is aobvious for the second level When showing mode, each option to be shown is higher level's option in the navigation bar in each option group, the option group packet It includes: higher level's option and the corresponding multiple secondary selections of higher level's option, the attribute of a configuration packet of each higher level's option It includes: higher level's option names, higher level's option names font, higher level's option names font size, higher level's option icons and higher level's option Corresponding multiple secondary selections;
The attribute of a configuration according to each of target navigation column display pattern option to be shown, controls the navigation bar It is shown on the target device with target navigation column display pattern, comprising:
According to the higher level's option font and higher level's option font size of each higher level's option, each higher level's option is shown Title, and show each higher level's option icons, the corresponding multiple secondary selections of each higher level's option are with drop-down list Form hide display.
5. the method according to claim 1, wherein when target navigation column display pattern is that icon shows mould When formula, each option to be shown is higher level's option in the navigation bar in each option group, and the option group includes: institute Higher level's option and the corresponding multiple secondary selections of higher level's option are stated, the attribute of a configuration of each higher level's option includes: higher level Option icons and the corresponding multiple secondary selections of higher level's option;
The attribute of a configuration according to each of target navigation column display pattern option to be shown, controls the navigation bar It is shown on the target device with target navigation column display pattern, comprising:
Show each higher level's option icons, the corresponding multiple secondary selections of each higher level's option are with the shape of drop-down list Formula hides display.
6. according to method described in claim 5 and 6, which is characterized in that the method also includes:
When receiving click commands of the user to any higher level's option, the institute being clicked is shown in the form of drop-down list State the option names and/option icons of the corresponding multiple secondary selections of higher level's option.
7. a kind of adaptive display device of navigation bar, which is characterized in that the described method includes:
First acquisition unit, it is described pre- for obtaining the resolution ratio of the target device when target device loads preset web If webpage includes navigation bar, the navigation bar includes multiple options;
Determination unit, for determining target of the navigation bar on the target device according to the resolution ratio of the target device Navigation bar display pattern;
Second acquisition unit, for obtaining the attribute of a configuration of each of target navigation column display pattern option to be shown, The attribute of a configuration of the option to be shown indicates the display content of the option to be shown;
Display unit, for the attribute of a configuration according to each of target navigation column display pattern option to be shown, control The navigation bar is shown on the target device with target navigation column display pattern.
8. according to right to go 7 described in device, which is characterized in that the determination unit includes:
Subelement is obtained, for obtaining each navigation bar display pattern and each navigation bar display pattern of the navigation bar Corresponding resolution ratio section;
First determines that subelement determines the target for the corresponding resolution ratio section of resolution ratio according to the target device The corresponding navigation bar display pattern of the resolution ratio of equipment;
Second determines subelement, for the corresponding navigation bar display pattern of the resolution ratio of the target device to be determined as described lead Target navigation column display pattern of the boat column on the target device.
9. a kind of storage medium, which is characterized in that the storage medium includes the program of storage,
Wherein, the equipment where the storage medium is controlled when described program is run is executed such as any one of claim 1-6 The adaptive display method of the navigation bar.
10. a kind of processor, which is characterized in that the processor is used to run program,
Wherein, the adaptive display method such as navigation bar of any of claims 1-6 is executed when described program is run.
CN201710919867.0A 2017-09-30 2017-09-30 Self-adaptive display method and device of navigation bar Active CN110020230B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710919867.0A CN110020230B (en) 2017-09-30 2017-09-30 Self-adaptive display method and device of navigation bar

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710919867.0A CN110020230B (en) 2017-09-30 2017-09-30 Self-adaptive display method and device of navigation bar

Publications (2)

Publication Number Publication Date
CN110020230A true CN110020230A (en) 2019-07-16
CN110020230B CN110020230B (en) 2021-11-30

Family

ID=67186404

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710919867.0A Active CN110020230B (en) 2017-09-30 2017-09-30 Self-adaptive display method and device of navigation bar

Country Status (1)

Country Link
CN (1) CN110020230B (en)

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102855124A (en) * 2011-06-27 2013-01-02 腾讯科技(深圳)有限公司 Method and device for adjusting navigation bar in self-adaptive manner on browser and browser
CN104050171A (en) * 2013-03-12 2014-09-17 腾讯科技(深圳)有限公司 Method, device and system for navigating pages presented on mobile terminal
US20140372947A1 (en) * 2012-05-23 2014-12-18 Amazon Technologies, Inc. Touch target optimization system
CN105159960A (en) * 2015-08-21 2015-12-16 湖南亿谷科技发展股份有限公司 Webpage adaptive adjustment method and system
CN105335154A (en) * 2015-10-19 2016-02-17 沈文策 Multi-terminal-oriented self-adaptive webpage layout method and device
CN106020810A (en) * 2016-05-13 2016-10-12 乐视控股(北京)有限公司 Adaptive switching method and apparatus of display item

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102855124A (en) * 2011-06-27 2013-01-02 腾讯科技(深圳)有限公司 Method and device for adjusting navigation bar in self-adaptive manner on browser and browser
US20140372947A1 (en) * 2012-05-23 2014-12-18 Amazon Technologies, Inc. Touch target optimization system
CN104050171A (en) * 2013-03-12 2014-09-17 腾讯科技(深圳)有限公司 Method, device and system for navigating pages presented on mobile terminal
CN105159960A (en) * 2015-08-21 2015-12-16 湖南亿谷科技发展股份有限公司 Webpage adaptive adjustment method and system
CN105335154A (en) * 2015-10-19 2016-02-17 沈文策 Multi-terminal-oriented self-adaptive webpage layout method and device
CN106020810A (en) * 2016-05-13 2016-10-12 乐视控股(北京)有限公司 Adaptive switching method and apparatus of display item

Also Published As

Publication number Publication date
CN110020230B (en) 2021-11-30

Similar Documents

Publication Publication Date Title
EP3639137B1 (en) Systems and methods for adaptive user interfaces
US8600967B2 (en) Automatic organization of browsing histories
US9870362B2 (en) Interactive data-driven presentations
US10740548B2 (en) Dynamic report building using a heterogeneous combination of filtering criteria
CN107451184A (en) Page display method and device, user equipment, storage medium
CN108279903A (en) The method and device of page presentation
CN109857971A (en) Page rendering method and apparatus
CN109460540A (en) A kind of table paging display methods and device
CN110020353A (en) The construction method and device of web form
CN113535165A (en) Interface generation method and device, electronic equipment and computer readable storage medium
CN107515896A (en) A kind of resource recommendation method, device and equipment
CN110069734A (en) A kind of page assembly shows method and apparatus
CN114721632A (en) Page design method and device based on low-code visual component
CN110020350A (en) Method for drafting, device, storage medium and the processor of webpage thermodynamic
CN110020363A (en) Draw the method and device of thermodynamic chart
CN111158650A (en) Report template, report template and report generation method and device
CN108874379A (en) The processing method and processing device of the page
CN110430472A (en) Page control method, device and equipment
CN110020291A (en) The processing method and processing device of page layout
CN109857964A (en) A kind of heating power drawing drawing method, device, storage medium and the processor of page operation
CN110020230A (en) A kind of adaptive display method and device of navigation bar
CN110209769A (en) Text filling method and device
US20140136947A1 (en) Generating website analytics
CN110020342A (en) The processing method and processing device of data
CN114327395A (en) Webpage design method, device, computer equipment, storage medium and product

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
CB02 Change of applicant information
CB02 Change of applicant information

Address after: 100080 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing

Applicant after: Beijing Guoshuang Technology Co.,Ltd.

Address before: 100086 Beijing city Haidian District Shuangyushu Area No. 76 Zhichun Road cuigongfandian 8 layer A

Applicant before: Beijing Guoshuang Technology Co.,Ltd.

GR01 Patent grant
GR01 Patent grant