0

jqueryのダイアログAPIを使用しています。このような：

<tr>
    <td>&nbsp;</td>
    <td colspan="3">
            <a href='#' id='btnAddNewSkill'> add new</a>
    </td>
    <td>
        <div id="addNewSkillDialog" style='visibility: hidden;'>

        <form>
            <table width='100%' border='0'>
                <tr>
                    <td>
                        <label for="name">Name of New Skill</label> 
                        <input type="text" name="name" id="name" class=" ui-corner-all" />
                    </td>
                </tr>
            </table>
        </form>
        </div>
    </td></tr>

しかし、ここでの問題は、フォームがデフォルトで表示され、最初にボタンをクリックした後にダイアログに表示され、その後正しく動作することです（つまり、ダイアログ部分）...そのことを克服するために、可視性を維持しました（ Main divの) start に隠され、その場で次のように変更します。

$('#btnAddNewSkill').click(function() {
        $("#addNewSkillDialog").css('visibility', 'visible').dialog({
            show : "fold",
            hide : "explode",
            resizable : false,
            modal : true,
            closeOnEscape : true,
            height : 120,
            title : 'Add New Skill',
            buttons : {
                "Add Skill" : function() {
                    alert('Add skill Clicked');
                },
                Cancel : function() {
                    $(this).dialog("close");
                }
            },
            close : function() {
                $(this).dialog("dispose");
            }
        });
    });

これはこれを行うための正しい手順ではありません.....最初からダイアログとしてフォームを作成するにはどうすればよいですか

4

1 に答える 1

1

参考までに、正確な例ではありません。時間に追われているためです（出発する時間です）が、今日、UIダイアログに関する質問に答えました。

ここで私の作業フィドルを参照してください*修正済み

後で機会があれば（他の誰もそれに到達しない場合）、あなたの正確な例をいじります。しかし、提供されたリンクを見ると、ダイアログを確立する方法がわかり、実際には HTML 領域 (本文のビュー) に書かれているための html が表示されます。

jquery のデフォルトがautoOpen: false. これは、CSS を使用しないと、非表示になる前にダイアログがわずかに点滅することがあるためです。display: none

アップデート

以下に、修正を加えたコードの表現であるコメント付きのコードを投稿します

<!-- CSS
onload (in other words, place in header or in header link -->
#addNewSkillDialog {
    display: none;
}

ページにダイアログ html を配置することを忘れないでください。次に、次のJSを追加します

// you dont set the dialog in the click,
// set it seperately, use the click to open it
$("#addNewSkillDialog").dialog({
    //  HERE IS WHAT YOU'RE MISSING !!!
    autoOpen: false,
    //  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    show: "fold",   //  the animation on show
    hide: "explode",    // the animation on close
    resizable: false,   // prevents user from resizing
    modal: true,    //  puts a screen behind modal that prevents clicking on page
    closeOnEscape: true,    //  esc key will close dlg
    height: 120,    //  INNER height of dialog
    title: 'Add New Skill', // dlg title in ttl bar
    buttons: {  //  your own button set
        "Add Skill": function(e) {
            alert('Add skill Clicked');
        },
        Cancel: function(e) {
            $(this).dialog("close");
        }
    },
    close: function(e) {
        //$(this).dialog("dispose");    //  unnecessary
    }
});

//  then establish your click to open it
$('#btnAddNewSkill').click(function(e) {
    $("#addNewSkillDialog").dialog("open");
});
于 2012-04-09T23:04:22.023 に答える