Latest web development tutorials

lengüetas de rutina de carga de widgets (Tab)

Tab (pestaña) en los elementos de navegación de archivos de inicio introducidas en el capítulo. Mediante la combinación de una serie de atributos de datos, puede crear fácilmente una interfaz de pestañas. Con este plugin, se puede poner el contenido en pestañas o tabs cápsula e incluso desplegable pestaña del menú.

Si se desea hacer referencia a las características individuales de plug-in, es necesario hacer referencia atab.js.O, como Bootstrap general Plugin capítulo mencionado, se puede hacer referencia abootstrap.jso versión comprimida debootstrap.min.js.

uso

Puede habilitar pestañas en dos formas:

  • A través de atributos de datos: Es necesario añadir datos de palanca = "pestaña"odatos de palanca = "píldora"para anclar los enlaces de texto.

    Nav nav-pestañasy agregue la clase a laUL,y se aplicará Bootstrap estilo de etiqueta , y ponerde navegaciónNAV-píldoras paraULClase, y se aplicará Bootstrap estilo cápsula .

    <ul class = "nav nav-pestañas">
    	<Li> <a href="#identifier" data-toggle="tab"> principal </a> </ li>
    	...
    </ Ul>
    
  • Por JavaScript: Puede utilizar las pestañas para permitir javscript, de la siguiente manera:
    $ ( '# MyTab a'). Click (function (e) {
      e.preventDefault ()
      $ (Este) .tab ( 'show')
    })
    

    El siguiente ejemplo muestra diferentes formas de activar las distintas fichas:

    // Seleccionar el nombre de la pestaña por $ ( '# Mytab un [href = "# perfil"]'). Tab ( "mostrar")
    
    // Selecciona la primera pestaña $ ( '# Mytab a: first') ficha ( 'show').
    
    . // Seleccionar la última pestaña $ ( '# Mytab una: la última') ficha ( 'show')
    
    // Seleccionar la tercera pestaña (indexados a cero)
    $ ( '# MyTab li: eq (2) a') ficha ( 'show').
    

efecto de fundido

Si necesita establecer las tabulaciones se desvanecen efecto, añadir.fade detrás de cada panel-.tab.La primera pestaña se debe añadir.en clase a desaparecer en el contenido original, como se muestra en los siguientes ejemplos:

<Div class = "pestaña en contenido">
	<Div class = "fade pestaña de una ventana en activo" id = "casa"> ... </ div>
	<Div class = "pestaña de una ventana fade" id = "SVN"> ... </ div>
	<Div class = "pestaña de una ventana fade" id = "ios"> ... </ div>
	<Div class = "pestaña de una ventana fade" id = "java"> ... </ div>
</ Div>

Ejemplos

El siguiente ejemplo muestra el uso de las fichas de datos de propiedad (Tab) y plug-fade efectos:

Ejemplos

<ul id = "Mytab" class = "nav nav-pestañas" > <Li class = "activa"> <A href = "#home" datos de palanca = "pestaña"> W3Cschool Inicio </ a> </ Li> <Li> <a href = "" #ios datos de palanca = "pestaña"> IOS </ a> </ li> <Li class = "desplegable"> <A href = "#" id = "myTabDrop1" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b> </ A> <ul class = "menú desplegable," role = "menú" aria-labelledby = "myTabDrop1"> <Li> <a href = "#jmeter" tabindex = "-1" datos de palanca = "pestaña"> jmeter </ a> </ li> <Li> <a href = "#ejb" tabindex = "-1" datos de palanca = "pestaña"> EJB </ a> </ li> </ Ul> </ Li> </ Ul> <Div id = "myTabContent" class = "pestaña en contenido"> <Div class = "fade pestaña de una ventana en activo" id = "casa"> <P> W3Cschoool Este tutorial es proporcionar la última tecnología web, este sitio proporciona una estación de documentación técnica libre, ayudar a la mayoría de los entusiastas de la tecnología web de inicio rápido y construir sus propios sitios web. El primer vuelo temprano en la línea - para aprender no sólo la tecnología, sino también un sueño. </ P> </ Div> <Div class = "pestaña de una ventana fade" id = ""> IOS <P> IOS es un desarrollado y publicado por el sistema operativo móvil de Apple. Originalmente lanzado por primera vez el iPhone, iPod Touch y Apple TV en 2007. iOS se deriva de OS X, que comparten la base de Darwin. sistema operativo OS X se utiliza en un Mac, iOS es la versión móvil de Apple. </ P> </ Div> <Div class = "pestaña de una ventana fade" id = "jmeter"> <P> jMeter es un software de prueba de código abierto. Es la aplicación Java puro 100%, para pruebas de carga y rendimiento. </ P> </ Div> <Div class = "pestaña de una ventana fade" id = "EJB"> <P> Enterprise Java Beans (EJB ) es un marco de desarrollo para crear un altamente escalables y robustas aplicaciones empresariales, desplegados en un servidores de aplicaciones compatibles (como JBoss, Web Logic, etc.) de J2EE. </ P> </ Div> </ Div>

