如何使Jquery Mobile 1.3 ListView(仅)从右到左(R2L)？

Question

我有以下HTML,

http://jsfiddle.net/yWkGR/2/

<div data-role="page">

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

    <div data-role="content" id="content">    
        <ul data-role="listview">
                    <li>

        <a href="#">
            <img width="80" height"80" src="http://www.gravatar.com/avatar/7efa2e4098f60c15d230436ca99d7250?s=32&d=identicon&r=PG" />
            <div class="left">
                <h3>New Latest One</h3>
                <p>$12,000</p>
            </div>
            <div class="right">
                <input type="text" style="width:75px"/>
            </div>
            </a>
            </li>
              <li>

        <a href="#">
            <img width="80" height"80" src="http://www.gravatar.com/avatar/7efa2e4098f60c15d230436ca99d7250?s=32&d=identicon&r=PG" />
            <div class="left">
                <h3>New Latest One</h3>
                <p>$12,000</p>
            </div>
            <div class="right">
                <input type="text" style="width:75px"/>
            </div>
            </a>
            </li>
              <li>

        <a href="#">
            <img width="80" height"80" src="http://www.gravatar.com/avatar/7efa2e4098f60c15d230436ca99d7250?s=32&d=identicon&r=PG" />
            <div class="left">
                <h3>New Latest One</h3>
                <p>$12,000</p>
            </div>
            <div class="right">
                <input type="text" style="width:75px"/>
            </div>
            </a>
            </li>
        </ul>

    </div><!-- /content -->

</div><!-- /page -->

问题是我需要这个html对我的用户来说是正确的.没有使用任何第三方库可以实现这一点吗？

Answer 1

解

只使用css,工作jsFiddle示例:http://jsfiddle.net/Gajotres/Ajdc4/

您只需要更改图标.我不能从这里做到.

.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;
    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);    
}

#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

更多信息

如果你想自己学习如何做这种改变,你应该看看这篇文章,它将教你如何自己做.