CN105335055A - Self-response type realization method and system of menu as well as terminal equipment - Google Patents
Self-response type realization method and system of menu as well as terminal equipment Download PDFInfo
- Publication number
- CN105335055A CN105335055A CN201510718355.9A CN201510718355A CN105335055A CN 105335055 A CN105335055 A CN 105335055A CN 201510718355 A CN201510718355 A CN 201510718355A CN 105335055 A CN105335055 A CN 105335055A
- Authority
- CN
- China
- Prior art keywords
- menu
- type
- width
- mobile terminal
- terminal
- 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.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0482—Interaction with lists of selectable items, e.g. menus
Abstract
The invention discloses a self-response type realization method and system of a menu as well as terminal equipment. The method comprises the following steps of presetting respective default layout modes of the menu under different terminal types; judging the type of a current terminal in a process of webpage loading, determining the current layout mode of the menu according to the current terminal type and the preset information, and displaying the menu on the current webpage according to the corresponding layout mode. According to the self-response type realization method and system of the menu as well as the terminal equipment, the menu capable of automatically responding to a PC side and a mobile terminal is realized, and meanwhile is compatible with various terminals with different operation systems, different window sizes and different screen resolutions, a specific version is not needed to be made for each terminal, and a broad market prospect is obtained.
Description
Technical field
The present invention relates to Internet technical field, particularly relate to a kind of menu from response type implementation method and system, terminal device.
Background technology
Along with the development of Internet technology, people are frequent visit internet obtaining information resource more and more, to obtain desired information whenever and wherever possible, in the process browsing webpage, people browse the content of a website often through website menu.And along with the development of mobile communication technology, people more and more use the mobile terminals such as mobile phone to visit webpage, the access network technologies of the mobile terminals such as exploitation mobile phone has important practical significance and wide market, but the PC that realizes that the menu of a lot of website can only be single at present holds or mobile terminal, or develop two versions, the response of automatic compatible PC and mobile terminal cannot be accomplished, in the middle of invisible, add cost of development.
Summary of the invention
Fundamental purpose of the present invention be to propose a kind of menu from response type implementation method and system, terminal device, this menu arrangements can be held and mobile terminal from dynamic response PC, compatible can have the terminal of different operating system, different windows, screen resolution simultaneously.
For achieving the above object, the invention provides a kind of menu from response type implementation method, comprise step:
The default layout mode of default menu respectively under different terminals type;
In webpage loading process, judge present terminal type, according to the layout type of present terminal type and described presupposed information determination the current set of menu, current web page carries out menu display according to corresponding layout type.
Optionally, the default layout mode of described menu under different terminals type is specially:
Under PC end, the default layout mode of described menu is horizontal type-setting mode; Under mobile terminal, the default layout mode of described menu is longitudinal type-setting mode.
Optionally, described in webpage loading process, judge that the method for present terminal type is:
In webpage loading process, obtain the http protocol user agent header sent from user end to server;
Judge current terminal type according to described http protocol user agent header, described terminal type comprises mobile terminal and PC end.
Optionally, the method also comprises step:
For PC end, the corresponding width arranging its menu list is percents in advance;
Under PC end, according to the width information pre-set, control the width that described menu is corresponding according to the display of current screen resolution.
Optionally, the method also comprises step:
For PC end, pre-set its width critical value by medium query facility;
Under PC end, according to the width critical value pre-set, when the width size of current window is less than described width critical value, Control-Menu is adjusted to multiple lines and multiple rows display mode automatically by current a line multiple row display mode.
Optionally, the method also comprises step:
For mobile terminal, the corresponding width arranging its menu list is percents in advance;
Under mobile terminal, according to the width information pre-set, control the width that described menu is corresponding according to the display of current screen resolution.
Optionally, the method also comprises step:
For mobile terminal, pre-set its width critical value by medium query facility;
Under mobile terminal, according to the width critical value pre-set, when the width size of current window exceedes described width critical value, Control-Menu is adjusted to a line multiple row or multiple lines and multiple rows display mode automatically by current multirow one row display mode.
Menu realize a system from response type, comprising:
Default layout setting unit, for the default layout mode of default menu under different terminals type;
Terminal type recognition unit, in webpage loading process, judges present terminal type;
System self-adaption setting unit, for according to present terminal type and default layout mode corresponding to presupposed information determination the current set of menu, current web page carries out menu display according to corresponding default layout mode.
Optionally, this system also comprises:
Resolution self-adaptation setting unit is percents for setting the width of menu list, the width that Control-Menu is corresponding according to the display of current screen resolution accordingly.
Optionally, this system also comprises:
Window self-adaptation setting unit, for arranging the width critical value of the menu of its correspondence respectively for different terminals type, carries out layout type adjustment according to current window size and width critical value Control-Menu.
A kind of terminal device, is specially mobile terminal and PC end, comprises menu as above and realize system from response type.
Compared with prior art, the present invention has following technique effect:
The present invention realizes an energy and holds and the menu of mobile terminal from dynamic response PC, simultaneously can the compatible various terminal with different operating system, different windows size, different screen resolutions, without the need to doing a specific version for each terminal, there are wide market outlook.
Accompanying drawing explanation
Fig. 1 is the hardware configuration schematic diagram of the mobile terminal realizing each embodiment of the present invention;
Fig. 2 is the wireless communication system schematic diagram of mobile terminal as shown in Figure 1;
Fig. 3 is the ultimate principle figure realized from response type of menu provided by the invention;
The menu that Fig. 4 provides for the embodiment of the present invention one from response type implementation method process flow diagram;
The menu that Fig. 5 provides for the embodiment of the present invention two from response type implementation method process flow diagram;
The menu that Fig. 6 provides for the embodiment of the present invention three realize system construction drawing from response type;
The terminal device structural representation that Fig. 7 provides for the embodiment of the present invention four;
The realization of the object of the invention, functional characteristics and advantage will in conjunction with the embodiments, are described further with reference to accompanying drawing.
Embodiment
Should be appreciated that specific embodiment described herein only in order to explain the present invention, be not intended to limit the present invention.
The mobile terminal realizing each embodiment of the present invention is described referring now to accompanying drawing.In follow-up description, use the suffix of such as " module ", " parts " or " unit " for representing element only in order to be conducive to explanation of the present invention, itself is specific meaning not.Therefore, " module " and " parts " can mixedly use.
Mobile terminal can be implemented in a variety of manners.Such as, the terminal described in the present invention can comprise the such as mobile terminal of mobile phone, smart phone, notebook computer, digit broadcasting receiver, PDA (personal digital assistant), PAD (panel computer), PMP (portable media player), guider etc. and the fixed terminal of such as digital TV, desk-top computer etc.Below, suppose that terminal is mobile terminal.But it will be appreciated by those skilled in the art that except the element except being used in particular for mobile object, structure according to the embodiment of the present invention also can be applied to the terminal of fixed type.
Fig. 1 is the hardware configuration schematic diagram of the mobile terminal realizing each embodiment of the present invention.
Mobile terminal 100 can comprise wireless communication unit 110, A/V (audio/video) input block 120, user input unit 130, sensing cell 140, output unit 150, storer 160, interface unit 170, controller 180 and power supply unit 190 etc.Fig. 1 shows the mobile terminal with various assembly, it should be understood that, does not require to implement all assemblies illustrated.Can alternatively implement more or less assembly.Will be discussed in more detail below the element of mobile terminal.
Wireless communication unit 110 generally includes one or more assembly, and it allows the wireless communication between mobile terminal 100 and wireless communication system or network.Such as, wireless communication unit can comprise at least one in broadcast reception module 111, mobile communication module 112, wireless Internet module 113, short range communication module 114 and positional information module 115.
Broadcast reception module 111 via broadcast channel from external broadcasting management server receiving broadcast signal and/or broadcast related information.Broadcast channel can comprise satellite channel and/or terrestrial channel.Broadcast management server can be generate and send the server of broadcast singal and/or broadcast related information or the broadcast singal generated before receiving and/or broadcast related information and send it to the server of terminal.Broadcast singal can comprise TV broadcast singal, radio signals, data broadcasting signal etc.And broadcast singal may further include the broadcast singal combined with TV or radio signals.Broadcast related information also can provide via mobile communications network, and in this case, broadcast related information can be received by mobile communication module 112.Broadcast singal can exist in a variety of manners, such as, it can exist with the form of the electronic service guidebooks (ESG) of the electronic program guides of DMB (DMB) (EPG), digital video broadcast-handheld (DVB-H) etc.Broadcast reception module 111 can by using the broadcast of various types of broadcast system Received signal strength.Especially, broadcast reception module 111 can by using such as multimedia broadcasting-ground (DMB-T), DMB-satellite (DMB-S), digital video broadcasting-hand-held (DVB-H), forward link media (MediaFLO
) Radio Data System, received terrestrial digital broadcasting integrated service (ISDB-T) etc. digit broadcasting system receive digital broadcasting.Broadcast reception module 111 can be constructed to be applicable to providing the various broadcast system of broadcast singal and above-mentioned digit broadcasting system.The broadcast singal received via broadcast reception module 111 and/or broadcast related information can be stored in storer 160 (or storage medium of other type).
Radio signal is sent at least one in base station (such as, access point, Node B etc.), exterior terminal and server and/or receives radio signals from it by mobile communication module 112.Various types of data that such radio signal can comprise voice call signal, video calling signal or send according to text and/or Multimedia Message and/or receive.
Wireless Internet module 113 supports the Wi-Fi (Wireless Internet Access) of mobile terminal.This module can be inner or be externally couple to terminal.Wi-Fi (Wireless Internet Access) technology involved by this module can comprise WLAN (WLAN) (Wi-Fi), Wibro (WiMAX), Wimax (worldwide interoperability for microwave access), HSDPA (high-speed downlink packet access) etc.
Short range communication module 114 is the modules for supporting junction service.Some examples of short-range communication technology comprise bluetooth
tM, radio-frequency (RF) identification (RFID), Infrared Data Association (IrDA), ultra broadband (UWB), purple honeybee
tMetc..
Positional information module 115 is the modules of positional information for checking or obtain mobile terminal.The typical case of positional information module is GPS (GPS).According to current technology, GPS module 115 calculates from the range information of three or more satellite and correct time information and for the Information application triangulation calculated, thus calculates three-dimensional current location information according to longitude, latitude and pin-point accuracy.Current, the method for calculating position and temporal information uses three satellites and by using the error of the position that goes out of an other satellite correction calculation and temporal information.In addition, GPS module 115 can carry out computing velocity information by Continuous plus current location information in real time.
A/V input block 120 is for audio reception or vision signal.A/V input block 120 can comprise camera 121 and microphone 1220, and the view data of camera 121 to the static images obtained by image capture apparatus in Video Capture pattern or image capture mode or video processes.Picture frame after process may be displayed on display unit 151.Picture frame after camera 121 processes can be stored in storer 160 (or other storage medium) or via wireless communication unit 110 and send, and can provide two or more cameras 1210 according to the structure of mobile terminal.Such acoustic processing can via microphones sound (voice data) in telephone calling model, logging mode, speech recognition mode etc. operational mode, and can be voice data by microphone 122.Audio frequency (voice) data after process can be converted to the formatted output that can be sent to mobile communication base station via mobile communication module 112 when telephone calling model.Microphone 122 can be implemented various types of noise and eliminate (or suppress) algorithm and receiving and sending to eliminate (or suppression) noise or interference that produce in the process of sound signal.
User input unit 130 can generate key input data to control the various operations of mobile terminal according to the order of user's input.User input unit 130 allows user to input various types of information, and keyboard, the young sheet of pot, touch pad (such as, detecting the touch-sensitive assembly of the change of the resistance, pressure, electric capacity etc. that cause owing to being touched), roller, rocking bar etc. can be comprised.Especially, when touch pad is superimposed upon on display unit 151 as a layer, touch-screen can be formed.
Sensing cell 140 detects the current state of mobile terminal 100, (such as, mobile terminal 100 open or close state), the position of mobile terminal 100, user for mobile terminal 100 contact (namely, touch input) presence or absence, the orientation of mobile terminal 100, the acceleration or deceleration of mobile terminal 100 move and direction etc., and generate order or the signal of the operation for controlling mobile terminal 100.Such as, when mobile terminal 100 is embodied as sliding-type mobile phone, sensing cell 140 can sense this sliding-type phone and open or close.In addition, whether whether sensing cell 140 can detect power supply unit 190 provides electric power or interface unit 170 to couple with external device (ED).Sensing cell 140 can comprise proximity transducer 1410 and will be described this in conjunction with touch-screen below.
Interface unit 170 is used as at least one external device (ED) and is connected the interface that can pass through with mobile terminal 100.Such as, external device (ED) can comprise wired or wireless head-band earphone port, external power source (or battery charger) port, wired or wireless FPDP, memory card port, for connecting the port, audio frequency I/O (I/O) port, video i/o port, ear port etc. of the device with identification module.Identification module can be that storage uses the various information of mobile terminal 100 for authentication of users and can comprise subscriber identification module (UIM), client identification module (SIM), Universal Subscriber identification module (USIM) etc.In addition, the device (hereinafter referred to " recognition device ") with identification module can take the form of smart card, and therefore, recognition device can be connected with mobile terminal 100 via port or other coupling arrangement.Interface unit 170 may be used for receive from external device (ED) input (such as, data message, electric power etc.) and the input received be transferred to the one or more element in mobile terminal 100 or may be used for transmitting data between mobile terminal and external device (ED).
In addition, when mobile terminal 100 is connected with external base, interface unit 170 can be used as to allow by it electric power to be provided to the path of mobile terminal 100 from base or can be used as the path that allows to be transferred to mobile terminal by it from the various command signals of base input.The various command signal inputted from base or electric power can be used as and identify whether mobile terminal is arranged on the signal base exactly.Output unit 150 is constructed to provide output signal (such as, sound signal, vision signal, alarm signal, vibration signal etc.) with vision, audio frequency and/or tactile manner.Output unit 150 can comprise display unit 151, dio Output Modules 152, alarm unit 153 etc.
Display unit 151 may be displayed on the information of process in mobile terminal 100.Such as, when mobile terminal 100 is in telephone calling model, display unit 151 can show with call or other communicate (such as, text messaging, multimedia file are downloaded etc.) be correlated with user interface (UI) or graphic user interface (GUI).When mobile terminal 100 is in video calling pattern or image capture mode, display unit 151 can the image of display capture and/or the image of reception, UI or GUI that video or image and correlation function are shown etc.
Meanwhile, when display unit 151 and touch pad as a layer superposed on one another to form touch-screen time, display unit 151 can be used as input media and output unit.Display unit 151 can comprise at least one in liquid crystal display (LCD), thin film transistor (TFT) LCD (TFT-LCD), Organic Light Emitting Diode (OLED) display, flexible display, three-dimensional (3D) display etc.Some in these displays can be constructed to transparence and watch from outside to allow user, and this can be called transparent display, and typical transparent display can be such as TOLED (transparent organic light emitting diode) display etc.According to the specific embodiment wanted, mobile terminal 100 can comprise two or more display units (or other display device), such as, mobile terminal can comprise outernal display unit (not shown) and inner display unit (not shown).Touch-screen can be used for detecting touch input pressure and touch input position and touch and inputs area.
When dio Output Modules 152 can be under the isotypes such as call signal receiving mode, call mode, logging mode, speech recognition mode, broadcast reception mode at mobile terminal, voice data convert audio signals that is that wireless communication unit 110 is received or that store in storer 160 and exporting as sound.And dio Output Modules 152 can provide the audio frequency relevant to the specific function that mobile terminal 100 performs to export (such as, call signal receives sound, message sink sound etc.).Dio Output Modules 152 can comprise loudspeaker, hummer etc.
Alarm unit 153 can provide and export that event informed to mobile terminal 100.Typical event can comprise calling reception, message sink, key signals input, touch input etc.Except audio or video exports, alarm unit 153 can provide in a different manner and export with the generation of notification event.Such as, alarm unit 153 can provide output with the form of vibration, when receive calling, message or some other enter communication (incomingcommunication) time, alarm unit 153 can provide sense of touch to export (that is, vibrating) to notify to user.By providing such sense of touch to export, even if when the mobile phone of user is in the pocket of user, user also can identify the generation of various event.Alarm unit 153 also can provide the output of the generation of notification event via display unit 151 or dio Output Modules 152.
Storer 160 software program that can store process and the control operation performed by controller 180 etc., or temporarily can store oneself through exporting the data (such as, telephone directory, message, still image, video etc.) that maybe will export.And, storer 160 can store about when touch be applied to touch-screen time the vibration of various modes that exports and the data of sound signal.
Storer 160 can comprise the storage medium of at least one type, described storage medium comprises flash memory, hard disk, multimedia card, card-type storer (such as, SD or DX storer etc.), random access storage device (RAM), static random-access memory (SRAM), ROM (read-only memory) (ROM), Electrically Erasable Read Only Memory (EEPROM), programmable read only memory (PROM), magnetic storage, disk, CD etc.And mobile terminal 100 can be connected the memory function of execute store 160 network storage device with by network cooperates.
Controller 180 controls the overall operation of mobile terminal usually.Such as, controller 180 performs the control relevant to voice call, data communication, video calling etc. and process.In addition, controller 180 can comprise the multi-media module 1810 for reproducing (or playback) multi-medium data, and multi-media module 1810 can be configured in controller 180, or can be configured to be separated with controller 180.Controller 180 can pattern recognition process, is identified as character or image so that input is drawn in the handwriting input performed on the touchscreen or picture.
Power supply unit 190 receives external power or internal power and provides each element of operation and the suitable electric power needed for assembly under the control of controller 180.
Various embodiment described herein can to use such as computer software, the computer-readable medium of hardware or its any combination implements.For hardware implementation, embodiment described herein can by using application-specific IC (ASIC), digital signal processor (DSP), digital signal processing device (DSPD), programmable logic device (PLD), field programmable gate array (FPGA), processor, controller, microcontroller, microprocessor, being designed at least one performed in the electronic unit of function described herein and implementing, in some cases, such embodiment can be implemented in controller 180.For implement software, the embodiment of such as process or function can be implemented with allowing the independent software module performing at least one function or operation.Software code can be implemented by the software application (or program) write with any suitable programming language, and software code can be stored in storer 160 and to be performed by controller 180.
So far, oneself is through the mobile terminal according to its functional description.Below, for the sake of brevity, by the slide type mobile terminal that describes in various types of mobile terminals of such as folded form, board-type, oscillating-type, slide type mobile terminal etc. exemplarily.Therefore, the present invention can be applied to the mobile terminal of any type, and is not limited to slide type mobile terminal.
Mobile terminal 100 as shown in Figure 1 can be constructed to utilize and send the such as wired and wireless communication system of data via frame or grouping and satellite-based communication system operates.
Describe wherein according to the communication system that mobile terminal of the present invention can operate referring now to Fig. 2.
Such communication system can use different air interfaces and/or Physical layer.Such as, the air interface used by communication system comprises such as frequency division multiple access (FDMA), time division multiple access (TDMA) (TDMA), CDMA (CDMA) and universal mobile telecommunications system (UMTS) (especially, Long Term Evolution (LTE)), global system for mobile communications (GSM) etc.As non-limiting example, description below relates to cdma communication system, but such instruction is equally applicable to the system of other type.
With reference to figure 2, cdma wireless communication system can comprise multiple mobile terminal 100, multiple base station (BS) 270, base station controller (BSC) 275 and mobile switching centre (MSC) 280.MSC280 is constructed to form interface with Public Switched Telephony Network (PSTN) 290.MSC280 is also constructed to form interface with the BSC275 that can be couple to base station 270 via back haul link.Back haul link can construct according to any one in some interfaces that oneself knows, described interface comprises such as E1/T1, ATM, IP, PPP, frame relay, HDSL, ADSL or xDSL.Will be appreciated that system as shown in Figure 2 can comprise multiple BSC2750.
Each BS270 can serve one or more subregion (or region), by multidirectional antenna or point to specific direction each subregion of antenna cover radially away from BS270.Or each subregion can by two or more antenna covers for diversity reception.Each BS270 can be constructed to support multiple parallel compensate, and each parallel compensate has specific frequency spectrum (such as, 1.25MHz, 5MHz etc.).
Subregion can be called as CDMA Channel with intersecting of parallel compensate.BS270 also can be called as base station transceiver subsystem (BTS) or other equivalent terms.Under these circumstances, term " base station " may be used for broadly representing single BSC275 and at least one BS270.Base station also can be called as " cellular station ".Or each subregion of particular B S270 can be called as multiple cellular station.
As shown in Figure 2, broadcast singal is sent to the mobile terminal 100 at operate within systems by broadcsting transmitter (BT) 295.Broadcast reception module 111 as shown in Figure 1 is arranged on mobile terminal 100 and sentences the broadcast singal receiving and sent by BT295.In fig. 2, several GPS (GPS) satellite 300 is shown.Satellite 300 helps at least one in the multiple mobile terminal 100 in location.
In fig. 2, depict multiple satellite 300, but understand, the satellite of any number can be utilized to obtain useful locating information.GPS module 115 as shown in Figure 1 is constructed to coordinate to obtain the locating information wanted with satellite 300 usually.Substitute GPS tracking technique or outside GPS tracking technique, can use can other technology of position of tracking mobile terminal.In addition, at least one gps satellite 300 optionally or extraly can process satellite dmb transmission.
As a typical operation of wireless communication system, BS270 receives the reverse link signal from various mobile terminal 100.Mobile terminal 100 participates in call usually, information receiving and transmitting communicates with other type.Each reverse link signal that certain base station 270 receives is processed by particular B S270.The data obtained are forwarded to relevant BSC275.BSC provides call Resourse Distribute and comprises the mobile management function of coordination of the soft switching process between BS270.The data received also are routed to MSC280 by BSC275, and it is provided for the extra route service forming interface with PSTN290.Similarly, PSTN290 and MSC280 forms interface, and MSC and BSC275 forms interface, and BSC275 correspondingly control BS270 so that forward link signals is sent to mobile terminal 100.
Based on above-mentioned mobile terminal hardware configuration and communication system, each embodiment of the present invention is proposed.
As shown in Figure 3, core concept of the present invention is: in webpage loading process, judges that present terminal is PC end or mobile terminal, and then carry out menu displaying according to corresponding layout type by embedding javascript code at webpage on current web page; Further, use MediaQuery (medium inquiry) instrument in css3, by different medium types and conditional definition style sheet regular, realize the self-adaptation of menu and different resolution, different terminals.
Embodiment one
As shown in Figure 4, the comprising the following steps from response type implementation method of menu that propose of the present embodiment one:
Step 401, for different terminals type, pre-set the default layout mode of menu under its system respectively.
Usually, the layout type of menu has multiple, comprising: horizontal typesetting a line multi-columnar, horizontal typesetting multiple lines and multiple rows mode and longitudinal typesetting multirow one row mode.Terminal type is roughly divided into PC end and mobile terminal, based on the screen size feature of two kinds of terminal types, the default layout mode presetting PC end in the present embodiment is horizontal typesetting a line multi-columnar, the default layout mode of mobile terminal is longitudinal typesetting multirow one row.
Step 402, in web page loading process, obtained the value of the http protocol user agent head sent from user end to server by navigator object userAgent in javascript.
Step 403, by canonical matching principle, the terminal type current according to the value identification of http protocol user agent head, if be identified as PC end, then continue perform step 404; If be identified as mobile terminal, then continue to perform step 405.
In this step, if the value of http protocol user agent head is one of Android, iPhone, iPad, WindowsPhone, SymbianOS, iPod, then judge that present terminal type is as mobile terminal, otherwise be PC end.
Step 404, the various menu is put in the li list of html element ul, menu list (li element) is realized menu by left float (float:left) shows according to default layout mode (horizontal typesetting a line multiple row) by css principle of floating.
Li list structure is as follows:
Step 405, because mobile terminal screen is less, so experience in order to adding users, because present terminal type is mobile terminal, thus by the form that css adopts longitudinal typesetting and multirow one to arrange, Control-Menu hurdle is suspended in top, and only shows menu button.When user clicks menu button, slide downward display menu, clicks then upward sliding hide menu again, and allows menu be presented on content by arranging z-index value.
In the present embodiment, in web page loading process, judge terminal type, and then Control-Menu is shown according to the layout type preset, and achieves the adaptation function of menu, compatible different operating system, can from response PC end and mobile terminal.
Embodiment two
The certainly response of menu to different terminals type is only achieved in embodiment one, but for the different terminals of same terminal type, also the situation that screen size, resolution are inconsistent can be there is, how to realize the self-adaptation of menu under these different situations, the present embodiment two will provide corresponding solution.
As shown in Figure 5, menu further comprising the steps of from response type implementation method in the present embodiment:
Step 501, for different terminals type, pre-set the default layout mode of menu under its system respectively.
Step 502, in web page loading process, obtained the value of the http protocol user agent head sent from user end to server by navigator object userAgent in javascript.
Step 503, by canonical matching principle, the terminal type current according to the value identification of http protocol user agent head, if be identified as PC end, then continue perform step 504; If be identified as mobile terminal, then continue to perform step 507.
Step 504, the various menu is put in the li list of html element ul, menu list (li element) is realized menu by left float (float:left) shows according to default layout mode (horizontal typesetting a line multiple row) by css principle of floating.
Step 505, in order to realize designing from response type different screen resolutions, the width of menu list is set to the form (as this value of width:10% is arranged as required) of number percent, the width that the width of such menu will be corresponding according to the screen display of different resolution.
Step 506, MediaQuery (medium inquiry) instrument used in css3, a critical value such as media (max-width:49.938em) { being herein corresponding css style sheet } is set, when screen is little fail to lay down to list a line time, Control-Menu list enters a new line automatically, and be adjusted to the form of multiple lines and multiple rows, thus realize from dynamic response.
Step 507, the form adopting longitudinal typesetting and multirow one to arrange by css, Control-Menu hurdle is suspended in top, and only shows menu button.When user clicks menu button, slide downward display menu, clicks then upward sliding hide menu again, and allows menu be presented on content by arranging z-index value.
Step 508, also there is the terminal of large-size screen monitors in the terminal, so in order to the mobile terminal of compatible different screen size, also use the MediaQuery of css3 (medium inquiry) instrument that a width critical value is set, such as media (max-width:25em) { being herein corresponding css style sheet } (value of max-width is arranged as required), Control-Menu carries out corresponding distributing adjustment accordingly.Like this, by arranging different style sheet for different resolution, different terminals, Menu realization can be allowed from dynamic response, large-size screen monitors mobile terminal also can realize the menu of multiple lines and multiple rows or the display of a line multiple row automatically.
By above-mentioned flow process, achieve the self-adaptative adjustment of menu to different terminals type, different screen resolutions, different windows size, complete compatibility all browsers and system, ensure that the display of menu, improve Consumer's Experience.
Embodiment three
As shown in Figure 6, what present embodiments provide a kind of menu realizes system 600 from response type, comprising:
Default layout setting unit 610, for the default layout mode of default menu under different terminals type;
Terminal type recognition unit 620, in webpage loading process, judges present terminal type;
System self-adaption setting unit 630, for according to present terminal type and default layout mode corresponding to presupposed information determination the current set of menu, current web page carries out menu display according to corresponding default layout mode.
Resolution self-adaptation setting unit 640 is percents for setting the width of menu list, the width that Control-Menu is corresponding according to the display of current screen resolution accordingly;
Window self-adaptation setting unit 650, for arranging the width critical value of the menu of its correspondence respectively for different terminals type, carries out layout type adjustment according to current window size and width critical value Control-Menu.As, for PC end, when the width size of current window exceedes described width critical value, Control-Menu is adjusted to multiple lines and multiple rows display mode automatically by current a line multiple row display mode.
This system can be applied to various terminal, realizes the self-adaptative adjustment of menu.
Embodiment four
As shown in Figure 7, present embodiments provide a kind of terminal device 700, comprise the menu described in embodiment three from response type system 600.
This terminal device 700 can be PC end or mobile terminal, and mobile terminal comprises Android, iPhone, iPad, WindowsPhone, SymbianOS or iPod further, and concrete kind is not limit, and all can realize from response type menu.
Back and forth it should be noted that, in this article, term " comprises ", " comprising " or its any other variant are intended to contain comprising of nonexcludability, thus make to comprise the process of a series of key element, method, article or device and not only comprise those key elements, but also comprise other key elements clearly do not listed, or also comprise by the intrinsic key element of this process, method, article or device.When not more restrictions, the key element limited by statement " comprising ... ", and be not precluded within process, method, article or the device comprising this key element and also there is other identical element.
The invention described above embodiment sequence number, just to describing, does not represent the quality of embodiment.
Through the above description of the embodiments, those skilled in the art can be well understood to the mode that above-described embodiment method can add required general hardware platform by software and realize, hardware can certainly be passed through, but in a lot of situation, the former is better embodiment.Based on such understanding, technical scheme of the present invention can embody with the form of software product the part that prior art contributes in essence in other words, this computer software product is stored in a storage medium (as ROM/RAM, magnetic disc, CD), comprising some instructions in order to make a station terminal equipment (can be mobile phone, computing machine, server, air conditioner, or the network equipment etc.) perform method described in each embodiment of the present invention.
These are only the preferred embodiments of the present invention; not thereby the scope of the claims of the present invention is limited; every utilize instructions of the present invention and accompanying drawing content to do equivalent structure or equivalent flow process conversion; or be directly or indirectly used in other relevant technical fields, be all in like manner included in scope of patent protection of the present invention.
Claims (10)
1. menu from a response type implementation method, it is characterized in that, the method comprising the steps of:
The default layout mode of default menu respectively under different terminals type;
In webpage loading process, judge present terminal type, according to the layout type of present terminal type and described presupposed information determination the current set of menu, current web page carries out menu display according to corresponding layout type.
2. menu as claimed in claim 1 from response type implementation method, it is characterized in that, the default layout mode of described menu under different terminals type is specially:
Under PC end, the default layout mode of described menu is horizontal type-setting mode; Under mobile terminal, the default layout mode of described menu is longitudinal type-setting mode.
3. menu as claimed in claim 1 from response type implementation method, it is characterized in that, described in webpage loading process, judge that the method for present terminal type is:
In webpage loading process, obtain the http protocol user agent header sent from user end to server;
Judge current terminal type according to described http protocol user agent header, described terminal type comprises mobile terminal and PC end.
4. menu as claimed in claim 1 from response type implementation method, it is characterized in that, the method also comprises step:
For PC end, the corresponding width arranging its menu list is percents in advance;
Under PC end, according to the width information pre-set, control the width that described menu is corresponding according to the display of current screen resolution.
5. menu as claimed in claim 1 from response type implementation method, it is characterized in that, the method also comprises step:
For PC end, pre-set its width critical value by medium query facility;
Under PC end, according to the width critical value pre-set, when the width size of current window is less than described width critical value, Control-Menu is adjusted to multiple lines and multiple rows display mode automatically by current a line multiple row display mode.
6. menu as claimed in claim 1 from response type implementation method, it is characterized in that, the method also comprises step:
For mobile terminal, the corresponding width arranging its menu list is percents in advance;
Under mobile terminal, according to the width information pre-set, control the width that described menu is corresponding according to the display of current screen resolution.
7. menu as claimed in claim 1 from response type implementation method, it is characterized in that, the method also comprises step:
For mobile terminal, pre-set its width critical value by medium query facility;
Under mobile terminal, according to the width critical value pre-set, when the width size of current window exceedes described width critical value, Control-Menu is adjusted to a line multiple row or multiple lines and multiple rows display mode automatically by current multirow one row display mode.
8. menu realize a system from response type, it is characterized in that, this system comprises:
Default layout setting unit, for the default layout mode of default menu under different terminals type;
Terminal type recognition unit, in webpage loading process, judges present terminal type;
System self-adaption setting unit, for according to present terminal type and default layout mode corresponding to presupposed information determination the current set of menu, current web page carries out menu display according to corresponding default layout mode.
9. menu as claimed in claim 8 realize system from response type, it is characterized in that, this system also comprises:
Resolution self-adaptation setting unit is percents for setting the width of menu list, the width that Control-Menu is corresponding according to the display of current screen resolution accordingly; And/or,
Window self-adaptation setting unit, for arranging the width critical value of the menu of its correspondence respectively for different terminals type, carries out layout type adjustment according to current window size and width critical value Control-Menu.
10. a terminal device, is characterized in that, this terminal device is specially mobile terminal and PC end, comprises menu as claimed in claim 8 or 9 and realizes system from response type.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510718355.9A CN105335055A (en) | 2015-10-29 | 2015-10-29 | Self-response type realization method and system of menu as well as terminal equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510718355.9A CN105335055A (en) | 2015-10-29 | 2015-10-29 | Self-response type realization method and system of menu as well as terminal equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN105335055A true CN105335055A (en) | 2016-02-17 |
Family
ID=55285642
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510718355.9A Pending CN105335055A (en) | 2015-10-29 | 2015-10-29 | Self-response type realization method and system of menu as well as terminal equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN105335055A (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108228283A (en) * | 2016-12-12 | 2018-06-29 | 阿里巴巴集团控股有限公司 | A kind of method for showing interface, device and equipment |
| CN110263281A (en) * | 2019-06-17 | 2019-09-20 | 北京亚鸿世纪科技发展有限公司 | The adaptive device and method of page resolution in a kind of exploitation of data visualization |
| CN111309324A (en) * | 2020-01-20 | 2020-06-19 | 福建天泉教育科技有限公司 | Web end content self-adaptive display method and storage medium |
| CN112579927A (en) * | 2019-09-30 | 2021-03-30 | 北京国双科技有限公司 | Method and device for displaying navigation bar |
| CN114510225A (en) * | 2021-12-30 | 2022-05-17 | 北京密码云芯科技有限公司 | Webpage design method and device, electronic equipment and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103412928A (en) * | 2013-08-16 | 2013-11-27 | 北京乐动卓越科技有限公司 | Method and device for realizing browser page intelligent response-type layout on mobile terminal |
| CN103488777A (en) * | 2013-09-30 | 2014-01-01 | 乐视网信息技术（北京）股份有限公司 | Method and system for adjusting webpage display effect |
| CN103577458A (en) * | 2012-08-01 | 2014-02-12 | 上海亿动信息技术有限公司 | Control method and corresponding control device for displaying webpage according to terminal type |
| CN103593196A (en) * | 2013-11-25 | 2014-02-19 | 深信服网络科技（深圳）有限公司 | Page layout self-adaptation method and device |
| CN104820589A (en) * | 2015-04-24 | 2015-08-05 | 美通云动（北京）科技有限公司 | Method and device for dynamically adapting webpage |
-
2015
- 2015-10-29 CN CN201510718355.9A patent/CN105335055A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103577458A (en) * | 2012-08-01 | 2014-02-12 | 上海亿动信息技术有限公司 | Control method and corresponding control device for displaying webpage according to terminal type |
| CN103412928A (en) * | 2013-08-16 | 2013-11-27 | 北京乐动卓越科技有限公司 | Method and device for realizing browser page intelligent response-type layout on mobile terminal |
| CN103488777A (en) * | 2013-09-30 | 2014-01-01 | 乐视网信息技术（北京）股份有限公司 | Method and system for adjusting webpage display effect |
| CN103593196A (en) * | 2013-11-25 | 2014-02-19 | 深信服网络科技（深圳）有限公司 | Page layout self-adaptation method and device |
| CN104820589A (en) * | 2015-04-24 | 2015-08-05 | 美通云动（北京）科技有限公司 | Method and device for dynamically adapting webpage |
Non-Patent Citations (4)
| Title |
|---|
| 密海英: "面向不同设备的响应式网页设计探析", 《苏州市职业大学学报》 * |
| 涵涵YH: "Html+css+div+ul+li制作Web前端导航菜", 《HTTPS://BLOG.CSDN.NET/U012997311/ARTICLE/DETAILS/47904173》 * |
| 许中博: ""响应式"网页布局设计浅析", 《黑龙江科技信息》 * |
| 郭玉江: "基于HTML5的跨平台移动内容管理系统的设计与实现", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108228283A (en) * | 2016-12-12 | 2018-06-29 | 阿里巴巴集团控股有限公司 | A kind of method for showing interface, device and equipment |
| CN110263281A (en) * | 2019-06-17 | 2019-09-20 | 北京亚鸿世纪科技发展有限公司 | The adaptive device and method of page resolution in a kind of exploitation of data visualization |
| CN112579927A (en) * | 2019-09-30 | 2021-03-30 | 北京国双科技有限公司 | Method and device for displaying navigation bar |
| CN111309324A (en) * | 2020-01-20 | 2020-06-19 | 福建天泉教育科技有限公司 | Web end content self-adaptive display method and storage medium |
| CN114510225A (en) * | 2021-12-30 | 2022-05-17 | 北京密码云芯科技有限公司 | Webpage design method and device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN104850259A (en) | Combination operation method, combination operation apparatus, touch screen operating method and electronic device | |
| CN104915141A (en) | Method and device for previewing object information | |
| CN105183308A (en) | Picture display method and apparatus | |
| CN105260083A (en) | Mobile terminal and method for realizing split screens | |
| CN104731512A (en) | Method, device and terminal for sharing pictures | |
| CN104954867A (en) | Media playing method and device | |
| CN104735255A (en) | Split screen display method and system | |
| CN105187521A (en) | Service processing device and method | |
| CN104992101A (en) | Mobile terminal desktop icon display method and device | |
| CN104809213A (en) | Method, device and system for starting application software client | |
| CN104731480A (en) | Image display method and device based on touch screen | |
| CN105302864A (en) | Picture loading apparatus and method according to screen resolution | |
| CN104917891A (en) | Mobile terminal and page-turning control method thereof | |
| CN104898940A (en) | Picture processing method and device | |
| CN104951236A (en) | Wallpaper configuration method for terminal device, and terminal device | |
| CN104932785A (en) | Processing method and processing device for mobile terminal | |
| CN104881218A (en) | Mobile terminal screen scrolling method and mobile terminal screen scrolling device | |
| CN105426036A (en) | Interface display upgrade method, apparatus and system for application | |
| CN105138255A (en) | Terminal and image information acquisition method | |
| CN104915127A (en) | Touch key setting method and device, and mobile terminal | |
| CN105335055A (en) | Self-response type realization method and system of menu as well as terminal equipment | |
| CN104731456A (en) | Desktop widget display method and device | |
| CN104991922A (en) | Information output method and apparatus | |
| CN105224647A (en) | Image display method and device | |
| CN105261054A (en) | Device and method for compositing audio GIF image |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20160217 |
|
| RJ01 | Rejection of invention patent application after publication |