我正在尝试复制此处文档中描述的“应用程序页眉/页脚”栏:
https://dojotoolkit.org/reference-guide/1.10/dojox/mobile/ScrollableView.html
文档说:
To make a bar widget (Heading, TabBar, or perhaps your custom bar widget) >fixed-positioned,
- Place it outside ScrollableView
- Add fixed:”top” for a header bar, or fixed:”bottom” for a footer bar
我在这里复制/粘贴了示例:
<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>
但如您所见,它与文档页面上的同一示例有很大不同。我说的是页脚栏应该位于页面底部,而不是 View 的末尾。
他们没有提及任何自定义 css 规则,因此我想知道我在这里遗漏了什么。
更新
将主题应用到片段后,我能够重现原始代码中的实际(错误)行为:
<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>
如果你打开整个页面,你会看到“应用程序页脚栏”漂浮在内容端下方,而不是像前面的代码片段那样固定在页面底部。
检查下面的例子 -
<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)有所帮助。
我是一名优秀的程序员,十分优秀!