jquery UI 탭을 두 번 이상 사용하십시오.

Question

두 개 이상의 페이지에서 jquery UI 탭을 사용하고 싶습니다. 그러나 탭 수가 다르며 모든 페이지의 탭 너비를 조정하는 방법에 대해 고민하고 있습니다. 한 페이지에 나는이 있습니다

<div id="tabs"> 
       <ul> 
        <li><a href="#tabs-1">5 Star Hotel in Delhi</a></li> 
        <li><a href="#tabs-2">Budget Hotels in Delhi</a></li> 
        <li><a href="#tabs-3">50th IIGF Officials Hotels</a></li> 
       </ul> 

가 확인하고 잘 작동합니다. 이제 두 번째 페이지에 다시이 있습니다

<div id="tabs1"> 
       <ul> 
        <li><a href="#tabs-1">About Delhi</a></li> 
        <li><a href="#tabs-2">Reaching Delhi</a></li> 
        <li><a href="#tabs-3">Delhi Attractions</a></li> 
        <li><a href="#tabs-3">Other Places of interest in Delhi</a></li> 
        <li><a href="#tabs-3">Nearby City Tours from Delhi</a></li> 
       </ul> 

가 지금은 하나의 행에 그들을 얻을이의 탭 리튬 폭뿐만 아니라 앵커 글꼴 크기를 조정해야합니다. 희망 하시겠습니까?

Answer 1

귀하의 질문을 이해할 수 없습니다.

당신이 jQuery를 UI 탭을 사용하는 경우에는이 같은 "플러그인"전화 :

<div id="tabs"> 
<ul> 
    <li><a href="#tabs-1">Nunc tincidunt</a></li> 
    <li><a href="#tabs-2">Proin dolor</a></li> 
    <li><a href="#tabs-3">Aenean lacinia</a></li> 
</ul> 
<div id="tabs-1"> 
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
</div> 
<div id="tabs-2"> 
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p> 
</div> 
<div id="tabs-3"> 
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p> 
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p> 
</div> 

당신이를 추가하는 경우 :

이

$("#tabs").tabs(); 
}); 

귀하의 DOM 요소는 다음과 같이한다 new Tab, jQuery가 자동으로 래퍼를 빌드합니다. 각 요소의 너비는 유동적이거나 CSS로 만들어집니다.

Answer 2

나는 그것을 이해한다고 생각한다. 그러나 확인하는 것 : 문제는 두 번째 예제에서 탭이 더 이상 1 행에 표시되지 않는다는 것입니다. 모든 탭 "제목"의 길이가 window.width를 초과하므로 2-3 행으로 표시됩니다.

<li><a href="#tabs-1">About</a></li> 
    <li><a href="#tabs-2">Reaching</a></li> 
    <li><a href="#tabs-3">Attractions</a></li> 
    <li><a href="#tabs-3">Other Places of interest</a></li> 
    <li><a href="#tabs-3">Nearby City Tours</a></li> 

:

그렇다면, 나는 예를 들어 window.width 를 초과하지 않도록 탭 당 제목의 문자의 양을 변경을 제외하고, 그것에 대해 아무것도 할 수 있다고 생각하지 않습니다

제목을 실제로 편집하지 않으려면 vertical tabs 또는 an accordion을 입력하면 제목의 위치가 변경됩니다. 내 말이 정확히 무엇인지에 대한 링크를보십시오.

귀하의 질문에 답변 해 주셨으면합니다.