jQueryMobile之弹出对话框

jQuery Mobile对话框示例
本文介绍了一个使用jQuery Mobile创建的简单网页对话框示例。该示例包含两个HTML文件,一个作为主页面,另一个作为弹出对话框。通过链接元素触发对话框,并演示了如何设置对话框的基本样式及按钮功能。

1:dialog-test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
    <div data-role="page">
    <div data-role="header">
        <h1>The title</h1>
    </div>

    <div data-role="content">
        <h1>The content</h1>
        <p><a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a></p>
    </div>

    <div data-role="footer">
        <h4>The footer</h4>
    </div>
    </div>
</body>
</html>

2:dialog.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
    <div data-role="dialog">
    <div data-role="header" data-theme="d">
        <h1>Dialog</h1>
    </div>

    <div data-role="content" data-theme="c">
        <h1>Delete page?</h1>
        <a href="dialog-test.html" data-role="button" data-rel="back" data-theme="b">OK</a>
        <a href="dialog-test.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>
    </div>
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/yshyee/p/3380391.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值