JQMボタン

JQMBUTTON01

1.0.0

1.2.0～

ボタンを含むHTML領域を、見出し・ボタン・注釈文・エラーメッセージから成る部分HTMLに変換します。ボタンはjQuery Mobileによりタッチ操作のし易いボタンに改良されます。

ボタンに変換し得る要素を含む任意の要素を選択します。

見出しコンテンツをPCサイトと連動させたい場合や、入力エラーメッセージがボタン近くに含まれる場合は、見出し部分、エラーメッセージ部分を含んだ領域の要素を選びます。 ボタンだけを局所的に選択し、見出しラベルパスを「直接指定」にすることで固定文言を設定する使い方も可能です。

ボタンに変換し得る要素とは以下を指します。

• ► INPUT要素(type属性がbutton,image,reset,submit)
• ► BUTTON要素
• ► A要素(「リンクのボタン化」オプションで指定した条件と一致する場合のみ)

※１ 選択した領域中に含まれる以下の要素は、出力からは除去されます。

　
• ► INPUT要素(type属性がbutton,image,reset,submit以外)　
• ► SELECT要素
　
• ► KEYGEN要素
　
• ► FORM要素
　
• ► TABLE要素
　
• ► TBODY要素
　
• ► TR要素
　
• ► UL要素
　
• ► DL要素
　
• ► SCRIPT要素
　
• ► NOSCRIPT要素

※2 以下の要素はDIV要素に変換し出力されます。

　
• ► TH要素　
• ► TD要素
　
• ► LI要素
　
• ► DT要素
　
• ► DD要素

見出し

見出しを表すラベルパスもしくはテキストを指定します。マーキングを行う場合は、変換元コンテンツの見出しに相当する部分に属性 data-gc-label="title" を記述してください。

エラーメッセージ部分の指定方法

エラーメッセージ部分とする要素の指定方法を選択します。

► € 1:data-gc-label属性で指定

► € 2:id属性で指定

► € 3:class属性で指定

► € 4:要素名で指定

「1:data-gc-label属性」を選択した場合は、変換元コンテンツのエラーメッセージに相当する部分に属性 data-gc-label=”エラーメッセージ部分の指定値”を記述してください。

エラーメッセージ部分の指定値

エラーメッセージ部分とする要素のdata-gc-label属性、id属性、class属性、要素名を指定します。

他コンテンツ出力

ボタン以外のコンテンツを出力するかどうかを指定します。

► OFF:しない(デフォルト)

► ON:する

出力する場合、注釈(1)(2)(3)の指定値は無効となり、入力HTMLのコンテンツが変換結果に現れます(入出力仕様※1に挙がった要素は表示しません)。

注釈(1)

1つめのボタン下部に表示する注釈を設定します。

注釈(2)

2つめのボタン下部に表示する注釈を設定します。

注釈(3)

3つめのボタン下部に表示する注釈を設定します。

リンクのボタン化

リンク(A要素)をボタン表示するかどうかを指定します。

ボタン表示するA要素には、jQuery Mobileでボタン表現をするための属性「data-role=”button”」が自動で設定されます(要素そのものをボタン(BUTTON要素等)に変更しないのでご注意ください)。

► 0:しない(デフォルト)

► 1:全てボタン化

► 2:イベントハンドラ付のみ

► 3:id属性で指定

► 4:class属性で指定

「1:全てボタン化」を選択した場合、A要素はすべてボタン化対象としますが、href属性のないA要素は除外されます。

「2:イベントハンドラ付のみ」を選択した場合、以下の条件に当てはまるA要素をボタン表示します。

► 「on」で始まる属性を持つ

► 「javascript:」を含む値をhref属性に持つ

ボタン化するリンクの指定値

リンク(A要素)をボタン表示するid属性値、class属性値を指定します。

画像ボタンのテキスト化

画像ボタンをテキストに変更するかどうかを指定します。

► OFF:しない(デフォルト)

► ON:する

ON選択時は、以下の要素のalt属性値でボタンテキストに変換します。テキストが見つからない場合はボタンテキスト化せず、そのまま表示します。

► type=”image”のINPUT要素

► BUTTON要素内のIMG要素

► A要素内のIMG要素

※ボタンテキスト化とは、画像でボタンを表現している部分から画像を除去し代替テキストを設定してシンプルなボタンに変更することを指します。

ボタンテキストの指定(1)

1つめのボタンに表示するテキストを設定します。値が指定されている場合、入力HTML中のボタンテキストを設定値で上書きします。入力がない場合は上書きしません。

また、画像ボタンのテキスト化でテキストが見つからない場合、このオプション値が設定されているとボタンテキスト化することができます。

ボタンテキストの指定(2)

2つめのボタンに表示するテキストを設定します。値が指定されている場合、入力HTML中のボタンテキストを設定値で上書きします。入力がない場合は上書きしません。

また、画像ボタンのテキスト化でテキストが見つからない場合、このオプション値が設定されているとボタンテキスト化することができます。

ボタンテキストの指定(3)

3つめのボタンに表示するテキストを設定します。値が指定されている場合、入力HTML中のボタンテキストを設定値で上書きします。入力がない場合は上書きしません。

また、画像ボタンのテキスト化でテキストが見つからない場合、このオプション値が設定されているとボタンテキスト化することができます。

アイコンの使用(1)

1つめのボタンに表示するアイコンの種類を指定します。

► OFF:使用しない(デフォルト)

► bar:バー

► edit:編集

► arrow-l:左向き矢印

► arrow-r:右向き矢印

► arrow-u:上向き矢印

► arrow-d:下向き矢印

► delete:×(バツ)

► plus:＋(プラス)

► minus:－(マイナス)

► check:チェック

► gear:歯車

► refresh:リフレッシュ

► forward:進む

► grid:グリッド(桝目)

► star:星

► alert:アラート

► info:インフォ

► home:ホーム

► search:サーチ

アイコンの絵柄はjQuery Mobileによって表示されます。絵柄のサンプルはこちらを参照してください。

アイコンの使用(2)

2つめのボタンに使用するアイコンの種類を指定します。 (選択肢はアイコンの使用(1)と同じ)

アイコンの使用(3)

3つめのボタンに使用するアイコンの種類を指定します。 (選択肢はアイコンの使用(1)と同じ)

アイコンの表示位置(1)

1つめのボタンアイコンの表示位置を指定します。

► left:左(デフォルト)

► right:右

► top:上

► bottom:下

► notext:テキスト非表示

「notext」選択時、jQuery Mobileによってアイコンだけのボタンとして表示されます。

アイコンの表示位置(2)

2つめのボタンアイコンの表示位置を指定します。 (選択肢はアイコンの表示位置(1)と同じ)

アイコンの表示位置(3)

3つめのボタンアイコンの表示位置を指定します。 (選択肢はアイコンの表示位置(1)と同じ)

小サイズ表示

各ボタンを小サイズで表示するかどうかを指定します。

► OFF:しない(デフォルト)

► ON:する

ON選択時は、jQuery Mobileでボタンを小サイズ化するための属性「data-mini=”true”」が自動で設定されます。

インラインボタン

ボタンの横幅をテキスト幅に(インライン化)するかどうかを指定します。

► OFF:しない(デフォルト)

► ON:する

フォームID

フォーム要素のid属性を入力します。通常、JQMフォームパーツで出力したid属性値と同じ値を設定します。値が設定されている場合、各テキストエリアのform属性値に設定されます。

ベーシック

JQMフォームパーツの基本レイアウト（FIELDSET要素、LEGEND要素、INPUT要素・BUTTON要素・A要素）で出力します。

ネイティブ表示

基本レイアウトで出力しますが、ボタン部分はjQuery MobileによるUI改良(自動マークアップ)がされず、ブラウザ標準の表示をします。

削除属性定義

(gcp=”item:start.removeAttrs”のvalue属性）

各要素について、ここに定義された属性をHTMLから削除します。

ビュー編集タブ上でこの定義内容を編集し、削除対象を変更できます。

なし

. gcpJqmButton01（クラスセレクタ）

1.8.0

jQuery Mobile1.3.0

                       <tr>
                            <td colspan="2" class="btn" class="formname">
                                <div>
                                    <input type="button" value="　送　信　">
                                    <input type="reset" value=" リセット">
                                </div>
                            </td>
                        </tr>
                

                        <div class="gcpJqmButton01 basic">
                            <div>
                                <fieldset>
                                  <legend class="ui-hidden-accessible"></legend>
                                  <input type="button" value="　送　信　" data-inline="true">
                                  <input type="reset" value=" リセット" data-inline="true">
                                </fieldset>
                            </div>
                        </div>