2010-07-21 41 views
7

¿Hay alguna manera de crear su propio elemento HTML? Quiero hacer una casilla de verificación especialmente diseñada.¿Hay alguna manera de crear su propio elemento HTML?

Imagino que tal cosa se haría en JavaScript. Algo similar a document.createHTMLElement pero la capacidad de diseñar su propio elemento (y etiqueta).

Respuesta

3

Sí, puede crear sus propias etiquetas. Debe crear un esquema e importarlo en su página, y escribir una capa de JavaScript para convertir sus nuevas etiquetas en etiquetas HTML existentes.

Un ejemplo es fbml (Facebook Markup Language), que incluye un esquema y una capa de JavaScript que Facebook escribió. Vea esto: Open Graph protocol.

Su uso puede hacer que un botón muy fácilmente:

<fb:like href="http://developers.facebook.com/" width="450" height="80"/> 
+1

Eso es realmente genial gracias. – Alan

+6

¿Qué? Tal vez he entendido mal la pregunta, pero Facebook Markup Language no tiene mucho que ver con HTML. No es interpretado por los navegadores web. Facebook lo lee y emite etiquetas HTML estándar a partir de él. –

+0

Y esquemas? No no no. Para sus propios documentos XML, sí. Pero en la web, para las páginas web a las que sirve a las personas a través de Internet para que las vean en sus navegadores web, no. –

12

No, no lo hay.

Los elementos HTML están limitados a lo que manejará el navegador. Es decir, si creaste un complemento de Firefox personalizado y luego manejaste tu etiqueta especial, entonces "podrías" hacerlo, para distintas interpretaciones de "hacerlo". Puede encontrar una lista de todos los elementos para una versión particular de HTML aquí: http://www.w3.org/TR/html4/index/elements.html

Probablemente, sin embargo, en realidad no lo desee. Si desea "combinar" varios elementos existentes de tal manera que funcionen juntos, puede hacer eso mismo JavaScript. Por ejemplo, si desea hacer clic en una casilla de verificación, al hacer clic en ella, mostrar una lista desplegable en algún lugar, con varias cosas, puede hacerlo.

Quizás le guste detallar lo que realmente quiere lograr, y podemos ayudarlo.

+0

Quiero hacer una casilla de verificación con imágenes de fondo personalizadas (por tanto revisado y sin marcar). Me gustaría minimizar la cantidad de código que se debe manejar al crear muchos de ellos. – Alan

+2

Ah. Bueno, en ese caso, usted tiende a manejar la repetitividad ya sea con un patrón de reutilización de código del servidor (depende de su idioma) o uno de JavaScript. Lo que quiere puede hacerse con bastante facilidad, pero tener un evento OnChanged (o un evento similar, no recuerdo cuál es el mejor) en la casilla de verificación, y luego cambiar el fondo de su contenedor con JavaScript. Será bastante fácil buscar cómo hacerlo. Pregunte de nuevo si necesita ayuda específica. –

+3

¿Qué zoquete bajó la fecha a esto? Es la respuesta correcta. Argh. –

2

La manera más fácil sería escribir un plugin decir en Jquery (o Dojo, MooTools, elegir uno). En el caso de jQuery, puede encontrar algunos complementos aquí http://plugins.jquery.com/ y usarlos como muestra.

1

No, no lo hay. Además, no está permitido en HTML5.

Eche un vistazo a Ample SDK biblioteca de JavaScript GUI que habilita cualquier elemento personalizado o espacios de nombres de eventos del lado del cliente (de esta manera, XUL se implementó allí) sin interferir con las reglas de HTML5.

echar un vistazo a, por ejemplo, la forma en XUL elemento de escala implementado: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/elements/scale.js y su estilo por defecto: http://github.com/clientside/amplesdk/blob/master/ample/languages/xul/themes/default/input.css

+0

Con la aparición de Web Components y sus especificaciones de elementos personalizados, es posible (y sorprendente) crear sus propios elementos personalizados definidos por el usuario: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/ custom/index.html: hay polyfills para todos los navegadores más recientes, y se implementa activamente en Firefox y Chrome. – csuwldcat

1

Es una pregunta válida, pero creo que el nombre del juego desde el lado de interfaz de usuario es marcado progresiva. Construya etiquetas válidas que cumplan con w3 y luego ajústelas adecuadamente con javascript (en mi caso, Jquery o Dojo) y CSS. Un bloque de CSS bien escrito se puede reutilizar una y otra vez (mi caso favorito es Jquery UI con themeroller) y darle estilo a casi cualquier elemento en la página con solo una adición de una o dos palabras a la declaración de clase.

Aquí hay algunas buenas soluciones/CSS jQuery/Javascript que son relativamente simples:

http://www.filamentgroup.com/examples/customInput/ http://aaronweyenberg.com/90/pretty-checkboxes-with-jquery http://www.protofunc.com/scripts/jquery/checkbox-radiobutton/

Aquí está la especificación para el próximo (y prometedor) actualización jQueryUI de elementos de formulario: http://wiki.jqueryui.com/Checkbox

Si necesita validar la entrada, esta es una manera fácil de obtener la validación en línea con una sola clase o etiqueta de identificación: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Ok, entonces mi solución no es una solución de 10 caracteres y una línea. Sin embargo, Jquery Código lado, cada etiqueta individuo no sería mucho más que:

<input type="checkbox" id="theid"> 

Así, mientras que habría un trozo medio de código de jQuery, los elementos individuales serían muy pequeños, lo cual es importante si Lo estoy repitiendo 250 veces (programáticamente) como requirió mi último proyecto. Es fácil de codificar, degrada bien, valida bien, y dado que el marcado progresivo estaría en el extremo del usuario, prácticamente no tiene costo en el extremo del servidor.

Mi proyecto actual está en Symfony, no es mi elección, que utiliza etiquetas complejas y voluminosas del lado del servidor para representar elementos de formulario, validar, hacer javascript en clic, estilo, etc. Esto parece lo que estaba pidiendo en primero ... y déjame decirte que es CLUNKY. ¡Una etiqueta para llamar a un enlace puede tener 10 líneas de código de largo! Después de ser obligado a hacerlo, no soy un fanático.

0

Hm. La primera idea es que podrías crear tu propio elemento y hacer una transformación con XSLT al HTML válido.

0

Con la aparición del estándar W3 Web Components emergente, específicamente el Custom Elements spec, ahora puede crear sus propios elementos HTML personalizados y registrarlos con el analizador con el método DOM document.register().

X-Tag es una biblioteca de azúcar útil, desarrollado por Mozilla, que hace que sea aún más fácil de trabajar con componentes Web, tenga una mirada: X-Tags.org

Cuestiones relacionadas