BOOTSTRAP EXTEND IN USING CUSTOM PLUGIN
Bootbox.js: Bootbox.js is a small JavaScript library that allows creating dialog boxes programmatically using the Bootstrap modal, without having to worry about creating, managing, or removing any required DOM elements or JS event handlers.
Example:
<!-set up the modal to start hidden and fade in and out ->
<div id="myModal" class="modal hide fade">
<!-- dialog contents -->
<div class="modal-body">Hello world!</div>
<!-- dialog buttons -->
<div class="modal-footer">
<a href="#" class="btn primary">OK</a></div>
</div>
<!-- sometime later, probably inside your on load event callback -->
<script>
$("#myModal").on("show" function() { // wire up the OK button to dismiss the modal when shown
$("#myModal a.btn").on("click", function(e){ consolelog ("button pressed"); // just as an example...
$("#myModal").modal ( "hide^ prime ); // dismiss the dialog
});
});
$("#myModal").on("hide", function() {//remove the event listeners when the dialog is dismissed
$("#myModal a.btn").off("click"); });
$("#my Modal") on("hidden". function() { // remove the actual elements from the DOM when fully hidden
$("#myModal").remove();
});
$("#myModal").modal({ // wire up the actual modal functionality and show the dialog
"backdrop": "static",
"keyboard": true,
"show" true // ensure the modal is shown immediately
}); </script>
Scrollspy.js:
Scrollspy plug-in is used to automatically update navigation list links based on scroll position.
data-* attribute medium
Add the data-spy="scroll" attribute to the element in which the scrollspy will be used (most often in the <body> element). Then add the data-target attribute to the id value or the navigation bar (.navbar) class. Name must be added. It creates the scroll area connection with the navbar. The ID of the navbar's list item must be the same as the ID of the scroll area (<div id="section 1"> and <a href="#section 1").
When schooling, the optional data-offset attribute specifies how many pixels down from the top during schooling. This option is very important when it seems that the navbar's active state is changing too fast or too slow relative to the scroll element. Default value is 10 pixels.
Affix.js:
Plug-ins are used to fix an element to a specific location on the page. This is often navigation. Used for menu and social icons, so that they are fixed to a specific location on the page during page scrolling.
This plugin toggles the element's behavior based on the trueling position (Position is static in CSS). The Affix plugin basically toggles between three classes: affix, affix-top, and affix-bottom. Each class represents a specific state. You must use the position:fixed CSS property in the affix class to handle the actual position yourself.
Data-" attribute means: Add data-spy="afflix" attribute to the element to which you want to add affix and data-offset-top|bottom="number" attribute to specify the scroll position.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Affix Example</title>
<meta charset="utf" >
<meta name="viewport"content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
affix{
top: 0;
width: 100%;
}
.affix + .container-fluid ( padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-colour:#F44336; colour:#fff;height: 200px;">
<h1> Bootstrap Affix Example </h1>
<h3> Scrolling fixed (sticky) navbar </h3>
<p>data-spy="affix" results in page scrolling to see what the navbar looks like. </p>
<p><strong> The navbar will freeze on the page after scrolling a certain number of pixels. </strong></p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197" style="border-radius:0">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home page</a></li>
<li><a href="#">Service page</a></li>
<li><a href="#">Contract page</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1> <h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1> <h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
</div>
</body>
</html>
Comments
Post a Comment