Implementation and display of HTML drawer Effects

Implementation and display of HTML drawer Effects

 

Abstract: This article mainly describes the implementation and display of HTML drawer effects, and finally makes a simple example using bootstrap.

I. Basic Principles

JQuery hiding method

JQuery hide () and show ()
With jQuery, you can use the hide () and show () Methods to hide and display HTML elements:

$(#hide).click(function(){$(p).hide();});$(#show).click(function(){$(p).show();});

Syntax:

$(selector).hide(speed,callback);$(selector).show(speed,callback);

The optional speed parameter specifies the hidden/display speed. Values: slow, fast, or millisecond.
The optional callback parameter is the name of the function executed after it is hidden or displayed.
JQuery toggle ()
With jQuery, you can use the toggle () method to switch between the hide () and show () methods.
Show Hidden elements and hide the displayed elements:

$(button).click(function(){$(p).toggle();});

Syntax:
$ (Selector). toggle (speed, callback );
The optional speed parameter specifies the hidden/display speed. Values: slow, fast, or millisecond.
The optional callback parameter is the name of the function executed after the toggle () method is complete.

 

JQuery sliding method
With jQuery, you can create sliding effects on elements.
JQuery has the following slide methods:

slideDown()slideUp()slideToggle()

 

JQuery slideDown () method
The jQuery slideDown () method is used to slide down an element.
Syntax:

$(selector).slideDown(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: slow, fast, or millisecond.
The optional callback parameter is the name of the function executed after sliding.
The following example demonstrates the slideDown () method:
Instance

$(#flip).click(function(){$(#panel).slideDown();});

JQuery slideUp () method
The jQuery slideUp () method is used to move an element up.
Syntax:

$(selector).slideUp(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: slow, fast, or millisecond.
The optional callback parameter is the name of the function executed after sliding.
The following example demonstrates the slideUp () method:
Instance

$(#flip).click(function(){$(#panel).slideUp();});

JQuery slideToggle () method
The jQuery slideToggle () method can be switched between the slideDown () and slideUp () methods.
If the elements slide down, slideToggle () can slide them up.
If the elements slide up, slideToggle () can slide down them.

$(selector).slideToggle(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: slow, fast, or millisecond.
The optional callback parameter is the name of the function executed after sliding.
The following example demonstrates the slideToggle () method:
Instance

$(#flip).click(function(){$(#panel).slideToggle();});

 

II. Application Instances

1. up/down Shrinkage

 

Jquery is used to achieve up and down shrinkage.

 

<Script src = jquery-1.8.1.min.js type = text/javascript> </script> <script type = text/javascript> hide (display )! = None) {$ (this ). parents (. menuPanel ). children (. menuContent ). slideUp ();} else {$ (this ). parents (. menuPanel ). children (. menuContent ). slideDown () ;}}) ;}); </script> the main commands here are slideDown and slideUp.
To see the effect:

 

 

2. Effect of left and right Shrinkage

Jquery is used to achieve left and right contraction.

 

<Script src = jquery-1.8.1.min.js type = text/javascript> </script> <script type = text/javascript> hide (display )! = None) {$ (this ). parents (. menuPanel ). children (. menuContent ). hide (slow);} else {$ (this ). parents (. menuPanel ). children (. menuContent ). show (slow) ;;}}) ;}); </script>
The main commands here are show (slow) and hide (slow)

 

3. bootstrap-based effects

 

Background System

•  
• Homepage
•  
• Unit Management 1
  •  
  • Management 1
  •  
  • Management 2
  •  
  • Management 3
  •  
  • Management 4
  •  
  • Management 5
  •  
•  
• Unit Management 2
•  
• Unit management 3 5
•  
• Unit management 4
•  
• Unit management 5
•  

Main Window main src = bootstrap. min. js> </script> the grid system is translated into "grid systems" in English and is translated into "grid systems. However, in terms of definition, the raster is more accurate. The definition of the raster from Wikipedia is as follows: raster Design System (also known as grid design system, standard size system, program layout design, Swiss graphic design style, and International graphic design style) is a method and style of graphic design.

For a simple two-column layout, create a. row container and add the appropriate number of. span * columns to the container. Because the default value is a 12-column grid, the sum of the number of grids crossed by all. span * columns is a maximum of 12 (or equal to the number of grids of its parent container ).

The above code works as follows: