Question

我是Apache Cordova和jQueryUI的新手。我只是试图通过jQueryUI格式化我的index.html的布局。

根据This section of the jQueryUI tutorial，小部件由以下两个代码段添加：

<input type="text" name="date" id="date">

（以HTML格式）和

$( "#date" ).datepicker();

（在标题中的<script>标记中）。此示例使用 ID = date 为所有html元素添加datepicker-widget。

我现在的问题是，是否可以为特定html类的元素（或类似的东西）添加一个小部件，而不是它们的ID 。我的元素需要不同的id，因为我通过Cordova的document.getElementById（）方法得到它们。

这是我的示例代码：

<head>
  <meta charset="utf-8" />
  <title>MyApp</title>

  <link href="jqueryui/css/ui-darkness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
  <script src="jqueryui/js/jquery-1.10.2.js"></script>
  <script src="jqueryui/js/jquery-ui-1.10.4.custom.js"></script>

  <script>
    // # = ID / . = Klasse
    $("#datepicket").datepicker();  // Works, widget is added for ID

    $(".button").button();          // Add widget by class WON'T WORK!
    $("#myBtn").button();           // Add widget by ID is OK - WORKS!
  </script>
</head>
<body>
  <button id="myBtn" class="button">
    My button
  </button>
...

如上所述，如果我使用id选择器“#myBtn”，但是当使用类选择器“.button”时，ui格式化将起作用。

有人想知道如何避免这个同样的问题（我也不喜欢为每个不同的id添加一个widget设置（对于每个按钮id一个脚本行））？谢谢！

***************** 编辑 - 以下代码工作 ****************** ****

...
  <script>
     // THIS function declaration I've forgotten!!!
     $(function () {
        $(".button").button();  // # = ID / . = Klasse
        $(".datepicker").datepicker();
    });
  </script>
...

Answer 1

试

$( document ).ready(function() {
   $(".button").each(function() {
      $(this).button();
   });
});

jQuery UI：根据类而不是id添加小部件

1 个答案: