jqwidgets-framework
Version:
jQWidgets is an advanced jQuery, Angular, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
50 lines (43 loc) • 2.03 kB
HTML
<html lang="en">
<head>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../scripts/knockout-3.0.0.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxcheckbox").jqxCheckBox({ width: 120, height: 25});
$("#button").jqxButton({ width: 100, height: 25});
var Model = function (checked) {
this.checked = ko.observable(checked);
};
var model = new Model(true);
// Register a binding for checkbox.
ko.bindingHandlers.change = {
init: function (element, valueAccessor) {
var value = valueAccessor();
$("#jqxcheckbox").jqxCheckBox('checked', value());
$(element).on('change', function (event) {
value(event.args.checked);
});
}
};
ko.applyBindings(model);
$("#button").click(function () {
alert("Checked: " + model.checked());
});
});
</script>
</head>
<body class='default'>
<div data-bind="change: checked" id="jqxcheckbox">
CheckBox</div>
<input id="button" type="button" value="Get Value" />
</body>
</html>