Question

我无法弄清楚如何为jquery.ui.dialog设置draggable和resizeable的选项。我有一个从主页面调用的JS文件：

/js/rental/add.js：

var additempopup = null;     
$(document).ready(function() {
        var $dialog = $('#adddialog').load('additem')
            .dialog({
                autoOpen: false,
                title: 'Add Item',
                width: 'auto',
                position: 'center', 
                resizeable: true,
                modal: true,
                draggable: true,
                closeOnEscape: true,
                closeText: 'close'
            });

        $('.jsAddItemPopup').click(function() {

            $dialog.dialog('open');
            return false;
        });
        $('#modalclose').click(function() {
            $dialog.dialog('close');
            return false;
        });
        additempopup = $dialog;
     } );

从主页面调用它是一个cakephp视图。

摘自/views/rentals/add.ctp：

<?php
    $javascript->link('jquery/js/jquery-1.4.4.min', false);
    $javascript->link('jquery/ui/jquery.ui.core', false);
    $javascript->link('jquery/ui/jquery.ui.widget', false);
    $javascript->link('jquery/ui/jquery.ui.dialog', false);
    $javascript->link('jquery/rentals/add.js', false);
       echo $html->css('ui-lightness/jquery-ui-1.8.9.custom');

?>
<?php
echo $html->link(
'Add Item', '#', array('title' => 'Add Item', 'class' => 'jsAddItemPopup'));
?>
<div id="adddialog" class="adddialog" style="display: none;"></div>

弹出窗口正在加载以下视图。

摘自/views/rentals/additem.ctp：

  <div id='ajax-content'>
<?php   
 echo $ajax->form('edit', 'post', array(
                        'model'    => 'RentalLineitem',
                        'url'      => array( 'controller' => 'rentals', 'action' => 'additem')
));   ?>

<table>

    <tr>
        <td style="text-align: left;">
             <?php  echo $this->Form->submit('Cancel', 
                array('name' => 'cancel', 
               'onclick' => "additempopup.dialog('close'); return false;")); ?>
        </td>
        <td style="text-align: right;">
             <?php  echo $this->Form->submit('Add Item', array('name' => 'Save')); ?>
        </td>
    </tr>
    </table>

    <?php   echo $this->Form->end();   ?>
    </div>

一切正常，Add Item链接打开模态对话框，模态对话框中的“取消”关闭窗口，“添加项目”导致Ajax回发正确，但它弹出右上角屏幕，而不是在中心，拖动和调整大小不起作用。我试图让这个工作变得有点沮丧。我已经尝试了一段时间无所事事。

更新：根据建议的解决方案，我缺少依赖项，我将它们添加到主页/view/rentals/add.ctp：

<?php
    $javascript->link('jquery/js/jquery-1.4.4.min', false);
    $javascript->link('jquery/ui/jquery.ui.core', false);
    $javascript->link('jquery/ui/jquery.ui.widget', false);
    $javascript->link('jquery/ui/jquery.ui.mouse', false);
    $javascript->link('jquery/ui/jquery.ui.draggable', false);
    $javascript->link('jquery/ui/jquery.ui.resizable', false);
    $javascript->link('jquery/ui/jquery.ui.position', false);
    $javascript->link('jquery/ui/jquery.ui.dialog', false);
    $javascript->link('jquery/rentals/add.js', false);
       echo $html->css('ui-lightness/jquery-ui-1.8.9.custom');

?>

Answer 1

您可能错过了ui.mouse，ui.draggable和ui.resizeable依赖项。 http://jqueryui.com/demos/dialog/

Answer 2

在上面的示例中，您拼写错误resizable。将e放在able

之前

未设置jquery.ui.dialog选项

2 个答案: