Top / PEAR / HTML_Tempalte_Flexy / startchildren


 #setlinebreak(on)
 * WYSIWYG維持 Flexy:start, Flexy:startchildren [#j24018b8]
 #htmlinsert(googleAdsense.html)
 #ref(http://dozo.rgr.jp/img/img20_file.png,right,nolink,around,PHP::PEAR)
 
 [[ヘッダー、フッター別テンプレート挿入 Flexy:include>PEAR/HTML_Tempalte_Flexy/include]]
 
 ボディをそれらしく。
 CSSとか入ってくると編集するときもきちっと見えるようにしたいでしょ。
 
 ***概要 [#n0ab3e76]
 
 [[別テンプレート挿入 Flexy:include>PEAR/HTML_Tempalte_Flexy/include]]で、ヘッダーとボディー、フッターを分けたのですが、
 HTML的に見づらくなりました。
 いまは一ページを三つに分けただけなので、
 これでもかまわないのですが、
 ページ数が増えてくると見づらいというのはちょっといやかも。
 
 そこで見た目を維持するためにFlexy:start, Flexy:startchildrenを使います。
 Flexy:start, Flexy:startchildrenの違いは
 Flexy:startは記述したタグを、
 Flexy:startchildrenは記述したタグ内のタグをそれぞれ抽出します。
 
  Flexy:Startの場合
  <div>
    <div flexy:start="here">
      <span>hoge</hoge>
    </div>
  <div>
           ↓
    <div>
      <span>hoge</hoge>
    </div>
 
  Flexy:StartChildrenの場合
  <div>
    <div flexy:startchildren="here">
      <span>hoge</hoge>
    </div>
  <div>
           ↓
      <span>hoge</hoge>
 
 ***実際 [#f716e664]
 
 Flexy:Startの使い道は……( ̄-  ̄ ) ウーン
 Flexy:StartChildrenはヘッダー、フッターとボディを分けるときに使います。
 Flexy:Startはタグ単位で表示・非表示、変化をさせたいときに、
 Flexy:StartChildrenはヘッダー、フッターとボディを分けるときに使えそうです。
 
 [[ヘッダー、フッター別テンプレート挿入 Flexy:include>PEAR/HTML_Tempalte_Flexy/include]]のページで使ったボディーが、
 こんな感じになります。
  
 #ref(search_box_flexy.png,right,nolink,around,Smarty Template)
  body.tpl
  <?xml version="1.0" encoding="EUC-JP"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
   1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <title>検索</title>
  </head>
  <body flexy:startchildren>
  <!-- ここから上は無視されます。 -->
  <flexy:include src="header.tpl" />
   <div class="search">
    <h4>検索</h4>
     <input type="text" /><br />
     <input type="radio" name="kind" id="kind[1]" /><span style="font-size:8px">タイトル</span><br />
     <input type="radio" name="kind" id="kind[2]" /><span style="font-size:8px">本文</span><br />
     <input type="radio" name="kind" id="kind[3]" /><span style="font-size:8px">名前</span><br />
     <input type="submit" value="検索" />
   </div>
  <flexy:include src="footer.tpl" />
  <!-- ここから下は無視されます。 -->
  </body>
  </html>
 
 CSSが絡んでくると、
 断然見え方が違ってきます。
 Smartyを含む通常のテンプレートならばきっとこうなっています。
 
 #ref(search_box_smarty.png,right,nolink,around,Smarty Template)
  body.tpl 
  <div class="search">
   <h4>検索</h4>
     <input type="text" /><br />
     <input type="radio" name="kind" id="kind[1]" />
     <span style="font-size:8px">タイトル</span><br />
     <input type="radio" name="kind" id="kind[2]" />
     <span style="font-size:8px">本文</span><br />
     <input type="radio" name="kind" id="kind[3]" />
     <span style="font-size:8px">名前</span><br />
     <input type="submit" value="検索" />
  </div>
  
   
  
  
  
  
 マニュアルには逆のパターンが載っているのですが、
 そうするとページごとに値が変わるタイトルタグとかどうすればいいのかわからないので、
 このような形で収めてます。
 
 要望とか書いてみたり
  ここから上だけ、ここから下だけみたいな要素があっても良いなぁ。
  "here"自体に特別な意味がないのでこれを使って条件を変えられたりとか出来ると良いなぁ。
 
 
 #comment


トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Third Project
証券会社ランキング比較