2012-05-25 2 views
0

jquery-ui를 사용하고있는 일부 자동 완성 기능에 jquery mobile &을 사용하고 있습니다. 그러나 문제는 내 버튼에있는 아이콘 (>)이 내 목록 항목의 아이콘 (>)이 제대로 표시되지 않는다는 것입니다. 대신 그 이상한 아이콘을 보여줍니다. 이 문제를 해결하는 방법은 무엇입니까? enter image description herejquery 모바일 및 jquery-ui에서 데이터 아이콘을 처리하는 방법은 무엇입니까?

<input type="submit" value="More" id="more" data-icon="arrow-d" data-iconpos="right" data-theme="b"/> 
+0

코드를 봅시다. – Patricia

+0

버튼의 코드 –

+1

아이콘을 추가했습니다> 그런데 화살표 -r은 화살표 -d가 아닙니다. – ChelseaStats

답변

1

내가 모바일 환경에서 좋은으로 작동하지 않는 완벽한 UI를 자동차에 대해 많이 읽었습니다, 나는 이상한 보이는,하지만 당신의 버튼으로 일어나고 전혀 모르겠어요.

jquery UI 스타일을 생략해도 괜찮은 것으로 보입니까?

그냥 멀리 JQuery와 UI의 자동 완료 할이 pluginI've을 시도 할 수있는 몇 가지 좋은 성공을 사용하고 : http://www.andymatthews.net/code/autocomplete/

편집을 : 당신의 스타일이 포함되는 순서를 전환 해보십시오 : 를 jquery 모바일 스타일 전에 jquery UI 스타일을 넣으십시오.

편집 : 좋아, 난 그냥 로컬이 테스트는 일 : 자바 스크립트 JQuery와 모바일 전에 JQuery와 UI JAVASCRIPT를 넣고이 확인 될 것입니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title> - jsFiddle demo</title> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 

    <link rel="stylesheet" type="text/css" href="/css/result-light.css"/> 


     <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/> 



    <style type='text/css'> 
    body { 
    font-family: Verdana, Arial, sans-serif; 
    font-size: 12px; 
} 


    </style> 



<script type='text/javascript'>//<![CDATA[ 
$(function(){ 


});//]]> 

</script> 


</head> 
<body> 
    <form> 
    <div> 
<input type="button" value="More" id="more" data-icon="arrow-d" data-iconpos="right" data-theme="b"/> 
    </div> 
</form> 



</body> 


</html> 
:

여기에 전체 테스트 페이지입니다

+0

예 jquery-ui 스크립트를 추가하지 않으면 잘 작동합니다. –

+0

아마도 jQuery UI와 jQuery Mobile의 아이콘 스타일 규칙 사이에 충돌이있을 것입니다 ... –

+0

안녕하세요 @ JeloMelo 내 편집을 참조하십시오. – Patricia

관련 문제