Tema: cargar un simplemodal con la info de la fila seleccionada
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/09/2010, 08:38
Avatar de gabrieltirado
gabrieltirado
 
Fecha de Ingreso: septiembre-2010
Mensajes: 10
Antigüedad: 13 años, 7 meses
Puntos: 1
cargar un simplemodal con la info de la fila seleccionada
Necesite la libreria de jquery.js, y la jquery.simplemodal.js.

index.html

Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> SimpleModal OSX Style Dialog </title>
  5. <meta name='author' content='Eric Martin' />
  6. <meta name='copyright' content='2010 - Eric Martin' />
  7.  
  8. <link type='text/css' href='css/demo.css' rel='stylesheet' media='screen' />
  9. <link type='text/css' href='css/osx.css' rel='stylesheet' media='screen' />
  10. <link type='text/css' href='css/estilos.css' rel='stylesheet' media='screen' />
  11.  
  12. </head>
  13. <body>
  14.  
  15. <div id='container'>
  16.     <div id='logo'>
  17.         <h1><span>SimpleModal</span></h1>
  18.     </div>
  19.     <div id='content'>
  20.         <div id='osx-modal'>
  21.             <h3>Cuadro de dialogo del tipo SimpleModal</h3>
  22.             <p>Tabla empleando SimpleModal</p>
  23.         </div>
  24.  
  25.                 <div class="tabla osx" id="tabla">
  26.  
  27.                    <div class="fila osx">
  28.                         <div class="col_titulo1" style="width:200px">Encabezado1</div>
  29.                         <div class="col_titulo2" style="width:200px">Encabezado2</div>
  30.                         <div class="col_titulo3" style="width:100px">Encabezado3</div>
  31.                     </div>
  32.  
  33.                     <div class="fila osx" id="fila1" onclick="setId(id)">
  34.                         <div id="osx-modal-title"><h1>Esta es la fila seleccionada: </h1></div>
  35.                         <div class="col1" style="width:200px">1,1</div>
  36.                         <div class="col2" style="width:200px">1,2</div>
  37.                         <div class="col3" style="width:100px">1,3</div>
  38.             <div class="close" id="cerrar"><a href="#" class="simplemodal-close">x</a></div>
  39.                         
  40.             <div id="osx-modal-data">
  41.                             <p><button class="simplemodal-close">Cerrar</button></p>
  42.             </div>
  43.                     </div>
  44.  
  45.                     <div class="fila osx" id="fila2">
  46.                         <div id="osx-modal-title"><h1>Esta es la fila seleccionada: </h1></div>
  47.                         <div class="col1" style="width:200px">2,1</div>
  48.                         <div class="col2" style="width:200px">2,2</div>
  49.                         <div class="col3" style="width:100px">2,3</div>
  50.                         <div class="close" id="cerrar"><a href="#" class="simplemodal-close">x</a></div>
  51.  
  52.             <div id="osx-modal-data">
  53.                             <p><button class="simplemodal-close">Cerrar</button></p>
  54.             </div>
  55.                     </div>
  56.  
  57.                     <div class="fila osx" id="fila3">
  58.                         <div id="osx-modal-title"><h1>Esta es la fila seleccionada: </h1></div>
  59.                         <div class="col1" style="width:200px">3,1</div>
  60.                         <div class="col2" style="width:200px">3,2</div>
  61.                         <div class="col3" style="width:100px">3,3</div>
  62.                         <div class="close" id="cerrar"><a href="#" class="simplemodal-close">x</a></div>
  63.  
  64.             <div id="osx-modal-data">
  65.                             <p><button class="simplemodal-close">Cerrar</button></p>
  66.             </div>
  67.                     </div>
  68.  
  69.                     <div class="fila osx" id="fila4">
  70.                         <div id="osx-modal-title"><h1>Esta es la fila seleccionada: </h1></div>
  71.                         <div class="col1" style="width:200px">4,1</div>
  72.                         <div class="col2" style="width:200px">4,2</div>
  73.                         <div class="col3" style="width:100px">4,3</div>
  74.                         <div class="close" id="cerrar"><a href="#" class="simplemodal-close">x</a></div>
  75.  
  76.             <div id="osx-modal-data">
  77.                             <p><button class="simplemodal-close">Cerrar</button></p>
  78.             </div>
  79.                     </div>
  80.  
  81.                 </div>
  82.  
  83.                 
  84.  
  85.     </div>
  86.     
  87. </div>
  88.  
  89.  
  90. <script type='text/javascript' src='js/jquery.js'></script>
  91. <script type='text/javascript' src='js/jquery.simplemodal.js'></script>
  92. <script type='text/javascript' src='js/eventomodal.js'></script>
  93.  
  94.  
  95. </body>
  96. </html>

