zoukankan      html  css  js  c++  java
  • 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({
                     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.5precsscustom-theme路径下会有images图片,勿忘)

    效果如下:

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

  • 相关阅读:
    Leetcode 92. Reverse Linked List II
    Leetcode 206. Reverse Linked List
    Leetcode 763. Partition Labels
    Leetcode 746. Min Cost Climbing Stairs
    Leetcode 759. Employee Free Time
    Leetcode 763. Partition Labels
    搭建数据仓库第09篇:物理建模
    Python进阶篇:Socket多线程
    Python进阶篇:文件系统的操作
    搭建数据仓库第08篇:逻辑建模–5–维度建模核心之一致性维度2
  • 原文地址:https://www.cnblogs.com/paul-cheung/p/4142758.html
Copyright © 2011-2022 走看看