【CakePHP】可変グリッドレイアウトでブラウザに依存しない表示

1-BORN TO TOWADA COMMUNITY-

2012年06月11日(月)

    ふう。 今流行りの可変グリッドレイアウトをやってみました。 この手法で記述すると、 ブラウザに依存しないように作れちゃうんです。 原理は全くと言っていいほどしらないのですがw なぜかちょうどいい感じにレイアウトしてくれるんですw 今回はそれを試してみたので参考までに書かせてもらいます。     まず、いつも通り、 参考にさせて頂いたものは以下になります。   □可変グリッドレイアウトのjQueryプラグイン書いたよ http://blog.xlune.com/2009/09/jqueryvgrid.html まず、上記の通りjQueryをダウンロードして設置。 僕が参考にしたのはこのサイトの「demo007」のやつです。   なんかソートとかできてかっこいーっすよ!! って事ではじめました。   jQueryなんで右クリックでソースを開くで一発コピペ!!w とりあえず貼り付けたらなんとなく雰囲気でました!w □demo007 http://blog.xlune.com/2009/09/vgrid/demo007.html   ただ、今回はそれだけでは終わらしたくなかったんです。 せっかくなんでカスタマイズ。   前回の □Ajax非同期通信でDB登録 http://pk-brothers.com/2012/06/04/%E3%80%90cakephp%E3%80%91ajax%E9%80%9A%E4%BF%A1%E3%81%A7%E9%9D%9E%E5%90%8C%E6%9C%9Fdb%E7%99%BB%E9%8C%B2%E3%81%8B%E3%82%89%E3%81%AE%E8%A1%A8%E7%A4%BA/   を組み合わせちゃって、 テキストを入力すると画面へグリッドを非同期に表示させる。   且つ、DBへ登録するということをやってみたました。   てか前回のアイキャッチ画像を見ればそれを若干実装している画像だと思いますが、 その辺の細かいことはあしからず…   まぁでもここで解説する事は特にないんですよね。 ただ、サンプルのソースをコピペするだけだから。。。         だから僕が行ったDBから抽出したデータで グリッドタグを生成する方法を書きます。 なんのこっちゃないただのforeachですが…
// Commentレイアウト 表示用 $comment_layout = ”; if(isset($comment_data)){ foreach ($comment_data as $comment) { // echo “<pre>”; // var_dump($comment); // echo “</pre>”; $comment_layout .= “<div class=’bubble’ id=’b1′><p class=’body’>”; $comment_layout .= nl2br($comment[‘Comment’][‘comment’]); $comment_layout .= “</p></div>”; } } echo $comment_layout;
これでグリッドをDBから抽出して表示できます。 もちろんCSSは少しだけ変更してます! コメントグリッドで少しだけおしゃれをきどってみました。   あとはメンバー登録したFacebookやTwitterの画像を参照し、 あたかもコメントを発しているようにしてみたいなと思っています。。。   サイトが完成したら是非サービスを掲載したいと思います。 それまでは画像だけであしからず!   なにか聞きたいことがあればコメント欄に記入してくれたら回答致します。 たぶんなにも答えられないですが。。。 ではあしからず!  

スポンサードリンク

運営サービスPR

スポンサードリンク

運営サービスPR