Los css:

estilos.css

Código CSS: 
Ver original
  1. div.tabla
  2. {
  3.     clear: none;
  4.     overflow: auto;
  5. }
  6.  
  7. div.fila
  8. {
  9.     clear: both;
  10. }
  11.  
  12. div.col_titulo1
  13. {
  14.     float: left;
  15.     padding: 5px;
  16.     background: #F0E0A0;
  17.     border-color: black;
  18.     border-style: solid;
  19.     border-right-width: 0px;
  20.     border-left-width: 1px;
  21.     border-top-width: 1px;
  22.     border-bottom-width: 1px;
  23. }
  24. div.col_titulo2
  25. {
  26.     float: left;
  27.     padding: 5px;
  28.     background: #F0E0A0;
  29.     border-color: black;
  30.     border-style: solid;
  31.     border-right-width: 0px;
  32.     border-left-width: 1px;
  33.     border-top-width: 1px;
  34.     border-bottom-width: 1px;
  35. }
  36. div.col_titulo3
  37. {
  38.     float: left;
  39.     padding: 5px;
  40.     background: #F0E0A0;
  41.     border-color: black;
  42.     border-style: solid;
  43.     border-right-width: 1px;
  44.     border-left-width: 1px;
  45.     border-top-width: 1px;
  46.     border-bottom-width: 1px;
  47. }
  48.  
  49. div.col1
  50. {
  51.     float: left;
  52.     padding: 5px;
  53.     border-color: #F0E0A0;
  54.     border-style: solid;
  55.     border-right-width: 0px;
  56.     border-left-width: 1px;
  57.     border-top-width: 0px;
  58.     border-bottom-width: 1px;
  59. }
  60. div.col2
  61. {
  62.     float: left;
  63.     padding: 5px;
  64.     border-color: #F0E0A0;
  65.     border-style: solid;
  66.     border-right-width: 0px;
  67.     border-left-width: 1px;
  68.     border-top-width: 0px;
  69.     border-bottom-width: 1px;
  70. }
  71. div.col3
  72. {
  73.     float: left;
  74.     padding: 5px;
  75.     border-color: #F0E0A0;
  76.     border-style: solid;
  77.     border-right-width: 1px;
  78.     border-left-width: 1px;
  79.     border-top-width: 0px;
  80.     border-bottom-width: 1px;
  81. }
  82.  
  83. .fila {font-size:12px; padding:0px 10px;}


demo.css

