全てのフォームパターンでのサンプル、
ＨＴＭＬソースは、以下の通り。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>collapsible2.html</title>
<link rel="stylesheet" href="../jquery/jquery.mobile-1.1.0.min.css"/>
<script src="../jquery/jquery-1.7.2.min.js"></script>
<script src="../jquery/jquery.mobile-1.1.0.min.js"></script>
<script src="../js/mycollapsible-util.js"></script>
</head>
<body>
<div data-role="page" id="home" data-theme="c">
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" id="userinfo1" data-collapsed="false">
<h3><span id="title1">User Info</span></h3>
<div>
<label for="user1">User</label>
<input type="text" name="user1" id="user1" value=""/>
</div>
<div>
<label for="passwd1">Password</label>
<input type="password" name="passwd1" id="passwd1" value=""/>
</div>
<div>
<h3>Color1</h3>
<fieldset data-role="controlgroup">
<input type="radio" name="color1" id="red1" value="Red"/>
<label for="red1">Red</label>
<input type="radio" name="color1" id="green1" value="Green"/>
<label for="green1">Green</label>
<input type="radio" name="color1" id="blue1" value="Blue"/>
<label for="blue1">Blue</label>
</fieldset>
</div>
<div>
<h3>Size1</h3>
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="size1" id="L1" value="Large"/>
<label for="L1">Ｌ</label>
<input type="radio" name="size1" id="M1" value="Medium" checked="checked"/>
<label for="M1">Ｍ</label>
<input type="radio" name="size1" id="S1" value="Small"/>
<label for="S1">Ｓ</label>
</fieldset>
</div>
<div>
<h3>Prime1</h3>
<fieldset data-role="controlgroup">
<input type="checkbox" name="pc1" id="pc1" class="custom" />
<label for="pc1">PC</label>
<input type="checkbox" name="mobile1" id="mobile1" class="custom" />
<label for="mobile1">mobile</label>
</fieldset>
</div>
<div>
<h3 for="slider1">Input slider:</h3>
<input type="range" name="slider1" id="slider1" value="25" min="0" max="100" data-highlight="true" data-mini="true" />
</div>
<div>
<h3>Switch1</h3>
<select name="switch1" id="switch1" data-role="slider">
<option value="off">off</option>
<option value="on">on</option>
</select>
</div>
<div>
<h3>Choice1</h3>
<select name="choice1" id="choice1">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
<br/>
<div>
<h3 for="note1">Textarea1</h3>
<textarea name="note1" id="note1"></textarea>
</div>
</div>
２と３は、省略
</div>
<script type="text/javascript">
var changeFlags1 = {};
var orignalValues1 = {};
var fieldAry1 = ['user1','passwd1',['red1','green1','blue1'],['L1','M1','S1'],'pc1','mobile1','slider1','switch1','choice1','note1'];
$('#userinfo1').bind('expand',function(){
collapTitle('title1','User1 未入力','User1 入力有り',fieldAry1,changeFlags1,orignalValues1);
}).bind('collapse', function () {
collapTitle('title1','User1 未入力','User1 入力有り',fieldAry1,changeFlags1,orignalValues1);
});
// ２と３は省略
</script>
</div>
</div>
</body>
</html>
画面は、、、
スライダーや、フリップ、チェック済みのラジオボタン、全て
更新があったかどうかをチェックします。
