카테고리 없음

html base tag와 jquery ui tabs 사용시 오류

파이팅야 2014. 4. 10. 11:49

- html base tag를 사용하면 jquery ui tabs가 제대로 동작하지 않는다.
- base tag에 넣은 url 정보값을 참조해서 href나 src등의 속성값에서 상대적으로 참조하게 된다.
ex> <base href="/aaa/bb"> 이고 <a href="x.html">link</a> 인 경우 link의 url은 /aaa/bb/x.html인 된다.
base tag 관련 - http://www.w3schools.com/tags/tag_base.asphttp://www.tutorialspoint.com/html/html_base_tag.htm


- 관련 내용 및 해결 방법
http://bugs.jqueryui.com/ticket/8637

- 해결방법은 jquery.ui.tabs 쓰기 전 아래의 함수를 넣거나 href, src 부분에 full url정보를 넣는 2가지 방법이 있을것 같다. 나중에 개발자가 신경쓰지 않을려면 view template layout(.net의 master page)등에 아래의 함수를 두면 될것 같다.

$.fn.__tabs = $.fn.tabs;
$.fn.tabs = function (a, b, c, d, e, f) {
    var base = location.href.replace(/#.*$/, '');
    $('ul>li>a[href^="#"]', this).each(function () {
        var href = $(this).attr('href');
        $(this).attr('href', base + href);
    });
    $(this).__tabs(a, b, c, d, e, f);
};