jquery mobile split list переназначить кнопку разделения, чтобы установить флажок

Можно ли установить флажок вместо разделенной кнопки в разделенном кнопочном списке в jquery-mobile ?? Казалось бы, легко изменить его, чтобы быть другая кнопка, но флажок ..jquery mobile split list переназначить кнопку разделения, чтобы установить флажок

Я хочу, чтобы мой флажок, чтобы появиться на правой боковой ВМЕСТО кнопки разделенного, а не вместо картины

Спасибо за помощь ..

источник

2013-12-09 tania

Вот DEMO FIDDLE

UL не использует значок разделения, а вместо этого находится абсолютно позиционированный DIV справа с флажком внутри. CSS используется для правильного позиционирования все:

<ul class="has-right-radio" data-role="listview" data-inset="true"> 
    <li data-icon="false"> 
     <a href="#"> 
      <img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg" /> 
      <h3>Picture</h3> 
      <p>List item with thumbnail and right radio</p> 
     </a> 

     <div class="right-radio"> 
      <input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="" /> 
      <label for="checkbox-1a"></label> 
     </div> 
    </li> 
</ul> 

.has-right-radio .ui-link-inherit { 
    margin-right: 48px !important; 
} 
.right-radio { 
    position: absolute; 
    top: 0px; bottom: 0px; right: 0px; 
    width: 48px; 
    border-left: 1px solid rgb(204, 204, 204); 
} 
.right-radio .ui-checkbox input { 
    visibility: hidden; 
} 
.right-radio .ui-checkbox, .right-radio .ui-checkbox label { 
    position: absolute; 
    top: 0px; bottom: 0px; right: 0px; left: 0px; 
} 
.right-radio .ui-checkbox label { 
    background-image: none; 
    background-color: transparent; 
    border: 0; 
} 
.right-radio .ui-checkbox label .ui-btn-inner { 
    position: absolute; 
    top: 50%; 
    margin-top: -10px; 
}

Если вам не нужен эскиз, просто оставьте из тега IMG, как второй LI в скрипку.

источник

2013-12-09 15:07:21 ezanker

Вы делаете отличные решения для CSS. – Omar

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> 
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
<style> 
    .ui-btn-up-c{border:none;} 
    .ui-btn-hover-c{border:none;} 
    .ui-btn-hover-c:visited, .ui-btn-hover-c:hover, .ui-btn-hover-c a.ui-link-inherit { color:none;background:none;border:0px; } 
</style> 
</head> 
<body> 
<div data-role="page" id="myPage1"> 
    <ul data-role="listview"> 
    <li> 
     <div class="ui-grid-b"> 
      <div class="ui-block-a" style="width: 30%;"> 

       <div data-role="fieldcontain"> 
        <img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg"> 

       </div> 

      </div> 
      <div class="ui-block-b" style="width: 60%;"> 
       <div data-role="fieldcontain"> 
        <h2>Phoenix</h2> 
        <p>Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix</p> 
       </div> 
      </div> 
      <div class="ui-block-c" style="width: 6%; padding-top: 55px; float: right;"> 
       <div style="float: right;"> 
        <label> 
         <input name="checkbox-0 " type="checkbox"> 
        </label> 
       </div> 
      </div> 
     </div> 
    </li> 
    </ul> 
</div> 
</body> 
</html>

источник

2013-12-09 13:33:07 Ved

jquery mobile split list переназначить кнопку разделения, чтобы установить флажок

ответ

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