In Progress
Lesson 39 of 39
In Progress

Button Method

Enable Buttons via JavaScript

You may also enable buttons via JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ <!--from w  w  w  .j a  va  2 s. c o  m-->
    $(".nav-tabs a").click(function(){
        $(this).button('loading').delay(500).queue(function(){
            $(this).button('reset');
            $(this).dequeue();
        });
    });
});
</script>
<style type="text/css">
  .nav a{
        outline: none;
    }
    .bs-button{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-button">
    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#tab1" data-loading-text="Loading...">HTML</a></li>
            <li><a data-toggle="tab" href="#tab2" data-loading-text="Loading...">CSS</a></li>
            <li><a data-toggle="tab" href="#tab3" data-loading-text="Loading...">JavaScript</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab1" class="tab-pane active fade in">
            <p>First developed by Tim Berners-Lee in 1990, HTML is short for Hypertext Markup Language. HTML is used to create electronic documents (called pages) that are displayed on the World Wide Web. Each page contains a series of connections to other pages called hyperlinks.</p>
            </div>
            <div id="tab2" class="tab-pane fade">
            <p>CSS. Stands for "Cascading Style Sheet." Cascading style sheets are used to format the layout of Web pages. ... For example, CSS can be used to define the cell padding of table cells, the style, thickness, and color of a table's border, and the padding around images or other objects.</p>
            </div>
            <div id="tab3" class="tab-pane fade">
            <p>JavaScript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Output:

KodNest bt41

$().button(‘toggle’)

$().button(‘toggle’) method toggles push state of the button. It changes the appearance of the button to make it look like that it has been activated.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#myButtons .btn").click(function(){
      $(this).button('toggle');
    });
});
</script>
<style type="text/css">
    .bs-button{
      margin: 20px;
    }
</style>
</head>
<body>
<div id="myButtons" class="bs-button">
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
</div>
</body>
</html>

Output:

KodNest bt42

$().button(string)

$().button(string) method resets button state by swapping text to any data defined text state.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#myButton").click(function(){
        $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
            $(this).dequeue();
        });
    });
});
</script>
<style type="text/css">
  .bs-button{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-button">
    <button type="button" class="btn btn-info" id="myButton" data-complete-text="Loading Completed" autocomplete="off">Click Me</button>
</div>
</body>
</html>

Output:

KodNest bt43
KodNest Training New Batch is starting on 19th October 2020. Attend one week free demo classes.Register Now

New Report

Close