facebook twitter hatena line email

Javascript/jquerymobile

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索

スマホ画面が簡単に作れます。


helloworld

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div>
    <div data-role="content">
        <p>Hello, world !</p>
    </div>
    <div data-role="footer">
        <div align="center">(c) abc</div>
    </div>
</div>
</body>
</html>

日本語リファレンス

http://dev.screw-axis.com/doc/jquery_mobile/

ボタン

<a href="#top" data-role="button" data-inline="true">ボタン１</a>

トグルボタン

<div data-role="collapsible" data-collapsed="true">
    <h3>ＯＮ</h3>
    <p>ＯＦＦ</p>
</div>

トグルスライド

<select data-role="slider">
    <option value="off">ＯＦＦ</option>
    <option value="on">ＯＮ</option>
</select>

多段リスト

<ul data-role="listview">
    <li>あ行
        <ul>
            <li>あ</li>
            <li>い</li>
            <li>う</li>
        </ul>
    </li>
    <li>か行
        <ul>
            <li>か</li>
            <li>き</li>
            <li>く</li>
        </ul>
    </li>
</ul>

ボタングループ化

<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button" data-icon="star">お気に</a>
<a href="index.html" data-role="button" data-icon="back">前</a>
<a href="index.html" data-role="button" data-icon="arrow-u">上</a>
<a href="index.html" data-role="button" data-icon="arrow-d">下</a>
<a href="index.html" data-role="button" data-icon="forward">次</a>
</div>

ボタンアイコン一覧

http://dev.screw-axis.com/doc/jquery_mobile/components/pages_dialogs/anatomy_page/#/doc/jquery_mobile/components/buttons/buttons_icons/

ボタンテーマ（色

<a href="/" data-role="button" data-theme="a">Theme a</a>


ajaxを使わないリンク

<a rel="external" href="hoge.html">ページ名</a>

ajaxを使わないリンク（全体

  • custom-scripting.js
$(document).bind("mobileinit", function(){
    $.mobile.ajaxLinksEnabled = false; // Ajaxを使用したページ遷移を無効
    $.mobile.ajaxFormsEnabled = false; // Ajaxを使用したフォーム遷移を無効
});
  • script読み込み位置
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

ボタンを並べる方法

<div>
 <a href="#hoge" data-role="button" data-inline="true">ボタン1</a>
 <a href="#hoge" data-role="button" data-inline="true">ボタン2</a>
</div>

リスト表示

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
    <li data-role="list-divider">タイトル</li>
    <li><a href="/data1/">データ1</a></li>
    <li><a href="/data2/">データ2</a></li>
</ul>

ボタンの右寄せ

<div data-role="header">
    <h1>カテゴリー検索</h1>
    <a href="index.html" data-icon="info" class="ui-btn-right">検索</a>
</div>

検索フォーム

<form action="/search2ch/word">
<input type="search" name="key" value="" />
</form>

ページテンプレ

<table width="100%"><tr><td width="33%" align="center">
<a href="/?page=1" data-role="button" data-icon="arrow-l">前</a>
</td><td width="34%" align="center">
2㌻
</td><td width="33%" align="center">
<a href="/?page=3" data-role="button" data-icon="arrow-r" data-iconpos="right">次</a>
</td></tr></table>

フッターナビゲーション

項目名は7バイト以下は省略されない(検証:android-is04 

<div data-role="navbar">
    <ul>
        <li><a href="/" data-icon="home" class="ui-btn-active">ホーム</a></li>
        <li><a href="/hot" data-icon="grid">新人気</a></li>
        <li><a href="/my" data-icon="gear">マイ</a></li>
        <li><a href="/ranking" data-icon="star">ランク</a></li>
        <li><a href="/comment" data-icon="plus">新コメ</a></li>
    </ul>
</div>

ヘッダーメニューを作る

ヘッダーのmenuボタンをクリックするとサイトマップのような一覧が開く 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jqeurymobilemenu</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#menubtn").toggle(function() {
    $("#menulist").slideDown("fast");
    //$("#menulist").css("display","block");
  },function() {
    $("#menulist").slideUp("fast");
    //$("#menulist").css("display","none");
  });
});
//-->
</script>
</head>
<body>
<div data-role="page" id="home">
  <div data-role="header">
    <h1>Home</h1>
    <a href="javascript:void()" id="menubtn">menu</a>
  </div>
  <div id="menulist" style="display:none">
    <ul data-role="listview" data-theme="c" data-dividertheme="b">
      <li><a href="/data1/">データ1</a></li>
      <li><a href="/data2/">データ2</a></li>
    </ul>
  </div>
  <div data-role="content">
    maincontents
  </div>
</div>
</body>
</html>

フッターその他ナビを作成

フッターナビのその他ボタンを押すと、フッターナビ下にぬるっとリンク集が開く 

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jqeurymobileothernav</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#othernavbtn").toggle(function() {
    $("#othernavlist").slideDown("fast");
    //$("#othernavlist").css("display","block");
    $(this).blur();
    $('html,body').animate({ scrollTop: $('#othernavlist').offset().top }, 'slow');
  },function() {
    $("#othernavlist").slideUp("fast");
    //$("#othernavlist").css("display","none");
  });
});
//-->
</script>
</head>
<body>
<div data-role="page" id="home">
  <div data-role="header">
    <h1>Home</h1>
  </div>
  <div data-role="content">
    maincontents<br />
    maincontents<br />
    maincontents<br />
    maincontents<br />
    maincontents<br />
  </div>
  <div data-role="navbar">
      <ul>
          <li><a href="/" data-icon="home" class="ui-btn-active">ホーム</a></li>
          <li><a href="/ranking" data-icon="grid">ランキング</a></li>
          <li><a href="javascript:void()" id="othernavbtn" data-icon="arrow-d">その他</a></li>
      </ul>
  </div>
  <div id="othernavlist" style="display:none">
    <ul data-role="listview" data-theme="c" data-dividertheme="b">
      <li><a href="/data1/">データ1</a></li>
      <li><a href="/data2/">データ2</a></li>
    </ul>
    <span id="othernavlistfooter"></span>
  </div>
</div>
</body>
</html>


テーマデザインカスタマイズ

  1. http://jquerymobile.com/themeroller/のサイトからカスタムcssを作成
「http://wiki.nonip.net/index.php?title=Javascript/jquerymobile&oldid=21」から取得