如何具有可重复使用jQuery的形式模式

Question

我有一些文件：

* vehicule_parc.php：*

<script language=javascript src="../js/vehicule_parc.js"></script> 
<h3 class="headInfoBox" id="cch">Conso Carburant >></h3> 
<hr /> 
    <div id="cc">   
     <table cellpadding="0" cellspacing="0" border="0" class="display boxtable" id="consoTable"> 
      <thead> 
       <tr> 
        <th>Date</th> 
        <th>Heure</th> 
        <th>Quantité</th> 
        <th>Coût</th> 
        <th>Carte</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr class="odd gradeA"> 
        <td>21/03/2011</td> 
        <td>10:00</td> 
        <td>30</td> 
        <td>40</td> 
        <td>02248</td> 
        </tr> 
      ... 
    </div><!-- cc --> 
<button id="addcc">Ajouter</button> 
<?php include 'form_conso_carb.html'; ?> 

* form_conso_carb.html：*

<div id="form_conso_carb" title="Nouvelle Consommation"> 
    <form> 
     <label for="date">Date</label>   <input type="text" name="date"  value="" /> 
     <label for="heure">Heure</label>  <input type="text" name="heure"  value="" /> 
     <label for="quantite">Heure</label>  <input type="text" name="quantite" value="" /> 
     <label for="cout">Coût</label>   <input type="text" name="cout"  value="" /> 
     <label for="carte">Carte</label>   <input type="text" name="carte"  value="" /> 
    </form> 
</div> 

* vehicule_parc.js ：*

//some code before 
    J("#form_conso_carb").dialog({ 
      autoOpen : false, 
      height  : 'auto', 
      width  : 300, 
      modal  : true, 
      position : 'middle', 
      Cancel : function() { 
         J(this).dialog("close"); 
        }, 
      buttons : { 
       "Envoyer" : function() { 

          } 
      } 
     }); 

     J("#addcc") 
     .button() 
     .click(function() { 
      J("#form_conso_carb").dialog("open"); 
     }); 
     //some code after 

所以我会哈哈请将您在vehicule_parc.js中看到的代码保存在可重复使用的文件中。但问题是代码必须知道表的id（这里是id="consoTable"），以表示ajax。 为什么不，在form_conso_carb.html也在同一个文件。

目标是简单地将无模式表单添加到CRUD a consoTable。
我希望我能理解。

Answer 1

我已经从alsacreations (FR)该溶液中，我必须封装代码，如这个例子，并把它放在一个文件：

var bibliJsActif = (function() { 
    // Membres privés 
    function init() { 
    bibliJsActif.ajouterClasse(document.body, bibliJsActif.nouvelleClasse); 
    } 

    if (document.getElementById && document.createTextNode) { 
    window.onload = init; 
    } 

    // Membres publics 
    return { 
    "ajouterClasse": function(element, classe) { 
     if (element.className) { 
     element.className += " "; 
     } 

     element.className += classe; 
    }, 

    "nouvelleClasse": "jsActif" 
    }; 
})(); 

Answer 2

使它成为一个函数，并使用this在点击事件来引用当前对象，并通过其作为一个参数：

function showDialog(element) { 
     $(element).dialog({ 
      autoOpen : false, 
      height  : 'auto', 
      width  : 300, 
      modal  : true, 
      position : 'middle', 
      Cancel : function() { 
         J(this).dialog("close"); 
        }, 
      buttons : { 
       "Envoyer" : function() { 

          } 
      } 
     }); 
     } 

     J("#addcc") 
     .button() 
     .click(function() { 
      showDialog(this); 
     }); 
    }