2015-02-18 4 views
0

Я искал знать, как конвертировать из LTR в RTLLTR в RTL JQuery Collapsibles блок

http://www.beladitvnews.com/news/en-iraqi-mofa-ambassadors в RTL.

код был использован для создания это было:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
 
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div data-role="page" id="pageone"> 
 
    <div data-role="header"> 
 
    <h1>Collapsible Blocks</h1> 
 
    </div> 
 

 
    <div data-role="main" class="ui-content"> 
 
    <div data-role="collapsible"> 
 
     <h1>Click me - I'm collapsible!</h1> 
 
     <p>I'm the expanded content.</p> 
 
    </div> 
 
    </div> 
 

 
    <div data-role="footer"> 
 
    <h1>Insert Footer Text Here</h1> 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

Плюс, как вы можете видеть, первый элемент из-за много текста, то он не показывает даже при нажатии на кнопку расширения.

Пожалуйста посоветуйте Спасибо Сердечные приветы

+0

Пробовали ли вы что-нибудь? 'направление: rtl'? Любой гуглинг? Вы читали такие вещи, как http://css-tricks.com/almanac/properties/d/direction/? –

+0

Привет, благодарю вас за ответ, я могу rtl содержание, но не знак плюс и метку –

+0

Ха, это важная информация, которую вы не упомянули в своем исходном вопросе. Так ты пытался? Что именно вы пробовали? (post CSS и т. д.). Знак «плюс» - псевдоэлемент ': after', я думаю, его можно перенести вправо, используя' .ui-btn-icon-left: after {float: right} '. –

ответ

0

Я воспроизвел блок с «+» знак вы пытаетесь реверс. Я добавил 4 строки, и это сделало трюк. Смотрите ниже, если вы удалите/комментарии мои 4 строки, то "+" восходит слева:

div{ 
 
    background : lightgrey; 
 
    padding: 10px; 
 
} 
 

 
a.ui-icon-plus{ 
 
    display: block; 
 
    position: relative; 
 
    
 
    padding-left: 40px; /* this is the original value */ 
 
    padding-right: 16px; /* this is the original value */ 
 
    
 
    padding-left: 16px; /* Added this to overwrite */ 
 
    padding-right: 40px; /* Added this to overwrite */ 
 
    
 
} 
 

 
a.ui-icon-plus:after{ 
 

 
    content: ""; 
 
    left: 9px; 
 
    margin-top: -11px; 
 
    position: absolute; 
 
    top: 50%; 
 
    width: 22px; 
 
    height: 22px; 
 
    border-radius: 1em; 
 
    display: block; 
 
    background-color: rgba(0,0,0,.3); 
 
    background-position: center center; 
 
    background-repeat: no-repeat; 
 
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C5%209%2C5%209%2C0%205%2C0%205%2C5%200%2C5%200%2C9%205%2C9%205%2C14%209%2C14%209%2C9%2014%2C9%20%22%2F%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3Cg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); 
 
    
 
    left: auto;  /* Added this to overwrite */ 
 
    right: 0;  /* Added this to overwrite */ 
 

 
}
<div> 
 
    <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"> 
 
     <a href="#" class="ui-icon-plus"> 
 
      Dhiaa Hadi Mahmoud AlDabas -----&gt; 
 
      <br> 
 
      Iraq's Ambassador to the republic of Iraq in Cairo and The Representative of Iraq to the Arab Leaque 
 
     </a> 
 
    </h3> 
 
</div>

+0

Спасибо за ваш ответ и ваш код, он отлично работал, за исключением того, что знак минуса появляется на левой стороне после расширяя любой блок, а текст остается на левой стороне. –

+0

Ну, это то же самое. Знак минус - это «.ui-icon-минус» с ': after', просто применяйте к нему тот же код. –

Смежные вопросы