jQuery移动初学者答案

【问题标题】：Jquery mobile beginnerjQuery移动初学者
【发布时间】：2020-05-03 14:16:59
【问题描述】：

我有一个小型网络应用程序，我想将其转换为使用 jquery mobile。但是虽然我认为我有所有的初学者文档，但我有一些问题据我所知，以下页面仍然显示“本机”选择下拉框谁能快速发现问题..？

<!doctype html>
<html>
<head>
    <title>My Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/[version]/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">

    <div data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <p>Hello world</p>
        <div class="ui-field-contain">
            <label for="select-custom-1">Basic:</label>
            <select name="select-custom-1" id="select-custom-1" data-native-menu="false">
                <option value="1">The 1st Option</option>
                <option value="2">The 2nd Option</option>
                <option value="3">The 3rd Option</option>
                <option value="4">The 4th Option</option>
            </select>
        </div>
    </div>
    <div data-role="footer">
        <h4>My Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

【问题讨论】：

在您导入样式表的第 6 行将 1.4.5 替换为 [version]

标签： jquery mobile jquery-mobile

【解决方案1】：

这里有两个问题。首先，URL 中的 [version] 应该是您正在使用的 jQuery 移动实例的实际版本字符串； 1.4.5 在这种情况下。

其次，jQuery 3.x 不支持 jQuery Mobile。您需要使用旧版本，例如 1.12.1：

<!doctype HTML>
<html>
<head>
  <title>My Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <h1>My Title</h1>
    </div>
    <div role="main" class="ui-content">
      <p>Hello world</p>
      <div class="ui-field-contain">
        <label for="select-custom-1">Basic:</label>
        <select name="select-custom-1" id="select-custom-1" data-native-menu="false">
          <option value="1">The 1st Option</option>
          <option value="2">The 2nd Option</option>
          <option value="3">The 3rd Option</option>
          <option value="4">The 4th Option</option>
        </select>
      </div>
    </div>
    <div data-role="footer">
      <h4>My Footer</h4>
    </div>
  </div>
</body>
</html>

【讨论】：

谢谢大家！版本的东西当然是愚蠢的。我一定是摆弄了这么多，以至于我最终忘记了这一点。版本的东西对我来说很新。我在哪里可以阅读更多相关信息？无论如何，谢谢
你指的是哪个“版本的东西”？ 3.x 中的 URL 还是缺少支持？