2014-11-21 4 views
0

jquery 모바일에 검색 기능을 추가하려고하는데 추가 작업이 성공적으로 처리되었습니다. 결과적으로이 문제가 표시되는 것입니다. 이제 내 연락처 목록이 표시되고 있습니다. 각 연락처에 밑줄 단락 유형 반면 검색 버튼을 클릭에와 도착이 목록보기 새로 고쳐 그리고 내가 전에도에 표시 할 것입니다 목록을 검색 한 후 .. 여기 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; 
} 

당신의 ListView에서 앵커 링크에서 밑줄을 제거하는 페이지를 말하는 것입니다.

희망이 있습니다.


업데이트 지금은 문제를 이해합니다. 자, 이제 jQuery Mobile에서 적용되는 클래스 중 일부가 누락되었습니다.

$('#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>'); 

중요한 부분 우리는 당신이에 주입하고 당신의 <a href="#"> 요소에 class="ui-btn ui-btn-icon-right ui-icon-carat-r"를 추가하는 것을 인 : 당신이 당신의 자바 스크립트의 라인을 변경하는 경우

, 당신이 그것을 기대하는 방법으로 표시됩니다 JavaScript를 통한 DOM.

을 수정해야

Fiddle with the proper display here.

+0

이것은 밑줄을 제거했지만 내 문제를 해결하지 못했습니다. 검색 버튼을 클릭하고 목록에서 검색하십시오.보기/표시의 종류는 시작시에도 동일한 시간이 필요합니다. –

+0

내가 시험해 보자 .. –

+0

그것은 내 모바일 장치에서 작동하지 않는다 ... 바이올린에서 그 Ok. 그러나 내가 모바일에서 그것을 보자 마자 똑같지 않다. 그래서 작동하지 않는다. –