Как добавить цвет на ListView, когда я нажимаю в JqueryMobile

Question

Как добавить цвет на ListView, когда я нажимаю в JqueryMobile

0

hi я Пробовал добавить цвет в ListView Когда я нажимаю я List List, как: -

   <!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.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<style>


#aks:active {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

</style>

<body>
<div data-role="page" id="pageone">
<ul id="mylist" data-role="listview"  data-split-theme="c">

<li><a  id="aks" href="audi.html">mahindra Scorpio</a></li>
<li><a href="audi.html">BMW</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="audi.html">BenZ</a></li>

</ul>
</div>
</body>
<html>

Этот код будет отображать listView, но теперь я хочу. Когда я нажимаю элемент списка (когда я нажимаю BMW), он должен измениться на зеленый цвет, и когда клик будет выпущен, он должен вернуться к исходному цвету.

Пожалуйста, дайте мне какую-нибудь идею

ezanker 17 апр. 2014, в 13:07

Источник

0

Что вы пробовали? Любой код JS? Потому что мы не будем рассказывать вам, как научиться JavaScript с нуля ..
gulty 17 апр. 2014, в 10:26
0

@gulty Я изменил свой код, использовал стиль CSS, но я хочу изменить цвет вместо изображения
user3488098 17 апр. 2014, в 10:33
0

Что для вас значит «когда клик отпущен»? При нажатии кнопки мыши она меняет цвет на зеленый, и отпуская мышь (кнопка вверх), вы хотите изменить цвет, чтобы вернуться к нормальной жизни? Вы не можете использовать CSS для этого. вам нужно проверить, есть ли функция jquery on click: mouseup () и mousedown (). Попытайтесь стимулировать его (вы можете изменить цвет, используя $ (this), чтобы выбрать элемент, по которому щелкнули) и обновить ваш код.
gulty 17 апр. 2014, в 10:52

Показать ещё 1 комментарий

Теги:

jquery

html

css

listview

jquery-mobile

2 ответа

Ещё вопросы

Что вы пробовали? Любой код JS? Потому что мы не будем рассказывать вам, как научиться JavaScript с нуля ..
@gulty Я изменил свой код, использовал стиль CSS, но я хочу изменить цвет вместо изображения
Что для вас значит «когда клик отпущен»? При нажатии кнопки мыши она меняет цвет на зеленый, и отпуская мышь (кнопка вверх), вы хотите изменить цвет, чтобы вернуться к нормальной жизни? Вы не можете использовать CSS для этого. вам нужно проверить, есть ли функция jquery on click: mouseup () и mousedown (). Попытайтесь стимулировать его (вы можете изменить цвет, используя $ (this), чтобы выбрать элемент, по которому щелкнули) и обновить ваш код.

Boumedienne Bouzidi · Answer 1 · 2015-06-26T22-39-00.000Z

вы должны добавить, что

$("#mylist").find("li").removeClass("activeLI");

удалить весь класс и отключить последний фон

ezanker · Answer 2 · 2014-04-17T11-38-00.000Z

Вы можете создать класс с зеленым фоном (плюс, если хотите), темный зеленый цвет на паре:

.activeLI .ui-btn {
    background-color: #CFF09E !important;
}
.activeLI .ui-btn:hover {
    background-color: #A8DBA8 !important;
}

Затем обработайте событие щелчка LI и просто переключите класс:

$(document).on("pagecreate", "#page1", function () {
    $("#mylist").on("click", "li", function(){        
        $(this).toggleClass("activeLI");
    });    
});

DEMO

ПРИМЕЧАНИЕ. Если вы используете jQM 1.3 вместо последних,

.activeLI {
    background-color: #CFF09E !important;
    background-image: none;
}

Фон применяется непосредственно к LI, а фоновое изображение используется для градиентов.

jQM 1.3 DEMO