javascript - Flat UI Checkbox style not applying on startup -
i using flat ui http://designmodo.github.io/flat-ui/
i copied files on , code example page checkbox.
however noticed checkbox doesn't appear styled checkbox after click init button manually apply js appears styled checkbox.
code:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>daily tracker settings</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- loading bootstrap --> <link href="../dist/css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- loading flat ui --> <link href="../dist/css/flat-ui.min.css" rel="stylesheet"> <link rel="shortcut icon" href="img/favicon.ico"> </head> <body> <form id="form1" runat="server" role="form"> <div class="container"> <div class="row mbl"> <div class="col-md-12"> <h4>plugin methods</h4> </div> <div class="col-md-12"> <form role="form"> <div class="form-group"> <label class="checkbox" for="checkbox100"> <input type="checkbox" data-toggle="radio" value="" id="checkbox100" required> checkbox </label> </div> <button type="submit" class="btn btn-sm btn-primary">submit</button> <button class="btn btn-sm btn-default" data-radiocheck-check="#checkbox100">check</button> <button class="btn btn-sm btn-default" data-radiocheck-uncheck="#checkbox100">uncheck</button> <button class="btn btn-sm btn-default" data-radiocheck-toggle="#checkbox100">toggle</button> <button class="btn btn-sm btn-default" data-radiocheck-indeterminate="#checkbox100">indeterminate</button> <button class="btn btn-sm btn-default" data-radiocheck-determinate="#checkbox100">determinate</button> <button class="btn btn-sm btn-default" data-radiocheck-disable="#checkbox100">disable</button> <button class="btn btn-sm btn-default" data-radiocheck-enable="#checkbox100">enable</button> <button class="btn btn-sm btn-default" data-radiocheck-destroy="#checkbox100">destroy</button> <button class="btn btn-sm btn-default" data-radiocheck-init="#checkbox100">init</button><br> <br> </form> </div> </div> <!-- /.row --> </div> <!-- jquery (necessary flat ui's javascript plugins) --> <script src="../dist/js/vendor/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="../dist/js/vendor/video.js"></script> <script src="../dist/js/flat-ui.min.js"></script> <script> $('button:not([type="submit"])').on('click', function (e) { var $this = $(this); if (!!$this.attr('data-radiocheck-check')) { var el = $this.attr('data-radiocheck-check'); $(el).radiocheck('check'); } else if (!!$this.attr('data-radiocheck-uncheck')) { var el = $this.attr('data-radiocheck-uncheck'); $(el).radiocheck('uncheck'); } else if (!!$this.attr('data-radiocheck-toggle')) { var el = $this.attr('data-radiocheck-toggle'); $(el).radiocheck('toggle'); } else if (!!$this.attr('data-radiocheck-indeterminate')) { var el = $this.attr('data-radiocheck-indeterminate'); $(el).radiocheck('indeterminate'); } else if (!!$this.attr('data-radiocheck-determinate')) { var el = $this.attr('data-radiocheck-determinate'); $(el).radiocheck('determinate'); } else if (!!$this.attr('data-radiocheck-disable')) { var el = $this.attr('data-radiocheck-disable'); $(el).radiocheck('disable'); } else if (!!$this.attr('data-radiocheck-enable')) { var el = $this.attr('data-radiocheck-enable'); $(el).radiocheck('enable'); } else if (!!$this.attr('data-radiocheck-destroy')) { var el = $this.attr('data-radiocheck-destroy'); $(el).radiocheck('destroy'); } else if (!!$this.attr('data-radiocheck-init')) { var el = $this.attr('data-radiocheck-init'); $(el).radiocheck(); } e.preventdefault(); }); </script> </form> </body> </html>
manually initializing checkboxes style creates checkbox properly. not sure why in source's examples didn't have this
<script> $(document).ready(function () { $(':checkbox').radiocheck(); }); </script>
Comments
Post a Comment