2

サンプルの Windows 8 Phone アプリを作成するために、Visual Studio 2012 を使用しています。

選択した「Create New Project」オプションから、

Windows > Windows Phone HTML5 アプリ

以下に示すように、jquery.min.js ファイルもプロジェクトに追加しました。

ここに画像の説明を入力

以下はindex.htmlで書かれた私のコードです...

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
        <script type="text/javascript" src="/html/js/jquery.min.js" ></script>
        <title>Windows Phone</title>
        <script type="text/javascript">
          $("#dynamic-box").text("hey !");
        </script>
    </head>
    <body>
        <div>
            <p>MY APPLICATION</p>
        </div>
        <div id="dynamic-box"></div>
    </body>
</html>

しかし、jquery コードを何を試しても機能しません。Windows 8 Phone アプリで jquery を記述する他の方法はありますか?

これについて私を助けてください。

4

2 に答える 2

2

ここでは 2 つのことが行われています。1 つは jQuery、もう 1 つは Windows Phone です。

  1. コードをreadyイベントに入れます (そのままでは Web ページでも機能しません)。

    <script type="text/javascript">
    $(document).ready(function () {
        $("#dynamic-box").text("hey!");
    });
</script>

  2. 最初のページに移動する前にIsScriptEnabledを設定します。のステートメントの順序を反転Browser_LoadedしMainPage.xaml.csます。 

    private void Browser_Loaded(object sender, RoutedEventArgs e)
{
    // Add your URL here
    Browser.IsScriptEnabled = true;
    Browser.Navigate(new Uri(MainUri, UriKind.Relative));
}
于 2013-01-19T17:25:27.717 に答える
1

I recently wrote a post on this, thought it be useful to share it here...

Step 1 : Add jquery.min.js to the solution

enter image description here

Step 2 : Change the order of statement in Browser_Loaded method as shown below

private void Browser_Loaded(object sender, RoutedEventArgs e)
{
    // Add your URL here
    Browser.IsScriptEnabled = true;
    Browser.Navigate(new Uri(MainUri, UriKind.Relative));
}

Step 3: Sample Jquery code

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="/html/css/phone.css" />
        <script type="text/javascript" src="/html/js/jquery.min.js" ></script>
        <title>Windows Phone</title>
      <script type="text/javascript">
        $(document).ready(function () {
          $("#message").text("Welcome !");

          $("#goBtn").click(function(){
            $("#message").text("button has been pressed");
          });
        });
      </script>
    </head>
    <body>
        <div>
            <p>MY APPLICATION</p>
        </div>
        <div id="message"></div>
        <input type="button" id="goBtn" value="press me !" />
    </body>
</html>

Output

enter image description here

于 2013-01-23T06:09:05.570 に答える