jquery Mobile：无法设置按钮的左侧和宽度？

Question

Web app in progress is here。 （更正后的网址）

我正在尝试使用 jQuery Mobile 为我的女儿们开发一个音乐阅读问答游戏。

我遇到问题的部分是键盘。 使用“普通”html 按钮，您可以使用 jQuery 的 .css() 方法设置左侧/顶部/宽度/高度 css 属性。但是对于 jQuery Mobile，这似乎不起作用。有谁知道如何在 jQuery Mobile 中移动按钮？

这是键盘按钮的初始 HTML 的摘录：

<div id="kbdC2E" class="keyboard">
    <button class="pianoKey whiteKey" id="wk1" />
        <button class="pianoKey blackKey" id="bk1" />
    <button class="pianoKey whiteKey" id="wk2" />
        <button class="pianoKey blackKey" id="bk2" /> <!-- etc. -->

这是将它们移动到适当位置的 javascript 代码：

for (i = 0; i < numWhiteKeys; i++) {
    var keyLeft = whiteKeyWidth * i;
    var $key = $('button#wk' + i, $div).parent();
    $key.addClass('pianoKey whiteKey')
    .css({
        // position: 'absolute', // from pianoKey class
        left: keyLeft,
        top: gap,
        width: whiteKeyWidth,
        height: whiteKeyHeight,
    });

请注意，我们使用button#wk1 键的parent，因为jQuery Mobile 已将<button> HTML 修饰为：

<div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
  <span class="ui-btn-inner ui-btn-corner-all">...</span>
  <button class="pianoKey whiteKey ui-btn-hidden" id="wk1"></button>
</div>

（您可以通过转到the web page 并使用 DOM/CSS 检查器来验证详细信息。）

当我运行它时，结果是父 div 接收到添加的类，通过它它变成 position=relative;它还接收我设置的顶部和高度属性：

<div data-theme="c" class="ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow pianoKey whiteKey"
     style="top: 72px; height: 90px; ">
  <span class="ui-btn-inner ui-btn-corner-all">...</span>
  <button class="pianoKey whiteKey ui-btn-hidden" id="wk1"></button>
</div>

但是它没有收到我设置的“left”和“width”属性。 结果，所有键最终都位于祖先 div 的左侧，并且它们的宽度错误。谁能告诉我如何有效地设置 left 和 width 属性？

谢谢...

附注更新：有关我希望结果的说明，请参阅here。这不是我想要使用的机制，因为通过在运行时添加按钮，它显然完全绕过了 JQM，从而失去了我试图从 JQM 获得的触摸友好和跨平台优势。但它显示了我想要的布局。

Answer 1

您是否尝试将“px”添加到宽度数？差不多就是这样：

.css({
    // position: 'absolute', // from pianoKey class
    left: keyLeft + 'px',
    top: gap,
    width: whiteKeyWidth +'px',
    height: whiteKeyHeight +'px',
});

我假设 whiteKeyHeight 和 whiteKeyWidth 声明得很好，并且您使用 alert() 确保了这一点。另外，在另一个注意事项（哦，这里真是个有趣的笑话），您不应该使用绝对位置，这可能会在不同的浏览器/分辨率等中导致一些问题。您可以使用相对位置来设置“左”属性。此外，float left 似乎是最好的答案，因为它为您完成了这一切，而无需添加任何代码，但使用“float:left;”的类除外。属性。