ClownWiki

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 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 を作成

<code>
<!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>
</code>
==== ビューの作成  ====
cake/app/views/tasks/index.ctp を作成

<code>
<?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>
</code>

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 を作成

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