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