paul_cheung

导航

bootstrap style for jQuery UI Dialog

　　页面引用：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/jquery-ui-bootstrap-v0.5pre/css/custom-theme/jquery-ui-1.10.0.custom.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/jquery-ui-1.10.4.min.js"></script>
</head>
<body>
    <div id="dialog">asdfasdf</div>
    <script type="text/javascript">
        $(function () {
            $("#dialog").dialog({
                width: 500,
                height: 400,
                autoOpen: true,
                resizable: false,
                buttons: [
                    {
                        id: "okaybutton",
                        text: "okay"
                    },
                    {
                        id: "nookaybutton",
                        text: "nookay"
                    },
                    {
                        id: 'checkboxplaceholder',
                        text: "勾选框",
                    }
                ],
                open: function () {
                    $("#okaybutton").removeClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only")
                    .addClass("btn btn-primary");

                    $("#nookaybutton").removeClass("ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only")
                    .addClass("btn btn-default");

                    //replace send email button with a checkbox
                    $("#checkboxplaceholder").replaceWith("<label class='sendEmailText' for='sendEmailCheckBox'>发送邮件提醒</label><input type='checkbox' class='sendEmailCheckBox' id='sendEmailCheckBox' checked />");
                }
            });
        });
    </script>

    <style type="text/css">
        .saveAndCreateNext {
            background-color: black !important;
        }

        .sendEmailCheckBox {
            position: absolute;
            left: 20px;
            margin-top: 17px !important;
        }

        .sendEmailText {
            position: absolute;
            margin-top: 15px;
            left: 40px;
            color: #333333;
        }
    </style>
</body>
</html>

按照头中的路径引用到对应文件（jquery-ui-bootstrap-v0.5pre\css\custom-theme路径下会有images图片，勿忘）

效果如下：

提交时用checkbox的id拿对应的值（var isSendEmail = $("#sendEmailCheckBox").prop("checked");）；

posted on 2014-12-04 14:14  paul_cheung  阅读(435)  评论(0)  编辑  收藏  举报