如何将文本框插入按钮对话框区域

时间:2012-04-05 09:42:48

标签: javascript jquery asp.net-mvc-3 dialog

我聊天时有一个如下所示的对话框窗口:

enter image description here


基本上我想将文本框移动到按钮区域。

 divnodecopy = document.getElementById(div_node);
             $(divnodecopy).dialogr({
                    autoOpen:true,
                     maximized: true,
                    minimized: true,
                    buttons: { 
                   "Send": {
                       text: 'Send', 
                       click: function () {
                                        alert("here");
                                        // do stuff
                                    }
                       }
                   }, 
                      });
  document.getElementById(div_node).appendChild(element1);
// element1 - input text i want to move in dialogr

我到处寻找解决方案,但没有什么可以帮助我在那里。谢谢你提前!

编辑:添加了创建div

 var div = document.createElement("div");
                    div.setAttribute("id", "1");

                    var element = document.createElement("input");
                     element.setAttribute("type", "text");
                     element.setAttribute("value", "");
                     element.setAttribute("id", "textReceived");
                     div.appendChild(element);

                    var element1 = document.createElement("input");
                     element1.setAttribute("type", "text");
                     element1.setAttribute("value", "");
                     element1.setAttribute("id", "textSend:");
                    document.body.appendChild(div);
                    divnodecopy = document.getElementById(div_node);

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.dialogr.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
    <script type="text/javascript" src="js/ui.dialogr.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            createChatDialogerBox(1, 'Thulasi Ram.S');

            function createChatDialogerBox(fromUserId, fromUserName) {
                if ($('#chatDialogerBox' + fromUserId).length === 0) {

                    var divnodecopy = $('<div id="chatDialogerBox' + fromUserId + '" class="chatDialogerBox"></div>').append('<input />', { 'type': 'text', 'value': '', 'id': 'textReceived', 'class': 'messageReceived' });

                    $(divnodecopy).dialogr({
                        autoOpen: true, maximized: true, minimized: true,
                        title: fromUserName,
                        buttons: {
                            "Send": {
                                text: 'Send',
                                click: function () {
                                    alert("here");
                                    // do stuff
                                }
                            }
                        }
                    });

                    //$('#chatDialogerBox' + fromUserId).parents('.ui-dialog').find('.ui-dialog-buttonpane')
                    //.append('<input />', { 'type': 'text', 'value': '', 'id': 'textSend' });

                    //Or

                    $('#chatDialogerBox' + fromUserId).parents('.ui-dialog').find('.ui-dialog-buttonpane')
                    .prepend('<input />', { 'type': 'text', 'value': '', 'id': 'textSend', 'class': 'messageSend' });
                }
            };
        });
    </script>
    <style type="text/css">
        .messageSend
        {
            margin-right: 20px;
        }
    </style>
</head>
<body>
</body>
</html>