Código CSS: 
Ver original
  1. body {background:#fff; color:#333; font: 12px/22px verdana, arial, sans-serif; height:100%; margin:0 auto; width:100%;}
  2. h1 {color:#3a6d8c; font-size:34px; line-height:40px; margin:0;}
  3. h3 { color:#3a6d8c; font-size:22px; line-height:26px; font-weight:normal; margin:0 0 8px 0;}
  4. img {border:0;}
  5. #logo {margin:20px 350px; margin-bottom:20px; width:300px;}
  6. #logo h1 {color:#666; letter-spacing:-1px; font-weight:normal;}
  7. #logo h1 span {color:#444; font-weight:bold;}
  8. #logo .center {align:center; color:#999; font-size:12px;}
  9. #container {align:center; margin:0 auto; padding-top:20px; width:960px;}
  10. #content {align:center; border-bottom:1px dotted #999; border-top:1px dotted #999; padding:20px 0;}
  11. #footer {clear:left; color:#888; margin:20px 0;}
  12. #footer a:link, #footer a:visited {color:#888; text-decoration:none;}
  13. #footer a:hover {color:#333; text-decoration:underline;}



osx.css

Código CSS: 
Ver original
  1. #osx-modal-content, #osx-modal-data, #osx-modal-title, #cerrar {display:none;}
  2.  
  3.  
  4. #osx-overlay {background-color:#000; cursor:wait;}
  5.  
  6.  
  7. #osx-container {background-color:#eee; color:#000; font: 16px/24px "Lucida Grande",Arial,sans-serif; padding-bottom:4px; width:600px; -moz-border-radius-bottomleft:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomright:6px; -webkit-border-bottom-right-radius:6px; border-radius:0 0 6px 6px; -moz-box-shadow:0 0 64px #000; -webkit-box-shadow:0 0 64px #000;}
  8. #osx-container a {color:#ddd;}
  9. #osx-container #osx-modal-title {color:#000; font-weight:bold;  }
  10.  
  11. #osx-container .close {display:none; position:absolute; right:0; top:0;}
  12. #osx-modal-data {display:none; position:absolute; left:10px; top:90px;}
  13. #osx-container .close a {display:block; color:#777; font-weight:bold; padding:6px 12px 0px; text-decoration:none; text-shadow:0 1px 0 #f4f4f4;}
  14. #osx-container .close a:hover {color:#000;}
  15.  
  16. #osx-container h2 {margin:10px 10px 6px;}
  17. #osx-container p {margin-bottom:0px;}
  18. #osx-container span {color:#777;}


el javascript

eventomodal.js

Código Javascript: 
Ver original
  1. jQuery(function ($) {
  2.         var id="";
  3.     var OSX = {
  4.         container: null,
  5.         init: function () {
  6.                     
  7.                          $("#fila1.osx, #fila2.osx, #fila3.osx, #fila4.osx").click(function (e) {
  8.                              id=$(this);
  9.                                                e.preventDefault();
  10.                                                     $(id).modal({
  11.                                                             overlayId: 'osx-overlay',
  12.                                                             containerId: 'osx-container',
  13.                                                             closeHTML: null,
  14.                                                             minHeight: 80,
  15.                                                             opacity: 65,
  16.                                                             position: ['0',],
  17.                                                             overlayClose: true,
  18.                                                             onOpen: OSX.open,
  19.                                                             onClose: OSX.close
  20.                                                     });
  21.                                             });
  22.  
  23.             
  24.         },
  25.         open: function (d) {
  26.             var self = this;
  27.             self.container = d.container[0];
  28.             d.overlay.fadeIn('slow', function () {
  29.                 var fila = $(id, self.container);
  30.                 var title = $("#osx-modal-title", self.container);
  31.                                 fila.show();
  32.                                 title.show();
  33.                 d.container.slideDown('slow', function () {
  34.                     setTimeout(function () {
  35.                         var h = $("#osx-modal-data", self.container).height()
  36.                             + title.height()
  37.                             + 50; // padding
  38.                         d.container.animate(
  39.                             {height: h},
  40.                             200,
  41.                             function () {
  42.                                 $("div.close", self.container).show();
  43.                                 $("#osx-modal-data", self.container).show();
  44.                             }
  45.                         );
  46.                     }, 500);
  47.                 });
  48.             })
  49.         },
  50.         close: function (d) {
  51.             var self = this; // this = SimpleModal object
  52.             d.container.animate(
  53.                 {top:"-" + (d.container.height() + 20)},
  54.                 500,
  55.                 function () {
  56.                     self.close(); // or $.modal.close();
  57.                 }
  58.             );
  59.         }
  60.     };
  61.  
  62.     OSX.init();
  63.  
  64. });