入力の状況を、タイトルに反映させる。
一番簡単な、input タグ、値が空であるかの場合から。
（厳密に、入力フォームの入力変化のチェックは、少し複雑なので
次回に。。。）。
Collapsible のイベントでタイトルを変えるには、タイトル文字列を <h3> <h2> タグで直接囲むと
後で変更できない、
<div data-role="collapsible" id="userinfo1" data-collapsed="false">
<h3><span id="title1">User Info</span></h3>
このように、<span> に id を付けて、span にタイトルを書く。
ＨＴＭＬヘッダを以下のように記述して、
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>sample.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/sample.js"></script>
</head>
この中の sample.js" は、以下のように、
/* titlecheck( タイトルＩＤ
* , 未入力時のタイトル
* , 更新入力時のタイトル
* , 対象input IDの配列
* , 変更を判定する為の空の連想配列
* , 変更を保持する為の空の連想配列
* );
*/
function titlecheck(titleId,titlePreFix,fary){
var count = 0;
$.each(fary,function(i){
if ($.isArray(fary[i])){
$.each(fary[i],function(k){
var type = $('#'+fary[i][k]).attr('type');
if (type=='radio'||type=='checkbox'){
if( $('#'+fary[i][k]).attr('checked') == 'checked' ){ count++; }
}
});
}else{
var tagname = $('#'+fary[i]).get(0).tagName;
if (tagname=='INPUT'){
var type = $('#'+fary[i]).attr('type');
if (type=='text'||type=='password'||type=='number'||type=='search'||type=='tel'
||type=='email'||type=='url'||type=='date'||type=='datetime'||type=='datetime-locale'
||type=='month'||type=='week'||type=='time'){
if ( $('#'+fary[i]).val() != ''){ count++; }
}else if(type=='radio'||type=='checkbox'){
if ( $('#'+fary[i]).attr('checked') == 'checked'){ count++; }
}
}else if(tagname=='TEXTAREA'){
if ( $('#'+fary[i]).val() != ''){ count++; }
}
}
});
$.each(changeFlags,function(f){
if (changeFlags[f]){
count++;
}
});
$('#'+titleId).html(titlePreFix +'('+count+')');
}
これを、呼ぶのには、Collapsible を書いたｌ後ではなくてならない。
<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>
<label for="number1">Number</label>
<input type="number" name="number1" id="number1" value=""/>
</div>
<div>
<label for="search1">Search</label>
<input type="search" name="search1" id="search1" value=""/>
</div>
</div>
<div data-role="collapsible" id="userinfo2">
<h3><span id="title2">User Info</span></h3>
<div>
<label for="user2">User</label>
<input type="text" name="user2" id="user2" value=""/>
</div>
<div>
<label for="passwd2">Password</label>
<input type="password" name="passwd2" id="passwd2" value=""/>
</div>
<div>
<label for="number2">Number</label>
<input type="number" name="number2" id="number2" value=""/>
</div>
<div>
<label for="search2">Search</label>
<input type="search" name="search2" id="search2" value=""/>
</div>
</div>
</div>
<script type="text/javascript">
var fieldAry1 = ['user1','passwd1','number1','search1'];
$('#userinfo1').bind('expand',function(){
titlecheck('title1','User1 Info ',fieldAry1);
}).bind('collapse', function () {
titlecheck('title1','User1 Info ',fieldAry1);
});
var fieldAry2 = ['user2','passwd2','number2','search2'];
$('#userinfo2').bind('expand',function(){
titlecheck('title2','User2 Info ',fieldAry2);
}).bind('collapse', function () {
titlecheck('title2','User2 Info ',fieldAry2);
});
</script>
</div>
</div>
以下のように、、開いてから任意に入力して
２番目の Collapsible をクリックすると、、
