jQuery-Mobile не работает в Windows Phone 7? - PullRequest
Новая
       17

jQuery-Mobile не работает в Windows Phone 7?

3 голосов
/ 05 апреля 2011

Я выполняю одну простую задачу в jQuery alpha 4. Он запускается в браузере, но когда я запускаю в эмуляторе WP7, он показывает только белый экран?кто-нибудь может мне подсказать, как запустить в WP7? 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Alpha 4 test</title>
<!-- alpha 4 for jQuery mobile -->
<link rel="stylesheet" href="script/jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="script/jquery-1.5.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.0a4.min.js"></script>
<script type="text/javascript">
function callpage2()
{
$.mobile.changePage("#detailpage","slide",false,false);

}
</script>
</head>

<body id="callweb">
    <!-- /Page Starts -->
        <div data-role="page" id="searchpage">
            <!-- /header Starts-->
                <div data-role="header" data-backbtn="false">
                     <center><font size="2"><h3>Saxo Tech</h3></font></center>
                </div>
            <!-- /header Ends -->
            <!--Content Begins-->
            <center>
                <div data-role="content" id="content">
                    First page
                    <a href="#detailpage" data-icon="arrow-r" id="BackSearch" data-role="button"> Using ID</a>
                    <button onclick="callpage2()"> Using button (mobile changepage)</button>
                    <ul data-role="listview" data-inset="true" data-theme="e">
                    <li><img src="script/images/11.jpg" class="ui-li-thumb" /> <a style="margin-left:1em;">one</a></li>
                    <li> <img src="script/images/globe.jpg" class="ui-li-thumb" /><a style="margin-left:1em;">two</a></li>
                    </ul>
                </div>
            </center>
            <!--Content Ends-->
        </div>
    <!-- Page End-->


    <!-- Detail Page Starts -->
        <div data-role="page" id="detailpage">
            <!-- /header Starts-->
                <div data-role="header">
                <center><font size="2"><h3>Saxo Tech</h3></font></center>
                <a href="#searchpage" data-icon="arrow-l" data-iconpos="notext" id="BackSearch" data-role="button" class="ui-btn-left"> &nbsp;&nbsp;Back &nbsp;&nbsp;</a>
                </div>
             <!-- /header Ends -->
             <!--Content Begins-->
                <center>
                    <div data-role="content" id="content">
                        second page
                    </div>
                </center>
            <!--Content Ends-->
        </div>
    <!--Detail Page End-->
</body>
</html>

Ответы [ 3 ]

2 голосов
/ 05 апреля 2011

Возможности отладки в мобильном браузере не очень развиты.

Лучший способ отладки - попытаться использовать браузер для настольных компьютеров.Этот пример работает на IE7 (или IE9 работает в совместимом режиме)?Сначала запустите его, а затем перенесите на мобильный интерфейс.

2 голосов
/ 05 апреля 2011

Я бы предложил использовать CDN вместо локальных файлов для вызова jQuery и jQMobile только для начала.

изменить это 

<link rel="stylesheet" href="script/jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="script/jquery-1.5.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.0a4.min.js"></script>

на это 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
1 голос
/ 27 апреля 2011

Я сталкивался с этой же проблемой раньше.

Для меня это была проблема с моим синтаксисом html, и я думаю, что здесь может быть похожая проблема (кажется, JQM под WP7 очень требователен к своему HTML)

Я бы начал с центральных тегов вокруг содержимого div, либо избавился бы от них, либо переместил их внутрь. Может быть, даже теги шрифта и использовать классы CSS.

...