Collapsible タイトルを書き換える（１）

先日に続き、Collapsible の中にフォームを置いた時の、入力更新したかどうか
をタイトルに反映させる方法の完全版


/* タイトル→ title 置換
 * collapTitle( タイトルＩＤ 
 *            , 未入力時のタイトル 
 *            , 更新入力時のタイトル
 *            , 対象input IDの配列 
 *            , 変更を判定する為の空の連想配列 
 *            , 変更を保持する為の空の連想配列 
 *            );
 * 対象input IDの配列 は、type=radio で name属性でグルーピングしている場合,
 * 配列の入れ子、[ ] で配列を渡す。
 */
function collapTitle(titleId,uninputTitle,inputedTitle,fary,changeFlags,orignalValues){
   var count = 0;
   $.each(fary,function(i){
      if ($.isArray(fary[i])){
         var radioname;
         $.each(fary[i],function(k){
            radioname = $('#'+fary[i][k]).attr('name');
         });
         if (orignalValues[radioname] == null){
            $.each(fary[i],function(k){
               if ( $('#'+fary[i][k]).attr('checked') == 'checked'){
                  orignalValues[radioname] = $('#'+fary[i][k]).val();
               }
               $('#'+fary[i][k]).change(function(){
                  if ( $('#'+fary[i][k]).attr('checked') == 'checked'){
                     if (orignalValues[radioname] == $('#'+fary[i][k]).val()){
                        changeFlags[radioname] = false;
                     }else{
                        changeFlags[radioname] = true;
                     }
                  }
               });
            });
         }
         if (changeFlags[radioname] == null){
            changeFlags[radioname] = false;
         }
      }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 (orignalValues[ fary[i] ] == null){
                  orignalValues[fary[i]] = $('#'+fary[i]).val();
               }
               if (changeFlags[ fary[i] ] == null){
                  changeFlags[ fary[i] ] = false;
               }
               $('#'+fary[i]).change(function(){
                  if (orignalValues[fary[i]] == $('#'+fary[i]).val()){
                     changeFlags[ fary[i] ] = false;
                  }else{
                     changeFlags[ fary[i] ] = true;
                  }
               });
            }else if(type=='checkbox'){
               if (orignalValues[ fary[i] ] == null){
                  if ( $('#'+fary[i]).attr('checked') == 'checked'){
                     orignalValues[fary[i]] = 'ON';
                  }else{
                     orignalValues[fary[i]] = 'OFF';
                  }
               }
               if (changeFlags[ fary[i] ] == null){
                  changeFlags[ fary[i] ] = false;
               }
               $('#'+fary[i]).change(function(){
                  if ( $('#'+fary[i]).attr('checked') == 'checked'){
                     if (orignalValues[fary[i]] == "ON"){
                        changeFlags[ fary[i] ] = false;
                     }else{
                        changeFlags[ fary[i] ] = true;
                     }
                  }else{
                     if (orignalValues[fary[i]] == "OFF"){
                        changeFlags[ fary[i] ] = false;
                     }else{
                        changeFlags[ fary[i] ] = true;
                     }
                  }
               });
            }
         }else if(tagname=='SELECT' || tagname=='TEXTAREA'){
            if (orignalValues[ fary[i] ] == null){
               orignalValues[fary[i]] = $('#'+fary[i]).val();
            }
            if (changeFlags[ fary[i] ] == null){
               changeFlags[ fary[i] ] = false;
            }
            $('#'+fary[i]).change(function(){
               if (orignalValues[fary[i]] == $('#'+fary[i]).val()){
                  changeFlags[ fary[i] ] = false;
               }else{
                  changeFlags[ fary[i] ] = true;
               }
            });
         }
      }
   });
   $.each(changeFlags,function(f){
      if (changeFlags[f]){
         count++;
      }
   });
   $('#'+titleId).html(count > 0 ? inputedTitle : uninputTitle);
}

ここで、変更を判定する為の空の連想配列と、変更を保持する為の空の連想配列は、
保持できる配列である必要がある。
以下のように、Collapsible　の後で、記述する。

<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);
});
----------

Collapsible タイトルを書き換える（２）に続く。