Dreamweaverでjquery Mobile 3

スマートフォン

メニューを選択


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>07 DWメニューを選択</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<div data-role="page" id="page">
  <div data-role="header">
    <h1>ヘッダー</h1>
  </div>
  <div data-role="content">
    <div data-role="fieldcontain">
      <label for="selectmenu" class="select">オプション 1</label>
      <select name="selectmenu" id="selectmenu">
        <option value="option1">オプション 1</option>
        <option value="option2">オプション 2</option>
        <option value="option3">オプション 3</option>
      </select>
    </div>
  </div>
  <div data-role="footer">
    <h4>フッター</h4>
  </div>
</div>
</body>
</html>

チェックボックス


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DWメニューを選択</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<div data-role="page" id="page">
  <div data-role="header">
    <h1>ヘッダー</h1>
  </div>
<div data-role="content">
  <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
      <legend>オプション</legend>
      <input type="checkbox" name="checkbox1" id="checkbox1_0" class="custom" value="">
      <label for="checkbox1_0">オプション</label>
      <input type="checkbox" name="checkbox1" id="checkbox1_1" class="custom" value="">
      <label for="checkbox1_1">オプション</label>
      <input type="checkbox" name="checkbox1" id="checkbox1_2" class="custom" value="">
      <label for="checkbox1_2">オプション</label>
    </fieldset>
  </div>
</div>
  <div data-role="footer">
    <h4>フッター</h4>
  </div>
</div>
</body>
</html>

ラジオボタン


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DWメニューを選択</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<div data-role="page" id="page">
  <div data-role="header">
    <h1>ヘッダー</h1>
  </div>
<div data-role="content">コンテンツ
  <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
      <legend>オプション</legend>
      <input type="radio" name="radio1" id="radio1_0" value="">
      <label for="radio1_0">オプション</label>
      <input type="radio" name="radio1" id="radio1_1" value="">
      <label for="radio1_1">オプション</label>
      <input type="radio" name="radio1" id="radio1_2" value="">
      <label for="radio1_2">オプション</label>
    </fieldset>
  </div>
</div>
  <div data-role="footer">
    <h4>フッター</h4>
  </div>
</div>
</body>
</html>

ボタン


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DWメニューを選択</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<div data-role="page" id="page">
  <div data-role="header">
    <h1>ヘッダー</h1>
  </div>
 <div data-role="content">コンテンツ
   <div data-role="controlgroup" data-type="horizontal"><a href="#" data-role="button">ボタン</a><a href="#" data-role="button">ボタン</a>
   </div>
 </div>
  <div data-role="footer">
    <h4>フッター</h4>
  </div>
</div>
</body>
</html>

スライダー


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DWメニューを選択</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<div data-role="page" id="page">
  <div data-role="header">
    <h1>ヘッダー</h1>
  </div>
 <div data-role="content">コンテンツ
   <div data-role="fieldcontain">
     <label for="slider">値 :</label>
     <input type="range" name="slider" id="slider" value="0" min="0" max="100">
   </div>
 </div>
  <div data-role="footer">
    <h4>フッター</h4>
  </div>
</div>
</body>
</html>

フリップトグルスイッチ


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DWメニューを選択</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
</head>
<body>
<div data-role="page" id="page">
  <div data-role="header">
    <h1>ヘッダー</h1>
  </div>
 <div data-role="content">コンテンツ
   <div data-role="fieldcontain">
     <label for="flipswitch">オプション:</label>
     <select name="flipswitch" id="flipswitch" data-role="slider">
       <option value="off">オフ</option>
       <option value="on">オン</option>
     </select>
   </div>
 </div>
  <div data-role="footer">
    <h4>フッター</h4>
  </div>
</div>
</body>
</html>

soratomo0714

コメントを書く