0

わかりましたので、既存の MVC4 アプリをモバイル アプリに拡張します。

jquery mobile はまったく新しいもので、MVC でこれに関して非常に多くの問題を抱えています。レイアウト ページ (MVC) と jquery モバイルを使用するのは悪夢ですか、それとも私だけですか?

したがって、私のページにjquery ui datepickerを表示しようとしているだけですが、表示されません! ページを表示するには、ページをリロードする必要があります。

OK レイアウトページ

@{
    Layout = null;

}

    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title></title>
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
      <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
            <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
            <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>



        </head>
        <body>
            @RenderBody();
        </body>

    </html>

そして今、ビュー

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AppLayout.Iphone.cshtml";

}


<script>
    $(function() {
        $( "#datepicker" ).datepicker();
    });

</script>
@using (Html.BeginForm())
{
    <div data-role="page" id="pageAccount">
    <div data-role="content">

       <div id="datepicker"></div>
</div>

        </div>

}

ページが表示される理由はありますが、日付ピッカーはありません (表示するにはページをリロードする必要があります)。

4

1 に答える 1

0

解決 ：

これを変更する必要があります。

$(function() {
    $( "#datepicker" ).datepicker();
});

これに：

$(document).on('pageshow', '#pageAccount', function(){       
    $( "#datepicker" ).datepicker();
});

話を短くする。DOMjQuery Mobile は、従来の準備ができている関数では使用しないでくださいjQuery。代わりにjQuery Mobile、ページ イベントを提供しています。jQuery モバイル ページのイベントとその仕組みについて詳しく知りたい場合は、このARTICLEをご覧ください。わかりやすくするために、これは私の個人的なブログです。または、こちらをご覧ください。

編集 ：

これが実際の例です：

の位置を変更

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

の中へ：

 <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
 <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

jQuery Mobileとともに使用する場合は、常に最後にロードする必要がありますjQuery UI。

また、忘れてしまった場合は、書式設定されていない日付ピッカーが見つかります。jQuery UI CSSCSS

于 2013-01-29T18:39:49.210 に答える