Как получить повторно используемую модальную форму jquery - PullRequest
Новая
       4

Как получить повторно используемую модальную форму jquery

0 голосов
/ 09 марта 2011

У меня есть несколько файлов:

* vehicleule_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>

* vehicleule_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="consoTable"), чтобы переместить таблицу.И почему бы и нет, с form_conso_carb.html в том же файле тоже.

Цель состоит в том, чтобы просто добавить немодальную форму в CRUD a consoTable.
Надеюсь, я понятен.

Ответы [ 2 ]

0 голосов
/ 14 марта 2011

У меня есть решение из 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" 
  }; 
})();
0 голосов
/ 09 марта 2011

Сделайте его функцией и используйте this в событии click для ссылки на текущий объект и передачи его в качестве параметра: 

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