Question

我正在使用JQuery Mobile并动态设置对话框链接。用户单击链接后，对话框将在单独的页面中打开，而不是在对话框弹出窗口中打开。我有下面的工作代码。有人可以告诉我我做错了什么吗？

提前致谢，

Vish

以下是jsfiddle上此示例的链接 http://jsfiddle.net/vishr/ekLWd/

当用户点击Add Item时，我动态地将文本更改为Remove Item，当用户单击Remove Item时，我会弹出一个对话框，在这种情况下会打开一个单独的页面，而不是一个对话框弹出

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js">    </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript">

(function(){
$(document).ready(function() {
    $("#del-item").live('click', function(){  
    $.mobile.changePage($('#del-dialog'), 'pop');
    });    
    $("#add-item").live('click', function(){  
        $('#add-item .ui-btn-text').text('Remove Item');
        $('.item').attr('id', 'del-item');
        $('.item').attr('href', '#del-dialog');
        $('.item').attr('data-rel', 'dialog');
    });    
    $("#close-dialog").click(function(){      
        $('.ui-dialog').dialog('close');
    });
 });
})();
</script>
</head> 
<body> 

<div data-role="page">

<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->

<div data-role="content">
      <div id="dialog-container" data-inline="true">
        <a href="#" class="item" id="add-item" data-role="button" data-inline="true">Add Item</a>  
      </div>   
</div><!-- /content -->

<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
  <div data-role="dialog" role="dialog" id="del-dialog">
  <div data-role="content">
           <div style="text-align:center;"><strong>Remove Item?</strong></div>
            <form id="myForm">
                <div data-role="fieldcontain">
                    <fieldset class="ui-grid-a">
                        <div class="ui-block-a"><a href="#" id="close-dialog" data-theme="a" data-rel="back" data-role="button">Cancel</a></div>
                        <div class="ui-block-b"><a href="#" id="close-dialog" data-theme="a" type="submit" data-role="button">OK</a></div>

                    </fieldset>
                </div>
            </form>
        </div>
  </div>

 </body>
 </html>

Answer 1

如果您希望在同一页面中打开对话框，那么您应该使用可用于jquery mobile的SimpleDialog插件。

以下是我使用SimpleDialog插件自定义的代码，以便对话框出现在同一页面中

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
<script type="text/javascript">

 (function(){
     $(document).ready(function() {
         $("#del-item").live('click', function(){  
         //$.mobile.changePage($('#del-dialog'), 'pop');

                     $(this).simpledialog({

                        'prompt' : 'What do you say?',
                        'cleanOnClose': true,
                        'buttons' : {
                            'OK': {
                                click: function () {
                                    $('#simplestringout').text($('#simplestring').attr('data-string'));
                                }
                            },
                            'Cancel': {
                                click: function () { console.log(this); },
                                icon: "delete",
                                theme: "c"
                            }
                        }
                    })
            });    
         $("#add-item").live('click', function(){  
             $('#add-item .ui-btn-text').text('Remove Item');
             $('.item').attr('id', 'del-item');
             $('.item').attr('href', '#del-dialog');
             $('.item').attr('data-rel', 'dialog');
         });    
         $("#close-dialog").click(function(){      
             $('.ui-dialog').dialog('close');
         });
      });
     })();
 </script>
<title>Page Title</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
      <div id="dialog-container" data-inline="true">
        <a href="#" class="item" id="add-item" data-role="button" data-inline="true">Add Item</a>  
      </div>   
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
 </body>
 </html>

动态生成对话框链接时，弹出jquery移动对话框弹出的问题

1 个答案: