Try Lifelog

あまり必要性はないかもしれないが、jQuery Mobileの listview要素を ‘disable’ にする、つまりリストには表示されるが、グレーアウトしてクリックなどの操作をできないようにする方法。

結論から言うと、jQuery Mobileで定義されている class=”ui-disabled” を指定するとうまくいく。li要素に指定する(item 2)と周りの枠線も灰色になってしまうが、a要素に指定する(item 4)と枠線はそのままで中の文字がグレーアウトされる。ただしリンクであることを示すアイコンは元のままになってしまう。いずれの場合でも操作はできなくなる。(item 4も見た目はクリックできそうだが、実際はできない。)

<!-- HTML -->
<ul data-role="listview" data-inset="true">
  <li><a href="#pgTestJqm">item 1</a></li>
  
  <!-- li要素に指定 -->
  <li class="ui-disabled"><a href="#pgTestJqm">item 2</a></li>
  
  <li><a href="#pgTestJqm">item 3</a></li>
  
  <!-- a要素に指定 -->
  <li><a href="#pgTestJqm" class="ui-disabled">item 4</a></li>
  
  <li><a href="#pgTestJqm">item 5</a></li>
</ul>

jQuery Mobileで使えるアイコンを探していたら、’jQuery Mobile Icon Pack‘ を見つけた。

使い方は以下のとおり。

• GitHubから一括ダウンロードする
  アイコンファイルは以下。(スプライト方式なので、1つのファイルに複数のアイコンが格納されている。)
  ajax-loader.png
  icons-18-black-pack.png
  icons-18-white-pack.png
  icons-36-black-pack.png
  icons-36-white-pack.png
• アイコンファイルを配置する
  上記のアイコンファイルをjQuery Mobileと同じ’images’フォルダに配置する(場所に特段の縛りはない)。またアイコンパックのCSSファイルを適宜配置する。

  <!-- HTML -->
  <link rel="stylesheet" href="/XXX/jqm-icon-pack-3.0.0-fa.css" />
  

• フォントファイルを配置する
• アイコンを利用する

  <!-- HTML -->
  <button data-icon="cloud-download">cloud-download</button>
  <button data-icon="coffee">coffee</button>
  <button data-icon="food">food</button>
  

• 実行例
  

jQuery Mobileで標準アイコン以外のアイコンを利用する方法。通常では、以下のように名前(例：’arrow-r’)を指定して表示するアイコンを指定する。

<!-- HTML -->
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">hoge</a>

自前でアイコンを用意する場合は以下の手順に従う。

• アイコンを用意/配置する
  アイコンのサイズは18ｘ18にするのが基本。
• CSSを記述する
  アイコンの名前を他と重複しないように決め、CSSを記述する。既存のCSSファイル、あるいはjQuery MobileのCSSファイルに追記してもよいが、新規に作成してもOK。以下の例では、’myiconride‘という名前をつけている。

  .ui-icon-myiconride { background : url("/images/icon-jqm/tt_ride_s.png")
    no-repeat rgba(0, 0, 0, 0.4) !important; }
  

  rgba(0, 0, 0, 0.4) で、jQuery Mobileが定義しているui-iconクラスのbackgroundと同じ透過度を指定している。

• HTMLでマークアップする

  <!-- HTML -->
  <button data-icon="myiconride">ride</button>
  

• CSSを使わず直接記述する場合
  CSSファイルを使わずimg要素を使って、直接アイコン画像を指定することもできる。

  <!-- HTML -->
  <!-- リンクボタンの場合 ui-btn-iconクラスを指定-->
  <a href="#" data-role="button" data-iconpos="left">
    <img src="/images/icon-jqm/tt_station.png" class="ui-btn-icon" />station
  </a>
  
  <!-- リストビューの場合 ui-li-iconクラスを指定 -->
  <ul data-role="listview" data-inset="true">
    <li>
      <a href="#">
        <img src="/images/icon-jqm/tt_station.png" class="ui-li-icon" />station
      </a>
    </li>
    <li>
      <a href="#">
        <img src="/images/icon-jqm/tt_train.png" class="ui-li-icon" />train
      </a>
    </li>
  </ul>
  

• 実行例
  

jQuery Mobileのアコーディオンを使う際の注意点。リストビューと同様、項目追加が完了したタイミングで、表示を更新する必要がある。アコーディオンでは、以下の2つの要素に対して更新を行う。collapsible は refresh ではうまく更新されない。

$(selector_col_set).collapsibleset('refresh'); // collapsible setの更新
$(selector_col).trigger('create'); // collapsibleの更新

例えば、以下のように collapsible set をマークアップしておく。

<!-- HTML -->
<div data-role="collapsible-set" id="colTTRideList"></div>

これに、コードでcollapsible 要素を追加していく。

// JavaScript
var _section, _lnname;

for (var i=0; i < rides.length; i++ ){
  // 各ブロックの組み立て
  // 区間・時刻 
  _section = rides[i].on_stname + ' (' + rides[i].on_time + ') - ' 
    + rides[i].off_stname + ' (' + rides[i].off_time + ')';
  // 路線名
  _lnname = rides[i].ln_name_s;

  colItem += '<div data-role="collapsible" class="clsColRideList">'
  + '<h3>' + _section + '<span class="ui-li-aside">' + _lnname + '</span></h3>'
  + '<p>' + _trinfo + '</p></div>';
}
$('#colTTRideList').append(colItem);
$('#colTTRideList').collapsibleset('refresh');
$('.clsColRideList').trigger('create');

jQuery Mobileのアコーディオン(開閉可能なブロック)を使ってみる。

• 基本的な使い方
  各ブロックを’collapsible’で指定し、閉じたときのタイトルをヘッダ要素(h1..h6)で記述する。

  <div data-role="collapsible"><h3>section 1</h3><p>contents 1</p></div>
  

  さらに各ブロックを’collapsible-set’で囲むと、ひとかたまりのコンテンツが生成される。(あるブロックを開くと、別のブロックは自動的に閉じる。)

  <div data-role="collapsible-set">
    <div data-role="collapsible"><h3>section 1</h3><p>contents 1</p></div>
    <div data-role="collapsible"><h3>section 2</h3><p>contents 2</p></div>
    <div data-role="collapsible"><h3>section 3</h3><p>contents 3</p></div>
  </div>
  

  これを開くと以下の画面が生成される。
  
  真ん中のアイテムを開くと以下のようになる。
  
  ヘッダ部分の文字を右寄せにするには、’span class=”ui-li-aside”‘を使う。(ただし高さが少し不揃いになるようだ。)

• アイコンを指定する
  閉じたときのアイコンを’data-collapsed-icon’で、開いたときのアイコンを’data-expanded-icon’で指定する。

  <div data-role="collapsible" data-collapsed-icon="gear" data-expanded-icon="delete">
    <h3>icon gear</h3>
  </div>
  

  閉じた状態
  
  開いた状態
  

• アイコンの位置を指定する
  アイコンの位置は’data-iconpos=”right”‘のように指定する。
• ブロックの角を丸くしない
  ‘data-corners=”false”‘を指定することで、先頭と最後のブロックの角が丸くならない。
• ミニサイズにする
  data-mini=”true”を指定することで、ミニサイズのブロックになる。
• 実行例
  

jQuery Mobileでセレクトメニューを使う方法。HTML標準のselect要素は
自動的に jQuery Mobileのインターフェースに変換される。

• 基本的な使用法

  <!-- HTML -->
  <select id="selSample1">
    <option value="1">The 1st Option</option>
    <option value="2">The 2nd Option</option>
    <option value="3">The 3rd Option</option>
  </select>
  

  標準HTMLのselect要素を記述すると以下のような画面になる。
  
  ラベルをつけるにはlabel要素を使い、さらにfieldcontainで囲めばOK。

  <div data-role="fieldcontain">
  <label for="selSample1">Sample 1:</label>
  

• 要素を動的に追加する

  <!-- HTML -->
  <select id="selRideDate"></select>
  

  // JavaScript
  var rideDates = ['2013/05/24', '2013/05/25', '2013/05/17'];
  var optItem = '';
  for (var i = 0; i < rideDates.length; i++) {
    optItem += 
      '<option value="' + rideDates[i] + '">' + rideDates[i] + '</option>';
  }
  $('#selRideDate').append(optItem);
  // 先頭の要素を選択状態にする
  $('#selRideDate').val(rideDates[0]);
  // 表示を更新する
  $('#selRideDate').selectmenu('refresh',true);
  

  listviewと同様、要素を追加した場合はrefreshしないと表示が更新されない。

• 値の取得/設定

  // JavaScript
  $('#selRideDate').val();             // 値の取得
  $('#selRideDate').val(rideDates[0]); // 値の設定
  $('#selRideDate').selectmenu('refresh');