jQueryのアコーディオンメニュー

jQuery のダウンロード

jQuery UI の公式サイト（http://jqueryui.com/）へアクセスする
Download をクリックして Download Site（http://jqueryui.com/download）へ移動する
右の黄色い網掛けの Version で 1.7.3 を選択する

（Versionはそのときに使いたい機能、リリースで変わる）

右の黄色い網掛けの Download をクリックする

任意のダウンロード先に jquery-ui-1.7.3.custom.zip がダウンロードされる

jQuery 設置

ダウンロードしたファイルを解凍する

任意の場所に jquery-ui-1.7.3.custom ができる

jquery-ui-1.7.3.custom 内の js フォルダにある2ファイルを、CakePHP の webroot/js 以下にコピーする
jquery-ui-1.7.3.custom 内の css フォルダにあるフォルダを、CakePHP の webroot/css 以下にコピーする

CakePHP での実装手順

レイアウトを作成

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 で、その場に展開される。

Cookbook
- $html→css()　http://book.cakephp.org/ja/view/1437/css
- $html→script()　http://book.cakephp.org/ja/view/1589/script

コントローラの作成

cake/app/controllers/tasks_controller.php を作成

<?php
class TasksController extends AppController {
  var $name = 'Tasks';
  var $layout = 'Tasks';
  
  function index() {
  }
}

ClownWiki

目次