jQuery Mobile2(タグとか2)

●グリッドレイアウト

スマートフォンはPCに比べて画面幅が狭いので、1ページを複数カラムに分割するレイアウトはスマートフォンサイトに向きません。
しかし、タブナビゲーションを実装する場合など、複数カラムに分割したい場合もあります。
jQuery Mobileでは要素を均等に分割して並べる「グリッドレイアウト」の機能が用意されています。

▼2カラム①

class属性「ui-grid-a」を付けた要素の内側に、class属性「ui-block-a」とclass属性「ui-block-b」を付けた要素をそれぞれ配置します
例：

<div class="ui-grid-a">
   <div class="ui-block-a">
	<strong>I'm Block A</strong>
   </div>
   <div class="ui-block-b">
	<strong>I'm Block B</strong>
   </div>
</div>

▼2カラム②（デザインの変更）

デフォルトだと少し分かりにくいので、それぞれのカラムの内側の要素にclass属性「ui-bar」と「ui-bar-e」を付与し、背景や余白が設定された「ui-bar」というスタイルで表示。
例：

<div class="ui-grid-a">
   <div class="ui-block-a">
　    <div class="ui-bar ui-bar-e">
   	   <strong>I'm Block A</strong>
　    </div>
   </div>
   <div class="ui-block-b">
      <div class="ui-bar ui-bar-e">
	<strong>I'm Block B</strong>
      </div>
   </div>
</div>

▼3カラム

class属性「ui-grid-b」を親要素に適用
例：

<div class="ui-grid-b">
   <div class="ui-block-a">
      <div class=" ui-bar ui-bar-e">
	Block A
      </div>
   </div>
   <div class="ui-block-b">
      <div class=" ui-bar ui-bar-e">
	Block B
      </div>
   </div>
    <div class="ui-block-c">
      <div class=" ui-bar ui-bar-e">
	Block C
      </div>
   </div>
</div>

▼4カラム

class属性「ui-grid-c」を親要素に適用

<div class="ui-grid-c">
   <div class="ui-block-a">
      <div class=" ui-bar ui-bar-e">A</div>
   </div>
   <div class="ui-block-b">
      <div class=" ui-bar ui-bar-e">B</div>
   </div>
   <div class="ui-block-c">
      <div class=" ui-bar ui-bar-e">C</div>
   </div>
   <div class="ui-block-d">
   <div class=" ui-bar ui-bar-e">D</div>
   </div>
</div>

▼5カラム

class属性「ui-grid-d」を親要素に適用

<div class="ui-grid-d">
   <div class="ui-block-a">
      <div class=" ui-bar ui-bar-e">A</div>
   </div>
   <div class="ui-block-b">
      <div class=" ui-bar ui-bar-e">B</div>
   </div>
   <div class="ui-block-c">
      <div class=" ui-bar ui-bar-e">C</div>
   </div>
   <div class="ui-block-d">
   <div class=" ui-bar ui-bar-e">D</div>
   </div>
   <div class="ui-block-e">
      <div class=" ui-bar ui-bar-e">E</div>
   </div>
</div>

●開閉パネル1

要素にdata-role属性「collapsible」を指定すると、開閉パネルを作成できます。
開閉パネルではh1～h6要素で見出しを設定し、その後ろの要素でパネルの内容を記述します。
例:

<div data-role="collapsible">
   <h3>開閉パネル</h3>
   <p>クリックするとパネルが開きます。</p>
</div>

▼開閉パネル2（パネルを閉じて表示）

デフォルトではパネルが開いた状態で表示されますが、 data-collapsed属性「true」を指定するとパネルを閉じて表示します
例：

<div data-role="collapsible" data-collapsed="true">
  <h3>開閉パネル</h3>
  <p>クリックするとパネルが開きます。</p>
</div>

▼開閉パネル3（アコーディオンパネル）

複数の開閉パネルをdata-role属性「collapsible-set」を指定した要素で包むと、アコーディオンパネルを作成できます。
例:

<div data-role="collapsible-set">
   <div data-role="collapsible">
     <h3>パネル1</h3>
     <p>パネル1が開きます。</p>
   </div>
   <div data-role="collapsible">
     <h3>パネル2</h3>
     <p>パネル2が開きます。</p>
   </div>
   <div data-role="collapsible">
     <h3>パネル3</h3>
     <p>パネル3が開きます。</p>
   </div>
