Question

有人可以告诉我如何为查询按钮分配ID。我正在使用查询对话框模式窗体（http://jqueryui.com/dialog/#modal-form） - 尝试设置按钮样式但它不起作用

我的查询代码：

buttons: {
      "Create an account": addUser,
      Cancel: function() {
        dialog.dialog( "close" );
      }
    },

我尝试将其添加如下，但它不起作用：

buttons: {
      "Create an account": { addUser,
        id: "account-btn"
        Cancel: function() {
          dialog.dialog( "close" );
        }
      }
    },

Answer 1

他们有一类ui-button。所以你可以在CSS中将它们作为目标：

.dialogForm > .ui-button {  
    /* styles here */
}

或定位特定按钮

.dialogForm > .ui-button:nth-of-type(1) {
    /* targets the first button */
}

同样，您可以使用JS来定位它们并添加类，但它更加混乱。

编辑：如果您尝试为样式添加ID，请考虑使用类。但是，您可以在第一个按钮中添加ID。这是jQuery模式为按钮视图创建的标记。

＆＃13;

$(function() {
  // If you want to target another button use 'button.ui-button:nth-child(INT)'.
  // Remove the selector and colon if you wish to target both.
  var $button = $('div.ui-dialog-buttonpane button.ui-button:first');

  // Adds id attribute.  The styling here is just to prove we're getting the right thing.
  $button.attr('id', 'uglyId');
  $button.css('background-color', 'pink');

  console.log($button.attr('id'));
}());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
    <div class="ui-dialog-buttonset">

      <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Create an account</span>
      </button>
      <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button">
        <span class="ui-button-text">Cancel</span>
      </button>

    </div>
  </div>

</body>

</html>

＆＃13;

Answer 2

您正在按钮内创建一个对象，并尝试将ID添加到该对象，而不是将ID添加到按钮。试试这个。

buttons: {
    id: "account-btn", //id as a seperate attribute
    "Create an account": addUser, 
    Cancel: function() {
          dialog.dialog( "close" );
    }
}

或者假设id仅用于样式，你可以做类似的事情：
给你的对话框形成一个id，然后在你的css中

#dialog_form_id button {
    //add your style here
}

JQUERY将id分配给jquery对话框按钮

2 个答案: