jQM - Custom reverse listview

by Dragan Gaić

HTML

<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content" id="content">    
        <ul data-role="listview" data-split-icon="arrow-l" data-split-theme="d">
             <li id="custom-li">
                 <a href="index.html">
                     <img width="80" height="80" src="http://www.intlaqa.com/jquery-mobile-rtl/rtl.jquery.mobile-1.2.0/demo-images/mtr.jpg" />
                    <div class="left">
                        <h3>اعمل الصح</h3>
                        <p>الأستاذ غسان</p>
                    </div>
                    <div class="right">
                        <input type="text" style="width:75px"/>
                    </div>  
                 </a>
                 <a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup" id="left-split-icon" data-theme="b">Purchase album</a>
             </li>
        </ul>            
    </div><!-- /content -->
</div><!-- /page -->

CSS

.ui-input-text {
        width: 75px;
    }
    
    #custom-li .ui-li .ui-btn-text .ui-link-inherit .ui-li-thumb {
        position:absolute;
        top:0;
        bottom:0;
        margin:auto;
        right: 0;
        margin-right: 0 !important;
    } 

    #custom-li .ui-li .ui-icon {
        left: 10px !important;    
    }

    #custom-li .ui-li .ui-btn-text .ui-link-inherit .left {
        float: right;
        margin-right: 50px;
    }

    #custom-li .ui-li .ui-btn-text .ui-link-inherit .left p{
        text-align: right;
    }
        
    #custom-li .ui-li .ui-btn-text .ui-link-inherit .right {
        float: right;
        margin-right: 20px;
        display:block; 
        -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
        -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
        -o-transform:matrix(-1, 0, 0, 1, 0, 0);        
    }


    #left-split-icon {
        left: 0 !important;   
        border-width: 0 1px 0 0 !important;
    }

    .ui-li-link-alt { right: auto !important; } // Fix for jQM 1.3