• htmlspecialchars　nl2br　でHTMLを排除しつつ　改行する
• jQuerymobile カラムのレイアウト調整
• jQueryMobile　formまとめ

htmlspecialchars　nl2br　でHTMLを排除しつつ　改行する

htmlspecialchars　nl2brのあわせ技で、HTMLは排除しつつも\nはしっかりbrタグに変換する方法です

ごめんね、これだけです。

jQuerymobile カラムのレイアウト調整

jQuery Mobileレイアウト調整

jQueryはシングルカラムの場合、特に何もしなくてもあらかじめpaddingが取られているため非常に収まりがよい。
実は2カラムや3カラムでもとっても簡単で、もちろんスマートフォンの横向きにも対応。

CSS3では画面サイズによってwidthを可変するプロパティが追加されたから可能なんですね。

では実際にマークアップしてみましょう。

カラムの分割方法

カラムの分割をするには、分割をするブロックとそのブロック全体を囲うブロック要素がそれぞれ必要で、分割するブロックの数によって　付与するクラスが違います。

2カラムならブロックを囲う方のクラスはui-grid-aとなり、実際に分割している方はui-block-a,ui-block-baとなります。

分割するブロックが増えるにつれて、囲う方のクラスはui-grid-a、ui-grid-b、ui-grid-cとアルファベット順に増えて行き、分割しているブロックも同じようにui-block-a、ui-block-b、ui-block-cと増えて行く。

最大5カラムまで指定が可能です。

2カラムのソースコード

<div class="ui-grid-a">

<div class="ui-block-a"><p>ui-block-a<br/>

ああ

</p></div>

<div class="ui-block-b"><p>ui-block-b<br/>

ああ

</p></div>

</div>

3カラムのソースコード

<div class="ui-grid-b">

<div class="ui-block-a"><p>ui-block-a<br/>

ああ

</p></div>

<div class="ui-block-b"><p>ui-block-b<br/>

ああ

</p></div>

<div class="ui-block-c"><p>ui-block-c<br/>

ああ

</p></div>

</div>

DEMO

こちらにデモを公開します。ui-gridは最大ui-grid-eまで設定が可能で、こちらのデモは最大のui-grid-eまでやってみました。4カラムや5カラムに挑戦したい場合は下記デモページよりソースコードをコピーして使って下さい。

次回の予定

次回はjQuerymobileの総まとめ！何とjQueryMobile使ってITかあさんのブログ　スマートフォン版を作りたいと思います。
Wordpress × jQuerymobileでスマートフォンサイトを作りたいと思います。

jQueryMobile　formまとめ

jQueryMobile　テキストフォーム

前回ちらっとtoggleについて触れましたが、jQueryMobileのテキスト系のformについてまとめていきたいと思います。

フォームを色々試してみた
今回つかってみたフォームのパーツは下記表の通りです。
コード



email




url




tel




number




date




datetime




datetime-local




month




week




range

	



color




search

実行結果

Opera

オペラは最もHTML5 に対応しているブラウザで、HTML5から新規導入された属性もほぼ網羅しています

iphoneで見た場合

iphoneのブラウザはsafariですね。HTML5はフォーム関連で追加も多いのですが、全てに対応しているわけではないようです。
なお、フォームで対応していない属性については画像の通りただのテキストフォームになってしまいます。
ある程度のブラウザのシェアを考えると、HTML5のフォームはrangeまでに留めておいたほうがよさそうです