1

我需要在离子框架中实现类似这个 jQuery 结构的东西

<body>
    <div data-role="page" id="page1">
        <!--content -->
    </div>
    <div data-role="page" id="page2">
        <!--content -->
    </div>
</body>

我在谷歌上搜索但无法做到这一点。

目前我在我的html中有这个：

<body ng-app="todo" ng-controller="TodoCtrl">
<div id="page1">
    <header id="header" class="bar bar-header">

        <h3 class="title">header 1 is long</h3>
    </header>
    <content padding="true" id="">
    <div class="centered">
        <img alt="Flash Anatomy Muscles" src="images/thinkand.jpg"
            id="cover-img" />

    </div>
    </content>

    <div class="bar bar-footer">
        <div class="title">
            <button id="a" class="button button-light"
                ng-click="showAlert($event)">Origin</button>
            <button id="b" class="button button-light"
                ng-click="showAlert($event)">Insertion</button>
            <button id="c" class="button button-light"
                ng-click="showAlert($event)">Btn3</button>
            <button id="d" class="button button-light"
                ng-click="showAlert($event)">Btn4</button>
        </div>
    </div>
</div>
<div id="page2">
    <header id="header" class="bar bar-header">

        <h3 class="title">header 2</h3>
    </header>

    <content padding="true" id="">
    <div class="centered">
        random text over here
    </div>
    </content>

    <div class="bar bar-footer">
        <div class="title">

            <button id="e" class="button button-light"
                ng-click="showAlert($event)">Btn5</button>
            <button id="f" class="button button-light"
                ng-click="showAlert($event)">Btnn6</button>
        </div>
    </div>
</div>

</body>

它给了我这个结果：

在此处输入图像描述

观察这些：

  1. 两个页面的标题重叠。

  2. 正在显示第 1 页（图像）的内容，并且正在将第二页的文本放置在图像上。

  3. 第 1 页的页脚与第 2 页的页脚重叠。因此仅显示第 2 页的按钮。

有人可以指导我在 ionic 框架中需要做什么，比如data-rolejquery 的属性吗？

PS：我尝试data-role='page'在 div 中添加。这根本不会改变结果。

4

1 回答 1

2

Ionic根本不使用任何东西jQuery，它使用Angular JS，我建议你阅读这篇文章。

关于单页结构，恐怕无法使用Ionic，因为Ionic实现了ui-router，它为不同的模板创建路由（每个模板都是不同的 html）。

所以，只要摆脱帖子的建议，jQuery开始思考Angular，你不会后悔的！;)

于 2014-04-22T01:56:06.883 回答