</div>

※デフォルトでは最後のパネルが開いた状態で表示されますが、任意のパネル要素にdata-collapsed属性「false」を付与するとそのパネルは開いて、そのほかのパネルは閉じて表示されます。
ただし、執筆時のバージョン（ベータ2）では正常に動作しておらず、閉じたいパネルすべてにdata-collapsed属性「true」を指定する必要があります。

●フォームUI

jQuery MobileのフォームUIは、data-role属性「fieldcontain」を指定した要素に包んで記述します。

▼テキスト入力ボックス

type属性「text」のinput要素を記述すると
例：

<div data-role="fieldcontain">   
　　<label for="name">名前</label>   
<input type="text" id="name"> </div>

▼検索ボックス

HTML5で追加されたtype属性<input type="search">を使うと、虫眼鏡アイコンが付いた検索用の入力フィールドが表示されます。
例：

<div data-role="fieldcontain">
   <label for="search">検索</label>
   <input type="search" name="search" id="search" value="" /> 
</div>

▼複数行入力ボックス（テキストエリア）

例:

<div data-role="fieldcontain">
   <label for="contact">お問い合わせ内容</label>
   <textarea id="contact"></textarea> 
</div>

▼スライダー

HTML5で追加された<input type="range">でスライダーUIを利用できます。value属性にスライダーの初期値、min属性にスライダーの最小値、max属性にスライダーの最大値を指定します。
例：

<div data-role="fieldcontain">
   <label for="year">生まれた年</label>
   <input type="range" name="year" id="year" value="1980" min="1900" max="2011" /> 
</div>

▼フリップスイッチ

「フリップスイッチ」とは、2つの選択肢からどちらか1つをタッチ操作で選択できるUIのことです。フリップスイッチは、select要素にdata-role属性「slider」を指定すると利用でき、select要素の内側に2つのoption要素を書いて項目を指定します。
例：

<div data-role="fieldcontain">
   <label for="gender">性別</label>
   <select name="gender" id="gender" data-role="slider">
     <option value="男性">男性</option>
     <option value="女性">女性</option> 
  </select> 
</div>

▼ラジオボタン1

type属性に「check」を指定したinput要素をそれぞれlabel要素で関連付けし、data-role属性「controlgroup」を指定したfiledset要素で包みます。filedset要素の冒頭にはlegend要素で項目名を指定します
例：

<div data-role="fieldcontain">
   <fieldset data-role="controlgroup">
     <legend>購入回数</legend>
     <input type="radio" name="number" id="n1" value="1回" checked="checked" />
     <label for="n1">1回</label>
     <input type="radio" name="number" id="n2" value="2回" />
     <label for="n2">2回</label>
     <input type="radio" name="number" id="n3" value="3回" />
     <label for="n3">3回</label>
     <input type="radio" name="number" id="n4" value="4回" />
     <label for="n4">4回以上</label> 
  </fieldset> 
</div>

▼ラジオボタン2

ラジオボタンはデフォルトでは縦に表示されますが、fieldset要素にdata-type属性「horizontal」を指定すると、横（水平方向）に並んだボタンにもできます。
例：

<fieldset data-role="controlgroup" data-type="horizontal">

※ボタンが1行に収まらない場合は、次のようにCSSで余白を調整する
例：

.ui-controlgroup .ui-radio .ui-btn-inner{
   /*ボタンの左右の余白を25pxから15pxに変更している*/
   padding: .6em 15px; 
}

▼チェックボックス

type属性に「check」を指定したinput要素をそれぞれlabel要素で関連付けし、data-role属性「controlgroup」を指定したfiledset要素で包みます。filedset要素の冒頭にはlegend要素で項目名を指定
例：

<div data-role="fieldcontain">
   <fieldset data-role="controlgroup">
     <legend>お問い合わせ種別</legend>
     <input type="checkbox" name="type1" id="type1" value="HP新規作成">
     <label for="type1">HP新規作成</label>
     <input type="checkbox" name="type2" id="type2" value="HPリニューアル">
     <label for="type2">HPリニューアル</label>
     <input type="checkbox" name="type3" id="type3" value="システム開発">
     <label for="type3">システム開発</label>
     <input type="checkbox" name="type4" id="type4" value="コンサルティング">
     <label for="type4">コンサルティング</label>
   </fieldset> 
