Как сделать 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 

Подробнее

Если вы хотите узнать, как сделать этот вид изменения самостоятельно, вы должны проверить это article, она научит вас, как сделать это самостоятельно.