Jquery мобильный начинающий - PullRequest
Новая
       11

Jquery мобильный начинающий

1 голос
/ 16 января 2020

У меня есть небольшое веб-приложение, которое я хочу конвертировать для использования jquery мобильного телефона. Но хотя я думаю, что у меня есть все документы для начинающих, у меня есть некоторые проблемы. На следующей странице по-прежнему отображается «родной» выпадающий список, насколько я могу судить. Может ли кто-нибудь быстро определить проблему ..? 

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

1 Ответ

0 голосов
/ 16 января 2020

У вас есть две проблемы здесь. Во-первых, [version] в URL-адресе должна быть фактической строкой версии используемого вами мобильного экземпляра 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>
...