Плагин Twitter Bootstrap Button JavaScript

Последнее обновление 28 мая 2019 10:15:23 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Описание

Twitter Bootstrap Плагин JavaScript позволяет расширять функциональные возможности Button. Вы можете управлять состояниями кнопок или создавать группы кнопок для таких компонентов, как панели инструментов.

Что требуется

Вы должны включить jquery.js и bootstrap-button.js - эти два файла JavaScript. Оба находятся в папке docs / assets / js.

Как это использовать

Вы можете использовать этот плагин только с разметкой, без написания JavaScript, или вы можете включить кнопки через JavaScript.

пример

Первый пример показывает, как использовать плагин кнопки без JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Example of Bootstrap Button JavaScript Plugin</title>
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="span8">
<h2>Example of Bootstrap Button JavaScript Plugin</h2>
<h3>Control state</h3>
<p><button id="fat-btn" data-loading-text="loading..." class="btn btn-primary">Loading State</button></p>
<h3>Single toggle</h3>
<p><button class="btn btn-primary" data-toggle="button">Single Toggle</button></p>
<h3>Checkbox</h3>
<p><div class="btn-group" data-toggle="buttons-checkbox">
                    <button class="btn btn-primary">Left</button>
                    <button class="btn btn-primary">Middle</button>
                    <button class="btn btn-primary">Right</button>
    </div></p>
<h3>Radio</h3>
<p><div class="btn-group" data-toggle="buttons-radio">
                    <button class="btn btn-primary">Left</button>
                    <button class="btn btn-primary">Middle</button>
                    <button class="btn btn-primary">Right</button>
                  </div></p>
</div>
</div>
</div>
<!--Except 	'Control state', other buttons require only jquery.js and bootstrap-button.js JavaScript files-->			  
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/assets/js/bootstrap-transition.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js"></script>
</body>
</html>

Посмотреть этот пример онлайн .

Включить кнопки через JavaScript

Чтобы включить кнопки через JavaScript, используйте следующий код JavaScript, где «.nav-tabs» - это класс элемента div, содержащего кнопки.

$('.nav-tabs').button()

методы

Этот плагин имеет несколько методов. Мы обсудим их с использованием кода сейчас.

$ (). Кнопка ( 'переключение')

 <button class = "btn" data-toggle = "button">… </ button>

Этот метод подразумевает изменение внешнего вида кнопки и делает ее активированной. Автоматическое переключение кнопки включается с помощью 'data-toggle = "button"'.

$ (). Кнопка ( 'загрузка')

<button class="btn" data-loading-text="loading stuff..." >...</button>

Этот метод устанавливает состояние кнопки для загрузки. Отображаемый текст сохраняется как значение атрибута data-loading-text.

Если вы используете Firefox, вы можете обнаружить, что даже после перезагрузки страницы отключенное состояние не изменяется. Используйте 'autocomplete = "off", чтобы избавиться от этого.

$ (). Кнопка ( 'сброс')

Этот метод сбрасывает состояние кнопки путем замены текста на исходный текст.

Кнопка $ (). (строка)

<button class="btn" data-loading-text="loading stuff..." >...</button>

Этот метод сбрасывает состояние кнопки путем замены текста на любое определенное данными текстовое состояние.

<button class="btn" data-complete-text="finished!" >...</button>
<script>
  $('.btn').button('complete')
</script>

Вы можете скачать все файлы HTML, CSS, JS и изображения, используемые в наших руководствах, здесь.

Предыдущая: Твиттер Учебник по начальной загрузке
Далее: Twitter Bootstrap Свернуть Плагин JavaScript