I am using the Flat UI from http://ift.tt/ZoqqYC
I copied all the files over and the code from the example page for checkbox.
However I noticed the checkbox doesn't appear as the styled checkbox but after I click the init button to manually apply the js then will it appears as the styled checkbox.
Code:
<html xmlns="http://ift.tt/lH0Osb">
<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 for Flat UI's JavaScript plugins) -->
<script src="../dist/js/vendor/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as 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>
Aucun commentaire:
Enregistrer un commentaire