Объедините флажок jquery mobile в виде списка вместе со значком данных

0

Я пытаюсь вставить флажок (не стандартный флажок), который имеет все функции jQuery для мобильных css в списке и значок данных. Можно ли сделать что-то вроде ниже?

Изображение 174551

Я пробовал, как показано ниже.

<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 поможет в этом.

Изображение 174551

Теги:
jquery-mobile

2 ответа

3
Лучший ответ

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

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;    
}
  • 0
    Отлично, вот что я хотел, это должно решить мою проблему. Спасибо, листал.
  • 0
    Это в значительной степени взломано вместе за рамками jQM. Есть ли какой-либо способ использовать инфраструктуру jQM для достижения чего-то подобного или это немного жестко, когда дело доходит до таких вещей?
0

Посмотрите пример позиции значка на странице 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>
  • 0
    Да. Я понял это. Но я не смогу увидеть другое изображение, то есть data-icon = "arrow-r". Я добавил его отдельно в свой список, а затем вставил в ярлык. Но мне не удалось сгенерировать как data-icon = "arrow-r" image, так и флажок jquerymobile в одном списке. Извините, я просто новичок.
  • 0
    Создайте jsfiddle, сохраните его и обновите свой вопрос ссылкой на jsfiddle.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню