jQuery Mobile – デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

jquery mobile 1.4ならFacebookみたいなスライドメニューも超簡単

2014年3月17日

·

master

jquery mobile 1.3から導入されたdata-role=”panel”を使えば、Facebookみたいなボタンをタップするとコンテンツがスライドするようなメニューも超簡単に作ることが可能。

(さらに…)

jquery mobileのトグルスイッチ・スライダーをjavascriptから切り替えたい時

2013年3月4日

·

master

前回のエントリはjquery mobileでプルダウンを選択状態にしたい時だが、同様にjavascriptを使ってデータを取得したり、フォルダや引数からデータを取得したものをトグル・スライダーの表示に反映させたいことも多いはず。
トグルボタン・トグルスイッチ・スライダーを、javascriptを使い取得した値に合わせて選択済にさせる方法は以下のサンプルを参考にすると良い。

html

<form>
    <select name="slider" id="toggle" data-role="slider" onChange="navi(this)">
        <option value="stop">停止中</option>
        <option value="start">送信中</option>
    </select>
</form>

javascript

<script type="text/javascript">
    //選択済にしたい項目のvalue
    var co = 2;

    //トグルメニューをセットする
    $('#toggle').val(co);

    //jquery mobile用の処理
    $('#toggle').slider('refresh');
</script>

最後の

$('#toggle').slider('refresh');

がポイント

jquery mobileでプルダウンを選択状態にしたい時

2013年3月4日

·

master

javascriptを使ってデータを取得したり、フォルダや引数からデータを取得したものをフォームのプルダウンメニューに反映させたいことは多いはず。
javascriptを使いセレクトメニューを選択済にする方法はいろいろなサイトで公開されているのから困らないが、通常のjavascriptで選択状態にするだけでは、jquery mobileを使っている場合に反映されない。

jquery mobileを使用する環境でjavascriptを使って任意のプルダウンメニューを選択状態にしたい時は以下のサンプルを参考にすると良い。

HTML

<form method="get" action="" id="select">
    <select name="menu" id="course">
        <option value="">選択してください</option>
        <option value="1">セレクト1</option>
        <option value="2">セレクト2</option>
        <option value="3">セレクト3</option>
        <option value="4">セレクト4</option>
        <option value="5">セレクト5</option>
    </select>
</form>

javascript

<script type="text/javascript">
    //選択済にしたい項目のvalue
    var co = 2;

    //該当するselectのIDにセット
    $('#course').val(co);

    //jquery mobile用の処理
    $('select').selectmenu('refresh',true);
</script>

最後の

$('select').selectmenu('refresh',true);

がポイント

jquery mobile 1.2でヘッダーに表示されるボタンが上に寄っている時

2012年12月4日

·

master

jquery mobile 1.2をデフォルトで使用している時、
ヘッダーに埋めこまれる左右のボタンがヘッダーに対して上に寄っていることがある。
きちんと天地中央に配置するには二つの方法、いずれかを使えばいい。

まずはスタイルシート（CSS）で指定しやすいように、ヘッダーにIDを振っておく。

<div data-role="header" data-theme="c" id="header">

まずはヘッダーの天地を減らす方法
40pxの数値はお好みで。

<style>
#header {
height:40px;
}
</style>

もう一つはボタンの位置を下げる方法

<style>
#header .ui-btn-left, #header .ui-btn-right {
margin-top:5px;
}
</style>

それぞれ左右に指定したボタンの上にマージンを指定し下げる。

jQuery Mobileのリスト表示の階層化とBackボタン表示の方法

2012年12月4日

·

master

jQuery Mobileではdata-role=”listview”で指定することによりリスト表示ができる。

また、そのリストの折りたたみもdata-role=”collapsible”を指定するだけで簡単に折り畳みメニューになる。

そのまま使えるサンプルコードは以下。

<div data-role="collapsible">
<h6>都道府県から選択</h6>
<ul data-role="listview" data-inset="true">
<li><a href="#">北海道</a></li>
<li><a href="#">青森県</a></li>
<li><a href="#">岩手県</a></li>
<li><a href="#">宮城県</a></li>
<li><a href="#">秋田県</a></li>
<li><a href="#">山形県</a></li>
<li><a href="#">福島県</a></li>
<li><a href="#">茨城県</a></li>
<li><a href="#">栃木県</a></li>
<li><a href="#">群馬県</a></li>
<li><a href="#">埼玉県</a></li>
<li><a href="#">千葉県</a></li>
<li><a href="#">東京都</a></li>
<li><a href="#">神奈川県</a></li>
<li><a href="#">新潟県</a></li>
<li><a href="#">富山県</a></li>
<li><a href="#">石川県</a></li>
<li><a href="#">福井県</a></li>
<li><a href="#">山梨県</a></li>
<li><a href="#">長野県</a></li>
<li><a href="#">岐阜県</a></li>
<li><a href="#">静岡県</a></li>
<li><a href="#">愛知県</a></li>
<li><a href="#">三重県</a></li>
<li><a href="#">滋賀県</a></li>
<li><a href="#">京都府</a></li>
<li><a href="#">大阪府</a></li>
<li><a href="#">兵庫県</a></li>
<li><a href="#">奈良県</a></li>
<li><a href="#">和歌山県</a></li>
<li><a href="#">鳥取県</a></li>
<li><a href="#">島根県</a></li>
<li><a href="#">岡山県</a></li>
<li><a href="#">広島県</a></li>
<li><a href="#">山口県</a></li>
<li><a href="#">徳島県</a></li>
<li><a href="#">香川県</a></li>
<li><a href="#">愛媛県</a></li>
<li><a href="#">高知県</a></li>
<li><a href="#">福岡県</a></li>
<li><a href="#">佐賀県</a></li>
<li><a href="#">長崎県</a></li>
<li><a href="#">熊本県</a></li>
<li><a href="#">大分県</a></li>
<li><a href="#">宮崎県</a></li>
<li><a href="#">鹿児島県</a></li>
<li><a href="#">沖縄県</a></li>
</ul>
</div>

さらに、都道府県名のようにリストの選択肢が多くなるものは階層化したリストにすることも可能。

jQuery Mobile により階層毎のリストビューが自動的に作成される。

都道府県を地方別に折り畳んだメニューは以下のそのまま使えるサンプルコード。

<ul data-role="listview" data-inset="true">
<li data-role="list-divider">都道府県から選択</li>
<li><a href="#">北海道</a></li>
<li>東北地方
<ul data-inset="true">
<li><a href="#">青森県</a></li>
<li><a href="#">岩手県</a></li>
<li><a href="#">宮城県</a></li>
<li><a href="#">秋田県</a></li>
<li><a href="#">山形県</a></li>
<li><a href="#">福島県</a></li>
</ul>
<li>関東地方
<ul data-inset="true">
<li><a href="#">茨城県</a></li>
<li><a href="#">栃木県</a></li>
<li><a href="#">群馬県</a></li>
<li><a href="#">埼玉県</a></li>
<li><a href="#">千葉県</a></li>
<li><a href="#">東京都</a></li>
<li><a href="#">神奈川県</a></li>
</ul>
<li>北陸地方
<ul data-inset="true">
<li><a href="#">新潟県</a></li>
<li><a href="#">富山県</a></li>
<li><a href="#">石川県</a></li>
<li><a href="#">福井県</a></li>
</ul>
<li>中部地方
<ul data-inset="true">
<li><a href="#">山梨県</a></li>
<li><a href="#">長野県</a></li>
<li><a href="#">岐阜県</a></li>
<li><a href="#">静岡県</a></li>
<li><a href="#">愛知県</a></li>
</ul>
<li>近畿地方
<ul data-inset="true">
<li><a href="#">三重県</a></li>
<li><a href="#">滋賀県</a></li>
<li><a href="#">京都府</a></li>
<li><a href="#">大阪府</a></li>
<li><a href="#">兵庫県</a></li>
<li><a href="#">奈良県</a></li>
<li><a href="#">和歌山県</a></li>
</ul>
<li>中国・四国地方
<ul data-inset="true">
<li><a href="#">鳥取県</a></li>
<li><a href="#">島根県</a></li>
<li><a href="#">岡山県</a></li>
<li><a href="#">広島県</a></li>
<li><a href="#">山口県</a></li>
<li><a href="#">徳島県</a></li>
<li><a href="#">香川県</a></li>
<li><a href="#">愛媛県</a></li>
<li><a href="#">高知県</a></li>
</ul>
<li>九州地方
<ul data-inset="true">
<li><a href="#">福岡県</a></li>
<li><a href="#">佐賀県</a></li>
<li><a href="#">長崎県</a></li>
<li><a href="#">熊本県</a></li>
<li><a href="#">大分県</a></li>
<li><a href="#">宮崎県</a></li>
<li><a href="#">鹿児島県</a></li>
</ul>
<li><a href="#">沖縄県</a></li>
</ul>

ただし、jQuery Mobileのデフォルトでは階層構造にしたリストにサブ項目が表示された時、Backボタン（戻るボタン）は表示されない。
そのままリストを辿るユーザーには問題無いが、前ページに戻りたいユーザーにはこのままでは不便。
そこでmobileinitで以下の設定をする。

<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>

場所はヘッダ内、jquery.mobileを読み込む前に入れることが必要。
これでBackボタン（戻るボタン）が自動的に付与される。

jQuery Mobile 1.2.0の正式版が公開

2012年11月2日

·

master

100以上の機能強化や修正が含まれているが、リストビューが折り畳めるcollapsbileは便利そう。

またGoogle mapsを使うページには、今回のjQuery Mobile 1.2.0で追加されたポップアップウィジェットのひとつであるオーバーレイも便利な機能となるだろう。

jQuery Mobile 1.2.0正式版公開にあたり、iPhoneStyleのiPhone版も jquery.mobile-1.0.1.min.css ↓ jquery.mobile-1.2.0.min.css jquery-1.6.4.min.js ↓ jquery-1.8.2.min.js jquery.mobile-1.0.1.min.js ↓ jquery.mobile-1.2.0.min.js と、すべて最新版に刷新。

jQuery Mobile 1.2.0が実稼働するスマートフォン対応サイトをご覧になりたい方は以下のURLへ。

iPhoneStyle
http://iphone-sns.com/