Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
An jQuery plugin use HTML <ul><li> do similar things as iOS List View.
JavaScript
Branch: master

README.md

jQuery ListView

This is a jQuery plugin doing similar things as iOS ListView but with HTML tag <ul> <li> as the data structure. This plugin script part is ready. But the css I provide is bad.

DEMO here.

Usage

Add script

$('.nestable-view').listView();

and include the library

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.listview.js"></script>

Markup

<ul class="nestable-view">
    <li>
        Campus 1
        <ul>
            <li>Block A
                <ul>
                    <li>Room A1</li>
                    <li>Room A2/li>
                    <li>Room A3</li>
                </ul>
            </li>
            <li>Block B
                <ul>
                    <li>Room B1</li>
                    <li>Room B2</li>
                    <li>Room B3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        Campus 2
        <ul>
            <li>Block C
                <ul>
                    <li>Room C1</li>
                    <li>Room C2</li>
                    <li>Room C3</li>
                </ul>
            </li>
            <li>Block D</li>
        </ul>
    </li>
</ul>

Add style

.nestable-container {
    overflow:hidden;
    width:200px;
    height:300px;
    position:relative;
    z-index:0;
}
.nestable-view {
    width:200px;
}

.nestable-view ul{
    display:inline-block;
    left:0px;
    top:0px;
    background-color:white;
    width:200px;
    height:300px;
}

ul.nestable-view,.nestable-view ul{
    position:absolute;
    padding:0;
    margin:0;
}

.nestable-view li {
    list-style:none;
    background-image: -webkit-linear-gradient(top, #333, #222);
    color:white;
    height:30px;
    padding: 10px 0 0px 10px;
}
Something went wrong with that request. Please try again.