JQuery Mobile добавляет «заголовок загрузки» на страницу - PullRequest
Новая
       0

JQuery Mobile добавляет «заголовок загрузки» на страницу

27 голосов
/ 29 ноября 2011

Похоже, что jQuery mobile добавляет сообщение о загрузке на стартовой странице.Я действительно не знаю, что происходит, но рассмотрим следующий простой фрагмент: 

<!DOCTYPE html>
<html>
  <head>
  <title>sadFace</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta charset="utf-8" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
  </head>
  <body>
   <h1>;__;</h1>
  </body>
</html>

Мне даже нужно прокрутить вниз, чтобы увидеть сообщение о загрузке.Поэтому я подумал, что это может произойти, потому что я не следую типичной анатомии jQuery для мобильных страниц, а: 

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head> 
<body> 
<div data-role="page">
    <div data-role="header">
        <h1>;_;</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Same shit, different page.</p>       
    </div><!-- /content -->

    <div data-role="footer">
        <h4><a href="http://www.google.com/pacman/">need cookies :C</a></h4>
    </div><!-- /footer -->
</div><!-- /page -->
</body>
</html>

то же самое.Я полностью ошеломлен этим поведением.Я также тестирую jQuery1.0rc2 с тем же результатом, хотя я начал свой проект с прошлой недели, и он выглядит хорошо.Что, черт возьми, происходит <. <</p>

Поиск в jQuery Mobile 'js Я думаю, что initializePage: function() отвечает за сообщение.Я мог бы закомментировать 

//cue page loading message
$.mobile.showPageLoadingMsg();

или установить autoInitializePage: false, но я бы предпочел решение, которое не включает измененный файл jQuery (если это не ошибка).

Ответы [ 3 ]

38 голосов
/ 29 ноября 2011

Вы тоже должны добавить CSS, тогда все будет хорошо: 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />

Подробно:

Он всегда помещает следующий HTML-код внизу вашего тела: 

<div class='ui-loader ui-body-a ui-corner-all'><span class='ui-icon ui-icon-loading spin'></span><h1></h1></div>

Это соответствующий CSS (так что, возможно, вы можете поиграть с ним сами, если хотите) 

.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; position: absolute; opacity: .85; z-index: 100; left: 50%; width: 200px; margin-left: -130px; margin-top: -35px; padding: 10px 30px; }

Функция showPageLoadingMsg добавляет CSS-класс '.ui loading' к тегу HTML, и затем он становится видимым

19 голосов
/ 24 февраля 2014

Вы можете остановить autoInitializePage, используя приведенное ниже ПРЕЖДЕ ЧЕМ загружать библиотеку jquery-mobile 

jQuery(document).on("mobileinit", function() {
    jQuery.mobile.autoInitializePage = false;
});

Более подробная информация здесь: http://api.jquerymobile.com/global-config/

2 голосов
/ 21 сентября 2015

Добавьте это в начало вашего файла JS 

$.mobile.autoInitializePage = false;
...