Cómo utilizar jQuery para crear una interfaz con pestañas en css3

categoría Los medios de comunicación de Internet y sociales / Diseño y desarrollo web / Páginas web de construcción

Para algunos sitios web de una interfaz con pestañas es el mejor método para mostrar la información. CSS3 tiene código para utilizar el método de jQuery para crear una interfaz con pestañas.

$ (function () {// Crear las variables para mantener TabHeads data.var temporales = "" -VAR TabContent = "" -.. // obtener el archivo de datos XML y procesarla $ get ("XMLTabData.xml", función ( datos) {// Situar cada entrada Encabezado y lo utilizan para // crear un encabezado pestaña $ (datos) .find ("Título"). each (function () {TabHeads + = ".
  • "+ $ (This) .attr (" leyenda ") +"
    • "-}) - // Anexar los datos a la zona de partida $ (." # Encabezamientos ") anexar (TabHeads) -. // Busque cada entrada de contenido y utilizarlo para // crear el contenido de la ficha $ (datos).. encontrar ("Contenido"). each (function () {TabContent + = "
    "+ $ (This) .text (+)"
    "-}) - // Anexar los datos para el área de contenido pestaña $ (." # Aquí ") append (TabContent) -. // Completar el proceso al mostrar las pestañas // $ (." # Aquí ") pestañas. () -}) -}) -

    El código se inicia mediante la creación de dos variables: TabHeads y TabContent, para contener los datos que se utilizan para rellenar el interfaz con pestañas. Esta información se añade a la larga dos etiquetas HTML, como se muestra aquí:

      El método get () obtiene el archivo XML, XMLTabData.XML, y coloca el contenido de los datos. ¿Qué datos contiene es un archivo completamente formado XML que se pasa a una función anónima (uno que no tiene nombre) que se define como: function (datos) {}. La función se ejecuta cuando la recuperación de datos es completa, por lo que actúa como una devolución de llamada para un conjunto de datos asíncronos leer.

      Todo lo que necesitas saber por el momento es que el archivo XML contiene elementos que contienen los datos utilizados para crear las entradas de la ficha, así como elementos que contienen los datos que se colocan dentro de cada pestaña. En este caso, Tab 1 sería un título y " Esto es algo de contenido para Tab 1. " sería el contenido de esa ficha.

      imagen0.jpg

      Toda la información de rumbo aparece en el elementos. El código pide jQuery encontrar () cada uno de los elementos y les procesar una a la vez utilizando el método each (). El each () método crea un bucle que proporciona automáticamente el acceso a individuo elementos a través de la esta variable. Encabezamientos Tab se almacenan en una lista desordenada (

        ), Encabezamientos, eso es ya parte del HTML de la página de ejemplo.

      El contenido de cada ficha aparece en

      elementos que se añade después de la
        elemento, encabezamientos. El contenido puede ser cualquier cosa - incluyendo los controles como se utiliza para el ejemplo de la interfaz con pestañas anterior. La cuestión más importante a considerar es la forma de almacenar información en el archivo XML. Asegúrese escapar ninguna etiqueta de modo que no están mal interpretados como elementos XML.

      Al igual que con los títulos, el código utiliza find () para localizar cada uno de los elementos del archivo XML y ellos se convierten en el código HTML necesario para crear el contenido de la ficha. El método each () crea el bucle utilizado para procesar cada elemento de una en una.



      Artículos Relacionados

      Sobre el autor
      Cómo recuperar los resultados de ajax llama con javascript Cómo recuperar los resultados de ajax llama con javascript

      Es el momento de construir un par de aplicaciones javascript para ver lo que jQuery puede hacer por usted cuando usted está recuperando los resultados de las llamadas AJAX. Aunque sus situaciones del mundo real será más complejo, el proceso…

      Cómo usar javascript objetos de integración html Cómo usar javascript objetos de integración html

      javascript viene con una serie de objetos integrados que ayudan a realizar tareas de programación generales. Puede crear una nueva variable de cualquier tipo que desee. javascript también soporta un número de otros objetos integrados…

      Cómo agregar HTML a una página con jQuery Cómo agregar HTML a una página con jQuery

      jQuery se puede utilizar para agregar HTML a una página. Usted puede agregar todo tipo de HTML, imágenes, casi cualquier cosa, y cambiar por completo el diseño de la página usando jQuery. Si lo hace, no es realmente una buena idea, ya que puede…

      Jquery para dummies Jquery para dummies

      jQuery le permite seleccionar elementos en una página Web con facilidad. Usted puede encontrar todo lo que quieras en una página y luego usar jQuery para añadir efectos especiales, reaccionar a las acciones del usuario, o mostrar y ocultar el…

      Cómo leer datos csv en php para HTML5 y CSS3 programación Cómo leer datos csv en php para HTML5 y CSS3 programación

      Si está trabajando con los datos delimitado es PHP para programación HTML5 y CSS3, es posible que desee leer en los datos CSV a ti mismo. No es demasiado difícil de hacer. Revise el siguiente código para…

      Cómo escribir un archivo de texto básico en php para HTML5 y CSS3 programación Cómo escribir un archivo de texto básico en php para HTML5 y CSS3 programación

      A menudo, usted querrá hacer algo en PHP tan simple como la información de registro de un formulario en un archivo de texto para la programación HTML5 y CSS3. Aquí es un sencillo programa que responde a una forma y pasa la entrada a un formato…

      Plantillas visuales comunes de elementos de estudio 2010 Plantillas visuales comunes de elementos de estudio 2010

      Cuando se trabaja con proyectos en Visual Studio 2010, te vas a encontrar una increíble variedad de plantillas de elementos para ayudarle a crear sus proyectos. La siguiente tabla describe muchas de las plantillas comunes para ayudarle a lo largo…

      ¿Cómo cambiar el css de un elemento en css3 ¿Cómo cambiar el css de un elemento en css3

      La librería jQuery para CSS3 se utiliza sobre todo para llevar a cabo este tipo de caso, pero las tareas de bajo nivel. Puede, sin embargo, utilizar jQuery para realizar algunas tareas más elegantes incorporando CSS. Hay un método .css real ()…

      ¿Cómo crear una interfaz que pueden arrastrarse en css3 ¿Cómo crear una interfaz que pueden arrastrarse en css3

      A veces, un usuario tiene que cambiar la posición de elementos de la pantalla para que sean más fáciles de ver o trabajar. En CSS3, creando un ambiente en el cual el usuario puede mover elementos en torno no tiene por qué implicar a escribir…

      ¿Cómo crear una interfaz de tamaño variable en css3 ¿Cómo crear una interfaz de tamaño variable en css3

      La gran variedad y tipos de pantallas que se utilizan para mostrar la información hacen que sea necesario que sus comandos CSS3 permiten al usuario cambiar el tamaño de los elementos según sea necesario. En la mayoría de casos, basta con que el…

      ¿Cómo crear una interfaz sortable en css3 ¿Cómo crear una interfaz sortable en css3

      Ciertos tipos de clasificación son fáciles para los equipos que se pueden hacer, y usted quiere que su codificación CSS3 para crear esa situación. Por ejemplo, una computadora puede poner artículos en orden alfabético mucho más rápido que un…

      ¿Cómo trabajar con pestañas en css3 ¿Cómo trabajar con pestañas en css3

      Muchos desarrolladores utilizan interfaces con pestañas para reducir la complejidad de la aplicación. Si usted puede centrarse la atención del usuario en un elemento a la vez, se reduce la posibilidad de entrada de errante. En este ejemplo CSS3,…

      » » » » Cómo utilizar jQuery para crear una interfaz con pestañas en css3