jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
212 lines (206 loc) • 9.97 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 id='Description'>JavaScript Touch - 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="../simulator.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxtouch.js"></script>
<script type="text/javascript" src="../../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript">
$(document).ready(function () {
prepareSimulator("dataContainer");
$('.rhino-data-field').jqxTouch();
$('.rhino-picture').jqxTouch();
function setText(container, text) {
container.children('div').fadeOut(200, function () {
$(this).html('<div>' + text + '</div>').fadeIn(200);
});
}
$('.rhino-data-field').on('swipeleft', function () {
setText($(this), "You've swiped left");
});
$('.rhino-data-field').on('swiperight', function () {
setText($(this), "You've swiped right");
});
$('.rhino-picture').on('tap', function () {
var pic = $(this);
if (!pic.is(':animated')) {
pic.animate({ left:
-30 }, 180, function () {
pic.animate({ left: 30 }, 160, function () {
pic.animate({ left: 0 }, 140);
});
});
}
});
initSimulator("dataContainer");
});
</script>
</head>
<body class="default">
<div id="demoContainer" class="device-mobile">
<div id="container" class="device-mobile-container">
<div id="dataContainer" style="height: 100%; width: 100%;">
<div class="rhino-header">
Rhinoceros</div>
<table style="background: #fff; width: 100%;">
<tbody>
<tr>
<td>
<div class="rhino-picture">
</div>
</td>
</tr>
<tr><td class="rhino-label" align="center" valign="middle">Swipe any item</td></tr>
<tr>
<td>
<div class="rhino-data">
<div class="rhino-data-field rhino-data-field-top">
<div>
Kingdom <span>Animalia</span></div>
</div>
<div class="rhino-data-field">
<div>
Phylum <span>Chordata</span></div>
</div>
<div class="rhino-data-field">
<div>
Class <span>Mammalia</span></div>
</div>
<div class="rhino-data-field">
<div>
Infraclass <span>Eutheria</span></div>
</div>
<div class="rhino-data-field">
<div>
Order <span>Perissodactyla</span></div>
</div>
<div class="rhino-data-field">
<div>
Suborder <span>Ceratomorpha</span></div>
</div>
<div class="rhino-data-field">
<div>
Superfamily <span>Rhinocerotoidea</span></div>
</div>
<div class="rhino-data-field rhino-data-field-bottom" style="border-bottom-width: 0px;">
<div>
Family <span>Rhinocerotidae</span></div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<style type="text/css">
.rhino-picture
{
width: 160px;
height: 160px;
background-image: url(../../../../images/rhino.jpg);
border-radius: 160px;
-moz-border-radius: 160px;
-webkit-border-radius: 160px;
-webkit-box-shadow: 0px 0px 15px 2px rgba(87, 105, 45, 1);
box-shadow: 0px 0px 15px 2px rgba(87, 105, 45, 1);
margin: 12px auto;
position: relative;
}
.rhino-data
{
width: 80%;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
overflow: hidden;
margin-left: 10%;
border: 1px solid #999999;
margin-top: 2px;
}
.rhino-data-field
{
background-color: #f9f9f9;
padding: 6px;
border-bottom: 1px solid #e0e0e0;
font-weight: bold;
font-size: 15px;
}
.rhino-data-field-top
{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.rhino-data-field-bottom
{
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.rhino-data-field span
{
float: right;
color: #bbb;
}
.rhino-label
{
font-size: 16px;
text-align: center;
color: #888;
padding-top: 10px;
color: black;
}
.rhino-header
{
width: 100%;
height: 30px;
padding-top: 5px;
padding-bottom: 5px;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #eaeaea 40%, #cecece 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(40%,#eaeaea), color-stop(100%,#cecece));
background: -webkit-linear-gradient(top, #ffffff 0%,#eaeaea 40%,#cecece 100%);
background: -o-linear-gradient(top, #ffffff 0%,#eaeaea 40%,#cecece 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#eaeaea 40%,#cecece 100%);
background: linear-gradient(to bottom, #ffffff 0%,#eaeaea 40%,#cecece 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cecece',GradientType=0 );
font-size: 26px;
text-align: center;
color: #888;
font-weight: bold;
border-bottom: 1px solid #999;
}
#dataContainer
{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 365px;
height: 100%;
background: #fff;
color: black;
}
</style>
</div>
</div>
</body>
</html>