2012-02-25 3 views
20

Jquery Mobile은 앵커 링크를 페이지 정렬 요청으로 처리하기로 결정했습니다. 그러나 동일한 페이지 (예 : href = "# specs")에 대한 앵커 링크가있는 블로그 게시물로드가있는 경우에는 좋지 않습니다.Jchery Mobile에서 앵커 링크를 사용하려면 어떻게해야합니까?

특정 페이지에서 jquery mobile의 앵커 링크 사용을 비활성화하는 방법이 있습니까? 앵커 링크를 사용할 수 있으므로 앵커 링크를 사용하여 페이지의 일부로 드롭 할 수 있습니다. ?

동일한 페이지 (예 : href = "# specs")의 앵커 링크에 대한 솔루션 만 필요합니다.

감사

답변

42
당신은 앵커 태그에 data-ajax="false"를 추가하는 시도 할 수

. 아약스없이 다른 도메인을 가리 키거나 그 확인해 = "외부"= 데이터 아약스 "거짓"또는 대상이

링크를 연결

는 Ajax를로드되지 않습니다 속성. 대신, 이러한 링크는 어떤 애니메이션 전환으로 전체 페이지 새로 고침의 원인이됩니다. 두 속성 (REL = "외부"및 데이터 아약스 = "false"를) 이 같은 효과를 가지고 있지만, 다른 의미 론적 의미 : REL = 다른 사이트 또는 도메인에 링크 할 때 가 사용되어야한다 "외부"동안 데이터 - 아약스 = "거짓은"단순히 Ajax를 통해로드되지 않도록 도메인 내에서 페이지를 탈퇴 할 때 유용합니다. 보안 제한 때문에 프레임 워크는 항상 Ajax 동작에서 외부 도메인에 대한 링크를 선택합니다.

참조 - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

+1

감사합니다 !!!!!! – capdragon

+0

나는 이것을 앵커 태그와 반대되는 링크 태그에 넣으려고한다고 생각하십니까? –

+0

동일한 jquery 모바일 앱에서 외부 페이지 (링크가 아님)에 링크 할 때 유용합니다. 즉, index.html에서 create.html # creations으로 연결되는 링크가 있습니다. 가끔은 JQM 명령처럼 작동하지만 때로는 그렇지 않기 때문에'data-ajax = "false"atribute가 훌륭한 해결책입니다. – Francisco

2

당신은 페이지의 끝에 다음 코드를 추가 할 수 있습니다

<script type="text/javascript"> 
    $('a.native-anchor').bind('click', function(ev) { 
     var target = $($(this).attr('href')).get(0).offsetTop; 
     $.mobile.silentScroll(target); 
     return false; 
    }); 
</script> 

그리고 앵커 링크 클래스 "기본 앵커"를 추가합니다.

브라우저의 뒤로 버튼은 링크의 위치가 아니라 이전 페이지로 이동하지만 전혀 작동하지 않는 링크보다 좋기 때문에 전체적인 해결책은 아닙니다.

나는 여기 sollution을 발견 : 기존 사이트를 변환, 나 같은 당신이 지금 당장 모든 페이지를 통해 이동하지 않으려면 jQuery Mobile Anchor Linking

+0

페이지가 다른 페이지 (일반적으로 JQuery 모바일의 경우)에서 아약스로드 된 경우 data-role = "page"요소의 끝에 코드를 추가해야합니다. –

0
$(document).bind("mobileinit", function() { 
    $.mobile.ajaxEnabled = false; 
}); 
4

. 한 줄의 코드를 헤더에 추가하면 헤더와 기존 내부 앵커 링크 모두에 data-ajax = "false"태그가 추가됩니다.

물론, 여기에는 헤더에 자신의 자바 스크립트 파일이 이미 포함되어 있다고 가정합니다. 그렇지 않다면 어쨌든 모든 페이지를 터치해야합니다. 하지만 난이 줄을 추가 이미 모든 페이지에 포함 된 하나의 자바 스크립트 파일 ...

$("a").each(function() { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); }); 

이것은 당신의 $ (문서)에 간다 .ready() 블록이있다. 아직 그 블록이 없다면 전체 블록이 있습니다.

$(document).ready(function() { 
    $("a").each(function() { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); }); 
}); 

희망이 도움이됩니다. 이는 user700284가 제공하는 동일한 솔루션이지만 자동화 된 방식입니다.

-1

감사합니다 나

<script> 
    $(document).ready(function() { 
    $("a").each(function() { 
     if (this.href.indexOf("index.php") >= 0) $(this).attr("data-ajax", false); 
    }); 
    }); 
</script> 

내 문서 루트입니다 index.php# 교체를 위해이 솔루션을했다. 그러나, 당신이

$(document).bind('mobileinit', function() { 
    $.mobile.loader.prototype.options.disabled = true; 
    $.mobile.ajaxEnabled = false; 
    $.mobile.linkBindingEnabled = false; 
    $.mobile.loadingMessage = false; 
}); 

그런 다음 custom.js 파일에 코드를 삽입 JQuery와 모바일 JS되기 전에 웹 페이지에이 파일을 추가 할 필요가 양식 버튼 IE 용 input type="submit"

0

먼저 작동하지 않습니다 짐을 실은. 예 : 'mobilinit' 이벤트가 즉시 실행됩니다.

관련 문제