Jquery Mobile对话框

时间:2012-01-02 20:23:49

标签: jquery jquery-mobile

我开始学习Jquery mobile,我遵循了http://dev.jtsage.com/jQM-SimpleDialog/demos/string.html。单击按钮时没有任何反应。我写的代码是:

 <link rel= "stylesheet" href= "http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src= "http://code.jquery.com/jquery-1.5.2.min.js"></script>
  <script src= "http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
 <script type="text/javascript">
 $(document).delegate('#simplestring', 'click', function() {
     $(this).simpledialog({
     'mode' : 'string',
      'prompt' : 'What do you say?',
     'buttons' : {
      'OK': {
      click: function () {
       $('#dialogoutput').text($('#dialoglink').attr('data-string'));
      }
      },
      'Cancel': {
       click: function () { },
        icon: "delete",
        theme: "c"
        }
        }
         })
        })
 </script>

然后在我写的身体内:

      <p>You have entered: <span id="dialogoutput"></span></p>
     <a href="#" id="dialoglink" data-role="button">Open Dialog</a>

你能指出我的错误吗?也许在标题中?我必须学习jquery mobile,因为我在javascript中写了一个不会出现在我的Webapp中的对话框。我读到JQM中的SimpleDialog旨在替代javascript对话框()。

1 个答案:

答案 0 :(得分:1)

这对我来说很好用:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" rel="stylesheet" /> 
    <link type="text/css" href="http://dev.jtsage.com/jQM-DateBox/css/demos.css" rel="stylesheet" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).delegate('#simplestring', 'click', function () {
    $(this).simpledialog({
        'mode': 'string',
        '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"
            }
        }
    })
});
</script>
<a href="#" id="simplestring" data-role="button">Open Dialog</a>
</body>
</html>