Google Apps Script не загружает jquery mobile css - PullRequest
Новая
       49

Google Apps Script не загружает jquery mobile css

0 голосов
/ 12 июня 2019

Я пытаюсь научиться использовать jquery mobile с Google Apps Script, и моя размещенная страница не загружает CSS для этого, похоже. Этот код должен иметь серый верхний и нижний колонтитулы, и если я скопирую и вставлю раздел страницы данных dev, он все равно должен появиться только один раз. Ничего из этого не происходит. 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Testing</h1>
      </div>
      <div data-role="main" class="ui-content">
        <h1>Hello, World!</h1>
        <p>Welcome to my page</p>
      </div>
      <div data-role="footer">
        <h2>Testing More</h2>
      </div>
    </div>
  </body>
</html>

Чего мне не хватает, чтобы сделать эту работу?

Примечание: я тоже пробовал с jquery 2.2.4 вместо 3.4.1 .. без разницы ...

Ответы [ 2 ]

2 голосов
/ 12 июня 2019

Разобрался ... это две части:

Во-первых, размещенная версия jquery mobile - 1.4.5, которая по-прежнему несовместима с jquery 3.

Во-вторых, jquery должен быть загружен ДО мобильного jquery, поэтому он должен был идти над ним на странице: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
0 голосов
/ 12 июня 2019

Я думаю, вы должны использовать .ui-header or .ui-footer в css есть только два экземпляра, использующих роль данных, и они здесь .ui-mobile [data-role=page],.ui-mobile [data-role=dialog],.ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0 } если вы добавите .ui-header {background-color:gray } к CSS, тогда фон заголовка будет серым.

Все это очень ясно видно, если вы просматриваете исходные коды и предварительно кодируете код в Chrome Developer Tools

enter image description here

...