Я пытаюсь вставить флажок (не стандартный флажок), который имеет все функции jQuery для мобильных css в списке и значок данных. Можно ли сделать что-то вроде ниже?
Я пробовал, как показано ниже.
<ul data-role="listview">
<li>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<a href="#page4"><h3>Task 1</h3><p>Lorem ipsum order no have may not be</p></a></li>
<li>
<a href="audi.html"><h3>Task 2</h3><p>Lorem ipsum order no have may not be</p></a></li>
<li>
<a href="bmw.html"><h3>Task 3</h3><p>Lorem ipsum order no have may not be</p></a></li>
<li>
<a href="acura.html"><h3>Task 4</h3><p>Lorem ipsum order no</p></a></li>
</ul>
Но я получаю что-то вроде этого, Без стилей CSS для флажка. Plz поможет в этом.
Дублируйте это: проверьте эту скрипту с помощью флажка в виде списка, включенного в значок данных.
http://jsfiddle.net/ek2QT/184/
разметка:
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" class="hidden-checkbox"/>
</div>
<a href="#" class="detailListText">Message 1 </a>
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="hidden-checkbox" checked="checked" />
</div>
<a href="#" class="detailListText">Message 2 </a>
</li>
</ul>
Код:
$('#index').live('pagebeforeshow',function(e,data){
$('input[type="checkbox"]').each(function(){
($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');
});
});
$('.checkBoxLeft').bind('click', function(e) {
if($(this).find('input[type="checkbox"]').is(':checked')){
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked' , false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked' , true);
}
});
CSS:
.detailListText{
margin: 0 0 0 20px;
}
.checkBoxLeft{
position: absolute;
left: 10px;
top: 28%;
width: 18px;
height: 18px;
background: #d9d9d9;
border-radius: 3px;
}
.hidden-checkbox {
display: none;
}
.not-checked, .checked {
background-image: url("http://www.dragan-gaic.info/elements.png");
background-repeat: no-repeat;
}
.not-checked {
background-position: 18px 0;
background-color:#d9d9d9;
}
.checked {
background-position: 0 0;
background-color:#6496bc;
}
Посмотрите пример позиции значка на странице http://view.jquerymobile.com/1.3.2/dist/demos/widgets/checkbox/.
Флажки должны быть завернуты в ярлык, который вы можете затем стилизовать
Вы можете видеть в этом http://jsfiddle.net/peter/ckWDG/
Если флажок с меткой правильно отображается, а тот, у кого нет метки, выглядит как обычный html флажок.
<ul data-role="listview">
<li>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="" />
<a href="#page4"><h3>Task 1</h3><p>Lorem ipsum order no have may not be</p></a></li>
<li>
<a href="audi.html"><h3>Task 2</h3><p>Lorem ipsum order no have may not be</p></a></li>
<li>
<a href="bmw.html"><h3>Task 3</h3><p>Lorem ipsum order no have may not be</p></a></li>
<li>
<a href="acura.html"><h3>Task 4</h3><p>Lorem ipsum order no</p></a> <label>
<input type="checkbox" name="checkbox-0 ">
</label></li>
</ul>