jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
205 lines (202 loc) • 9.63 kB
HTML
<html lang="en">
<head>
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta name="msapplication-tap-highlight" content="no" />
<title>JavaScript Switch Button - Mobile Example</title>
<link rel="stylesheet" href="../styles/demo.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.windowsphone.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.blackberry.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.android.css" type="text/css" />
<link rel="stylesheet" href="../../../../jqwidgets/styles/jqx.mobile.css" type="text/css" />
<script type="text/javascript" src="../../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxtooltip.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxswitchbutton.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../simulator.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var theme = prepareSimulator("switchbutton");
var width = 100;
var thumbSize = "40%";
var animationEnabled = false;
if (theme === "mobile") {
thumbSize = "55%";
width = 60;
}
else if (theme === "windowsphone") {
$(".settings-section").addClass('win8');
$(".settings-melody").addClass('win8');
$(".settings-section td").addClass('win8');
}
$('#button1').jqxSwitchButton({ theme: theme, toggleMode: 'click', animationEnabled: animationEnabled, height: 32, width: width, thumbSize: thumbSize, checked: true });
$('#button2').jqxSwitchButton({ theme: theme, toggleMode: 'click', animationEnabled: animationEnabled, height: 32, width: width, thumbSize: thumbSize, checked: true });
$('#button3').jqxSwitchButton({ theme: theme, toggleMode: 'click', animationEnabled: animationEnabled, height: 32, width: width, thumbSize: thumbSize, checked: true });
$('#button4').jqxSwitchButton({ theme: theme, toggleMode: 'click', animationEnabled: animationEnabled, height: 32, width: width, thumbSize: thumbSize, checked: true });
$('#button5').jqxSwitchButton({ theme: theme, toggleMode: 'click', animationEnabled: animationEnabled, height: 32, width: width, thumbSize: thumbSize, checked: false });
$('#button6').jqxSwitchButton({ theme: theme, toggleMode: 'click', animationEnabled: animationEnabled, height: 32, width: width, thumbSize: thumbSize, checked: true });
$('#button7').jqxSwitchButton({ theme: theme, toggleMode: 'click', animationEnabled: animationEnabled, height: 32, width: width, thumbSize: thumbSize, checked: true });
initSimulator("switchbutton");
});
</script>
<style type="text/css">
.settings-section td {
height: 11.11%;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-top: 1px solid #b4b7bc;
border-bottom-width: 0px;
color: #000;
background-color: #fefefe;
max-width: 200px;
}
.settings-section {
background-color: #fefefe;
width: 100%;
height: 100%;
border: none;
color: #808080;
overflow: hidden;
table-layout: fixed;
margin: 0;
padding: 0;
}
.settings-label {
font-size: 16px;
margin-left: 14px;
float: left;
}
.settings-melody {
color: #808080;
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
.win8 {
background: #000 ;
border-color: #000 ;
color: #fff ;
}
.buttons {
width: 30%;
}
</style>
</head>
<body class='default'>
<div id="demoContainer" class="device-mobile">
<div id="container" class="device-mobile-container">
<div style="height: 100%;" id="switchbutton">
<table class="settings-section">
<tr>
<td style="text-align: left;">
<div class="settings-label">
Ringtone
</div>
</td>
<td style="text-align: right;">
<div class="settings-melody">
Marimba
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="settings-label">
Text Tone
</div>
</td>
<td style="text-align: right;">
<div class="settings-melody">
Tri-tone
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="settings-label">
New Mail
</div>
</td>
<td class="buttons" style="text-align: right;">
<div style="float: right;" id="button1">
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="settings-label">
Sent Mail
</div>
</td>
<td class="buttons" style="text-align: right;">
<div style="float: right;"id="button2">
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="settings-label">
Tweet
</div>
</td>
<td class="buttons" style="text-align: right;">
<div style="float: right;" id="button3">
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="settings-label">
Calendar Alerts
</div>
</td>
<td style="text-align: right;">
<div style="float: right;" id="button4">
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="settings-label">
Lock Sounds
</div>
</td>
<td class="buttons" style="text-align: right;">
<div style="float: right;" id="button5">
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="settings-label">
Multitasking Gestures
</div>
</td>
<td class="buttons" style="text-align: right;">
<div style="float: right;" id="button6">
</div>
</td>
</tr>
<tr>
<td style="text-align: left;">
<div class="settings-label">
Keyboard Clicks
</div>
</td>
<td class="buttons" style="text-align: right;">
<div style="float: right;" id="button7">
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>