Các tab điều hướng di động jQuery

Question

Tôi muốn có điều hướng tab trong dự án jQuery Mobile của mình. Tôi biết tôi có thể sử dụng vai trò dữ liệu 'navbar' nhưng tôi chỉ muốn thay đổi nội dung bên dưới thanh điều hướng đó mà không cần vuốt sang trang mới. Cho đến nay tôi chỉ có thể có một vài trang khác nhau với cùng một thanh điều hướng liên kết với nhau nhưng đó không phải là những gì tôi muốn.

Có ai có thể giúp tôi không?

Cảm ơn bạn trước

Answer 1

Bạn có thể sử dụng thanh điều hướng phong cách jQuery Mobile nhưng sử dụng nhấp xử lý riêng của bạn để thay vì thay đổi trang bấm vào sẽ chỉ ẩn/hiển thị các nội dung thích hợp trên cùng một trang.

HTML

<div data-role="navbar"> 
    <ul> 
     <li><a href="#" data-href="a">One</a></li> 
     <li><a href="#" data-href="b">Two</a></li> 
    </ul> 
</div><!-- /navbar --> 
<div class="content_div">onLoad Content</div> 
<div id="a" class="content_div">Some 'A' Content</div> 
<div id="b" class="content_div">Some 'B' Content</div> 

JAVASCRIPT

$(document).delegate('[data-role="navbar"] a', 'click', function() { 
    $(this).addClass('ui-btn-active'); 
    $('.content_div').hide(); 
    $('#' + $(this).attr('data-href')).show(); 
    return false;//stop default behavior of link 
}); 

CSS

.content_div { 
    display: none; 
} 
.content_div:first-child { 
    display: block; 
} 

Đây là một jsfiddle của đoạn code trên: http://jsfiddle.net/3RJuX/

LƯU Ý:

• Mỗi liên kết trong thanh điều hướng có thuộc tính "data-href" được đặt thành id của div (hoặc bất kỳ vùng chứa nào bạn muốn sử dụng) sẽ được hiển thị.

Cập nhật

Sau 1 năm tôi trở lại câu trả lời này và nhận thấy rằng bộ chọn xử lý sự kiện được giao có thể được tối ưu hóa một chút để sử dụng một lớp học chứ không phải là một thuộc tính (đó là nhanh hơn rất nhiều một tra cứu):

$(document).delegate('.ui-navbar a', 'click', function() { 
    $(this).addClass('ui-btn-active'); 
    $('.content_div').hide(); 
    $('#' + $(this).attr('data-href')).show(); 
}); 

cập nhật

mã này có thể được thực hiện cho được Modula hơn r bằng cách sử dụng các bộ chọn tương đối thay vì các bộ chọn tuyệt đối (như $('.content_div'), vì điều này sẽ chọn tất cả các phần tử phù hợp trong DOM thay vì chỉ các phần tử tương đối so với nút được nhấp).

