2015年7月27日 星期一

[JS] jQuery 顯示 badge

badge 就是一個小圈圈裡有數字,找到一個有趣的 sample code, 可以下一個 class 就套出 badge, 缺點就是需要調一下別人的 css 把 沒有在用 style 先拿掉。

套出來的畫面:

使用方法:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Badges on Buttons</h2>
  <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
  <button type="button" class="btn btn-success">Success <span class="badge">3</span></button>    
  <button type="button" class="btn btn-danger">Danger <span class="badge">5</span></button>        
</div>

</body>
</html>



example 2:
<!DOCTYPE html>
<html>

<head>
    <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body>
    <button class="btn btn-sm btn-default like-btn active" type="button" id="10">
        <span class="glyphicon glyphicon-thumbs-up"></span>
        <span class="text">Liked</span>
        <span class="badge like-badge">1</span>
    </button>
    <script>
        $(document).on("click", ".like-btn", function(e) {
            e.preventDefault();

            var $label = $(this).find('.text'),
                $badge = $(this).find('.badge'),
                count = Number($badge.text()),
                active = $(this).hasClass('active');

            $label.text(active ? 'Like' : 'Liked');
            $badge.text(active ? count - 1 : count + 1);
            $(this).toggleClass('active');
        });
    </script>
</body>
</html>


資料來源:
http://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp


沒有留言:

張貼留言

Facebook 留言板