jqueryフォームの全フォームを編集するためのプラグイン

Question

jqueryプラグインを少し調べていますが、フォームの編集やデータの表示にマークアップを使わなくても、フォーム全体を編集するのに役立ちます。 「編集」をクリックするだけで、テキストの代わりにフォームフィールドが表示され、保存してフォームフィールドが再びテキストに変わります。

誰か知っていますか？ここで

Answer 1

は、その最も生々しい形でのプラグインです：プラグインへ

(function($){ 
    var YesNo = new Array(); 
     YesNo["true"] = "Yes"; 
     YesNo["false"] = "No"; 
    $.fn.inline = function() { 
      this.each(function(){ 
      if ($(this).is('table')) { 
       $(this).find('input, select, textarea').not('[type=button],[type=submit]').each(function(){ 
        if($(this).attr("type")=="checkbox"){ 
         $(this).parent().append("<span class=\"editable\">"+YesNo[$(this).attr('checked')]+"</span>"); 
         $(this).hide(); 
         //$(this).append("<span>"+$(this).val()+"</span>"); 
         $(this).bind('blur',function(){ 
          var t = YesNo[$(this).attr('checked')]; 
          $(this).hide().next().show().text(t); 
         }); 
        } 
        else{ 
         $(this).parent().append("<span class=\"editable\">"+$(this).val()+"</span>"); 
         $(this).hide(); 
         //$(this).append("<span>"+$(this).val()+"</span>"); 
         $(this).bind('blur',function(){ 
          var t = $(this).val(); 
          $(this).hide().next().show().text(t); 
         }); 
        } 
       }); 
       $(this).find('td').live('dblclick', function(){ 
         $(this).children('.editable').hide().prev().show().focus(); 
       }); 
      }  
     }); 
     }; 
    })(jQuery); 

コール：

<script type="text/javascript"> 
$().ready(function() { 
     $('#dataform').inline(); 
    }); 
</script> 

とサポートの例のマークアップ：

<table id="dataform"> 
     <tr> 
      <td class="label">First Name</td> 
      <td><input type="text" value="Robin" /> </td> 

      <td class="label">Last Name</td> 
      <td><input type="text" value="Maben" /> </td> 
     </tr> 

     <tr> 
      <td class="label">City</td> 
      <td><input type="text" value="Bangalore" /> </td> 

      <td class="label">Country</td> 
      <td><input type="checkbox" checked="checked" /> </td> 
     </tr> 
     <tr> 
      <td class="styleLabel">Status</td> 
      <td class="styleControl"> 
       <select id="Select1" class="styleDrop"> 
        <option>Active</option> 
        <option>Inavtive</option> 
        <option>Pending</option> 
       </select></td> 
     </tr> 
     <tr> 
      <td>Description</td><td><textarea>Hello World</textarea></td> 
     </tr> 
     <tr> 
      <td> 
       <input type = "button" value="Click" /> 
       <input type = "submit" /> 
      </td> 
     </tr> 

    </table>