cakephp2.2 + jQuery mobile layout
例えば、レイアウトファイル名を「mobile.ctp」として app/View/Layouts/mobile.ctp に配置する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Toshio Nakashima">
<title><?php echo $title_for_layout; ?></title>
<?php echo $this->Html->meta('favicon.ico', $this->Html->url('/icons/favicon.ico'), array('type' => 'icon')); ?>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body lang="ja">
<?php echo $this->Session->flash(); ?>
<?php echo $this->fetch('content'); ?>
</body>
</html>
コントローラデモソフトのdemo1とdemo2のコントローラでの記述です。
（何もありませんが）
controller
public function demo1($id=null) {
$this->layout = 'mobile';
$this->set('title_for_layout', 'モバイルdemo1');
}
public function demo2($id=null) {
$this->layout = 'mobile';
$this->set('title_for_layout', 'モバイルdemo2');
}
demo1 基本
ソフトの配置等が合っているか、表示してみましょう
<div data-role="page" id="home"> <div data-role="header" id="header"> <h1>ソーシャルウェア</h1> </div> <div data-role="content"> <!-- ------------------------------------------------------ --> モバイルのページです。<br/> PCで作った表をそのまま表示しています<br/> <br/> <table class="gray"> <tbody> <tr> <th>テーマを選ぶ</th> <th>ヘッダー</th> <th>フッター</th> </tr> <tr> <td>テーマ a,b,c,d,</td> <td>タイトル表示</td> <td>Facebook、Twitte</td> </tr> </tbody> </table> <!-- ------------------------------------------------------ --> </div><!-- id=content --> <div data-role="footer" id="footer"> <h4>Copyright 2012 SoftwareFactoryTokyo inc.</h4> </div> </div><!-- id=home -->
demo2 基本 その２
基本的な部品を配置してみましょう
demo2
<div data-role="page" id="home">
<div data-role="header" id="header" data-theme="b">
<h1>ソーシャルウェア</h1>
<a href="#" data-icon="home" class="ui-btn-left">ホーム</a>
<a href="#" data-icon="gear" class="ui-btn-right">オプション</a>
</div>
<div data-role="content" data-theme="c">
<!-- ------------------------------------------------------ -->
<div data-role="navbar">
<ul>
<li><?php echo $this->Html->link(
__('Nav-bar デモ１', true),
array('controller' =>'menus','action' => 'demo1', ''),
array('data-transition'=>'')); ?>
</li>
<li><?php echo $this->Html->link(
__('デモ２', true),
array('controller' => 'menus','action' => 'demo2', ''),
array('data-transition' => '') ); ?>
</li>
<li><?php echo $this->Html->link(
__('デモ３', true),
array('controller' => 'menus','action' => 'demo3', ''),
array('data-transition' => '') ); ?></li>
</ul>
</div>
<br/>
<table class="blue">
<tbody>
<tr><th>テーマの色を選ぶ</th><th>ヘッダー</th><th>フッター</th></tr>
<tr><td>色、表題、ナビゲーション</td><td>Facebook、Twitte</td><td>選択画面を作る</td></tr>
</tbody>
</table>
<br/><br/>
<ul data-role="listview">
<li><?php echo $this->Html->link('リスト表示 デモ１', array('action' => 'demo1')); ?></li>
<li><?php echo $this->Html->link('デモ２', array('action' => 'demo1')); ?></li>
<li><a href="#">イベントリスト</a></li>
<li><a href="#">チェックインリスト</a></li>
</ul>
<br/>
<!-- ------------------------------------------------------ -->
</div><!-- id=content -->
<div data-role="footer" id="footer" data-theme="b" class="ui-bar" data-position="fixed">
<a href="#" data-role="button" data-icon="star" data-iconpos="left">Twitter</a>
<a href="#" data-icon="star" data-iconpos="left">Facebook</a>
<a href="#" data-icon="info" data-iconpos="left">SoftwareFactoryTokyo inc.</a>
</div>
</div><!-- id=home -->
0 件のコメント:
コメントを投稿