jQuery mobile：向链接添加确认对话框？

发布于 2024-11-03 18:55:47 字数 2186 浏览 1 评论 0原文

我想添加一个“你确定吗？”确认 jQuery 移动页面上链接的对话框。

这是我的代码 - 它直接来自 jQuery 文档，除了带有 confirm 对话框的链接之外。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head> 
<body> 

    <!-- Start of first page -->
    <div data-role="page" id="foo">
        <div data-role="header">
            <h1>Foo</h1>
        </div><!-- /header -->
        <div data-role="content">   
            <p>I'm first in the source order so I'm shown as the page.</p>      
            <p>View internal page called <a href="#bar">bar</a></p> 
        </div><!-- /content -->
        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /header -->
    </div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar">
    <div data-role="header">
            <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="return confirm('Leave page?'); history.back();">Back</a><h1 id="route-header">Bar</h1><a href="#foo" onclick="return confirm('Leave page?');" class="ui-btn-right" data-icon='home'>Home</a>
    </div><!-- /header -->
    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p><a href="#foo">Back to foo</a></p>   
    </div><!-- /content -->
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->

</body>
</html>

目前确认对话框没有效果:(

有人知道如何使用 jQuery mobile 添加这些吗？

谢谢！

原文

I'd like to add an 'Are you sure?' confirm dialog to links on a jQuery mobile page.

Here's my code - it's straight outta the jQuery docs, all apart from the links with the confirm dialogs on them.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head> 
<body> 

    <!-- Start of first page -->
    <div data-role="page" id="foo">
        <div data-role="header">
            <h1>Foo</h1>
        </div><!-- /header -->
        <div data-role="content">   
            <p>I'm first in the source order so I'm shown as the page.</p>      
            <p>View internal page called <a href="#bar">bar</a></p> 
        </div><!-- /content -->
        <div data-role="footer">
            <h4>Page Footer</h4>
        </div><!-- /header -->
    </div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar">
    <div data-role="header">
            <a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="return confirm('Leave page?'); history.back();">Back</a><h1 id="route-header">Bar</h1><a href="#foo" onclick="return confirm('Leave page?');" class="ui-btn-right" data-icon='home'>Home</a>
    </div><!-- /header -->
    <div data-role="content">   
        <p>I'm first in the source order so I'm shown as the page.</p>      
        <p><a href="#foo">Back to foo</a></p>   
    </div><!-- /content -->
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->

</body>
</html>

Currently the confirm dialogs have no effect :(

Anyone know how I can add these with jQuery mobile?

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

转角预定愛 2024-11-10 18:55:47

如果您为按钮提供 ID 或类，并在 jQuery 就绪函数中或在动态创建表单的任何地方（如果您这样做）将事件绑定到它们，那就更好了。

假设您为后退按钮和主页按钮提供以下 id 属性，并删除内联 onclick 属性，请将其添加到脚本标记中：

$(function(){
    $('#btnBack').click(function(){
        if(!confirm("Leave page?")) return false;
        history.back();
    });

    $('#btnFoo').click(function(event){
        return confirm("Leave page?");
    });
});

单击后退按钮时，如果用户取消操作，则仅返回 false。如果他们单击“确定”，您确实需要执行 history.back() 以返回到上一页。

在 foo 链接上，您必须返回 false 以避免自动跟随超链接。

另请注意，确认函数是同步的，这与您在 javascript 中通过 DOM 进行的大多数用户交互不同。这意味着当弹出对话框时，您的代码执行将被暂停，直到用户按下按钮，并且该函数将计算该单击的结果。事实上，这正是您在这种情况下所需要的。

编辑：根据@bazmegakapa的建议删除了preventDefault()。

It's nicer if you give IDs or classes to your buttons and bind events to them in your jQuery ready function, or wherever you dynamically create your forms (if you do).

Assuming you give the following id attribute to the back and home buttons and remove the inline onclick attribute, add this to a script tag:

$(function(){
    $('#btnBack').click(function(){
        if(!confirm("Leave page?")) return false;
        history.back();
    });

    $('#btnFoo').click(function(event){
        return confirm("Leave page?");
    });
});

When the back button is clicked, it only returns false if the user cancelled the operation. If they clicked ok, you DO want to execute history.back() to go back to the previous page.

On the foo link, you have to return false to avoid automatically following the hyperlink.

Also note that the confirm function is synchronous, unlike most user interactions that you do in javascript through the DOM. This means when the dialog pops up, your code execution is on hold until the user presses a button, and the function evaluates to the result of that click. This is in fact what you need in this situation.

Edit: Removed preventDefault() on @bazmegakapa's suggestion.

回复收藏 0 原文

廻憶裏菂餘溫 2024-11-10 18:55:47

我面临着同样的问题，现在刚刚解决。
我希望我的例子可以帮助您和其他遇到类似问题的人。

<a href="javascript:delComment();" data-role="button" data-icon="false" data-mini="true" data-inline="true" data-theme="b">Delete</a>



function delComment(commentSno) {

... 
// save 
var nextUrl = "/deleteComment.do";
$("#frm").attr("action", nextUrl);

showConfirm("Are you sure to delete?", function() {
    $("#frm").submit();
    }
);

}





<div data-role="dialog" id="confirmbox">
    <div data-role="header" data-icon="false">
        <h1>Confirmation</h1>
    </div><!-- /header -->

      <div data-role="content">
        <h3 id="confirmMsg">Confirmation Message</h3>

        <br><p>
        <center>
        <a href="#" class="btnConfirmYes" data-role="button" data-icon="check" data-mini="true" data-inline="true">   Yes    </a>
           
        <a href="#" class="btnConfirmNo" data-role="button" data-rel="back" data-icon="delete" data-mini="true" data-inline="true">No</a>
        </center>
      </div>

    function showConfirm(msg, callback) {
      $("#confirmMsg").text(msg);
      $("#confirmbox .btnConfirmYes").on("click.confirmbox", function() {
          $("#confirmbox").dialog("close");
          callback();
      });

      $("#confirmbox .btnConfirmNo").off("click.confirmbox", function(r) {
          });

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

}

I was facing the same problem and just solved it now.
I hope my example can help you and others having the similer problem.

<a href="javascript:delComment();" data-role="button" data-icon="false" data-mini="true" data-inline="true" data-theme="b">Delete</a>



function delComment(commentSno) {

... 
// save 
var nextUrl = "/deleteComment.do";
$("#frm").attr("action", nextUrl);

showConfirm("Are you sure to delete?", function() {
    $("#frm").submit();
    }
);

}





<div data-role="dialog" id="confirmbox">
    <div data-role="header" data-icon="false">
        <h1>Confirmation</h1>
    </div><!-- /header -->

      <div data-role="content">
        <h3 id="confirmMsg">Confirmation Message</h3>

        <br><p>
        <center>
        <a href="#" class="btnConfirmYes" data-role="button" data-icon="check" data-mini="true" data-inline="true">   Yes    </a>
           
        <a href="#" class="btnConfirmNo" data-role="button" data-rel="back" data-icon="delete" data-mini="true" data-inline="true">No</a>
        </center>
      </div>

    function showConfirm(msg, callback) {
      $("#confirmMsg").text(msg);
      $("#confirmbox .btnConfirmYes").on("click.confirmbox", function() {
          $("#confirmbox").dialog("close");
          callback();
      });

      $("#confirmbox .btnConfirmNo").off("click.confirmbox", function(r) {
          });

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

}

回复收藏 0 原文

~没有更多了~