Volver al Foro de Diseño de páginas Web

Mostrar / Ocultar la columna

  • Nina07
  • Born
  • Born
  • No Avatar
  • Registrado: Jun 16, 2010
  • Mensajes: 2
  • Status: Offline

Nota Junio 21st, 2010, 2:49 am

¡Hola!

este es un ejemplo de la página web im trabajando en:
Código: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html lang="NL">
<head><title>
    Tooling
</title>
 
  
  <script type="text/javascript" src="/scripts/swfobject.js"></script>
  <script type="text/javascript" src="/scripts/showpic.js"></script>
  <script type="text/javascript">function toggle(id) {
 var e = document.getElementById(id);

 if (e.style.display == '')
  e.style.display = 'none';
 else
  e.style.display = '';
}

</script>
<script language="JavaScript" type="text/javascript">
<!--

function AddRemoveCol(id, ar){
var rows=document.getElementById(id).getElementsByTagName('TR');
var zxc0,zxc2,zxccols;
for (zxc0=0;zxc0<rows.length;zxc0++){
 cols=rows[zxc0].getElementsByTagName('TD');
 colsnu=cols.length-1
 for (zxc1=0;zxc1<=colsnu;zxc1++){
  if (!cols[zxc1].set){ cols[zxc1].set='X'; }
  if(cols[zxc1].style.display=='none'&&ar){
  cols[zxc1].style.display='';
  cols[zxc1].set='show';
  break;
  }
  if(cols[colsnu-zxc1].style.display==''&&!ar&&cols[colsnu-zxc1].set=='show'){
  cols[colsnu-zxc1].style.display='none';
  cols[colsnu-zxc1].set='hide';
  break;
  }
 }

}
}
//-->
</script>
</head>


<body>
                        
<div class="inhalt"><a href="#self" onclick="toggle('box')" class="style3"><span class="subtitle">Availability</span></a>
<div id="box" style="display:none"><p class="style2"><strong>This article is available</strong></p>
    <table style="width: 100%">
        <tr>
            <td style="width: 386px"><em>Packaging</em></td>
            <td><em>Price</em></td>
        </tr>
        <tr>
            <td style="width: 386px">20 pieces</td>
            <td>€1.73</td>
        </tr>
        </table><br/>
    
        
    </div>
        </div>

<div class="inhalt"><a href="#self" onclick="toggle('box1')" class="style3"><span class="subtitle">Stock</span></a><div id="box1" style="display:none">
<p ><span class="bold">The following colours are in stock</span></p>
<table style="width: 100%">
        <tr>
            <td style="width: 386px"><em>Color</em></td>
            <td><em>Location</em></td>
        </tr>
        <tr>
            <td style="width: 386px">00</td>
            <td>&nbsp;</td>
        </tr>
        </table>
    <br/>
    
        </div>

    </div>  
    <div class="inhalt">
<a href="#self" onclick="toggle('box3')" class="style3"><span class="subtitle">Composition</span></a>
<div id="box3" style="display:none"><p ><span class="bold">Articles (Inclusive)</span></p>

    <table id='id_of_table'style="width: 613px">
        <tr>
            <td style="width: 12px; height: 17px;"><em>N°</em></td>
            <td style="display:none; height: 17px;" style="width: 102px"><em>Drawing</em></td>
            <td style="width: 63px; height: 17px;"><em>Article</em></td>
            <td style="width: 65px; height: 17px;"><em>Quantity</em></td>
            <td style="width: 202px; height: 17px;"><em>Description</em></td>
            <td style="width: 298px; height: 17px;"><em>Material</em></td>
            <td style="width: 217px; height: 17px;"><em>Tolerance</em></td>
        </tr>
        <tr>
            <td style="width: 12px; height: 15px;" valign="top"></td>
            <td style="display:none; height: 15px;" style="width: 102px; height: 15px;" valign="top">
            <img height="90" src="images/06577053_182429.png" width="47" /></td>
            <td style="width: 63px; height: 15px;" class="copyblue" valign="top">
            </td>
            <td style="width: 65px; height: 15px;" valign="top"></td>
            <td style="width: 202px; height: 15px;" valign="top"></td>
            <td style="width: 298px; height: 15px" valign="top"></td>
            <td style="width: 217px; height: 15px" valign="top"></td>
        </tr>
        </table>
        <a href="#self" onClick= "AddRemoveCol('id_of_table', true);" ><img height="26" src="images/showhideafbeelding.jpg" style="float: right" width="26" /></a>
        <a href="#self" onClick= "AddRemoveCol('id_of_table',false);" ><img height="26" src="images/showhideafbeelding.jpg" style="float: right" width="26" /></a><br/>
            </div></div>

