You can put any widget or HTML element inside the SuperPanel widget, and you can add CSS styling to any of the elements. In the Quick Start, we used a table inside the <div> tags to create our SuperPanel. In this example, we make extensive use of CSS styling to make our unordered list look like a table. The HTML markup for a wijsuperpanel widget made with an unordered list looks like this.

Drop down to view markup

<div id="superpanel" style="width: 440px; height: 280px;">
        <div class="elements">
             <ul>
               <li style="background-color:Red"></li>
               <li style="background-color:Blue"></li>
               <li style="background-color:Fuchsia"></li>
               <li style="background-color:Green"></li>
               <li style="background-color:Purple"></li>
               <li style="background-color:Black"></li>
             </ul>
        </div>
</div>

You can initialize the widget with the following jQuery script.

Drop down to view script

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#superpanel").wijsuperpanel();
    });
</script>

The style that transforms the unordered list into a table looks like this.

Drop down to view style

<style type="text/css">
 .elements ul
        {
            padding: 8px 0 0 8px;
            margin: 0px;
            width: 480px;
            float: left;
            position: relative;
        }
        .elements ul li
        {
            background: #fff;
            color: #fff;
            height: 90px;
            margin: 0 8px 8px 0;
            padding: 0;
            padding-top: 62px;
            position: relative;
            width: 132px;
        }
 
        .elements li
 
        {
            float: left;
            list-style: none;
        }
</style>

The markup and script featured here results in the following live widget. Drag the scroll bars to move the list within the SuperPanel.

See Also

Concepts

Reference