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

より詳しい情報

この種の変更を自分で行う方法を学びたい場合は、この記事を確認する必要があります。これを自分で行う方法を説明します。