WinRoadのLaravel4初心者講座

次世代PHPフレームワークのLaravel4を初心者向けに解説して参ります。

Winroad徒然草の管理人がお届けします
jQueryMobileのheader用フォームマクロ(スライドパネル付き)

jQueryMobileのheader用フォームマクロ(スライドパネル付き)

このエントリーをはてなブックマークに追加

前回は、ヘッダーの左側にトップページへ戻るホームリンクのみを付けたシンプルなjQueryMobileのheader用のフォームマクロを作成しました。

今日は、左側にメニュー用スライドパネル、右側に検索用のスライドパネル付きのheader用フォームマクロを作成してみます。

app/views/jqm/base.blade.phpのbody部分を下記のように修正します。

<body>
 @section('page')
 {{Form::page()}}
 @show
 @section('header')
 {{Form::header('Builwing',['data-theme'=>'b'])}}
 @show
 <div data-role='content'>
 @yield('content')
 </div>
 @section('footer')
 @include('jqm.footer')
 @show
 @section('panel')
 @include('jqm.panel')
 @show
 </div><!--page-->
 </body>

14-16行目:section(‘panel’)を追加します。

app/views/jqm/panel.blade.phpを下記のように作成します。

<!--左パネル-->
 <div data-role="panel" id="left-panel" data-theme="c">
 <ul data-role="listview" data-theme="d">
 <li data-icon="delete"><a href="#" data-rel="close">閉じる</a></li>
 <li data-icon="home" data-theme="b"><a href="/">HOME</a></li>
 <!--<li data-role="list-divider" data-theme="c"><h3>Menu</h3></li>-->
 <li data-role="list-divider"></li>
 </ul>
 <div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="d" data-content-theme="d">
 <h3>カテゴリー</h3>
 <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="b" data-content-theme="d">
 <div data-role="collapsible">
 <h3>NEWS</h3>
 <ul data-role="listview">
 <li><a href="#">最新ニュース</a></li>
 </ul>
 </div><!-- /collapsible -->
 <div data-role="collapsible">
 <h3>User情報</h3>
 <ul data-role="listview">
 <li>{{link_to('/user/list','User一覧')}}</li>
 </ul>
 </div><!-- /collapsible -->
 <div data-role="collapsible">
 <h3>プライベート</h3>
 <ul data-role="listview">
 <li><a href="#">Private1</a></li>
 <li><a href="#">Private2</a></li>
 </ul>
 </div><!-- /collapsible -->
 <div data-role="collapsible">
 <h3>その他</h3>
 <ul data-role="listview">
 <li><a href="/login/logout">ログアウト</a></li>
 </ul>
 </div><!-- /collapsible -->
 </div><!-- /collapsible-set -->
 </div><!-- /collapsible -->
 </div><!-- /panel -->
 <!--右パネル-->
 <div data-role="panel" id="right-panel" data-display="overlay" data-position="right" data-theme="c">
 <ul data-role="listview" data-theme="d">
 <li data-icon="delete"><a href="#" data-rel="close">閉じる</a></li>
 <!--<li data-role="list-divider" data-theme="c"><h3>メニュー</h3></li>-->
 </ul>
 <div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="b" data-content-theme="d">
 <div data-role="collapsible">
 <h3>現場検索</h3>
 <ul data-role="listview">
 <li>
 {{Form::open(['url'=>'/genba/search'])}}
 {{Form::text('search','',['placeholder'=>'現場検索'])}}
 {{Form::submit('現場検索',['data-theme'=>'b'])}}
 {{Form::close()}}
 </li>
 </ul>
 </div><!-- /collapsible -->
 <div data-role="collapsible">
 <h3>User検索</h3>
 <ul data-role="listview">
 <li>
 {{Form::open(['url'=>'/user/search'])}}
 {{Form::text('search','',['placeholder'=>'User名検索'])}}
 {{Form::submit('User検索',['data-theme'=>'b'])}}
 {{Form::close()}}
 </li>
 </ul>
 </div><!-- /collapsible -->
 </div><!-- /collapsible-set -->
 </div><!-- /panel -->

Form::header()マクロの修正

app/macros.php

前回作成したForm::header()マクロを下記のように修正します。

//header用(左右パネル付き)
 Form::macro('header',function($title,$options=[]){
 //$markup='';
 $markup='<div data-role="header"';
 foreach($options as $key=>$value){
 $markup.=' '.$key.'='.'"'.$value.'"';
 }
 $markup.='>'."\n";
 $markup.='<h1>'.$title.'</h1>'."\n";
 //左パネル
 $markup.='<a href="#left-panel"';
 $markup.=' data-icon="bars"';
 $markup.=' data-iconpos="notext"';
 $markup.=' data-shadow="false"';
 $markup.=' data-iconshadow="false">';
 $markup.='メニュー</a>'."\n";
 //右パネル
 $markup.='<a href="#right-panel"';
 $markup.=' data-icon="search"';
 $markup.=' data-iconpos="notext"';
 $markup.=' data-shadow="false"';
 $markup.=' data-iconshadow="false">';
 $markup.='メニュー</a>'."\n";
 $markup.='</div>'."\n";
 return $markup;
 });

下記のようにパネルが左右からスライドしてきます。

laravel027

« »

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です