</body>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
  2. <html lang="NL">
  3. <head><title>
  4.     Tooling
  5. </title>
  6.  
  7.   
  8.   <script type="text/javascript" src="/scripts/swfobject.js"></script>
  9.   <script type="text/javascript" src="/scripts/showpic.js"></script>
  10.   <script type="text/javascript">function toggle(id) {
  11.  var e = document.getElementById(id);
  13.  if (e.style.display == '')
  14.   e.style.display = 'none';
  15.  else
  16.   e.style.display = '';
  17. }
  19. </script>
  20. <script language="JavaScript" type="text/javascript">
  21. <!--
  23. function AddRemoveCol(id, ar){
  24. var rows=document.getElementById(id).getElementsByTagName('TR');
  25. var zxc0,zxc2,zxccols;
  26. for (zxc0=0;zxc0<rows.length;zxc0++){
  27.  cols=rows[zxc0].getElementsByTagName('TD');
  28.  colsnu=cols.length-1
  29.  for (zxc1=0;zxc1<=colsnu;zxc1++){
  30.   if (!cols[zxc1].set){ cols[zxc1].set='X'; }
  31.   if(cols[zxc1].style.display=='none'&&ar){
  32.   cols[zxc1].style.display='';
  33.   cols[zxc1].set='show';
  34.   break;
  35.   }
  36.   if(cols[colsnu-zxc1].style.display==''&&!ar&&cols[colsnu-zxc1].set=='show'){
  37.   cols[colsnu-zxc1].style.display='none';
  38.   cols[colsnu-zxc1].set='hide';
  39.   break;
  40.   }
  41.  }
  43. }
  44. }
  45. //-->
  46. </script>
  47. </head>
  50. <body>
  51.                         
  52. <div class="inhalt"><a href="#self" onclick="toggle('box')" class="style3"><span class="subtitle">Availability</span></a>
  53. <div id="box" style="display:none"><p class="style2"><strong>This article is available</strong></p>
  54.     <table style="width: 100%">
  55.         <tr>
  56.             <td style="width: 386px"><em>Packaging</em></td>
  57.             <td><em>Price</em></td>
  58.         </tr>
  59.         <tr>
  60.             <td style="width: 386px">20 pieces</td>
  61.             <td>€1.73</td>
  62.         </tr>
  63.         </table><br/>
  64.     
  65.         
  66.     </div>
  67.         </div>
  69. <div class="inhalt"><a href="#self" onclick="toggle('box1')" class="style3"><span class="subtitle">Stock</span></a><div id="box1" style="display:none">
  70. <p ><span class="bold">The following colours are in stock</span></p>
  71. <table style="width: 100%">
  72.         <tr>
  73.             <td style="width: 386px"><em>Color</em></td>
  74.             <td><em>Location</em></td>
  75.         </tr>
  76.         <tr>
  77.             <td style="width: 386px">00</td>
  78.             <td>&nbsp;</td>
  79.         </tr>
  80.         </table>
  81.     <br/>
  82.     
  83.         </div>
  85.     </div>  
  86.     <div class="inhalt">
  87. <a href="#self" onclick="toggle('box3')" class="style3"><span class="subtitle">Composition</span></a>
  88. <div id="box3" style="display:none"><p ><span class="bold">Articles (Inclusive)</span></p>
  90.     <table id='id_of_table'style="width: 613px">
  91.         <tr>
  92.             <td style="width: 12px; height: 17px;"><em>N°</em></td>
  93.             <td style="display:none; height: 17px;" style="width: 102px"><em>Drawing</em></td>
  94.             <td style="width: 63px; height: 17px;"><em>Article</em></td>
  95.             <td style="width: 65px; height: 17px;"><em>Quantity</em></td>
  96.             <td style="width: 202px; height: 17px;"><em>Description</em></td>
  97.             <td style="width: 298px; height: 17px;"><em>Material</em></td>
  98.             <td style="width: 217px; height: 17px;"><em>Tolerance</em></td>
  99.         </tr>
  100.         <tr>
  101.             <td style="width: 12px; height: 15px;" valign="top"></td>
  102.             <td style="display:none; height: 15px;" style="width: 102px; height: 15px;" valign="top">
  103.             <img height="90" src="images/06577053_182429.png" width="47" /></td>
  104.             <td style="width: 63px; height: 15px;" class="copyblue" valign="top">
  105.             </td>
  106.             <td style="width: 65px; height: 15px;" valign="top"></td>
  107.             <td style="width: 202px; height: 15px;" valign="top"></td>
  108.             <td style="width: 298px; height: 15px" valign="top"></td>
  109.             <td style="width: 217px; height: 15px" valign="top"></td>
  110.         </tr>
  111.         </table>
  112.         <a href="#self" onClick= "AddRemoveCol('id_of_table', true);" ><img height="26" src="images/showhideafbeelding.jpg" style="float: right" width="26" /></a>
  113.         <a href="#self" onClick= "AddRemoveCol('id_of_table',false);" ><img height="26" src="images/showhideafbeelding.jpg" style="float: right" width="26" /></a><br/>
  114.             </div></div>
  116. </body>


Yo puedo mostrar y ocultar textblocks haciendo clic en el título. Quiero hacer más o menos lo mismo con una columna en la "composición" del sitio. Quiero ser capaz de hacer clic en una imagen debajo de la mesa para mostrar y ocultar la columna de "dibujo" (= la segunda columna.) Pero no puedo conseguir que esto funcione. La única solución que tengo hasta es para usar dos imágenes (una para mostrar la columna y uno de ocultarlo de nuevo). ¿Hay una manera de utilizar una sola imagen para obtener el mismo resultado? (En la actualidad la imagen de la derecha es para mostrar la columna en la imagen de la izquierda es ocultar la columna)

Gracias,
Nina
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Junio 21st, 2010, 2:49 am

  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Junio 21st, 2010, 7:42 pm

Tal vez algunos consideren jQuery para esto, puede que sea más fácil.
Echa un vistazo a este plugin:
ColumnManager
Use your words like arrows to shoot toward your goal.
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Registrado: Mar 28, 2009
  • Mensajes: 305
  • Loc: AFK
  • Status: Offline

Nota Junio 21st, 2010, 8:05 pm

Hay un tutorial Ozzu para esto:

javascript-tutorials/tutorial-expand-collapse-blocks-and-navigation-trees-t89202.html
Custom Web Design

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 3 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 97 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC