WinRoadのLaravel4初心者講座

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

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

jQueryMobileのpage用フォームマクロ

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

jQueryMobile用のフォームマクロを作成してみたいと思います。

まず、最初にpage用のフォームマクロを作成してみます。

Form::page(‘id名’,’オプション)

第1引数に、ページのID名を記述します。第2引数は、オプションを記述します。オプションは、data-theme、class、data-urlを指定できます。

(例)app/macros.php

Form::macro('page',function($id=null,$options=[]){
 $markup='';
 if(empty($id)){
 $id='page1';
 }
 $theme='';
 $class='';
 $url='';
 if(!empty($options['theme'])){
 $theme=' data-theme="'.$options['theme'].'"';
 }
 if(!empty($options['class'])){
 $class=' class="'.$options['class'].'"';
 }
 if(!empty($options['url'])){
 $url=' data-url="'.$options['url'].'"';
 }
 $markup.='<div data-role="page"';
 $markup.=' id="'.$id.'"';
 $markup.=$theme;
 $markup.=$class;
 $markup.=$url;
 $markup.='>'."\n";
 return $markup;
 });
  •  3-5行目:第1引数のid名が入力されていなければ、id=”page1″が代入されます。
  • 9-11行目:第2引数にオプションの’theme’=>’b’のように指定すれば、data-theme=”b”が挿入されます。値は、’a’から’f’まで指定できます。※’f’はテーマローダー等で作成する必要があります。
  • 12-14行目:第2引数のオプションに’class’=>’my-style’のように指定すれば、class=”my-style”が挿入されます。作成したクラスを自分自身のmystyle.cssで指定して、サイトのレイアウトを修正します。
  • 15-17行目:第2引数のオプションに’url’=>’user/create’のように指定すれば、data-url=”user/create”が挿入されます。

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

<body>
 @section('page')
 {{Form::page()}}
 @show
 @section('header')
 @include('jqm.header')
 @show
 @yield('content')
 @section('footer')
 @include('jqm.footer')
 @show
 </div><!--page-->
 </body>
  • 3行目:Form::page()は下記のようなタグを生成します。
    <div data-role=”page” id=”page1″>
  • 3行目を{{Form::page(‘page2’,[‘theme=>’b’])}}に書き換えると下記のようなタグを生成します。
    <div data-role-“page” id=”page2″ data-theme=”b”>
  • 尚、12行目の</div>の閉じタグは忘れないようにしましょう。

« »

コメントを残す

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