Как использовать навигационные панели в качестве вкладок в jquery mobile - PullRequest
Новая
       21

Как использовать навигационные панели в качестве вкладок в jquery mobile

4 голосов
/ 23 февраля 2012

Это следующий код, который я попробовал на скрипке Код Jsfiddle 

<div data-role="navbar">
<ul>
    <li><a href="#tab-1">Tab1</a></li>
    <li><a href="#tab-2">Tab2</a></li>
    <li><a href="#tab-3">Tab3</a></li>
</ul>
</div>

<div data-role="content">
    <div id="tab-1">
       <h2>Here is the first tab</h2>
    </div>

    <div id="tab-2">
        <h2>Here is the second tab</h2>
    </div>
    <div id="tab-3">
        <h2>Here is the third tab</h2>
    </div>
</div>
  1. Мне нужно показать первую вкладку и ее содержимое по умолчанию
  2. Мне нужно скрыть содержимое другой вкладки, когда отображается одна конкретная вкладка

Как это сделать?

1014 *

Ответы [ 4 ]

6 голосов
/ 23 февраля 2012

Вот пример кода, который использует навигационные панели в качестве вкладок. 

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script>
        var prevSelection = "tab1";
        $("#navbar ul li").live("click",function(){
            var newSelection = $(this).children("a").attr("data-tab-class");
            $("."+prevSelection).addClass("ui-screen-hidden");
            $("."+newSelection).removeClass("ui-screen-hidden");
            prevSelection = newSelection;
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    <style>
        .tab-content{
            width:100%;
            height:250px;
            background-color:white;
            border-bottom-left-radius:0.5em;
            border-bottom-right-radius:0.5em;
        }
        .tab-content>div{
            padding:5px;
        }                   

    </style>
    </head> 

    <body> 
        <div data-role="page">

        <div data-role="header">
        <h1>My Title</h1>
        </div><!-- /header -->

        <div data-role="content">   
            <div data-role="navbar" id="navbar">
                <ul>
                    <li><a href="#" class="ui-btn-active" data-tab-class="tab1">Tab1</a></li>
                    <li><a href="#" data-tab-class="tab2">Tab2</a></li>
                    <li><a href="#" data-tab-class="tab3">Tab3</a></li>
                    <li><a href="#" data-tab-class="tab4">Tab4</a></li>
                </ul>
            </div>
            <div class="tab-content">
                <div class="tab1">
                    Tab1
                </div>
                <div class="tab2 ui-screen-hidden">
                    Tab2
                </div>
                <div class="tab3 ui-screen-hidden">
                    Tab3
                </div>
                <div class="tab4 ui-screen-hidden">
                    Tab4
                </div>
            </div>
        </div><!-- /content -->

        </div><!-- /page -->
    </body>
</html>

Демонстрация - http://jsfiddle.net/m8wQM/

Дайте мне знать, если это поможет.

3 голосов
/ 23 февраля 2012

Попробуйте это, 

<div data-role="navbar">
  <ul>
    <li><a href="#tab-1" onclick="ShowHide(this)">Tab1</a></li>
    <li><a href="#tab-2" onclick="ShowHide(this)">Tab2</a></li>
    <li><a href="#tab-3" onclick="ShowHide(this)">Tab3</a></li>
  </ul>
</div>

<div data-role="content" class="content">
   <div id="tab-1" class="tab">
      <h2>Here is the first tab</h2>
   </div>
   <div id="tab-2" class="tab">
      <h2>Here is the second tab</h2>
    </div>
    <div id="tab-3" class="tab">
       <h2>Here is the third tab</h2>
    </div>
</div>



 $(function()
  {
    $(".tab").hide();
    $(".content").find("div:first").show();
  });



function ShowHide(e)
  {
    $(".tab").hide();
    var id =$(e).attr("href");
    $(id).show();
  }
1 голос
/ 24 февраля 2012

Это не мой код, но если вы перейдете на страницу 1, в панели навигации нижнего колонтитула есть вкладки:

Вопрос по теме:

0 голосов
/ 23 февраля 2012

включает навигационную панель в шапке. что-то вроде 

 <div data-role="header" >

    <h1>Title</h1>
    <div data-role="navbar" id="mk_item_actions">
<ul>
    <li><a href="#tab-1">Tab1</a></li>
    <li><a href="#tab-2">Tab2</a></li>
    <li><a href="#tab-3">Tab3</a></li>
</ul>

     </div>
</div><!-- /header -->


<div data-role="content">

</div><!-- /content -->

Тогда это будет работать так, как ты хочешь. Но вам все равно придется обрабатывать сокрытие и показ элементов содержимого вкладки. Другого пути нет.

...