Javascript jquerymobile:can'；t设置按钮'；左边和右边是多少？

（更正的URL）

我正在尝试使用jQuery手机为我的女儿开发一款音乐阅读问答游戏

我遇到的问题是键盘。 使用“普通”html按钮，您可以使用jQuery的

.css（）

方法设置left/top/width/height css属性。但对于jquerymobile，这似乎不起作用。有人知道如何在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. -->

（您可以通过转到并使用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属性吗

谢谢

---

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

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

我建议使用

div

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

[编辑]

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

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

检查buttins并复制它们的大部分类（这将给您提供外观），并将这些类提供给一些div，而不是button元素。添加您的样式。绑定

点击

或

点击

（我目前在代码中没有看到任何绑定）让它们工作-与按钮的工作方式相同

这并不是一种类似jqm的方法，您希望在其他按钮上使用相对位置和重叠按钮-这是非常不寻常的，因此需要不寻常的处理

另一个想法：

你见过这个吗 或者这个： ?

---

也许你根本不需要用position:relative来定位按钮（总是有点乱），只要把它们粘成两行或者成对地粘成一列，然后在它们的包装上设置

float:left

。查看适合您的内容

嗯，它不起作用，但这就是您希望按键布局所做的：

您是否尝试将“px”添加到宽度编号中？差不多是这样的：

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

---

我假设whiteKeyHeight和whiteKeyWidth都声明得很好，并且您使用alert（）确保了这一点。另外，另一个注意事项（哦，这是一个多么有趣的笑话）是，你不应该使用绝对位置，这可能会在不同的浏览器/分辨率等方面造成一些问题。你可以使用相对位置来设置“left”属性。另外，float-left似乎是最好的答案，因为除了使用“float:left；”属性的类之外，它不需要添加任何代码就可以实现这一点

哎呀！一开始我的网址错了。现在是对的。你能详细说明一下“脚本运行的顺序”吗？显然，我移动父div的js代码是在jquerymobile重构DOM之后运行的；我们之所以知道这一点，是因为每个按钮元素添加的父元素正在接收我们提供给它的类和top/height属性。Re：你的第二段，你基本上是在建议不要使用jQuery mobile吗？我想在jQuery Mobile上获得跨平台触摸友好的好处，但如果这让DHTML变得太难，可能会牺牲这种好处。我不确定，但这些缺失的属性可能会被删除/覆盖，仅此而已。猜猜看。我不是建议您使用jqm引入的类，并像现在一样实现click/tap，而是在简单的div元素上，而不是按钮上。我打赌你的buttins没有javascript是不能工作的，所以把它们改成divs对javascript没有任何影响。@naugtur，谢谢你的回复。。。到目前为止，你是唯一一个尝试过的人。回复：2，用div代替按钮可以得到什么？如果它们是div，您希望jqm不会“装饰”它们或在它们上运行脚本吗？在我看来，如果我在很大程度上绕过了两个jqm的工作原理，我还不如不使用jqm。@2您仍然不明白它。；）我只是建议您使用不同的html对象。您必须为他们提供特定于jqm的类，并使用click/tap事件来编写支持。jqm确实需要它，但是如果您不想让jqm控制按钮对齐的方式，那么必须使它们不是按钮。我该编辑这篇文章了；）当我转到该链接时，我没有看到javascript，所有按钮都并排排列。这是你的本意吗？不，那不是我想要的关键布局。。。我希望白键（id=“wk1”等）更低，黑键更高，就像at一样，但我希望它们像钢琴键一样水平展开，其中黑键按钮部分重叠（并位于）白键的前面。我有一个工作的非jqm原型要展示，但它现在不工作了…如果你看页面的左侧，你会看到“管理资源”，这有所有的JS和CSS。页面只显示了groupingOK的JQM本机布局，我现在看到了js，它是

<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>

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