如何从jQuery DialogExtend测试工具获取对话框代码？

时间：2014-06-14 10:20:51

标签： javascript jquery jquery-ui-draggable dialog

当我使用 this site 制作jQuery对话框时，它就像一个魅力。我确实需要那个对话框，但是如何在白色背景体中获取该框的源代码？

我已经尝试了萤火虫并得到了这个code，但它不起作用：（

<html><head>
    <title>Sandbox - jQuery DialogExtend</title>
    <meta charset="utf-8">
    <link class="jsbin" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script class="jsbin" src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery.dialogextend.1_0_1.js"></script>
    <style id="jsbin-css">
    body { color: #333333; font-family: Times, Helvetica, Arial; font-size: 16px; }
    .ui-dialog { font-size: 12px; }
    /***** HEADER *****/
    header { background-color: #f0f0f0; border-radius: 1em; box-shadow: inset 0 0 10px gray; padding: 1em 1.5em 1.5em 1.5em; }
    header h1 { margin: 0 0 0.5em 0; }
    header ul { margin: 1em 0 0 0; }
    /***** CONTENT *****/
    section fieldset { margin: 5px; width: 200px; }
    section label { cursor: pointer; }
    #config-icon .wrapper { clear: both; }
    #config-icon ins { float: left; margin: 0 5px 0 0; }
    #config-icon label { float: left; }
    #config-icon select { float: right; width: 100px; }
    #config-method button { width: 48%; }
    /***** FOOTER *****/
    footer { clear: both; padding-top: 2em; }
    footer button { background-color: #e0e0e0; border: none; border-radius: 1em; box-shadow: 0 5px 5px silver; cursor: pointer; font-size: 300%; padding: 10px 0 10px 0; text-align: center; width: 100%; }
    footer button:hover { background-color: #d0d0d0; box-shadow: 0 5px 5px #aaaaaa; }
    footer button:active { box-shadow: 0 4px 4px #aaaaaa; position: relative; top: 1px; }
    </style>
<body style="cursor: auto;">

<section>
    <form id="my-form">

        <div style="float: left;">


        </div>
        <div style="float: left;">


        </div>
        <div style="float: left;">

        </div>
        <div style="float: left;">


        </div>
    </form>
</section>
<br clear="all">

<script>
$(function(){

    // preview icon
    $("#config-icon select")
        .change(function(){
            var icon = "<span class='ui-icon "+$(this).val()+"'></span>";
            $(this).parents(".wrapper").find("ins").html(icon);
        })
        .trigger("change");


    // click to open dialog
    $("#my-button").click(function(){
        //dialog options
        var dialogOptions = {
            "title" : "dialog@" + new Date().getTime(),
            "width" : 400,
            "height" : 300,
            "modal" : $("#is-modal").is(":checked"),
            "resizable" : $("#is-resizable").is(":checked"),
            "close" : function(){ $(this).remove(); }
        };
        if ( $("#button-cancel").is(":checked") ) {
            dialogOptions.buttons = { "Cancel" : function(){ $(this).dialog("close"); } };
        }
        // dialog-extend options
        var dialogExtendOptions = {
            "close" : $("#button-close").is(":checked"),
            "maximize" : $("#button-maximize").is(":checked"),
            "minimize" : $("#button-minimize").is(":checked"),
            "dblclick" : $("#my-form [name=dblclick]:checked").val() || false,
            "titlebar" : $("#my-form [name=titlebar]:checked").val() || false
        };
        $("#my-form [name=icon]").each(function(){
            if ( $(this).find("option:selected").html() != "(default)" ) {
                dialogExtendOptions.icons = dialogExtendOptions.icons || {};
                dialogExtendOptions.icons[$(this).attr("rel")] = $(this).val();
            }
        });
        $("#my-form [name=event]").each(function(){
            if ( $(this).is(":checked") ) {
                dialogExtendOptions.events = dialogExtendOptions.events || {};
                dialogExtendOptions.events[$(this).attr("rel")] = function(evt, dlg) {
                    $(dlg).prepend(evt.type+"."+evt.handleObj.namespace+"@"+new Date().getTime()+"<br />");
                };
            }
        });
        // open dialog
        $("<div />").dialog(dialogOptions).dialogExtend(dialogExtendOptions);
    });


    // click to invoke method
    $("#config-method button").click(function(){
        var command = $(this).text();
        var dialog = $(".ui-dialog:last").find(".ui-dialog-content");
        if ( $(dialog).length ) {
            if ( command == 'state' ) {
                alert( $(dialog).dialogExtend(command) );
            } else {
                $(dialog).dialogExtend(command);
            }
        }
    });

});
</script>

<div id="__yael_once"></div><style class="dialog-extend-css" type="text/css">.ui-dialog .ui-dialog-titlebar-buttonpane>a { float: right; }.ui-dialog .ui-dialog-titlebar-maximize,.ui-dialog .ui-dialog-titlebar-minimize,.ui-dialog .ui-dialog-titlebar-restore { width: 19px; padding: 1px; height: 18px; }.ui-dialog .ui-dialog-titlebar-maximize span,.ui-dialog .ui-dialog-titlebar-minimize span,.ui-dialog .ui-dialog-titlebar-restore span { display: block; margin: 1px; }.ui-dialog .ui-dialog-titlebar-maximize:hover,.ui-dialog .ui-dialog-titlebar-maximize:focus,.ui-dialog .ui-dialog-titlebar-minimize:hover,.ui-dialog .ui-dialog-titlebar-minimize:focus,.ui-dialog .ui-dialog-titlebar-restore:hover,.ui-dialog .ui-dialog-titlebar-restore:focus { padding: 0; }.ui-dialog .ui-dialog-titlebar ::selection { background-color: transparent; }</style><div style="position: fixed; bottom: 1px; left: 1px; z-index: 9999;" id="dialog-extend-fixed-container"></div><div aria-labelledby="ui-dialog-title-1" role="dialog" tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" style="display: block; z-index: 1026; outline: 0px none; position: absolute; height: 299.7px; width: 400px; top: 26px; left: 297px; float: none; margin: 0px;"><div style="white-space: normal;" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span style="overflow: hidden; width: auto;" id="ui-dialog-title-1" class="ui-dialog-title">dialog@1402733872236</span><div style="position: absolute; top: 50%; right: 0.3em; margin-top: -10px; height: 18px;" class="ui-dialog-titlebar-buttonpane"><a style="position: static; top: auto; right: auto; margin: 0px;" role="button" class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a><a role="button" class="ui-dialog-titlebar-maximize ui-corner-all" href="#"><span class="ui-icon ui-icon-extlink">maximize</span></a><a style="display: none; right: -9999em;" role="button" class="ui-dialog-titlebar-restore ui-corner-all ui-state-hover" href="#"><span class="ui-icon ui-icon-newwin">restore</span></a><a style="display: block;" role="button" class="ui-dialog-titlebar-minimize ui-corner-all ui-state-hover" href="#"><span class="ui-icon ui-icon-minus">minimize</span></a></div></div><div scrollleft="0" scrolltop="0" class="ui-dialog-content ui-widget-content ui-dialog-normal" style="display: block; width: auto; min-height: 0px; height: 200px;">restore.dialogExtend@1402734996812<br>beforeRestore.dialogExtend@1402734996709<br>minimize.dialogExtend@1402734994418<br>beforeMinimize.dialogExtend@1402734994342<br>load.dialogExtend@1402733872602<br></div><div style="display: block;" class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><div class="ui-dialog-buttonset"><button aria-disabled="false" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button"><span class="ui-button-text">Cancel</span></button></div></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-n"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-e"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-s"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-w"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-sw"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-ne"></div><div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-nw"></div></div></body></html>

1 个答案:

答案 0 :(得分：0)

试试这个http://jsfiddle.net/taditdash/vvjj8/show

HTML代码

<input type="button" id="btnOpenDialog" value="Open Confirm Dialog" />
<div id="dialog-confirm"></div>

javascript 

function fnOpenNormalDialog() {
    $("#dialog-confirm").html("Confirm Dialog Box");

    // Define the Dialog and its properties.
    $("#dialog-confirm").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 250,
        width: 400,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
                callback(true);
            },
                "No": function () {
                $(this).dialog('close');
                callback(false);
            }
        }
    });
}

$('#btnOpenDialog').click(fnOpenNormalDialog);

function callback(value) {
    if (value) {
        alert("Confirmed");
    } else {
        alert("Rejected");
    }
}

并且不需要css

相关问题
最新问题