2

jQuery モバイルを使用して単純なウィジェットを作成しようとしています。ボタンがあり、そのボタンをクリックすると、日付送信フォームを表示するダイアログが表示されます。次のように、html で div を定義しました。

      <div data-role="dialog" id="DatePage" >
        <div data-role="content">
        <form>
                <input type="date" name="date" />
                <input type="submit"/>
        </form> 
        </div>
    </div>

ここで、ボタンをクリックしたときにこのダイアログが表示されるようにするために、次のコード行を使用しようとしました。

$.mobile.changePage("#DatePage");

しかし、私がこれを行うと、何も起こりません。他の引数を追加して、さまざまなバリエーションを使用しようとしましたが、何も機能しません。私が他の場所で読んだこと、および私が見た例から、この行はダイアログを表示するはずですが、単に表示されません。私は何を間違っていますか？

4

2 に答える 2

3

このスニペットを使用

<button onClick="$.mobile.changePage('#DatePage', {transition: 'pop', role: 'dialog'});">Open Dialog</button>

ボタンでダイアログを開くには、実際の例を参照してください

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test</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.2.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>

<body>
  <div data-role="page">
    <div data-role="header">
      <h1>Header</h1>
    </div><!-- /header -->

    <div data-role="content">
      <button onClick="$.mobile.changePage('#DatePage', {transition: 'pop', role: 'dialog'});">Open Dialog</button>
    </div>
  </div><!-- /page -->

  <div data-role="page" id="DatePage">
    <div data-role="content">
      <h1>My Dialog</h1>
      <form>
        <input type="date" name="date" />
        <input type="submit"/>
        <button data-rel="back">Close Dialog</button>
      </form>
    </div>
  </div><!-- /page -->

</body>
</html>
于 2012-11-17T20:24:49.723 に答える
1

私の最終的な解決策では、ダイアログは次のコードスニペットによってトリガーされました。

$ .mobile.changePage（'＃DatePage'、{transition：'pop'}）;

ダイアログが最初に表示された後、フロントページが二度と表示されず、2つのボタンのいずれかがクリックされたため、ダイアログが消えたため、ボタンの最初のクリックでのみダイアログが表示されるという問題が発生しました。このページはダイアログの背景であるため表示できましたが、実際には表示されませんでした。この問題を回避するために、次のコードスニペットを使用しました。

<!-- The popup dialog for date selection -->
    <div data-role="page" id="DatePage">

        <div data-role="content">               
            <form id="DateSubmissionForm">
                <input type="date" name="date" />
                <a href="#FrontPage" input-type="submit" data-role="button" class="ui-btn-left">Submit</a>
                <a href="#FrontPage" data-role="button"class="ui-btn-right">Cancel</a>
            </form>
        </div>
    </div>

「送信」ボタンと「キャンセル」ボタンは、実際にはフロントページに戻るリンクです。このコードを使用すると、フロントページが実際に再び表示され、ボタンが再びクリック可能になります。

于 2012-11-19T12:38:30.613 に答える