Trate »

Los resultados son los siguientes:

Pestaña de widgets (Tab)

camino

. Pestaña $ () :. El método puede activar elemento de pestaña y el contenido del recipiente.Pestañas necesitan usar unadiana de datos o un punto en el nodo contenedor href DOM.

<Ul class = "nav nav-pestañas" id = "Mytab">
	<Li class = "activa"> <a href="#identifier" data-toggle="tab"> principal </a> </ li>
	.....
</ Ul>
<Div class = "pestaña en contenido">
	<Div class = "pestaña de una ventana activa" id = "casa"> ... </ div>
	.....
</ Div>
<Script>
	$ (Function () {
		. $ ( '# Mytab una: la última') ficha ( 'show')
	})
</ Script>

Ejemplos

El siguiente ejemplo demuestra la pestaña (Tab) plug-in de uso de métodos.tab.En el presente ejemplo, la segunda pestaña esiOS activos:

Ejemplos

<ul id = "Mytab" class = "nav nav-pestañas" > <Li class = "activa"> <a href = "#home" datos de palanca = "pestaña"> W3Cschool Inicio </ a> </ Li> <Li> <a href = "" #ios datos de palanca = "pestaña"> IOS </ a> </ li> <Li class = "desplegable"> <A href = "#" id = "myTabDrop1" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b> </ A> <ul class = "menú desplegable," role = "menú" aria-labelledby = "myTabDrop1"> <Li> <a href = "#jmeter" tabindex = "-1" datos de palanca = "pestaña"> jmeter </ a> </ Li> <Li> <a href = "#ejb" tabindex = "-1" datos de palanca = "pestaña"> EJB </ a> </ Li> </ Ul> </ Li> </ Ul> <Div id = "myTabContent" class = "pestaña en contenido"> <Div class = "fade pestaña de una ventana en activo" id = "casa"> <P> W3Cschoool Este tutorial es proporcionar la última tecnología web, este sitio proporciona una estación de documentación técnica libre, ayudar a la mayoría de los entusiastas de la tecnología web de inicio rápido y construir sus propios sitios web. El primer vuelo temprano en la línea - para aprender no sólo la tecnología, sino también un sueño. </ P> </ Div> <Div class = "pestaña de una ventana fade" id = ""> IOS <P> IOS es un desarrollado y publicado por el sistema operativo móvil de Apple. Originalmente lanzado por primera vez el iPhone, iPod Touch y Apple TV en 2007. iOS se deriva de OS X, que comparten la base de Darwin. sistema operativo OS X se utiliza en un Mac, iOS es la versión móvil de Apple. </ P> </ Div> <Div class = "pestaña de una ventana fade" id = "jmeter"> <P> jMeter es un software de prueba de código abierto. Es la aplicación Java puro 100%, para pruebas de carga y rendimiento. </ P> </ Div> <Div class = "pestaña de una ventana fade" id = "EJB"> <P> Enterprise Java Beans (EJB ) es un marco de desarrollo para crear un altamente escalables y robustas aplicaciones empresariales, desplegados en un servidores de aplicaciones compatibles (como JBoss, Web Logic, etc.) de J2EE. </ P> </ Div> </ Div> <Script> $ (function () {$ ( '# Mytab li: eq (1) a') ficha ( 'show') ;.}); </ script>

