Button plugin and Affix Plugin
What is a plugin ?
Plug in is a small piece of software which is added to extend the functionality of existing software. Plug in allows browsers to show additional contents which are not basically displayed. An example of plug in is Macromedia flash player which allows browsers to display some animation on screen.
Button Plugin
Button plugin adds some interactive features to buttons like creating groups of buttons or handling the states of buttons etc. If you want to implement this plugin then you need button.js along with other js files.
- a. Loading State : To add a loading state to a button simply add data-loading-state = “Loading...” as an attribute to a button.
<![CDATA[
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<script>
$(function(){
$(".btn").click(function(){
$(this).button(‘loading’).delay(1000).queue(function(){
$(this).button(‘reset’);
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Stateful Button</h2>
<button type="button" class="btn btn-warning" data-loading-text="Loading…">Load Data state</button>
</div>
</body>
</html>
]]>
OUTPUT :
- Single toggle : To enable toggling use data-toggle = “button” (toggle means the button state gets changed to pushed button).
<![CDATA[
<div class="container">
<h2>Single Toggle Button</h2><br>
<button type="button" class="btn btn-info" data-toggle="button">Toggle Button</button>
<button type="button" class="btn btn-success" data-toggle="button">Toggle Button</button>
</div>
]]>
OUTPUT :
- Checkbox : We can create the group of checkboxes by using data-toggle = “button” to btn-group.
<![CDATA[
<div class="container">
<h2>Checkbox Buttons </h2><br>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success">
<input type="checkbox">Checkbox-One
</label>
<label class="btn btn-success">
<input type="checkbox">Checkbox-Two
</label>
</div>
</div>
]]>
OUTPUT :
- Via javascript : We can enable this plugin using following code,
$('.btn').button()
<![CDATA[
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).button(‘loading’).delay(500).queue(function(){
$(this).button(‘reset’);
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>Buttons via JavaScript</h2><br>
<div class="tabbale">
<ul class="nav nav-tabs">
<li class="active"><a href="#mydiv" data-toggle="btn" data-loading-text="Loading…">btn 1</a></li>
<li><a href="#mydiv1" data-toggle="btn" data-loading-text="Loading…">btn 2</a></li>
</ul>
<div class="tab-content">
<div id="mydiv" class="tab-pane active fade in">
<p>Quickly design and customize responsive mobile-first sites with Bootstrap,
the world's most popular front-end open source toolkit, featuring Sass variables ...</p>
</div>
<div id="mydiv1" class="tab-pane fade">
<p>CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files.</p>
</div>
</div>
</div>
</div>
</body>
</html>
]]>
OUTPUT :
Affix Plugin
Affix plugin allows
tag to be affixed on the web page. We can also turn it on or off by toggling. We want affix.js along with other js files to implement this plugin.
- Via data attributes : For adding affix plugin to any element we can just use data-spy = “affix” to the element you want to spy on.
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.affix {
top: 0;
width: 100%;
z-index: 9999 !important;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#40b9ff;color:#fff;height:200px;">
<h1>Bootstrap Affix</h1>
<h3>Fixed navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Basic Topnav</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>Some text to enable scrolling</h1>
<h3>Quickly design and customize responsive mobile-first sites with Bootstrap,
the world's most popular front-end open source toolkit, featuring Sass variables ...</h3>
<h3>Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing
responsive, mobile-first websites. Bootstrap is completely free to download ...</h3>
</div>
</body>
</html>
]]>
OUTPUT :
