Ошибка jQuery Mobile 1.3.2 при использовании панели

Question

Я пытаюсь реализовать функциональность панели с помощью jQuery Mobile 1.3.2. Вот мой код:

    <div data-role="page" id="homePage">
    <section data-role="panel" class="row">
        PANEL HERE..
    </section>

    <section data-role="header" class="row">
        <div class="large-12 columns">
            <h3>
                Header..
            </h3>               
        </div>          
    </section>

    <section data-role="content" class="row">
        <div class="large-12 columns">
            CONTENT..               
        </div>          
    </section>

    <section data-role="footer" class="row">
        <div class="large-12 columns">
            FOOTER..                
        </div>          
    </section>

    <script type="text/javascript">
        $(function ()
        {

        }());
    </script>
</div>

Когда я запускаю этот браузер, я получаю сообщение об ошибке:

$.data (...) не определено

Я проследил это до строки 10330 из jquery.mobile-1.3.2.js:

var $theme = $.data( page[0], "mobilePage" ).options.theme,

Что мне не хватает?

Answer 1

Я вижу, что мобильный JQuery panel не совместим с jQuery 2.0.

Вы получили ошибку:

Ошибка типа: 'undefined' не является объектом (оценивается как 'a.data(d[0],"mobilePage"). Options')

Попробуйте понизить до jQuery 1.9, он работает с ним.

Демо: http://jsfiddle.net/IrvinDominin/3wUts/

Answer 2

Если вы выполните быстрый поиск в javery-файле jquery для мобильных устройств (минимизирован или нет) по термину "mobilePage" и измените его на "mobile-page", он будет работать. Должен быть только один матч. Я столкнулся с этим и заставил это работать как таковой.

Источник исправления: https://github.com/jquery/jquery-mobile/issues/6200

Answer 3

Я добавил этот код сразу после включения скрипта в заголовок:

<script type="text/javascript" src="//code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<script type="text/javascript">
  var jqDataOrg = $.data;
  $.data = function (a, b, c) { return jqDataOrg(a, b === "mobilePage" ? "mobile-page" : b, c); };
</script>

Это позволяет мне продолжать использовать jQuery 2 и CDN для распространения. Может иметь некоторые побочные эффекты, неизвестные мне, так что будьте осторожны.