Question

我有一个ToolBarButton浮动在一个标题中，类似于dojox.mobile.heading（http://dojotoolkit.org/reference-guide/1.9/dojox/mobile/Heading.html）文档中给出的示例： -

<div data-dojo-type="dojox/mobile/Heading" data-dojo-props='label:"Voice Memos"'>
  <span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props='label:"Speaker"'></span>
  <span data-dojo-type="dojox/mobile/ToolBarButton" data-dojo-props='label:"Done",defaultColor:"mblColorBlue"' style="float:right;"></span>
</div>

产地：

enter image description here

我的问题是虽然这可以很好地使用短标题（例如上面的语音备忘录），但对于较小宽度设备上的较长标题，右边的工具栏按钮会被牺牲而根本不显示。

如果不可见，我想在页面上显示一些内容。是否可以检测右浮动工具栏按钮的可见性，如果不可见，则在页面下方添加更多内容（例如链接）？如果是这样，我该怎么做？

使用Dojox Mobile 1.9.2

Answer 1

一种方法是根据实际屏幕尺寸，使用长文本或缩短文本按代码设置标签。这是一个粗略的实现：

var heading = registry.byId("heading");
var adjustLabel = function() {
  var dim = common.getScreenSize(); // dojox/mobile/common
  var label = dim.w  > 350 ? // adjust the value as needed
    "This is quite a long label" : "Short label";
  heading.set("label", label);
  heading.resize(); 
}
adjustLabel();
connect.subscribe("/dojox/mobile/resizeAll", function(){
  adjustLabel();
});

住在这里：http://jsfiddle.net/adrian_vasiliu/3p64t/（您可以通过调整右侧窗格的大小来测试它：标签自动调整;在方向更改时手机或平板电脑也会发生同样的情况。）

那就是说，我没有重现（使用Dojo 1.9.2）这样的事实，即按照你的代码，右边的按钮不会显示。你可以在这里试试：http://jsfiddle.net/adrian_vasiliu/QYjY5/。我还在jsfiddle之外通过将你的HTML添加到dojox / mobile / test_Heading.html来测试它 - 它在Chrome / Windows，Chrome / Android和Safari / iOS中的行为相同。

检测Dojox Mobile ToolBarButton是否可见

1 个答案: