Скрипт Google Apps не загружает jquery mobile css
Я пытаюсь научиться использовать jquery mobile со скриптом Google Apps, и моя размещенная страница, похоже, не загружает для нее 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
Разобрался... это две части:
Во-первых, размещенная версия jquery mobile — 1.4.5, которая по-прежнему несовместима с jquery 3.
Во-вторых, jquery должен быть загружен ДО jquery mobile, поэтому он должен был идти над ним на странице:
<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">
Я думаю, вы должны использовать .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.
Более того,
data-role = "main"должно бытьrole = "main". См. здесь: Страницы — демо jQuery для мобильных устройств