Настройка UI-иконки стрелка элементов списка

Question

Я хочу использовать свое собственное изображение стрелки для элементов в списке. Где и как мне изменить jQuery Mobile по умолчанию серая стрелка серого круга? Должен ли я переопределить классы jquery css? Я использую jquery-mobile 1.1.0RC. Вот мой HTML-код для элементов списка:

        <ul data-role="listview" id="list_id"> </ul>

И вот мой код JavaScript, там я динамически добавляю элементы списка:

var ap = "<li data-corners=\"false\" data-shadow=\"false\" data-iconshadow=\"true\" data-inline=\"false\" data-wrapperels=\"div\" data-icon=\"images/next.png\" data-iconpos=\"right\" data-theme=\"a\" class=\"ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-btn-up-c\"><div class=\"ui-btn-inner ui-li\"><div class=\"ui-btn-text\"><a href=\"index.html\" class=\"ui-link-inherit\">"+
    "<img src=\"test_thumb.jpg\" class=\"ui-li-thumb\">"+
"<h3 class=\"ui-li-heading\">Big text</h3>"+
"<p class=\"ui-li-desc\">Smaller text</p>"+
"</a></div><span class=\"ui-icon ui-icon-arrow-r ui-icon-shadow\">&nbsp;</span</div</li>";

$('#list_id').append(ap);
$('#list_id').listview('refresh');

Как видите, я пытался изменить атрибут data-icon на свой собственный источник изображения, но он не работает. Извините, если вопрос слишком очевиден, я новичок в рамках CSS и JQuery, поэтому любая помощь будет оценена. Спасибо!

Answer 1

Чтобы использовать пользовательские значки, укажите значение значка данных с уникальным именем. как myapp-email и плагин кнопки сгенерирует класс добавьте префикс ui-icon- к значению data-icon и примените его к кнопке: UI-значок-MyApp-почта.

Затем вы можете написать правило CSS в вашей таблице стилей, которое предназначено для ui-icon-myapp-email класс для указания источника фона значка. к сохранить визуальную согласованность с остальными значками, создать белый значок 18x18 пикселей, сохраненный в формате PNG-8 с альфа-прозрачностью.

В этом примере мы просто указываем на отдельное изображение значка, но Вы можете так же легко использовать значок спрайта и указать позиционирование вместо, так же, как значок спрайта, который мы используем в основа.

.ui-icon-myapp-email {
  background-image: url("app-icon-email.png");
}

Да, проверьте мои навыки копирования и вставки. http://jquerymobile.com/test/docs/buttons/buttons-icons.html

Answer 2

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

Или замените само изображение значка jQuery, я думаю, они находятся в каталоге с именем images .

Если после этого вы все еще застряли, попробуйте прочитать это1007 * легкий для изучения урок от Andy Matthews.:)