I want to implement a tab bar in jQuery mobile

I would like to implement a tab bar in the notepad of the monaca sample app (there are three tabs below, the top screen of the notepad app is also displayed in the tab switching destination, and there are three notepad in one app).

I'm a beginner and I've looked it up, but I can't display the tab bar and notepad on the same screen.

Thank you for your reply.

monaca jquery-ui jquery-mobile

2022-09-29 22:27

1 Answers

In TOP Page, add the navigation bar as a footer after </section>.

<!--TOP Page-->
<div data-role="page"id="TopPage">
    <header data-role="header" data-position="fixed" data-theme="c">
        <h1>Monaca Memo</h1>
        <a href="#AddPage" data-icon="plus" class="ui-btn-right">Add</a>
    </header>
    <section data-role="content">
        <ulid="TopListView" data-role="listview" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete">
        </ul>
    </section>
    <!--- Add -->
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#"data-icon="home" class="ui-btn-active">Home>/a><li>;
                <li><a href="#"data-icon="star">Favorite</a></li>
                <li><a href="#"data-icon="gear">Settings</a></li>
            </ul>
        </div>
    </div>
</div>

2022-09-29 22:27

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656