Desidero abbinare pulsanti di opzione o caselle di controllo all'interno di una tabella Bootstrap utilizzando qualcosa come https://github.com/cosmicwheels/jquery-checkradios. Tuttavia, non capisco come ciò possa essere fatto poiché i tag di input corrispondenti vengono creati dalle operazioni di join all'interno del codice javascript (bootstrap-table.js). Esiste una disposizione per fornire classi CSS per lo stile dei pulsanti di scelta all'interno della tabella Bootstrap?Come stile il pulsante di opzione o la casella di controllo all'interno di una tabella di bootstrap?
Q
Come stile il pulsante di opzione o la casella di controllo all'interno di una tabella di bootstrap?
5
A
risposta
6
Ecco un esempio di pulsanti di opzione in stile all'interno di una tabella Bootstrap. Puoi rimuovere facilmente i frammenti di JS insieme ad alcuni CSS per rendere i pulsanti di opzione l'unico elemento selezionabile se questa è l'opzione preferita.
Font Awesome viene utilizzato per i pulsanti di opzione, quindi assicuratevi di includerlo.
input[type=radio] {
display: none;
}
label {
cursor: pointer;
}
input[type=radio] + label:before {
font-family:'FontAwesome';
display: inline-block;
}
input[type=radio] + label:before {
content:"\f10c";
color: #f00;
cursor: pointer;
}
input[type=radio] + label:before {
letter-spacing: 10px;
}
input[type=radio]:checked + label:before {
content:"\f111";
color: #fff; /* Remove this if you remove the 3 Last Rules of the CSS */
}
Snippet
/* Delete the JS Below to Remove the Hover Effect and to Make the Buttons + Label the only Active Area */
$('.table tr').click(function(event) {
if (event.target.type !== 'radio') {
$(':radio', this).trigger('click');
}
});
$(":radio[name=radios]").change(function() {
$(".table tr.active").removeClass("active");
$(this).closest("tr").addClass("active");
});
.wrapper {
margin-top: 40px;
}
.table-striped {
background-color: rgba(77, 162, 179, 0.35);
color: #4DA2B3;
}
.table-responsive {
border-color: transparent;
font-size: 20px;
cursor: pointer;
/* Remove this if you remove the 3 Last Rules Rules of the CSS */
}
.table tbody tr td {
line-height: 24px;
padding-top: 12px;
}
input[type=radio] {
display: none;
}
label {
cursor: pointer;
}
input[type=radio] + label:before {
font-family: 'FontAwesome';
display: inline-block;
font-size: 20px;
font-weight: 200;
}
input[type=radio] + label:before {
content: "\f10c";
/* The Open Circle Can be replaced with another Font Awesome Icon */
color: #4DA2B3;
cursor: pointer;
}
input[type=radio] + label:before {
letter-spacing: 10px;
}
input[type=radio]:checked + label:before {
content: "\f05d";
/* Replace with f111 for a Solid Circle (or any other Font Awesome Icon */
color: #fff;
/* Remove this if you remove the 3 Last Rules of the CSS */
}
/* Delete the Rules Below (and 2 above with Comments) to Remove the Hover Effect and to Make the Buttons + Label the only Active Area */
.table tbody tr:hover td {
background-color: rgba(77, 162, 179, 0.55);
color: #fff;
border-bottom: 10px solid rgba(7, 101, 120, 0.85);
}
.table tbody tr.active td {
background-color: rgba(77, 162, 179, 0.55);
color: #fff;
}
.table tbody tr.active td label {
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<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.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
<div class="container">
<div class="table-responsive col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<table class="table table-striped">
<tbody>
<tr>
<td>Series A</td>
<td>Product A</td>
<td>
<input type="radio" name="radios" id="radio1" />
<label for="radio1">Yes</label>
</td>
</tr>
<tr>
<td>Series B</td>
<td>Product B</td>
<td>
<input type="radio" name="radios" id="radio2" />
<label for="radio2">No</label>
</td>
</tr>
<tr>
<td>Series C</td>
<td>Product C</td>
<td>
<input type="radio" name="radios" id="radio3" />
<label for="radio3">Maybe</label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Problemi correlati
- 1. come mantenere insieme il pulsante di opzione o la casella di controllo e il relativo contrassegno
- 2. Come sapere se una casella di controllo o un pulsante di opzione è selezionata in Dart?
- 3. Pulsante di opzione WebView Android e stili casella di controllo
- 4. Come deselezionare la casella di controllo a meno che non sia selezionato il pulsante di opzione?
- 5. JQuery richiede la casella di controllo e il pulsante di opzione prima di inviare
- 6. simple_form casella di controllo Bootstrap
- 7. Pulsante casella di controllo personalizzato
- 8. Allineamento casella di testo e pulsante, bootstrap
- 9. deseleziona la casella di controllo del pulsante di opzione predefinito quando si utilizza un selettore personalizzato
- 10. Bootstrap: imposta il pulsante di opzione iniziale archiviato in HTML
- 11. È possibile rendere non selezionabile una casella di controllo/un pulsante di opzione?
- 12. Pulsante di opzione Bootstrap "checked" flag
- 13. Input casella di controllo Bootstrap allineato verticalmente
- 14. Come aggiungere Controllo Gravatar di AjaxControlToolkit prima o dopo la casella di controllo nel controllo casella di controllo
- 15. Disattiva il pulsante di opzione in bootstrap 3?
- 16. Ignora stile di compressione bordo tabella Bootstrap
- 17. Come deselezionare la casella di controllo sul pulsante Indietro?
- 18. Pulsante di avvio di Twitter Pulsante Controllo gruppo Pulsanti/caselle di controllo
- 19. Mostra casella di controllo Menu Menu o Menu contestuale di un pulsante
- 20. Verifica di un pulsante di opzione con jQuery quando il pulsante di opzione è runat = "server"?
- 21. Pulsante di commutazione come stile pulsante radio
- 22. default il controllo di una casella di controllo
- 23. Mostra la casella di avviso bootstrap sul pulsante clic su
- 24. Come posso deselezionare o ripristinare il pulsante di opzione?
- 25. Una casella di ricerca in Twitter Bootstrap
- 26. Come deselezionare una casella di controllo html?
- 27. Come deselezionare una casella di controllo Android selezionata
- 28. CSS: stile una casella di controllo per sembrare un pulsante, c'è un passaggio del mouse?
- 29. Controllo predefinito una casella di controllo html
- 30. Controllo CheckedListBox - Solo spuntando la casella di controllo quando viene cliccata la casella di controllo attuale
Sì, sono consapevole del fatto che un'intera riga può essere selezionato in quel modo. vedere per es. stile cella dati, stile riga dati, formattatore dati, classi/classi dati. Probabilmente DOM può essere manipolato anche in event handler. Tuttavia, la mia domanda è specifica dello stile delle caselle di controllo o dei pulsanti di opzione. Ho visto che le loro proprietà possono essere manipolate usando l'opzione data-formatter: https://github.com/wenzhixin/bootstrap-table-examples/blob/master/options/disabled-checkbox.html. Ma qualche idea su come modellarli? non sembrano funzionare semplicemente aggiungendo una classe dopo che sono stati renderizzati. – Prashant