Foros del Web » Programando para Internet » Javascript »

cargar un simplemodal con la info de la fila seleccionada

 Estas en el tema de cargar un simplemodal con la info de la fila seleccionada en el foro de Javascript en Foros del Web. Necesite la libreria de jquery.js, y la jquery.simplemodal.js. index.html @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código HTML: Ver original <!DOCTYPE html> < html > < head > < title ...
  #1 (permalink)  
Antiguo 23/09/2010, 08:38
Avatar de 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. });

Etiquetas: fila, info, simplemodal
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 11:57.