2014-11-21 2 views
0

Я пытаюсь добавить функции поиска в jquery mobile, и у меня есть успех в добавлении и его работе. Теперь проблема, которую я получил в результате этого, находится в отображении. Теперь мой список контактов отображается как тип пункта с подчеркиванием в каждом контакте, тогда как на нажатия на кнопку поиска и после поиска списков получает освежены для ListView, и это то, что я хочу, чтобы отобразить на перед и ..Отображение в вопросе ListView

Вот скрипка демо .. Fiddle

И вот HTML.

<ul data-role="listview" data-filter="true" data-inset="true" data-input="#autocomplete-input" id="ContactList">  
</ul> 

Пожалуйста, помогите мне решить это. Спасибо ..

Refrence files.

<link rel="stylesheet" href="css/jquery.mobile.structure-1.0.1.css" /> 
<link rel="stylesheet" href="css/custom.css" /> 
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.css" /> 
<link rel="apple-touch-icon" href="images/launch_icon_57.png" /> 
<link rel="apple-touch-icon" sizes="72x72" href="images/launch_icon_72.png" /> 
<link rel="apple-touch-icon" sizes="114x114" href="images/launch_icon_114.png" /> 
<script src="js/jquery-1.7.1.min.js"></script> 
<script src="js/jquery.mobile-1.0.1.min.js"></script> 
<script src="js/function.js"></script> 
<script src="cordova.js"></script> 

ответ

1

выглядит следующим образом CSS будет избавиться от подчеркивания для вас:

ul[data-role=listview] a { 
    text-decoration: none; 
} 

Все, что делает задает страницу, чтобы удалить подчеркивание якорных ссылок в ваших ListViews.

Надеюсь, что это поможет.


Update

Я понимаю проблему сейчас. Хорошо, поэтому вам просто не хватает некоторых классов, которые применяются jQuery Mobile.

Если вы измените эту строку вашего JavaScript, он будет отображаться, как вы ожидаете его:

$('#ContactList').append('<li><a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r"><h3 class="ui-li-heading">' + name + '</h3><div class="ui-li-desc">Club ' + phone + '</div></a></li>'); 

Важной части в том, что мы добавляем class="ui-btn ui-btn-icon-right ui-icon-carat-r" к вашему <a href="#"> элементу, который вы инъекционными в DOM через JavaScript.

Fiddle with the proper display here

Это должно исправить.

+0

Это удалило подчеркивание, но не решило мою проблему. Пожалуйста, нажмите кнопку поиска и найдите из списка. Вид просмотра/отображения. Я получаю то время, которое мне тоже нужно в начале. –

+0

Позвольте мне проверить его .. –

+0

Его не работает в моем мобильном устройстве ... Его хорошо в скрипке. Но как только я увидел его на мобильном телефоне, это не то же самое ... и его не работает –

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