jquery - 如何使 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

更多信息

如果您想自己学习如何进行这种更改，您应该查看这篇文章，它将教您如何自己进行。