使用jquery对话框创建textarea

时间:2013-07-23 05:43:26

标签: jquery

我正在尝试在我的按钮附近的特定位置创建一个textarea。下面是当前的代码:

var test = $('.content-dialog').dialog({
  width: '98%',
  height: $(window).height() - 20,
  position: ['top', 10],
  resizable: true,
  resize: function(evt, ui) {
    CKEDITOR.instances['content[content]'].resize(
      $(this).width() - 5,
      $(this).height() - 10
    );
  },
  close: function(){
    $('span[id="cke_content[content]"]').remove();
  },
  buttons: [
    {
      text: 'Save',
      'class': 'green',
      id: 'content_save',
      click: function(){
        log_dlg.dialog('open');
      }
    },
    {
      text: 'Cancel',
      click: function() {
        $('.content-dialog').dialog('close');
      }
    }
  ]
});

如何在创建按钮的同一容器中创建textarea字段或文本字段?

1 个答案:

答案 0 :(得分:0)

到目前为止,我看到使用了对话框,我总是将其用作现有html的“decoraror”。

所以将代码作为对话框进行装饰,你将一个带有文本区域的表单作为对话框:

<div class='content-dialog' style='display: none'>
<form action='index.php' method="GET">
your text area
<textarea>
some text
</textarea>
</form>
</div>

ADD on commment

正如您在enter link description here中看到的那样,按钮容器是:

  

的.ui-对话框的buttonpane

所以(查看技巧行)(代码未经测试):

<!-- dialog hook -->
<div class='content-dialog' style='display: none'>
</div>


<!-- textarea code -->
<div id='textareacode' style='display: none'>
<form action='index.php' method="GET">
your text area
<textarea>
some text
</textarea>
</form>
</div>


<script type="text/javascript">
var test = $('.content-dialog').dialog({
  width: '98%',
  height: $(window).height() - 20,
  position: ['top', 10],
  resizable: true,
  resize: function(evt, ui) {
    CKEDITOR.instances['content[content]'].resize(
      $(this).width() - 5,
      $(this).height() - 10
    );
  },
  close: function(){
    $('span[id="cke_content[content]"]').remove();
  },
  buttons: [
    {
      text: 'Save',
      'class': 'green',
      id: 'content_save',
      click: function(){
        log_dlg.dialog('open');
      }
    },
    {
      text: 'Cancel',
      click: function() {
        $('.content-dialog').dialog('close');
      }
    }
  ]
});

// here the trick
$('.content-dialog .ui-dialog-buttonpane').append($('#textareacode').text())

</script>