dojo：应用程序页眉/页脚栏

Question

我正在尝试复制此处文档中描述的“应用程序页眉/页脚”栏：

https://dojotoolkit.org/reference-guide/1.10/dojox/mobile/ScrollableView.html

文档说：

制作一个栏小部件（标题、TabBar 或您的自定义栏小部件）>固定位置，

1. 将其放在 ScrollableView 之外
2. 为页眉栏添加固定：“顶部”，或为页脚栏添加固定：“底部”

我在这里复制/粘贴了示例：

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/mobile/deviceTheme.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js" djConfig="parseOnLoad: true"></script>

<div data-dojo-type="dojox/mobile/View" data-dojo-props="selected:true">
  <div data-dojo-type="dojox/mobile/RoundRect">
    <form data-dojo-type="dojox/mobile/FormLayout" data-dojo-props="columns: 'single'">
      <div>
        <label>
          <strong>Username</strong>
        </label>
        <fieldset>
          <input type="text" data-dojo-type="dojox/mobile/TextBox">
        </fieldset>
      </div>
      <div>
        <label><strong>Password</strong>
        </label>
        <fieldset>
          <input type="password" data-dojo-type="dojox/mobile/TextBox">
        </fieldset>
      </div>
      <input id="btnLogin" type="submit" data-dojo-type="dojox/mobile/Button" value="Login" class="mblBlueButton">
    </form>
  </div>
  <div data-dojo-type="dojox/mobile/SimpleDialog">
    <div class="mblSimpleDialogTitle">Title</div>
    <div class="mblSimpleDialogText">Text</div>
    <button data-dojo-type="dojox/mobile/Button" data-dojo-props="label:'Ok'"></button>
  </div>
</div>
<h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props='fixed:"bottom"'>Application Footer Bar</h1>

但正如您所见，它与文档页面上的相同示例完全不同。我说的是页脚栏应该位于页面的底部，而不是视图的末尾。

他们没有说任何关于任何自定义 css 规则的内容，因此我想知道我在这里缺少什么。

更新

将主题应用到 sn-p 后，我能够重现原始代码中的实际（错误）行为：

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/mobile/deviceTheme.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js" djConfig="parseOnLoad: true"></script>

<div data-dojo-type="dojox/mobile/View" data-dojo-props="selected:true">
  <div data-dojo-type="dojox/mobile/RoundRect">
    <form data-dojo-type="dojox/mobile/FormLayout" data-dojo-props="columns: 'single'">
      <div>
        <label>
          <strong>Username</strong>
        </label>
        <fieldset>
          <input type="text" data-dojo-type="dojox/mobile/TextBox">
        </fieldset>
      </div>
      <div>
        <label><strong>Password</strong>
        </label>
        <fieldset>
          <input type="password" data-dojo-type="dojox/mobile/TextBox">
        </fieldset>
      </div>
      <input id="btnLogin" type="submit" data-dojo-type="dojox/mobile/Button" value="Login" class="mblBlueButton">
    </form>
  </div>
  <div data-dojo-type="dojox/mobile/SimpleDialog">
    <div class="mblSimpleDialogTitle">Title</div>
    <div class="mblSimpleDialogText">Text</div>
    <button data-dojo-type="dojox/mobile/Button" data-dojo-props="label:'Ok'"></button>
  </div>
</div>
<h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props='fixed:"bottom"'>Application Footer Bar</h1>

如果您浏览整页，您将看到“应用程序页脚栏”浮动在内容末尾下方，而不是像之前的 sn-p 那样固定在页面底部。

Answer 1

查看以下示例 -

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/mobile/deviceTheme.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js" djConfig="parseOnLoad: true"></script>

<h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props='fixed:"top"'>Application Header Bar</h1>
<div id="view1" data-dojo-type="dojox/mobile/ScrollableView">
  View1
</div>
<div id="view2" data-dojo-type="dojox/mobile/ScrollableView">
  View2
</div>
<h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props='fixed:"bottom"'>Application Footer Bar</h1>

希望这会帮助你（y）。