如何擁有可重用的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。

目的是簡單地向consoTable CRUD添加非模式形式。
我希望我可以理解。

Answer 1

使它成為一個函數，並在click事件中使用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);
        });
   }

Answer 2

我有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" 
  }; 
})();