jquery ui 学习笔记之Dialog

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    //注意这几个文件的先后顺序
    <link href="css/ui-lightness/jquery-ui-1.10.2.custom.css" rel="stylesheet" />
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-ui-1.10.2.custom.js"></script>
    <script type="text/javascript">
       //注意这里 是在页面加载后加载  前外不能掉
        $(function () {
            var d_box = $("body");
            var d_form = d_box.find("form");
            d_box.css({ "font-size": "12px" });
            if (d_form != null && d_form.length > 0) {
                d_form.eq(0).prepend("<div id='JQDialog' style='display:none'></div>");
            }
            else {
                if (d_box != null && d_box.length > 0) {
                    d_box.eq(0).prepend("<div id='JQDialog' style='display:none'></div>");
                }
            }
            var alertDialog = $("#JQDialog"); //创建一个对话框
            alertDialog.dialog({
                //是否启动
                autoOpen: false,
                //遮罩层
                modal: true,
                //是否能改变大小
                resizable: false,
                //出现时的效果
                show: 'blind',
                //关闭时展现的动画效果
                hide: 'explode',
                buttons: { "确定": function () { alertDialog.dialog('close'); } },
                title: "友情提示！",
                width: "300px",
                height: "auto",
                draggable: true
            });
        });
        function sub() {
            var alertDialog = $('#JQDialog');
            //   alert(alertDialog.html());
            alertDialog.html("wocao");
            alertDialog.dialog({ autoOpen: true, close: function () { $("#qq").select() } });
            //用谷歌浏览器取查询图片等样式  然后去官网上下
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <table>
                <tr>
                    <td></td>
                    <td>
                        <input id="qq" type="text" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input id="ww" type="text" /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input id="ee" type="text" /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" value="登入" onclick="sub()" /></td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>
posted on 2013-04-10 14:45 奋斗的笨小孩阅读(267) 评论(0) 收藏举报