jQWidgets Mobile Demos

Show Demo List
Theme:
Demo
View Source
API Reference
<!DOCTYPE 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>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</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>
jQWidgets Mobile Demos

Web UI Widgets
