Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "what are the JavaScript plug-ins supported by Bootstrap". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Available js plug-in library: 1, animation transition "transition.js"; 2, modal pop-up window "modal.js"; 3, drop-down menu "dropdown.js"; 4, tab "tab.js"; 5, prompt box "tooltop.js"; 6, warning box "alert.js" and so on.

Operating environment of this tutorial: Windows7 system, bootsrap3.2 version, DELL G3 computer

JavaScript plug-ins (libraries) supported by Bootstrap

One-time import:

Bootstrap provides a single file that contains all the JavaScript plug-ins for Bootstrap, namely bootstrap.js (compressed version: bootstrap.min.js).

The specific use is as follows (or see lines 28-29 of the right code editor):

Special note: the jQuery version library can also load your local jQuery version.

Import separately:

To facilitate the separate import of special effects files, 12 JavaScript plug-ins are available in Bootstrap v3.2, which are:

☑ Animation transition (Transitions): corresponding plug-in file "transition.js"

☑ mode pop-up window (Modal): corresponding plug-in file "modal.js"

☑ drop-down menu (Dropdown): corresponding plug-in file "dropdown.js"

☑ scroll detection (Scrollspy): corresponding plug-in file "scrollspy.js"

☑ tab (Tab): corresponding plug-in file "tab.js"

☑ prompt box (Tooltips): corresponding plug-in file "tooltop.js"

☑ pop-up box (Popover): corresponding plug-in file "popover.js"

☑ warning box (Alert): corresponding plug-in file "alert.js"

☑ button (Buttons): corresponding plug-in file "button.js"

☑ folding / accordion (Collapse): corresponding plug-in file "collapse.js"

☑ Photo rotation Carousel: corresponding plug-in file "carousel.js"

☑ automatic positioning buoy Affix: corresponding plug-in file "affix.js"

