English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial di Base Bootstrap

Plugin Bootstrap

Plugin Bottone (Button) Bootstrap

Bottone (Button) in Pulsanti Bootstrap In un capitolo precedente è stato introdotto. Attraverso il plugin Bottone (Button), puoi aggiungere alcune interazioni, come controllare lo stato del pulsante o creare gruppi di pulsanti per altri componenti (come la barra degli strumenti).

Stato di caricamento

Per aggiungere lo stato di caricamento al pulsante, basta aggiungere semplicemente al elemento button data-loading-text="Caricamento..." Basta come nel esempio seguente:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Plugin Bottone (Button) Stato di caricamento</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button id="fat-btn" class="btn btn-primary" data-loading-text="Caricamento...">　
　　　	type="button"> Stato di caricamento
</button>
<script>
　　　　$(function() {
　　　　　　　　$(".btn").click(function(){
　　　　　　　　　　　　$.button('loading').delay(1000).queue(function()　{
　　　　　　　　　　　　// $(this).button('reset');
　　　　　　　　　　　　// $(this).dequeue();　
　　　　　　　　　　　　});
　　　　　　　　});
　　　　});　　
</script>
</body>
</html>
Prova a vedere ‹/›

I risultati sono come segue:

Singola commutazione

Per attivare la commutazione di un singolo pulsante (cioè cambiare lo stato normale del pulsante in stato premuto e viceversa), aggiungi semplicemente al elemento button data-toggle="button" Basta come nel esempio seguente:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Plugin Bottone (Button) Singola commutazione</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary">Originale</button>　
　　　	data-toggle="button"> Singola commutazione
</button>
</body>
</html>
Prova a vedere ‹/›

I risultati sono come segue:

Casella di Spunta (Checkbox)

Puoi creare un gruppo di caselle di spunta e aggiungere tramite btn-group Aggiungi l'attributo data data-toggle="buttons" Aggiungi la commutazione del gruppo di caselle di spunta.

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Plugin Bottone (Button) Casella di Spunta</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary">
		<input type="checkbox"> Opzione 1
	</label>
	<label class="btn btn-primary">
		<input type="checkbox"> Opzione 2
	</label>
	<label class="btn btn-primary">
		<input type="checkbox"> Opzione 3
	</label>
</div>
</body>
</html>
Prova a vedere ‹/›

I risultati sono come segue:

Pulsante Radio (Radio)

Allo stesso modo, puoi creare un gruppo di pulsanti radio e aggiungere tramite btn-group Aggiungi l'attributo data data-toggle="buttons" Aggiungi la commutazione del gruppo di pulsanti radio.

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Plugin Bottone (Button) Bottone Radio</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option1"> Opzione 1
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option2"> Opzione 2
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option3"> Opzione 3
	</label>
</div>	
</body>
</html>
Prova a vedere ‹/›

I risultati sono come segue:

Uso

Puoi attraverso JavaScript Abilita il plugin Bottone, come segue:

$('.btn').button()

Opzioni

Nessuna opzione.

Metodo

Di seguito sono riportati alcuni metodi utili del plugin Bottone:

MetodoDescrizioneEsempio
button('toggle')Commuta lo stato di pressione. Dà all'interfaccia utente l'aspetto attivato del pulsante. Puoi usare data-toggle Abilita la commutazione automatica dell'attributo.
$().button('toggle')
.button('loading')Quando viene caricato, il pulsante è disabilitato e il testo diventa il testo dell'elemento pulsante. data-loading-text Valore dell'attributo.
$().button('loading')
.button('reset')Ripristina lo stato del pulsante, il testo del contenuto viene ripristinato al contenuto iniziale. Questo metodo è molto utile quando si desidera tornare allo stato originale del pulsante.
$().button('reset')
.button(string)La stringa in questo metodo si riferisce a qualsiasi stringa dichiarata dall'utente. Utilizzando questo metodo, si ripristina lo stato del pulsante e si aggiunge nuovo contenuto.
$().button(string)

Esempio online

Di seguito è riportato un esempio che dimostra l'uso del metodo sopra menzionato:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - Plugin metodo Bottone</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Clicca su ogni pulsante per vedere l'effetto del metodo</h2>
<h4>Dimostrazione del metodo .button('toggle')</h4>
<div id="myButtons1" class="bs-example">
　　　	<button type="button" class="btn btn-primary">Originale</button>
</div>
<h4>Dimostrazione del metodo .button('loading')</h4>
<div id="myButtons2" class="bs-example">
	<button type="button" class="btn btn-primary">Originale</button>　
			data-loading-text="Caricamento...">Originale
	</button>
</div>
<h4>Dimostrazione del metodo .button('reset')</h4>
<div id="myButtons3" class="bs-example">
	<button type="button" class="btn btn-primary">Originale</button>　
			data-loading-text="Caricamento...">Originale
	</button>
</div>
<h4>Dimostrazione del metodo .button(string)</h4>
<button type="button" class="btn btn-primary" id="myButton4">　
　　　	data-complete-text="Caricamento completato">Clicca su di me
</button>
<script type="text/javascript">
	$(function() {
		$("#myButtons1 btn").click(function() {
			$(this).button('toggle');
		});
	});
	$(function() {　
		$("#myButtons2 btn").click(function() {
			$.button('loading').delay(1000).queue(function()　{
			});　　　　　　　　
		});
	});　　　
	$(function() {　
		$("#myButtons3 btn").click(function() {
			$.button('loading').delay(1000).queue(function()　{
				$(this).button('reset');
			});　　　　　　　　
		});
	});　　
	$(function() {　
		$("#myButton4").click(function(){
			$.button('loading').delay(1000).queue(function()　{
				$.button('complete');
			});　　　　　　　　
		});
	});　
</script>　
</body>
</html>
Prova a vedere ‹/›

I risultati sono come segue:

Plugin di Pieghevole BootstrapCasella di Avviso Bootstrap