//same selector here 
$(document).delegate('.ui-navbar ul li > a', 'click', function() { 

    //un-highlight and highlight only the buttons in the same navbar widget 
    $(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active'); 

    //this bit is the same, you could chain it off of the last call by using two `.end()`s 
    $(this).addClass('ui-navbar-btn-active'); 

    //this starts the same but then only selects the sibling `.content_div` elements to hide rather than all in the DOM 
    $('#' + $(this).attr('data-href')).show().siblings('.content_div').hide(); 
});​ 

Điều này cho phép bạn lồng các tab và/hoặc có nhiều bộ tab trên một trang hoặc các trang giả.

Một số tài liệu cho "bộ chọn tương đối" được sử dụng:

• .closest(): http://api.jquery.com/closest
• .siblings(): http://api.jquery.com/siblings

Dưới đây là một ví dụ: http://jsfiddle.net/Cfbjv/25/ (ẩn Nó bây giờ)

Answer 2

CẬP NHẬT: Xem jsfiddle của tôi tại http://jsfiddle.net/ryanhaney/eLENj/

Tôi đã dành chút thời gian để tìm hiểu điều này, vì vậy tôi nghĩ tôi sẽ trả lời câu hỏi này.Lưu ý Tôi đang sử dụng tệp đơn nhiều trang, YMMV.

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar"> 
     <ul> 
      <li><a href="#page-1" data-role="tab" data-icon="grid">Page 1</a></li> 
      <li><a href="#page-2" data-role="tab" data-icon="grid">Page 2</a></li> 
      <li><a href="#page-3" data-role="tab" data-icon="grid">Page 3</a></li> 
     </ul> 
    </div> 
</div> 

$("div[data-role=page]").bind("pagebeforeshow", function() { 
    // prevents a jumping "fixed" navbar 
    $.mobile.silentScroll(0); 
}); 

$("a[data-role=tab]").each(function() { 
     // bind to click of each anchor 
     var anchor = $(this); 
     anchor.bind("click", function() { 
      // change the page, optionally with transitions 
      // but DON'T navigate... 
      $.mobile.changePage(anchor.attr("href"), { 
       transition: "none", 
       changeHash: false 
     }); 

     // cancel the click event 
     return false; 
    }); 
}); 

Answer 3

@ Mike Bartlett

tôi vật lộn với bản thân mình này, nhưng sau khi phá vỡ mã của Jasper xuống có vẻ như có một sắc thái nhẹ từ mã đăng của mình và đó trên trang jsfiddle.

đâu ông đã đăng

$(document).delegate('[data-role="navbar"] a', 'click', function() { 
$(this).addClass('ui-btn-active'); 
$('.content_div').hide(); 
$('#' + $(this).attr('data-href')).show(); }); 

tôi thấy nó hữu ích để thay đổi dòng cuối cùng chỉ đơn giản là gọi bất cứ nội dung nào bạn thiết lập các "dữ liệu href" giá trị được trong navbar của bạn.

$('div[data-role="navbar"] a').live('click', function() { 
    $(this).addClass('ui-btn-active'); 
    $('div.content_div').hide(); 
    $($(this).attr('data-href')).show(); 
    }); 

navbar html của tôi sau đó đọc

<div data-role="navbar"> 
<ul> 
    <li><a href="#" data-href="#a">One</a></li> 
    <li><a href="#" data-href="#b">Two</a></li> 
</ul> 

Đó là khá nhiều giống như mình nhưng đối với một số lý do tôi đã không có "tải trang báo lỗi" tin nhắn. Hy vọng rằng sẽ giúp ...

Answer 4

hãy đề cập dưới đây liên kết cho tất cả các loại thanh nav trong jquery

http://jquerymobile.com/demos/1.0rc2/docs/toolbars/docs-navbar.html

<div data-role="navbar"> 
    <ul> 
    <li><a href="a.html" class="ui-btn-active">One</a></li> 
    <li><a href="b.html">Two</a></li> 
    </ul> 
</div> 

nhờ

Answer 5

Tôi thích câu trả lời @ Ryan-Haney, nhưng suy nghĩ Tôi muốn thêm bản nháp của riêng mình vào, nếu bất kỳ ai cũng có thể tìm cách làm hiệu quả hơn, thì hãy thêm nhận xét .. cảm ơn

Tôi đã làm theo cách này vì tôi có một loạt các tệp "include" được tải vào DOM khi chạy, vì vậy tôi không thể mã hóa cứng rằng tab thứ n được tô sáng/hoạt động cho mỗi trang như Ryan có thể. Tôi cũng có sự sang trọng chỉ có một thanh tab đơn trong ứng dụng của mình.

$(document).delegate('.ui-navbar a', 'tap', function() 
{ 
    $('.ui-navbar').find('li').find('a').removeClass('ui-btn-active'); 
    $('.ui-navbar').find('li:nth-child(' + ($(this).parent().index() + 1) + ')').find('a').addClass('ui-btn-active'); 
}); 

Answer 6

Tôi nhận thấy câu hỏi được hỏi bốn năm trước, vì vậy tôi không chắc liệu tiện ích Tab có sẵn với JQ Mobile tại thời điểm đó không. anyway tôi là một chàng trai từ năm 2015

giải pháp tuyệt vời mà tôi sử dụng như dưới đây với Jquery Mobile 1.4.5

<div data-role="tabs" id="tabs"> 
  <div data-role="navbar"> 
    <ul> 
      <li><a href="#one" data-ajax="false">one</a></li> 
      <li><a href="#two" data-ajax="false">two</a></li> 
      <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li> 
    </ul> 
  </div> 
  <div id="one" class="ui-body-d ui-content"> 
    <h1>First tab contents</h1> 
  </div> 
  <div id="two"> 
    <ul data-role="listview" data-inset="true"> 
        <li><a href="#">Acura</a></li> 
        <li><a href="#">Audi</a></li> 
        <li><a href="#">BMW</a></li> 
        <li><a href="#">Cadillac</a></li> 
        <li><a href="#">Ferrari</a></li> 
    </ul> 
  </div> 
</div>