Trate »

Los resultados son los siguientes:

Tab (pestaña) Método de plug-in

evento

En la siguiente tabla se muestran las pestañas (tab) plug-in para ser utilizado en el evento. Estos eventos se pueden utilizar cuando la función de enlace.

事件描述实例
show.bs.tab该事件在标签页显示时触发,但是必须在新标签页被显示之前。分别使用event.targetevent.relatedTarget来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})
shown.bs.tab该事件在标签页显示时触发,但是必须在某个标签页已经显示之后。分别使用event.targetevent.relatedTarget来定位到激活的标签页和前一个激活的标签页。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

Ejemplos

El siguiente ejemplo muestra el uso de pestañas (Tab) plug-in de evento. En el presente ejemplo, se mostrará la corriente y las pestañas visitadas anteriores:

Ejemplos

<Hr> <P class = "activo-pestaña"> <strong> pestaña Activar </ strong> <span> </ span> </ p> <P class = "anterior-pestaña"> <strong> Activar pestaña anterior </ strong> <span> </ span> </ p> <Hr> <ul id = "Mytab" class = "nav nav-pestañas" > <Li class = "activa"> <a href = "#home" datos de palanca = "pestaña"> W3Cschool Inicio </ a> </ li> <Li> <a href = "" #ios datos de palanca = "pestaña"> IOS </ a> </ li> <Li class = "desplegable"> <A href = "#" id = "myTabDrop1" class = "desplegable-toggle" datos de palanca = "desplegable"> Java <b class = "cursor"> </ b> </ a> <ul class = "menú desplegable," role = "menú" aria-labelledby = "myTabDrop1"> <Li> <a href = "#jmeter" tabindex = "-1" datos de palanca = "pestaña"> jmeter </ a> </ li> <Li> <a href = "#ejb" tabindex = "-1" datos de palanca = "pestaña"> EJB </ a> </ li> </ Ul> </ Li> </ Ul> <Div id = "myTabContent" class = "pestaña en contenido"> <Div class = "fade pestaña de una ventana en activo" id = "casa"> <P> W3Cschoool Este tutorial es proporcionar la última tecnología web, este sitio proporciona una estación de documentación técnica libre, ayudar a la mayoría de los entusiastas de la tecnología web de inicio rápido y construir sus propios sitios web. El primer vuelo temprano en la línea - para aprender no sólo la tecnología, sino también un sueño. </ P> </ Div> <Div class = "pestaña de una ventana fade" id = ""> IOS <P> IOS es un desarrollado y publicado por el sistema operativo móvil de Apple. Originalmente lanzado por primera vez el iPhone, iPod Touch y Apple TV en 2007. iOS se deriva de OS X, que comparten la base de Darwin. sistema operativo OS X se utiliza en un Mac, iOS es la versión móvil de Apple. </ P> </ Div> <Div class = "pestaña de una ventana fade" id = "jmeter"> <P> jMeter es un software de prueba de código abierto. Es la aplicación Java puro 100%, para pruebas de carga y rendimiento. </ P> </ Div> <Div class = "pestaña de una ventana fade" id = "EJB"> <P> Enterprise Java Beans (EJB ) es un marco de desarrollo para crear un altamente escalables y robustas aplicaciones empresariales, desplegados en un servidores de aplicaciones compatibles (como JBoss, Web Logic, etc.) de J2EE. </ P> </ Div> </ Div> <Script> $ (function () {$ ( 'a [datos de palanca = "pestaña"]'). En ( 'shown.bs.tab', function (e) {// se activan Nombre de la pestaña var activeTab = $ (e.target) .text (); // Obtener un nombre var pestaña preactivado previousTab = $ (e.relatedTarget) .text ( ); ( ". lapso de pestaña activa") $. html (activeTab); $ ( " lapso de pestaña anterior.") html (previousTab) ;.});}); </ script>

Trate »

Los resultados son los siguientes:

Tab (pestaña) Plug-in de eventos