WinRoadのLaravel4初心者講座

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

Winroad徒然草の管理人がお届けします
jQueryMobileのheader用フォームマクロ

jQueryMobileのheader用フォームマクロ

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

jQueryMobileのheader用のフォームマクロを作成します。

Form::header(‘タイトル’,’オプションの配列’)

第1引数に、ヘッダーに表示するタイトルを記述します。第1引数は必須項目です。第2引数は、オプションで、パラメーターを指定します。

(例)app/macros.php

Form::macro('header',function($title,$options=[]){
 $markup='<div data-role="header"';
 foreach($options as $key=>$value){
 $markup.=' '.$key.'='.'"'.$value.'"';
 }
 $markup.='>'."\n";
 $markup.='<h1>'.$title.'</h1>'."\n";
 $markup.='<a href="/" data-icon="home" data-iconpos="notext">ホーム</a>'."\n";
 $markup.='</div>'."\n";
return $markup;
});
  • 3-5行目:オプションの数だけ、パラメーターを追加します。つまり、第2引数に’data-theme’=>’b’と記述すると、data-thme=”b”が挿入されます。
  • 8行目:トップページに戻るためのホームボタンは標準で添付しています。

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')
 @show
 </div><!--page-->
 </body>

 

  • 6行目は、下記のようなタグを生成します。
    <div data-role="header" data-theme="b">
    <h1>Builwing</h1>
    <a href="/" data-icon="home" data-iconpos="notext" class="ui-btn-left">ホーム</a>
    </div>
  • 9行目のメインコンテンツを<div data-role=’content’>と</div>で挟んで、divタグのつけ忘れを防ぐようにしました。
  • これで、メインコンテンツの先頭と末尾に<divタグのつけ忘れを防ぐことが出来ます。

ページごとにヘッダーのタイトルを変える

今作成したForm::header()メソッドを使って、ページのタイトルを変更する方法をご紹介します。

デフォルトのタイトルページ

base.blade.phpで作成したヘッダーのタイトルは、コンテンツページで下記のように特に何も指定しなければ、適用されます。

(例)app/views/user/create.blade.php

@extends('jqm.base')
 @section('content')
 <h1>ユーザー作成</h1>
 {{Form::open()}}
 {{Form::label('name','氏名')}}
 {{Form::text('name',Input::old('name'))}}
 {{Form::label('email','Eメール')}}
 {{Form::email('email',Input::old('email'))}}
 {{Form::label('password','パスワード')}}
 {{Form::password('password')}}
 {{Form::submit('新規作成',['data-theme'=>'e'])}}
 {{Form::close()}}
 @stop

laravel037

コンテンツページを下記のように修正することにより、タイトルを修正することが出来ます。

(例)app/views/user/create.blade.php

@extends('jqm.base')
 @section('header')
 {{Form::header('ユーザー作成',['data-theme'=>'e'])}}
 @stop
 @section('content')
 <h1>ユーザー作成</h1>
 {{Form::open()}}
 {{Form::label('name','氏名')}}
 {{Form::text('name',Input::old('name'))}}
 {{Form::label('email','Eメール')}}
 {{Form::email('email',Input::old('email'))}}
 {{Form::label('password','パスワード')}}
 {{Form::password('password')}}
 {{Form::submit('新規作成',['data-theme'=>'e'])}}
 {{Form::close()}}
 @stop
  • 2-4行目:base.blade.phpの@section(‘header’)から@show迄の間で指定したタグを丸ごと書き換えています。

laravel038 

« »

コメントを残す

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