jQuery Mobile Controls

by dhavaln

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<div data-role="page" id="home"> 

    <div data-role="header"> 
        <h1>jQuery Mobile</h1> 
    </div> 

    <div data-role="content">
        <a href="" data-role="button">adfas</a>
        <div data-role="collapsible-set">

    <div data-role="collapsible" data-collapsed="false">
    <h3>Section 1</h3>
    
        <ul data-role="listview" data-inset="true">
                <li data-filtertext="11:first:one"><a href="#">one</a></li>
<li data-filtertext="22:second:two"><a href="#">two</a></li>
<li data-filtertext="33:third:three"><a href="#">three</a></li>
<li data-filtertext="44:fourth:four"><a href="#">four</a></li>            
            </ul>
        
    </div>
    
    <div data-role="collapsible">
    <h3>Section 2</h3>
    <p>I'm the collapsible set content for section B.</p>
    </div>
    
</div>
        
        
    </div>
</div>

CSS

.ui-btn { display: block; text-align: center; cursor:pointer;  position: relative; margin: .5em 5px; padding: 0; }
.ui-mini { margin: .25em 5px; }
.ui-btn-inner { padding: .6em 20px; min-width: .75em; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; position: relative; zoom: 1; }
.ui-btn input, .ui-btn button { z-index: 2; }
.ui-btn-left, .ui-btn-right, .ui-btn-inline { display: inline-block; }
.ui-btn-block { display: block; }

.ui-header .ui-btn,
.ui-footer .ui-btn { display: inline-block; margin: 0; }
.ui-header .ui-btn-block,
.ui-footer .ui-btn-block { display: block; margin: .25em 5px; }
.ui-header .ui-btn-block.ui-fullsize,
.ui-footer .ui-btn-block.ui-fullsize { margin: .5em 5px; }

.ui-header .ui-btn-inner,
.ui-footer .ui-btn-inner,
.ui-mini .ui-btn-inner { font-size: 12.5px; padding: .55em 11px .5em; }

.ui-header .ui-fullsize .ui-btn-inner,
.ui-footer .ui-fullsize .ui-btn-inner { font-size: 16px; padding: .6em 25px; }

.ui-btn-icon-notext { width: 24px; height: 24px; }
.ui-btn-icon-notext .ui-btn-inner { padding: 0; height: 100%; }
.ui-btn-icon-notext .ui-btn-inner .ui-icon { margin: 2px 1px 2px 3px; }

.ui-btn-text { position: relative; z-index: 1; width: 100%; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.ui-btn-icon-notext .ui-btn-text { position: absolute; left: -9999px; }

.ui-btn-icon-left .ui-btn-inner { padding-left: 40px; }
.ui-btn-icon-right .ui-btn-inner { padding-right: 40px; }
.ui-btn-icon-top .ui-btn-inner { padding-top: 40px; }
.ui-btn-icon-bottom .ui-btn-inner { padding-bottom: 40px; }

.ui-header .ui-btn-icon-left .ui-btn-inner,
.ui-footer .ui-btn-icon-left .ui-btn-inner,
.ui-mini .ui-btn-icon-left .ui-btn-inner { padding-left: 30px; }
.ui-header .ui-btn-icon-right .ui-btn-inner,
.ui-footer .ui-btn-icon-right .ui-btn-inner,
.ui-mini .ui-btn-icon-right .ui-btn-inner { padding-right: 30px; }
.ui-header .ui-btn-icon-top .ui-btn-inner,
.ui-footer .ui-btn-icon-top...