javascript-mobile-app-template
Version:
Simple and fully customizable user interface template. Design for mobile app development on Capacitor or Cordova. Platforms: Android, iOS, Web.
117 lines (94 loc) • 3.89 kB
HTML
<html>
<head>
<title>UI Toggle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
<script src="components/ui-core.js" type="text/javascript" charset="utf-8"></script>
<script src="components/ui-toggle.js" type="text/javascript" charset="utf-8"></script>
<script>
var start = function() {
// *** EXAMPLE 1:
// UI TOGGLE: Object description.
page.uiToggle = UIToggle.create({
backgroundOnColor: "#3871E0",
});
page.uiToggle.id = "first-toggle";
page.uiToggle.setValue(1);
page.uiToggle.onChange(function (changedToggle) {
console.log(changedToggle.id + ": " + changedToggle.getValue());
});
// Show object at:
//page.uiToggle.left = 0;
page.uiToggle.top = 100;
page.uiToggle.center("left");
// *** EXAMPLE 2:
// UI TOGGLE: Default values.
UIToggle.style.google();
// UI TOGGLE: Object description.
page.uiToggle2 = UIToggle.create();
page.uiToggle2.setValue(1);
page.uiToggle2.onChange(function(self) {
console.log(self.getValue());
});
// Show object at:
page.uiToggle2.top = 200;
page.uiToggle2.center("left");
// *** EXAMPLE 3:
// UI TOGGLE: Default values.
UIToggle.style.apple();
// UI TOGGLE: Object description.
page.uiToggle3 = UIToggle.create();
page.uiToggle3.setValue(1);
page.uiToggle3.onChange(function(self) {
console.log(self.getValue());
});
// Show object at:
page.uiToggle3.top = 300;
page.uiToggle3.center("left");
// *** EXAMPLE 4:
// UI TOGGLE: Default values.
UIToggle.style.ibm();
// UI TOGGLE: Object description.
page.uiToggle4 = UIToggle.create();
page.uiToggle4.setValue(1);
page.uiToggle4.onChange(function(self) {
console.log(self.getValue());
});
// Show object at:
page.uiToggle4.top = 400;
page.uiToggle4.center("left");
// *** EXAMPLE 5:
// UI TOGGLE: Default values.
UIToggle.style.microsoft();
// UI TOGGLE: Object description.
page.uiToggle5 = UIToggle.create();
page.uiToggle5.setValue(1);
page.uiToggle5.onChange(function(self) {
console.log(self.getValue());
});
// Show object at:
page.uiToggle5.top = 500;
page.uiToggle5.center("left");
// *** EXAMPLE 6:
// UI TOGGLE: Default values.
UIToggle.style.default2();
UIToggle.default.backgroundOnColor = "#CC75AA";
// UI TOGGLE: Object description.
page.uiToggle6 = UIToggle.create();
page.uiToggle6.setValue(1);
page.uiToggle6.onChange(function(self) {
console.log(self.getValue());
});
// Show object at:
page.uiToggle6.top = 600;
page.uiToggle6.center("left");
}
</script>
</head>
<body>
<!-- HTML content -->
</body>
</html>