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 PDFInfo
- 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
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
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/954—Navigation, e.g. using categorised browsing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising 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
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.
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)
| 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 |
-
2017
- 2017-09-30 CN CN201710919867.0A patent/CN110020230B/en active Active
Patent Citations (6)
| 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 | |
| CN111752557A (en) | Display method and device | |
| 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 | |
| CN114721632A (en) | Page design method and device based on low-code visual component | |
| 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 | |
| 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 |