The above individual plug-ins can be downloaded from github (https://github.com/twbs/bootstrap).

Modal pop-up box-the use of modal pop-up windows (data- parameter description)

In addition to controlling modal pop-ups through data-toggle and data-target, the Bootstrap frame provides other custom data- properties for modal pop-ups to control modal pop-ups. For example: whether there is a gray background modal-backdrop, whether you can press the ESC key to close the modal pop-up window. Instructions on the custom properties of the Modal pop-up window are as follows:

Pop-up window code triggered by JavaScript:

(function () {$(".btn") .click (function () {$("# mymodal"). Modal ();}); Modal pop-up box-- Parameter setting when JavaScript triggers (1)

When using the JavaScript trigger mode pop-up window, the Bootstrap framework provides some settings, including property settings, parameter settings, and event settings.

Property settin

The main custom properties supported by default for modal pop-ups are:

For example, if you don't want the user to press the ESC key to close the modal pop-up window, you can do this:

$(function () {$(".btn") .click (function () {$("# mymodal") .modal ({keyboard:false});})

Three parameter settings are also provided for modal pop-ups in the Bootstrap frame, as described below:

Parameters.

Usage

Description

Toggle

$("# mymodal") .modal ("toggle")

When triggered, the state of the modal pop-up window is reversed. Close if the modal pop-up window is displayed; conversely, if the modal pop-up window is closed, display

Show

$("# mymodal") .modal ("show")

Display mode pop-up window when triggered

Hide

$("# mymodal") .modal ("hide")

Close the modal pop-up window when triggered

Event settings:

The modal pop-up window also supports four types of events, namely, before the pop-up of the modal pop-up window, after the pop-up, before and after closing, as described below:

Event type

Description

Show.bs.modal

Triggered immediately when the show method is called (before it is displayed); if an element is clicked, it will be the relatedTarget attribute of the event

Shown.bs.modal

This event is triggered after the modal pop-up window is fully displayed to the user (and after the CSS animation is complete); if an element is clicked, it will be the relatedTarget event for the event

Hide.bs.modal

Triggered immediately when the hide method is called (but hiding has not been turned off)

Hidden.bs.modal

This event is triggered after the modal pop-up window is completely hidden (and after the CSS animation drift is complete)

Calling the method is also very simple:

$('# myModal') .on ('hidden.bs.modal', function (e) {/ / processing code...}) drop-down menu (Dropdown) dropdown.js

(official release reference address: http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js)

W3cplus tutorials CSS3 HTML5 Sass Front end Forum about us

The menu item link or button that is clicked needs to add a custom attribute data-toggle= "dropdown"

When the Dropdown plug-in loads, events are bound to all elements with the "data-toggle=dropdown" style, and the JavaScript event code is triggered when the user clicks a link or button with the "data-toggle=dropdown" style. When the user clicks a link or button with a "data-toggle=dropdown" style, the parent container of the drop-down menu (the above example is "") will add an open class name, and the drop-down menu will be displayed; when you click again, JavaScript will delete the open class name you just added, and the drop-down menu will be hidden.

The effect picture is as follows:

After calling the dropdown () method with JavaScript, clicking the activate button brings up the drop-down menu, which is folded when you click again.

(function () {$(".dropdown-toggle") .dropdown ();})

You can also use the parameter "toggle". When the drop-down menu is hidden, call the dropdown ("toggle") method to display the drop-down menu, on the contrary, if the drop-down menu is displayed, call the dropdown ("toggle") method to make the drop-down menu hidden.

$(function () {$(".dropdown-toggle") .dropdown ("toggle");})

However, with this parameter, toggle is required twice for each click, and it will remain in an immutable state. So, in general, use the method without parameters in the example. Even if you need to use the parameter "toggle", it is recommended to use jQuery's one method:

$(".dropdown-toggle") .one ("click", function () {$(this) .dropdown ("toggle");}) scroll monitor scrollspy.js

(official release reference address: http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-scrollspy.js)

1. When the user scrolls the mouse, the position of the scroll bar automatically updates the corresponding navigation item in the navigation bar.

2. The user drags the scroll bar, and when you scroll to @ mdo, the above @ mdo navigation item will be highlighted:

This is because the plug-in can automatically detect where the scroll bar has reached, and then add a "active" style to the menu elements that need to be highlighted.

Tab (Tabs)

Plug-in reference address:

The tab Tabs is a very common feature in Web. When the user clicks or hovers the corresponding menu item, the corresponding content can be switched out. As shown in the following figure:

Tab component (that is, menu component), corresponding to the nav-tabs of Bootstrap)

A tab panel that can be switched at the bottom, which is usually represented by tab-pane in Bootstrap

A tab consists of two main parts, one is the menu item, and the other is the content panel. Take the following example as a demonstration. Its HTML structure is as follows:

Announcement rules forum security public welfare announcement content panel

Rule content panel

Forum content panel

Secure content panel

Commonweal content panel

Crucially, the anchor point of the link in the tab matches the ID of the corresponding panel content container.

The tab nav-tabs is styled in the Bootstrap framework, which is described in detail earlier in the introduction to navigation section. The tab-pane is hidden for the panel content, and only the current panel content is displayed:

/ * Line 3758 to line 3763 of bootstrap.css file * / .tab-content > .tab-pane {display: none;} .tab-content > .active {display: block;} tab-- triggers the switching effect

Similarly, the tab defines the data property to trigger the toggle effect. Of course, you have to load bootstrap.js or tab.js first. The declarative trigger tab needs to meet the following requirements:

1. Set data-toggle= "tab" in the tab navigation link.

2. And set data-target= "the selector of the corresponding content panel (usually ID)"

If it is a link, you can also use href= "the selector of the corresponding content panel (usually ID)"

The main function is to find the panel content tab-pane corresponding to the selector when the user clicks.

3. The contents of the panel are uniformly placed in the tab-content container, and each content panel tab-pane needs to set an independent selector (preferably ID) to match the value of data-target or href in the tab.

Tab-add fade style to the selection card

In order to make the hiding and display of the panel more smoothly in the switching process, you can add the class name fade to the panel to produce a gradual effect.

Tab-capsule tab (nav-pills)

In Bootstrap, in addition to allowing nav-tabs to switch tabs, you can also have tabs for capsule nav-pills navigation. We just need to replace nav-tabs with nav-pills, and the key point is to replace data-toggle= "tab" with data-toggle= "pill".

Call method:

The tab ("show") method is called in the click event of each link to display the corresponding tab panel content. For the above example, delete the property of the custom data-toggle= "tab" or data-toggle= "pill" in HTML, and then call it through the following script:

$(function () {$("# myTab a") .click (function (e) {e.preventDefault (); $(this) .tab ("show");});}) prompt box (Tooltip)

Plug-in source file: tooltip.js

(reference address:)

Prompt box-structure

The plug-in for tooltip in the Bootstrap framework provides four different styles:

The prompt is on the left:

The structure of the prompt box in the Bootstrap framework is very simple and is often made using button labels or link tags. Whether they use buttons or links to make prompt boxes, they all have one thing in common:

The prompt is defined by the value of the title property (you can also use the custom property src-title to set the prompt).

The position of the prompt box is controlled by the data-placement custom property. According to four different locations, data-placement has four values: top, right, bottom, and left, indicating that the prompt box appears at the top, right, bottom, and left, respectively.

There is also the most important parameter indispensable, data-toggle= "tooltip".

Prompt box left prompt box-other custom properties

In addition, the prompt box has other custom properties, each of which has its own meaning, as shown in the following table:

Prompt box-JS method for setting parameters

In addition to setting prompt box parameters using data- in html code, you can also use JavaScript to set prompt box parameters, mainly including:

Pop-up box (Popover)

Plug-in source file: popover.js

(reference address:)

Style file:

☑ LESS version: the corresponding source file is popovers.less

☑ Sass version: the corresponding source file is _ popovers.scss

Bootstrap compiled by ☑: corresponding to line 5595 ~ 5714 of the bootstrap.css file

The pop-up box (Popover) looks similar to the previous cue box (Tooltip) only from the outside, as shown below:

The difference is that the pop-up box adds a content content section in addition to the title title. This is not in the prompt box. And what's the difference between the two? We'll talk about it later, starting with how to make a pop-up box in the Bootstrap framework.

Pop-up box-Custom structure properties

Similarly, when making a pop-up box, you can define the custom properties listed in the following table in HTML:

Pop-up box-- the similarities and differences between prompt box and pop-up box

From the previous study, we can see that the HTML custom data property in the pop-up box is basically the same as the custom data property in the prompt box, except that a data-content property is added to set the content of the pop-up box. In fact, the two plug-ins are also slightly different:

The default trigger events for prompt box tooltip are hover and focus, while pop-up box popover is click

The prompt box tooltip has only one content (title), while the pop-up box sets not only the title (title) but also the content (content).

Warning box (Alert)

Plug-in source file: alert.js

Reference address:

Http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-alert.min.js

Warning box-use declarative trigger warning box

If the warning box is triggered by a custom HTML property (declarative), you need to set the custom property data-dismiss= "alert" on the close button, as follows:

×

Congratulations on your successful operation!

The running effect is as follows:

Clicking X closes the entire warning box.

In fact, to close a button, you don't have to use an X sign. It can also be an ordinary button element or a link element. You just need to make sure that the closing element has a custom attribute data-dismiss= "alert".

Warning box-JavaScript trigger warning box

In addition to setting off the warning box by customizing the data-dismiss= "alert" property, you can also use the JavaScript method. You only need to bind an event to the close button. As follows:

Html Code:

Beware of being deceived

Please make sure that the information you transfer is your relatives and friends. Don't trust people you don't know lightly.

Close

Triggered by the following JavaScript code:

$(function () {$("# close") .on ("click", function () {$(this) .alert ("close");})

The running effect is as follows:

Button plug-in (Button)

Plug-in source file: button.js

Reference address:

Button plug-in-button load statu

The button allows you to design a status prompt that displays loading status information when the button is clicked. For example, clicking the load button triggers the loading state of the button. As follows:

Load

Define the loaded text information through the data-loading-text property, then bind an event to the button through JavaScript, and add a button ("loading") method to the button to activate the button's load state behavior. As follows:

(function () {$("# loaddingBtn") .click (function () {$(this) .button ("loading");})

The running effect is as follows:

Before clicking:

After clicking:

Button plug-in-simulate single selection button

The simulated single-select button is a single-select operation through a set of buttons. Using button groups to simulate radio button groups can make the design more personalized and customize more beautiful radio button groups.

In the button plug-in in the Bootstrap framework, you can customize the property data-toggle= "buttons" by giving the button group, as follows:

Male and female unknown

The running effect is as follows:

Button plug-in-simulate check button

Using a button group to simulate a check button is the same as a simulated radio button, which is also achieved by customizing the data-toggle= "buttons" on the button group. The only difference is that replace input [type= "radio"] with input [type= "checkbox"], as follows:

Film, music, game photography

The running effect is as follows:

Accordion (Collapse)

Plug-in source file: collapse.js

Reference address:

The Collapse plug-in (folding) in the Bootstrap framework is actually our common accordion effect. Click the title to make its corresponding content show or hide. As shown in the following figure:

Picture rotation (Carousel)

Plug-in corresponding file: carousel.js

Reference address:

The effect to be displayed is that multiple images are played in cycles, as shown in the following figure:

The above rotation effect is that six advertising pictures are played from right to left, and the corresponding picture will be displayed if the mouse hovers over the picture or clicks the dot in the lower right corner. This kind of picture rotation effect is realized through the Carousel plug-in in the Bootstrap framework. In the following section, we will introduce how to use the Carouse plug-in to achieve the picture rotation effect.

Step 1: design a container for rotating pictures. Use the carousel style in the Bootstrap framework, and define an ID value for the container to facilitate the use of the data attribute to declare the trigger later.

The second step: design the rotation picture counter. Add a carousel image calculator inside the container p.carousel in carousel-indicators style. Its main function is to display the playback order of the current images (several li are placed for each image). Generally, it is made with a sequence list:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.