(Versionはそのときに使いたい機能、リリースで変わる)
任意のダウンロード先に jquery-ui-1.7.3.custom.zip がダウンロードされる
任意の場所に jquery-ui-1.7.3.custom ができる
cake/app/views/layouts/tasks.ctp を作成
<!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><?php echo $title_for_layout?></title> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <!-- 外部ファイルやスクリプトをここで読み込む(詳細は HTML ヘルパーを参照) --> <?php echo $scripts_for_layout ?> </head> <body> <!-- すべてのビューで表示するための何らかのメニューがある場合、ここでそれを読み込む --> <div id="header"> <div id="menu">...</div> </div> <!-- ここがビューを表示させたい場所 --> <?php echo $content_for_layout ?> <!-- 各表示ページにフッターを追加する --> <div id="footer">...</div> </body> </html>
cake/app/views/tasks/index.ctp を作成
<?php echo $html->css('ui-lightness/jquery-ui-1.7.3.custom', null, array('inline' => false)); echo $html->script('jquery-1.3.2.min', array('inline' => false)); echo $html->script('jquery-ui-1.7.3.custom.min', array('inline' => false)); ?> <script type="text/javascript"> $(function(){ $("#accordion").accordion({ header: "h3" }); }); </script> <div id="accordion"> <div> <h3><a href="#">First</a></h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> </div> <div> <h3><a href="#">Second</a></h3> <div>Phasellus mattis tincidunt nibh.</div> </div> <div> <h3><a href="#">Third</a></h3> <div>Nam dui erat, auctor a, dignissim quis.</div> </div> </div>
htmlヘルパでcssやjavascriptを呼び出す際、inline を false に指定すると、レイアウトの $scripts_for_layout の部分に展開される。
デフォルトは inline = true で、その場に展開される。
cake/app/controllers/tasks_controller.php を作成
<?php class TasksController extends AppController { var $name = 'Tasks'; var $layout = 'Tasks'; function index() { } }