In Anwendungen für die ein veränderbarer Buttonstate, ein ToogleButton oder eine Button-Sectioned mit radio oder check Funktion benötigt werden, steht das jQuery-Plugin: button()
zur Verfügung.
Dynamisch veränderbare Buttenstates¶ ↑
Für alle Buttonelemente ist es möglich die States active, disable, enable, default zusetzen so wie die States Active und Disabled mit toggleactive und toggledisable zu Togglen.
Die Einbindung für States ist wie folgt:
<button id="button-b" class="btn btn-default" >Active</button> <button id="button-c" class="btn btn-default" >Disabled</button>
$(document).ready(function() { $('#button-a').button('default') $('#button-b').button('active') $('#button-c').button('disable') $('#button-d').button('enable') })
Die Einbindung für Toogle das Toggeln von States ist wie folgt:
<button id="button-e" class="btn btn-default">Toggle Active</button> <button id="button-f" class="btn btn-default">Toggle Disable</button> <button id="button-g" class="btn btn-default">Button</button>
$(document).ready(function() { $('#button-e').click(function (e) { $('#button-g').button("toggleactive"); }) $('#button-f').click(function (e) { $('#button-g').button("toggledisable"); }) })
Toogle Button¶ ↑
Durch das Verwenden des Data-Attributes data-toggle=“button” erhällt ein Button automatisch ein Toggle-Verhalten. Zusätzlich kann durch das Data-Attribut data-callback=“$meineFunktion” eine Callbackfunktion bestimmt werden die bei dem event on press aufgerufen wird. Übergeben werden hierbei das aufrufende Element und der state
Die Einbindung für einen Togglebutton ist wie folgt:
<button class="btn btn-default" data-toggle="button" >Togglebutton</button> <button id="button-h" class="btn btn-default" data-toggle="button" data-callback="myFunction" >Togglebutton</button>
$(document).ready(function() { myFunction = function (element, event) { } }
Radio Button-Sectioned¶ ↑
Durch das Verwenden des Data-Attribut data-toggle=“buttonsectioned-radio” erhält eine ButtonSectioned automatisch ein Radio-Button verhalten. Zusätzlich kann durch das Data-Attribut data-callback=“$meineFunktion” eine Callback-Funktion eine Callback-Funktion aufgerufen werden. Übergeben werden hierbei das aufrufende Element und der state.
Die Einbindung für einen Buttongroup mit Radio Verhalten ist wie folgt:
<div class="btn-sectioned" data-toggle="buttonsectioned-radio"> <button class="btn btn-default" data-callback="myFunctionA">Button 1</button> <button class="btn btn-default" data-callback="myFunctionA">Button 2</button> <button class="btn btn-default" data-callback="myFunctionA" disabled>Button 3</button> <button class="btn btn-default" data-callback="myFunctionA">Button 4</button> </div>
$(document).ready(function() { var text = '' myFunctionA = function (element, event) { text += 'callback from ' + element.text() + ' '+ event + '<br/>' $('#callbackOutput-a').html(text) } }
<br/> Die Einbindung für einen Button-Sectioned mit Checkbox Verhalten ist wie folgt:
<div class="btn-sectioned" data-toggle="buttonsectioned" data-callback-states="all"> <button class="btn btn-default" data-callback="myFunctionB">Button 1</button> <button class="btn btn-default" data-callback="myFunctionB">Button 2</button> <button class="btn btn-default" data-callback="myFunctionB" disabled>Button 3</button> <button class="btn btn-default" data-callback="myFunctionB">Button 4</button> </div>
$(document).ready(function() { var textB = '' myFunctionB = function (element, event) { textB += 'callback from ' + element.text() + ' '+ event + '<br/>' $('#callbackOutput-b').html(textB) } }