</div>

▼セレクトメニュー
例：

<div data-role="fieldcontain">
   <label for="number">購入回数</label>
   <select name="number" id="number">
     <option value="">選択してください</option>
     <option value="n1">1回</option>
     <option value="n2">2回</option>
     <option value="n3">3回</option>
     <option value="n4">4回以上</option>
   </select>
</div>

▼カスタムセレクトメニュー1
select要素にdata-native-menu属性「false」を指定
例：

<div data-role="fieldcontain">
　<label for="number">購入回数</label>
	<select name="number" id="number" data-native-menu="false">
		<option value="">選択してください</option>
		<option value="n1">1回</option>
		<option value="n2">2回</option>
		<option value="n3">3回</option>
		<option value="n4">4回以上</option>
	</select>
</div>

▼カスタムセレクトメニュー2

カスタムセレクトメニューでは、option要素のvalue属性の値が空／option要素の中にテキストがない／data-pleceholder属性に「true」が指定されている、のいずれのかの場合、その項目が見出しとして機能します。サンプル21では、最初のoption要素である「<option value="">選択してください</option>」が見出しとなり、項目としては選択できません。
例：

<div data-role="fieldcontain">
   <label for="type">お問い合わせ種別</label>
   <select name="type" id="type" multiple="multiple" data-native-menu="false">
     <option value="">選択してください</option>
     <option value="HP新規作成">HP新規作成</option>
     <option value="HPリニューアル">HPリニューアル</option>
     <option value="システム開発">システム開発</option>
     <option value="コンサルティング">コンサルティング</option>
   </select> 
</div>

▼ネイティブフォームの利用

data-role属性「none」を指定すると、ブラウザーのデフォルトのUIで表示されます
例：

<div data-role="fieldcontain">
   <label for="name">名前</label>
   <input type="text" id="name" data-role="none"> 
</div>

▼ボタンの装飾1

data-theme属性でテーマを反映できます
例：

<input type="button" value="キャンセル" data-theme="b">
<input type="submit" value="送信" data-theme="b">

▼ボタンの装飾2（文字サイズにフィットしたボタン）

data-inline属性「true」を指定
例：

<input type="button" value="キャンセル" data-inline="true"> 
<input type="submit" value="送信" data-inline="true">

▼ボタンの装飾3（アイコン）

data-icon属性でアイコンも付けられます
例：

<input type="button" value="キャンセル" data-icon="delete"> 
<input type="submit" value="送信" data-icon="arrow-r">

※アイコンの種類

左向き矢印	data-icon="arrow-l"
右向き矢印	data-icon="arrow-r"
上向き矢印	data-icon="arrow-u"
下向き矢印	data-icon="arrow-d"
×(バツ)	data-icon="delete"
＋（プラス）	data-icon="plus"
-（マイナス）	data-icon="minus"
チェック	data-icon="check"
歯車	data-icon="gear"
リフレッシュ	data-icon="refresh"
進む	data-icon="forward"
戻る	data-icon="back"
テーブル状	data-icon="grid"
星	data-icon="star"
i(情報)	data-icon="info"
家	data-icon="home"
虫眼鏡	data-icon="search"

▼ボタンの装飾4（アイコンの表示位置）

アイコンの表示位置はdata-iconpos属性で変更できます。値には、right（右）、left（左）、top（上）、bottom（下）を指定します。
例：

<button data-icon="star" data-iconpos="top"> data-iconpos="top"</button>
<button data-icon="star" data-iconpos="bottom"> data-iconpos="bottom"</button>
<button data-icon="star" data-iconpos="left"> data-iconpos="left"</button>
<button data-icon="star" data-iconpos="right"> data-iconpos="right"</button>

●文字の省略について

jQueryMobileの仕様で、CSS3の「text-overflow:ellipsis」を使って特定の要素の内側の幅を超える文字列を「...」と省略してしまう。
文字列を省略せず、折り返して表示するように変更するには、text-overflowを初期化するスタイルを定義。

例：

wordbreakクラスを作り、text-overflow設定　⇒　テキストが省略されている要素に対して追加

 .wordbreak{
 	overflow: visible;
 	white-space: normal;
 }

