前回は、ヘッダーの左側にトップページへ戻るホームリンクのみを付けたシンプルな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; });
下記のようにパネルが左右からスライドしてきます。
コメントを残す