SuperPanel Test

Wijmo demo data

by Jacques Surveyer

HTML

<script src="  &lt;script src=&quot;http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;    &lt;script src=&quot;http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; "></script>
<script src="&lt;!--Theme--&gt;     &lt;link href=&quot;http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; title=&quot;rocket-jqueryui&quot; /&gt;   &lt;!--Wijmo Widgets CSS--&gt;     &lt;link href=&quot;http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0.min.css&quot; rel=&quot;sty"></script>
    <div class="container">

        <div class="header">

            <h2>

                Client Method</h2>

        </div>

        <div class="main demo">

            <!-- Begin demo markup -->

            <div id="superPanel">

                <div class="elements">

                    <ul>

                        <li style="background: activeborder;"><span>ActiveBorder</span></li>

                        <li style="background: activecaption;"><span>ActiveCaption</span></li>

                        <li style="background: captiontext;"><span>ActiveCaptionText</span></li>

                        <li style="background: appworkspace;"><span>AppWorkspace</span></li>

                        <li style="background: buttonface;"><span>Control</span></li>

                        <li style="background: buttonshadow;"><span>ControlDark</span></li>

                        <li style="background: threeddarkshadow;"><span>ControlDarkDark</span></li>

                        <li style="background: buttonface;"><span>ControlLight</span></li>

                        <li style="background: buttonhighlight;"><span>ControlLightLight</span></li>

                        <li style="background: buttontext;"><span>ControlText</span></li>

                        <li style="background:...

CSS

#superPanel
       {
            width: 754px;
            height: 300px;
        }

   .elements ul
        {
            padding: 8px 0 0 8px;
            margin: 0px;
            width: 840px;
            float: left;
        }

        

        .elements ul li

        {
            background: #fff;
            color: #fff;
            font-weight: 900;
            height: 70px;
            margin: 0 8px 8px 0;
            padding: 0;
            padding-top: 62px;
            position: relative;
            text-align: center;
            width: 132px;
            text-shadow: 1px 1px 2px #000000;
        }

        .elements li

        {
            float: left;
            list-style: none;
        }

JavaScript

$(function() {
    $("#superPanel").wijsuperpanel();
});

function scroll(x, y) {
    try {
        x1 = parseInt($('#inputX').val(), 10);
        y1 = parseInt($('#inputY').val(), 10);
    }
    catch (e) {
        return;
    }
    $("#superPanel").wijsuperpanel('scrollTo', x1, y1);
}