【表示の種類】

「overflow: visible;」　：文字列を省略をしない
「white-space: normal;」　：改行する

******************予備**************************************

●フォーム
※スマートフォンのブラウザーに標準で用意されているフォーム部品はどれもサイズが小さく、そのままでは指による操作に適さないため、スマートフォンサイトの制作ではフォームをスマートフォンに最適化する。
フォーム部品は、data-role属性に「fieldcontain」を指定した要素で各パーツ（input要素やtextarea要素など）を包んで記述
例：
<div data-role="fieldcontain">

 <label for="name">名前</label>
 <input type="text" id="name">

</div>

【注意点】
同一サイト内でのid名の重複に注意！
jQuery Mobileのフォームを利用するときに注意したいのが、label要素とフォーム部品とを関連付けるid名の扱いです。
id名はもともと1つの文書内で1つの要素にしか付けられませんが、jQuery Mobileはページ管理にid属性を利用しているので、別のページであってもid名が重複していると誤動作を起こす可能性があります。jQuery Mobileでは同一サイト内で同じid名を使うことは推奨されていませんので、サイト全体でid名が重複しないように注意しましょう。

修正＞
▼テキストボックス（text）
例：
<div data-role="fieldcontain">

 <label for="name">名前</label>
 <input type="text" id="name">

</div>

↓
ページの見出し（h2要素）とフォームの間には不自然な余白があり、入力フォームの背景色がやや暗い、head要素内に次のようなCSSを追加してデザインを変更

例：

HTML

<div data-role="fieldcontain">

 <label for="name">名前</label>
 <input type="text" id="name">

</div>

CSS

/*入力フォームの背景を調整*/
textarea.ui-body-b,input.ui-body-b{

 background-color:white;

}
/*見出しとフォーム部品の間の余白を調整*/
.ui-field-contain:first-child{

 padding-top:0;

}

▼テキストエリア（textarea）
例：
<div data-role="fieldcontain">

 <label for="comment">お問い合わせ内容</label>
 <textarea id="comment"></textarea>

</div>

▼フリップスイッチ（2つの選択肢からどちらか一方を選択するUI）
select要素にdata-role属性「slider」を指定し、内側に2つのoption要素で項目を指定する
例：
<div data-role="fieldcontain">

 <label for="gender">性別</label>
 <select name="gender" id="gender" data-role="slider">
   <option value="男性">男性</option>
   <option value="女性">女性</option>
 </select> 

</div>

▼チェックボックス（checkbox）
type属性に「checkbox」を指定したinput要素で記述し、label要素でラベルと関連付けます。チェックボックス全体はdata-role属性に「controlgroup」を指定したfieldset要素で包み、fieldset要素の先頭にlegend要素で項目名（ここでは「お問い合わせ種別」）を記述
例：
<div data-role="fieldcontain">

 <fieldset data-role="controlgroup">
   <legend>お問い合わせ種別</legend> 
   <input type="checkbox" name="type1" id="type1" value="HP新規作成"> 
   <label for="type1">HP新規作成</label> 
   <input type="checkbox" name="type2" id="type2" value="HPリニューアル">
   <label for="type2">HPリニューアル</label> 
   <input type="checkbox" name="type3" id="type3" value="システム開発"> 
   <label for="type3">システム開発</label> 
   <input type="checkbox" name="type4" id="type4" value="コンサルティング"> 
   <label for="type4">コンサルティング</label>
 </fieldset>

</div>

▼送信・キャンセルボタン
例：
<input type="button" value="キャンセル">
<input type="submit" value="送信">

　▽data-theme属性を指定することでフォームのデザインテーマも変更可能
　例：
　<input type="button" value="キャンセル" data-theme="b">
　<input type="submit" value="送信" data-theme="b">

　▽文字数にフィットしたボタン
　data-inline属性に「true」を指定する
　例：
　<input type="button" value="キャンセル" data-theme="b" data-inline="true">
　<input type="submit" value="送信" data-theme="b" data-inline="true">

　▽jQuery Mobileが用意したアイコンを表示
　　input要素にdata-icon属性を追加
　例:
　<input type="button" value="キャンセル" data-theme="b" data-icon="delete" data-inline="true">
　<input type="submit" value="送信" data-theme="b" data-icon="arrow-r" data-inline="true">