pull options from data attributes

[xocialize]

First let me say it's fantastic to see these actively being developed.

One feature that would be very helpful:

If the settable options could have a matching data- attribute that could be read to activate the option.

That way you could use a single function call to activate the buttons with a class and then have them be individualized according to the data- attributes. For markup that's being created dynamically with the content/style varied based upon some settings in a database or other then this feature delivers an immense amount of flexibility.

[nostalgiaz]

Can you give me a complete example of what you'd like to do? I didn't really get it from your explanation

[xocialize]

Certainly.

Given the current usage:

<div id="danger-toggle-button">
    <input type="checkbox" checked="checked">
</div>

<script>
$('#danger-toggle-button').toggleButtons({
    style: {
        // Accepted values ["primary", "danger", "info", "success", "warning"] or nothing
        enabled: "danger",
        disabled: "info"
    }
});
</script>

We could make this more flexible by:

<div class="toggle-button-class" data-toggleButton-enabled="danger" data-toggleButton-disabled="info">
    <input type="checkbox" checked="checked">
</div>

<div class="toggle-button-class" data-toggleButton-enabled="success" data-toggleButton-disabled="warning">
    <input type="checkbox" checked="checked">
</div>

<script>
$('.toggle-button-class').toggleButtons();
</script>

Where this is very useful is when the html content is dynamically generated by a server process and returned via ajax. All we need to do to activate the potential variety of toggles would be something like.

<script>
$.ajax({

url: "test.html"

}).done(function(data) { 

  $('#target_div').html(data.html_content);

 $('.toggle-button-class').toggleButtons();

});

</script>

This allows us to call the function without necessarily knowing how the html snippet is going to be returned. Please let me know if you would like any other clarifications or use case scenarios.

[nostalgiaz]

Can you give me the content of "test.html"?

[xocialize]

Let's call it test.php and let's assume test.php is a dashboard for a hosting app. The file might pole the server to see what's running and look something like this.

<?

If($apache==true):

?>

<div class="toggle-button-class" data-toggleButton-enabled="danger" data-toggleButton-disabled="info" data-toggleButton-label-enabled="httpd on" data-toggleButton-label-disabled="httpd off">
    <input type="checkbox" checked="checked">
</div>

<?

endif;

If($pureftp==true):

?>

<div class="toggle-button-class" data-toggleButton-enabled="danger" data-toggleButton-disabled="info" data-toggleButton-label-enabled="ftpd on" data-toggleButton-label-disabled="ftpd off">
    <input type="checkbox" checked="checked">
</div>

<?
endif;
?>

This is just a simplistic example of how this might be utilized from dynamic content. Other examples might be where the server could return different forms for an hr application and the buttons would represent types of data for different employee types.

As a front end designer this frees you from having to know the exact data being returned by the server and can properly initialize whatever is returned as well as allow the backend people to extend stuff without having the front end designer adding new code to recognize new services.

[nostalgiaz]

Do you mean something like the last example in my bootstrap-toggle-buttons README? https://github.com/nostalgiaz/bootstrap-toggle-buttons

You can find the demo here, at the bottom of the page: http://www.larentis.eu/bootstrap_toggle_buttons/

[xocialize]

That's exactly what I was looking for. I'm going to implement these into a client project this weekend and I will provide feedback on the experience. At first thought I think these will work perfectly. You're awesome.

[nostalgiaz]

wow! Thanks! Can I ask you the link? I'm so curious :)