This time we will take a look at the use of js components. This article will be a bit long. I hope everyone can read it patiently and I believe there will be a lot of gains. Many garden friends added me to my friends and expressed their like my style of writing. It is simple and clear. Here, thank you again for your support. On the one hand, my own technology is limited and I write things relatively basic. On the other hand, I write things based on my own understanding and express complex things in the simplest language. Therefore, if there is something wrong with the writing, please give me some corrections.
1. JS file reference
Note: jquery must be introduced before other js files, because other plugins rely on jquery.
<!--<script src="js/jquery-1.11.3.min.js"></script> Locally imported load file --><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> -- Must introduce before bootstrp.min.js <script src="js/bootstrap.min.js"></script>
2. Data attributes
Function: Through the data attribute, you can use any bootstrap plug-in without writing any js code. The reference menu plug-ins mentioned earlier, such as data-toggle="dropdown" and other reference menus.
So since there is a turn on function, how to turn off the function? Add the following code to javascript:
<script type="text/javascript"> $(document).off('.data-api'); </script>If you want to turn off the functions of a specific plug-in, add the following code:
<script type="text/javascript"> // Close the plug-in function of the prompt box $(document).off('.alert.data-api'); </script>All js plugins are basically the following steps:
1: How to use it? ---How to write the corresponding class?
2: How to call? ---After writing the class, how to make the class it writes take effect?
3: Event processing--including occurrence before the action is triggered and occurrence after the action is started
Note: All actions occur before triggering, bootstrap provides preventDefault, which implements stopping the action before it is executed. The code is as follows:
$('#myModal').on('show.bs.modal', function (e) { if (!data) return e.preventDefault() // Prevent the display of the modal box, of course you can also switch to prevent the appearance of other plugins})Note: bootstrap does not take remedial measures for browsers that disable JavaScript. Therefore, we need to write a piece of code to remediate ourselves, and I believe everyone knows it.
<noscript> Your browser does not support javascript, please download the latest browser</noscript>
3. Modal box component (modal.js)
Note:
1: It is not supported to open multiple modal boxes at the same time
2: The modal box should be located at the body child element as much as possible to avoid other components affecting the display and function of the modal box.
3: Mobile terminal instructions
4: Enhance accessibility--add role attribute
5: The view can be embedded in the modal box, that is, data-toggle="modal"
Let’s look at the column below. Click on the button and a modal box will pop up. Regarding the properties here, if you have read the previous article, I believe it is not difficult to understand. I will not explain it in detail here. You can post the code to test it yourself:
<!DOCTYPE html> <html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* be placed first, and any other content *must* follow them! --><title></title><link href="css/bootstrap.css" rel="stylesheet"><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/style.css" rel="stylesheet"></head><body> <button type="button" data-toggle="modal" data-target=".bs-example-modal-lg"> A large modal box pops up</button><div id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div>--Large modal box<div> <div> <button type="button" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4>Modal title</h4> </div> <div> <p>one fine body …</p> </div> <div> <button type="button" data-dismiss="modal">close</button> <button type="button">save changes</button> </div> </div> </div></div><!-- Change the size of the modal box and add the class modal-sm--><button type="button" data-toggle="modal" data-target=".bs-example-modal-sm"> A small modal box pops up</button><div id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div> --- Small modal box <div> <div> <button type="button" data-dismiss="modal" aria-label="close"> <span aria-hidden="true">×</span> </button> <h4>Modal title</h4> </div> <div> <p>one fine body …</p> </div> <div> <button type="button" data-dismiss="modal">close</button> <button type="button">save changes</button> </div> </div> </div> </div> </div><!-- Animation effects are prohibited, just delete the fade--><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $("#mymodal").modal("show"); ---Calling this code to make the plugin work</script></body></html>The effect is as follows:
Combined with modal boxes , you can also add other functions to the body content, such as input boxes embedded in the form, etc., and no code is posted here.
For events in modal box , add the following code in javascript, as shown below:
Copy the code as follows:<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> $("#mymodal").modal("show"); ---Calling this code to make the plug-in modal box take effect and display $('#myModal').on('hidden.bs.modal', function (e) {
alert("111");
}) ---This event means that the alert event will be triggered after closing the modal box</script>
Let’s take a look at how the modal box is embedded in the video. We need to add some code, automatic playback, stop and other functions. Let's take a look at the code first
<a href="#" data-toggle="modal" data-target="#videoModal" data-theVideo="http://v.youku.com/v_show/id_XMTU2ODMyMDUyMA==.html" >VIDEO</a><div id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <div> <iframe src=""></iframe> </div> </div> </div> </div> </div> </div><!-- <script src="js/jquery-1.11.3.min.js"></script> Local loading file --> <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript"> //view function autoPlayModal(){ var trigger = $("body").find('[data-toggle="modal"]'); trigger.click(function() { var theModal = $(this).data( "target" ); var videoSRC = $(this).attr( "data-theVideo" ); var videoSRCauto = videoSRC+"?autoplay=1" ; $(theModal+' iframe').attr('src', videoSRCauto); $(theModal+' button.close').click(function() { $(theModal+' iframe').attr('src', videoSRC); }); }); }); }); }); }//Call the function $(document).ready(function(){ autoPlayModal();}); </script><noscript>Do not support javascript browser</noscript>The effect is no longer screenshots, the src above introduces Youku's address.
4. Scrolling monitoring component
Listed in navigation bar, that is, automatically switch tabs according to the scroll position. Let's look at the code.
1: Ensure that the scroll bar appears.
2: Usually add data-spy to body, that is, use data-spy="scroll" <body data-spy="scroll" data-target=".navbar" data-offset="70"> <div id="myScrollspy"> <nav role="navigation"> <div> <div id="navbar-scroll"> <ul> <li><a href="#home">home</a></li> <li><a href="#message">message</a></li> <li><a href="#about">about</a></li> <li> <a href="#about">about</a></li> <li> <a href="#" data-toggle="dropdown">Drop-down Menu<b></b></a> <ul> <li><a href="#one">one</a> <li><a href="#two">two</a> <li><a href="#three">three</a> </ul> </li> </ul> </div> </div> </nav> <!-- Showcased content--> <h1 id="home">home</h1> <p>111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <p>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 id="about">about</h1> <p>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <hr> <h1 id="one">one</h1> <p>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 </p> <h1 id="two">two</h1> <p>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
Understand the meaning of data-offset: that is, the offset from the top when the scroll position is. Secondly, its event processing is similar to the usage of modal boxes and will not be explained.
The effects are as follows:
5. Prompt box component
Notice:
1: Use data-toggle="tooltip"
2: data-placement represents the direction of the prompt box, there are four directions, left, right, bottom, top
3: data-animation is to set its animation effect to false, that is, after the mouse is moved over, it changes from the original gradual in and out to an instant appearance, without buffering effect.
<div> <p> <!-- Easing--> this is a test title,<a href="#" id="clickEvent" data-toggle="tooltip" data-placement="bottom" data-original-title="cnblog.com/jtjds" data-animation="false">click me,remember </p></div> <!-- <script src="js/jquery-1.11.3.min.js"></script> Local loading file--><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript"> $('[data-toggle="tooltip"]').tooltip();//Initialize $('#clickEvent').tooltip('show') //Open it and it directly displays $('#clickEvent').on('shown.bs.tooltip', function () { alert("2222"); //Event processing, this item will pop up after it is displayed}) </script>6. Pop-up frame component
Notice:
1: The pop-up box adds a small suspended layer to any element to store non-main information.
2: When the content length is 0, the pop-up box will not be displayed. Use data-toggle="popover"
3: Rely on the prompt box plug-in and needs to be initialized manually (see initialization in javascript)
Look at the following code and no more screenshots:
Copy the code as follows: <!-- Click the button to pop up, then click the button to hide-->
<button type="button" data-toggle="popover" data-content="and here is some amazing content,it's very engaging,right?">Click me to pop up/hide popup box</button>
When clicking on button, it appears, then click on button and disappears. What should I do if I want to click on it in a blank space and hide it?
Just add data-trigger="focus" to hide the focus, trigger means trigger.
Copy the code as follows:<!-- Click the button to pop up, click any blank space to hide it. It is best to use the a tag, of course you can also use button-->
<a tabindex="0" id="myPopover" role="button" data-toggle="popover"
data-trigger="focus" data-content="and this is a beautiful content">Click me to disappear</a>
7. Warning box component
Notice:
1: Use data-dismiss="alert"
2: The plug-in can add clicks and disappears to the warning message
3: When using the close button, that is, when the close class is used, it must be the first child element of alert, and text is not allowed to appear before it.
Let's look at the code:
<!-- Warning box--><div id="myalert"> <button type="button" data-dismiss="alert" aria-label="close"> <span aria-hidden="true">×</span> </button> <span>Welcome</span> <button type="button">Details</button></div><div id="myalert1"> <button type="button" data-dismiss="alert" aria-label="close"> <span aria-hidden="true">×</span> </button> <span>Welcome</span> <button type="button">Details</button></div>
If there are multiple warning boxes in javascript and you want to close a warning box, add the following code in javascript, as follows:
$("#myalert").alert('close') // When the first warning box is closed, or when #myalert is replaced with #myalert1, the second warning box will close $('#myalert1').on('closed.bs.alert', function () { alert("close"); -- When the close button is clicked, execute the alert event})8. Button component
Notice:
1: Toggle the status of the button (disabled or turned on)--This is achieved using autocomplete="off"
2: Make multiple buttons into toolbars, etc.
3: Set the loading status by setting data-loading-text="loading..."
<!-- Button--><button type="button" id="myButton" data-loading-text="loading..." autocomplete="off" >loading state</button><button type="button" data-toggle="button" aria-pressed="false" autocomplete="off">single toggle</button><!-- button group--><div data-toggle="buttons"> <label> <input type="checkbox" autocomplete="off" checked>home </label> <label> <input type="checkbox" autocomplete="off" >message </label> <label> <input type="checkbox" autocomplete="off" >profile </label></div>
If you want to change the content after clicking the button, add data-complete-text="xxxx" and add the javascript code as follows:
Copy the code code as follows:<!-- After clicking triggers, change the content data-complete-text represents the finished content-->
<button type="button" data-complete-text="finish" autocomplete="off">The content will automatically change after clicking</button><script> $('.mybtn').on('click', function () { $(this).button('complete') // The content will become finish })</script>
To set the button to switch state and set the time to switch state, you can add the following code to JavaScript:
<script> $('#myButton').on('click', function (e) { var btn = $(this).button('loading'); setTimeout(function(e){ btn.button('reset');//Set restore to original state},3000) })</script>9. Folding frame assembly
Note: Use data-toggle="collapse" to see the code:
<a role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Link with href</a><div id="collapseExample"> <div> hello ,this is test! </div></div>
In addition, it can be used in combination with panel groups, as shown below:
<!-- Panel group--> <div id="mypanel" role="tablist"> <!-- First panel--> <div> <div role="tab" id="headingone"> <h4> <a data-toggle="collapse" data-parent="#mypanel" href="#collapseone" >home</a> </h4> </div> <!-- Content--> <div id="collapseone" role="tabpanel"> <div> Hello about me</div> </div> </div> <!-- Second panel--> </div>
By clicking home to control the content part, it is to set its href="#collapseone" that is the id corresponding to the content.
Regarding events, similar to those used earlier, these components have similar time usage, as follows
<script type="text/javascript"> $('#mypanel').on('hidden.bs.collapse', function () { alert("2222");}) </script>10. Carsousel sliding component
Note: Use data-ride="carousel" , such as the carousel we usually make. Let’s first look at the carousel diagram code I made:
<div id="myContainer"> ---Note the target of data-target<div id="carousel1" data-ride="carousel" > <ol> --indicators represent sliding indication, that is, which one slides from to which one <li data-target="#carousel1" data-slide-to="0"></li>--Slide from the first one<li data-target="#carousel1" data-slide-to="1"></li> <li data-target="#carousel1" data-slide-to="2"></li> </ol> <!-- Rendering content--> <div role="listbox"> <div> <img src="bg.jpeg"> <div> --carousel-caption carries added text, etc. <h3>green sunshine</h3> <p>sunshine mood, you and I will go with you</p> </div> </div> <div> <img src="timg.jpg"> </div> <div> <img src="xx.jpg"> </div> </div> <!-- Two tags on the left and right --> <a href="#carousel1" role="button" data-slide="pre"> <span aria-hidden="true"></span> <span>previous</span> </a> <a href="#carousel1" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>next</span> </a> </div></div>
The effects are as follows:
Regarding the speed of sliding, you can directly add data-interval="2000" to set the 2-second switch toggle, but the problem with this method is that
When you refresh the browser, you must manually click the left and right buttons before you can switch. The best way is to set it in JavaScript. As shown in the following code
<script type="text/javascript"> $(".carousel").carousel({ interval:2000; }) </script>11. Affix components
Note: Use position:fixed for positioning, use data-spy="affix" combined with data-offset to achieve monitoring, and when a certain event occurs, it is offset. Please read the following code:
<div> <!-- Layout of the grid system --> <div> <ul> <li>11111111111</li> <li>222222222222</li> <li>33333333333333333</li> <li>44444444444444444444</li> <li>5555555555</li> <li>666666666666</li> <li>777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <p>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 <div > <ul> <li>1111111111111</li> <li>222222222222</li> <li>33333333333333333</li> <li>4444444444444444444444444444</li> <li>5555555555</li> <li>6666666666666</li> <li>777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777 src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="js/bootstrap.min.js"></script><script type="text/javascript"> $('.js-affixed-element-top').affix({ offset:{ }}) $('.js-affixed-element-bottom').affix({ offset:{bottom:200}---When the mouse rolls to the bottom, the div will automatically shift to 200px from the bottom}) </script>The js component is almost over here, and learning the framework of bootstrap is almost over. The next article is over. I plan to design a page specifically with bootstrap to create it and share it with you. If you are also learning the bootstrap framework, please communicate and learn!
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.