例えば、以下のレイアウトファイルを app/Vie/Layouts/ に配置すれば、
Twitter Bootstrap と jQuery を 自由に使えます。
レイアウトファイル app/View/Layouts/home.ctp (ファイル名はお好きに）
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content="Toshio Nakashima"> <title><?php echo $title_for_layout; ?></title> <?php echo $this->Html->css('/css/bootstrap/bootstrap'); ?> <?php echo $this->Html->css('/css/bootstrap/bootstrap-responsive'); ?> <?php echo $this->Html->css('/css/bootstrap/docs'); ?> <?php echo $this->Html->css('/css/bootstrap/prettify'); ?> <?php echo $this->Html->css('/css/bootstrap/ticker'); ?> <?php echo $this->Html->css('/css/bootstrap/jquery.multiselect'); ?> <?php echo $this->Html->css('/css/bootstrap/jquery.multiselect.filter'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.base'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.theme'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.core'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.resizable'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.selectable'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.accordion'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.autocomplete'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.button'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.dialog'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.slider'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.tabs'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.datepicker'); ?> <?php echo $this->Html->css('/css/themes/base/jquery.ui.progressbar'); ?> <?php echo $this->Html->css('/css/themes/ui-lightness/jquery-ui-1.8.21.custom'); ?> <?php echo $this->Html->css('/css/jquery.ui.timepicker'); ?> <?php echo $this->Html->script('/js/bootstrap/jquery-1.7.2'); ?> <?php echo $this->Html->script('/js/bootstrap/bootstrap-transition'); ?> <?php echo $this->Html->script('/js/bootstrap/bootstrap-alert'); ?> <?php echo $this->Html->script('/js/bootstrap/bootstrap-modal'); ?> <?php echo $this->Html->script('/js/bootstrap/bootstrap-dropdown'); ?> <?php echo $this->Html->script('/js/bootstrap/bootstrap-scrollspy'); ?> <?php echo $this->Html->script('/js/bootstrap/bootstrap-tab'); ?> <?php echo $this->Html->script('/js/bootstrap/bootstrap-tooltip'); ?> <?php echo $this->Html->script('/js/bootstrap/bootstrap-popover'); ?> <?php echo $this->Html->script('/js/bootstrap/bootstrap-button'); ?> <?php echo $this->Html->script('/js/bootstrap/bootstrap-collapse'); ?> <?php echo $this->Html->script('/js/bootstrap/bootstrap-carousel'); ?> <?php echo $this->Html->script('/js/bootstrap/application'); ?> <?php echo $this->Html->script('/js/bootstrap/jquery.carouFredSel-5.1.0.js'); ?> <?php echo $this->Html->script('/js/bootstrap/ticker'); ?> <?php echo $this->Html->script('/js/jquery-ui-1.8.21.custom.min'); ?> <?php echo $this->Html->script('/js/jquery.ui.datepicker-ja'); ?> <?php echo $this->Html->script('/js/jquery.ui.timepicker'); ?> <?php echo $this->Html->script('/js/bootstrap/jquery.multiselect'); ?> <?php echo $this->Html->script('/js/bootstrap/jquery.multiselect.filter'); ?> <?php echo $this->element('google_analtics'); ?> </head> <body lang="ja"> <div id="fb-root"></div> <div class="container-fluid"> <?php echo $this->Session->flash(); ?> <?php echo $this->fetch('content'); ?> <div class="span12"> <div class="row-fluid"> (C)copyright SoftwarefactoryTokyo inc. by ソフトウェア工場 </div> </div><!-- container-fluid --> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> </body> </html>
■コントローラ
例えば、
public function test($id=null) {
$this->layout = 'home'; // とレイアウトファイルを指定する
}
0 件のコメント:
コメントを投稿