javascript - item - html number counter animation

¿Titulares autonumber de HTML/CSS?

Question

¿Hay alguna manera (idealmente fácil) de hacer autónomos los títulos y las secciones en HTML / CSS? Tal vez una biblioteca JS?

¿O es algo difícil de hacer en HTML?

Estoy buscando una aplicación para una wiki corporativa, pero queremos poder usar los números de encabezado como siempre lo tenemos en los procesadores de texto.

Answer 1

Las listas lo hacen, ¿por qué no otros elementos? http://www.w3.org/TR/CSS2/generate.html#scope

Answer 2

Podría hacerse tanto en el servidor como con JavaScript. Sin embargo, no conozco ningún script prefabricado que lo haga.

Imposible hacer con HTML / CSS, al menos, a menos que agregue manualmente todos los números en sus encabezados.

Answer 3

<ol>
  <li>Heading 1</li>
  <li>Heading 2</li>
  <li>Heading 3</li>
</ol>

Answer 4

El método más simple sería Listas numeradas

<ol>
<li> Section
    <ol>
      <li>Nested one</li>
      <li>Nested two</li>
    </ol>
</li>
<li>Section</li>
<li>Section</li>
<li>Section</li>
<ol>

será algo así como:

1. Sección
   I. Anidado
   II. Anidado dos
   
2. Sección
3. Sección
4. Sección

Answer 5

Es posible implementar la numeración automática usando HTML mismo utilizando listas ordenadas y anidando si es necesario. A continuación hay un enlace a un ejemplo en vivo de esto, ejemplo que encontré después de una búsqueda rápida en Google.

http://archive.corewebprogramming.com/Chapter2/Nested-Ordered-Lists.html

También existe la posibilidad de utilizar Listas Desordenadas y CSS como se muestra en este ejemplo:

http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/

Answer 6

Actualización 2016 Por favor, vea la respuesta de Stephen a continuación para un método apropiado en CSS. Mi respuesta tuvo sentido en 2009 cuando los navegadores y las bibliotecas eran diferentes. Ahora estamos viviendo en un mundo completamente nuevo y el método presentado aquí está desactualizado. Lo dejo para las pobres almas que aún viven en microcosmos corporativos hechos de IE7 y lágrimas.

Vea esta otra pregunta si se pregunta cómo hacerlo en CSS, la respuesta podría ser lo que está buscando. Pero titel tiene una buena propuesta también, dependiendo de cómo se elabore su documento HTML.

Cabe señalar que, como Tríptico dijo en otro comentario, esto es de interés solo si se trata de una herramienta interna en la que se tiene control sobre qué navegadores se usan y si usar CSS vale la pena porque modificar el HTML sería difícil, por ejemplo. El soporte de esta función de CSS es limitado.

Por supuesto, sería fácil usar algo como jQuery para hacer el incremento también. Algo como este fragmento no probado:

$(document).ready(function() {
  $(''h1'').each(function(index) {
    $(this).html((index + 1) + ''. '' + $(this).html());
  });
});

No se olvide de incluir el archivo jquery.js en su documento, por supuesto.

Answer 7

Definitivamente es posible usar contadores de CSS: solo asegúrate de tener cuidado con la compatibilidad del navegador ...:

Esto hará que h2 obtenga 1., 2., h3 obtiene 1.1, 2.1, 2.2, etc.

<style>
   body{counter-reset: section}
   h2{counter-reset: sub-section}
   h3{counter-reset: composite}
   h4{counter-reset: detail}

   h2:before{
     counter-increment: section;
     content: counter(section) " ";
   }
   h3:before{
     counter-increment: sub-section;
     content: counter(section) "." counter(sub-section) " ";
   }
   h4:before{
     counter-increment: composite;
     content: counter(section) "." counter(sub-section) "." counter(composite) " ";
   }
   h5:before{
     counter-increment: detail;
     content: counter(section) "." counter(sub-section) "." counter(composite) "." counter(detail) " ";
   }
   </style>

Como dice lpfavreau, es lo mismo que otra pregunta en la que creo.

También tenga en cuenta que el uso de CSS no cambiará el título (por ejemplo, el texto seleccionado le dará el título sin los números). Esto puede o no ser deseable. La respuesta de lpfavreau (aceptada) le dará el código jquery para modificar el texto del encabezado.

3rd Party Edit

Creé un ejemplo con el CSS anterior