Question

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

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

我遇到麻烦的部分是键盘。使用“普通”html按钮，您可以使用jQuery的.css()方法设置left / top / width / height 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键的父，因为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的左侧，并且它们的宽度错误。谁能告诉我如何有效地设置左边和宽度属性？

...谢谢

P.S。更新：有关我希望结果如何显示的说明，请参阅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;”的类属性。

Answer 2

这不是问题的直接答案，因为我相信由于脚本运行的顺序，您的值只是被重写，但是

我建议使用div元素而不是按钮。向这些div添加一些类将使它们看起来像你想要的jquerymobile-ish，它们根本不需要是按钮......除非你希望应用程序在没有javascript的情况下工作（我无法验证目前）

[编辑]

第二件事情有点模棱两可......我会详细说明。

我希望JQM阻止或覆盖你设置的内容。这可以通过减少处理按钮的JQM代码的数量来避免。

检查buttins并复制他们的大部分类（这将给你看起来）并将这些类提供给一些div而不是按钮元素。添加你的风格。绑定tap或click（我目前在代码中没有看到任何绑定）让它们工作 - 就像使用按钮一样。

这不是一种类似于jqm的方式，你想要使用相对位置和覆盖按钮而不是其他按钮 - 这是相当不寻常的，所以它需要不寻常的处理。

另一个想法：

你见过这个：http://jquerymobile.com/demos/1.0a3/#docs/buttons/buttons-grouped.html 或者：http://jquerymobile.com/demos/1.0a3/#docs/toolbars/docs-navbar.html ？

也许你不必将按钮定位在位置：相对根本（它总是有点乱）只是将它们组合成两排或者将它们组合在一起作为一列并在它们的包装上设置float:left 。看看适合你的是什么

Answer 3

嗯它没有运作但是这就是你想要的关键布局：http://jsfiddle.net/rg4wj/13/

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

3 个答案: