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 consoTable 我希望我能理解。

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

如何使用可重用的jquery表单模式

2 个答案: