2011-02-04 11 views
1

jquery.ui.dialogのドラッグ可能なサイズとサイズ変更可能なオプションを取得する方法がわかりません。jquery.ui.dialogのオプションが設定されていません

/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のビューでメインページから呼び出された私は、メインページから呼び出されたJSファイルを持っています。 /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> 

すべては「追加、追加アイテムのリンクはモーダルダイアログが表示されます、モーダルダイアログで「キャンセル」はウィンドウを閉じ作品Item "はAjaxポストを正しく戻しますが、中央ではなく画面の右上にポップアップ表示され、ドラッグやサイズ変更が機能しません。これを動作させるために少し不満を感じています。私はしばらくの間、無駄にしようとしました。

UPDATE:解決策が提案どおり、私は依存関係がありませんでした、私はメインページ/view/rentals/add.ctpにそれらを追加しました:あなたは可能性が高いUIを逃している

<?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'); 

?> 
+0

私たちが見ることができるライブデモはありますか? –

+0

依存関係はページに非常にはっきりと記載されていて、私はそれらを完全に逃しました。私は今週一週間で18時間のあまりにも多くの日々を責める。教訓は、jquery.uiを使って作業するときは、リストされている依存関係に注意を払ってください。 – stephenbayer

答えて

2

。 mouse、ui.draggable、およびui.resizeableの依存関係です。 http://jqueryui.com/demos/dialog/

+0

驚くばかりです、それは、dangの依存関係でした。私もui.positionを逃していました。それは非常に簡単で、ありがとうございました。 – stephenbayer

0

上記の例では、resizableが間違っています。前にeをドロップしてくださいable

+0

それは私の主な問題ではありませんでしたが、あなたは正しいです。幸いなことに、デフォルトはresizable = trueなので、私の悪いスペルは何の効果もなく、無視されました。 – stephenbayer

関連する問題