1

我正在 jQuery mobile 中搜索一个插件以实现选项卡。选项卡必须在页面的内容中。这是我有的...

<div data-role="page" id="nav">
  <div data-role="page" id="nav">
    <div data-role="header">
        <h3>
            Header
        </h3>
    </div>
    <div data-role="content">

        <div data-role="navbar" data-iconpos="top">

            <ul>
                <li>
                    <a href="#one" data-theme="" data-icon="" class="ui-btn-active ui-state-persist">
                        Button
                    </a>
                    </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
                <li>
                    <a href="#" data-theme="" data-icon="">
                        Button
                    </a>
                </li>
            </ul>
        </div>
        <div data-role="page" id="one" data-transition="slide">
            <div data-role="content" style="background-color:#ff0;">    
                <h1>One</h1>
            </div>
        </div>
    </div>

    <div data-role="footer" data-position="fixed">
        <h3>
            Footer
        </h3>
    </div>
</div>

当我单击页面 ID“一”时。它没有显示其各自的内容。任何人都可以帮助我。

4

2 回答 2

6

或者你可以使用我的 tabview 插件。基于 JQM collapsbile set，您只需将 JQMs collapsible 和 collapsible set widget 替换为我的版本。旧的可折叠设备将继续正常工作。当您添加data-type="horizontal"到可折叠集时，它会变成...选项卡...

演示在这里， Github上的回购。

标签视图演示

我也喜欢其他解决方案。

于 2012-11-06T17:10:54.080 回答
2

我修改了 jQuery.mobile-tabs以允许标签栏放置在页面内的任何位置。这是你的想法吗？

标签

于 2012-11-06T16:57:23.637 回答