Tabla de contenido
Prefacio
En el capítulo anterior del blog explicamos los componentes de Bootstrap,
en este capítulo hablaremos de algunos componentes de JavaScript.
1. Introducción a los complementos de JavaScript
- ¿Por qué necesitas un complemento de JavaScript?
- Los efectos interactivos complejos que se encuentran en el proyecto, como carruseles, cuadros modales, etc., se pueden completar fácilmente utilizando complementos de JavaScript.
- Cómo introducir complementos
- atributo de datos
- El atributo de datos reduce el umbral para usar complementos de JavaScript
2. Cómo introducir complementos
- Introducir todos los complementos a la vez
- Al introducir bootstrap.js o bootstrap.min.js, puede importarlos todos a la vez
- Introduzca complementos individualmente a pedido
- Utilice un único archivo "*.js" proporcionado por el marco Bootstrap y solo introduzca un determinado complemento para su uso.
3. atributo de datos
- Los complementos de JavaScript pueden lograr efectos dinámicos sin escribir ningún código JavaScript.
- Simplemente siga el atributo de datos para operar.
Hay muchos atributos de datos, que van seguidos de algunos sustantivos después de los datos, como los más utilizados, alternar datos, destino de datos, descartar datos, etc.
- Cómo utilizar el complemento JavaScript
- Utilice el atributo de datos para llamar al complemento de JavaScript
- Utilice código nativo para llamar complementos de JavaScript
Teniendo en cuenta la conveniencia y la velocidad de uso, se recomienda utilizar el atributo de datos para llamar al complemento de JavaScript.
Cuarto, cierre el atributo de datos.
- Debe encapsular la función de atributo de datos usted mismo. Si espera que el atributo de datos del marco Bootstrap no afecte sus funciones encapsuladas, debe desactivar el atributo de datos del marco Bootstrap.
gramática
$(document).off('.data-api');
- ¿Cómo desactivar el atributo de datos solo para un complemento específico?
- Simplemente agregue el nombre del complemento específico como espacio de nombres delante de data-api
gramática
// 关闭旋转轮播插件的data属性
$(document).off('.carousel.data-api');
5. Complemento de transición
- Todos los efectos de transición animados utilizados por Bootstrap se basan en animaciones CSS3, por lo que los navegadores IE6-IE8 no pueden usar efectos de transición.
Si utiliza la versión comprimida del archivo bootstrap.min.js, no es necesario introducir el complemento de transición por separado, porque la función del complemento de transición se ha integrado en otros complementos en este momento.
- El complemento de transición no es un complemento estándar en sentido estricto, sino una herramienta auxiliar básica para el evento TransitionEnd.
- A menudo lo utilizan otros complementos para detectar si el navegador actual admite efectos de transición CSS.
- Los efectos de transición se pueden desactivar globalmente y el código de desactivación debe colocarse detrás de
la sintaxis de transición.js (o bootstrap.min.js).
$.support.transition = false;
6. cuadro modal
- Modal es un subformulario que cubre el formulario principal.
- El propósito es mostrar contenido de una fuente separada, permitiendo cierta interacción sin salir del formulario principal.
- Componentes de la caja modal
- El cuadro modal contiene un encabezado (título del cuadro modal y botón de cerrar), un área de contenido en el medio y un conjunto de botones ubicados en la parte inferior.
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态框</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
</style>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
显示模态框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form class="form-inline" action="#">
<div class="form-group">
<label for="user">用户名:</label>
<input type="text" class="form-control" id="user" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input type="password" class="form-control" id="pwd" placeholder="请输入密码">
</div>
<input type="submit" class="form-control" value="登录">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
</script>
</html>
Aviso
data-target="#myModal" 里面的 #myModal 要和 下面的id对应
- Nunca superponga un cuadro modal encima de otro cuadro modal, de lo contrario no será efectivo
- Asegúrese de colocar el código HTML del cuadro modal en el nivel más alto del documento (como un elemento secundario directo del elemento del cuerpo) para evitar que otros componentes afecten la presentación y funcionalidad del cuadro modal.
6.1, cuadro modal de operación de JavaScript
-
Además del atributo de datos, también puede utilizar JavaScript para operar el cuadro modal.
-
Sólo una línea de código JavaScript
- Llame al método del cuadro modal para operar el cuadro modal a través de la identificación del cuadro modal
-
Cuadro modal de operación de JavaScript
- Propiedades del cuadro modal
- método modal
- evento modal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态框</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
</style>
<body>
<button type="button" class="btn btn-primary btn-lg" id="jsbtn">
js模态框
</button><br>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<form class="form-inline" action="#">
<div class="form-group">
<label for="user">用户名:</label>
<input type="text" class="form-control" id="user" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input type="password" class="form-control" id="pwd" placeholder="请输入密码">
</div>
<input type="submit" class="form-control" value="登录">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
$("#jsbtn").click(function(){
$('#myModal').modal('show')
})
</script>
</html>
6.2, propiedades del cuadro modal
Las propiedades del cuadro modal se pueden manipular a través de JavaScript
6.3, método de caja modal
- El cuadro modal admite pasar una cadena específica para ejecutar su método interno.
- Nombres de cadenas de uso común y descripciones de uso.
6.4, eventos de cuadro modal
- En el desarrollo real, a veces es necesario realizar algunas operaciones específicas antes o después de que aparezca el cuadro modal, ¿cómo se hace esto?
- El cuadro modal proporciona algunos eventos para monitorear el proceso de ejecución del cuadro modal. Durante estos procesos, los desarrolladores pueden ejecutar código personalizado.
- evento modal
7. Introducción a las pestañas
- Las pestañas también se llaman pestañas. Al combinar algunos atributos de datos, puede crear fácilmente una interfaz con pestañas
- Este complemento le permite colocar contenido en pestañas o incluso pestañas de menú desplegable
7.1, Composición e implementación de pestañas
- Las pestañas se componen de un menú de pestañas y un panel de pestañas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签页</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
菜鸟教程
</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
</div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
$("ul a").on("shown.bs.tab",function(e){
e.target
e.relatedTarget
})
</script>
</html>
7.2 Puntos a tener en cuenta al utilizar pestañas
- Notas sobre la implementación de pestañas
- Al implementar un panel de pestañas, el menú de pestañas y el panel de pestañas deben existir al mismo tiempo.
- La clave para la implementación es configurar data-toggle="tab". Cada menú de pestaña y panel de pestañas se corresponden por ID. Después de corresponder, haga clic en el menú de pestañas para mostrar el panel de pestañas correspondiente.
- Los paneles de pestañas deben colocarse en un elemento div con el nombre de clase tab-content
7.3, pestaña de cápsula
- Cosas a tener en cuenta al usar pestañas de cápsulas
- Reemplace el nombre de la clase nav-tabs con nav-pill
- Reemplace el valor del nombre de la clase: alternar datos de pestaña a píldora
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签页</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<ul id="myTab" class="nav nav-pills">
<li class="active">
<a href="#home" data-toggle="pill">
菜鸟教程
</a>
</li>
<li><a href="#ios" data-toggle="pill">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="pill">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="pill">ejb</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
</p>
</div>
</div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
$("ul a").on("shown.bs.tab",function(e){
e.target
e.relatedTarget
})
</script>
</html>
8. Introducción a las imágenes en carrusel.
- Carrusel, también conocido como carrusel
- Es una forma flexible y receptiva de agregar controles deslizantes a su sitio
- El contenido puede ser imágenes, iframes, videos o cualquier tipo en el que desee colocarse.
8.1, Implementación del carrusel giratorio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
.focus {
width: 500px;
height: 500px;
background-color: pink;
margin: 100px auto;
}
.carousel,
.carousel img {
width: 100%;
height: 500px!important;
}
</style>
<body>
<div class="container">
</div>
<hr>
<div class="focus">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators 小圆点-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides 轮播图-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../淘宝/img/轮播图1.png" alt="...">
<!-- <div class="carousel-caption">
<img src="../../淘宝/img/轮播图1.png" alt="...">
</div> -->
</div>
<div class="item">
<img src="../../淘宝/img/轮播图2.png" alt="...">
<!-- <div class="carousel-caption">
<img src="../../淘宝/img/轮播图2.png" alt="...">
</div> -->
</div>
<div class="item">
<img src="../../淘宝/img/轮播图3.png" alt="...">
<!-- <div class="carousel-caption">
<img src="../../淘宝/img/轮播图3.png" alt="...">
</div> -->
</div>
</div>
<!-- Controls 左右翻页-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- //设置自动播放换图时间 单位ms -->
<script>
$('.carousel').carousel({
interval: 2000
})
</script>
</html>
8.2 Análisis de la estructura del carrusel giratorio.
- El carrusel giratorio consta de tres partes: contenedor de imágenes, indicador circular y botones de control izquierdo y derecho.
- El contenedor de imágenes es el área principal del carrusel giratorio y contiene principalmente el contenido que debe mostrarse.
- El contenido mostrado se coloca en un div con el elemento de nombre de clase.
- Todo el contenido que debe mostrarse está incluido en un div con el nombre de clase carousel-inner
- La función del indicador circular es localizar la posición actual del carrusel. Cuando hace clic en el indicador circular, también puede cambiar la imagen del carrusel.
- La estructura del indicador circular consta de una lista ordenada.
- El número de listas está determinado por el número de elementos en el área de visualización de imágenes.
- La función de los botones de control izquierdo y derecho es controlar la dirección del carrusel haciendo clic en los botones de control.
- Los botones de control izquierdo y derecho se implementan utilizando dos elementos a.
- El atributo de diapositiva de datos se utiliza en ambos elementos.
- El valor del atributo solo puede ser anterior o siguiente, lo que significa la imagen anterior o siguiente respectivamente.
- El contenedor de imágenes es el área principal del carrusel giratorio y contiene principalmente el contenido que debe mostrarse.
8.3, carrusel giratorio con descripción de texto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<style>
.focus {
width: 500px;
height: 500px;
background-color: pink;
margin: 100px auto;
}
.carousel,
.carousel img {
width: 100%;
height: 500px!important;
}
</style>
<body>
<div class="container">
</div>
<hr>
<div class="focus">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators 小圆点-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides 轮播图-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../../淘宝/img/轮播图1.png" alt="...">
<!-- <div class="carousel-caption">
<img src="../../淘宝/img/轮播图1.png" alt="...">
</div> -->
<div class="carousel-caption">
<h3>途欢黄金体验</h3>
<p>人生路途与健康同行畅快出行</p>
</div>
</div>
<div class="item">
<img src="../../淘宝/img/轮播图2.png" alt="...">
<!-- <div class="carousel-caption">
<img src="../../淘宝/img/轮播图2.png" alt="...">
</div> -->
</div>
<div class="item">
<img src="../../淘宝/img/轮播图3.png" alt="...">
<!-- <div class="carousel-caption">
<img src="../../淘宝/img/轮播图3.png" alt="...">
</div> -->
</div>
</div>
<!-- Controls 左右翻页-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- //设置自动播放换图时间 单位ms -->
<script>
$('.carousel').carousel({
interval: 2000
})
</script>
</html>
8.4, atributo de datos del carrusel giratorio
- Además de paseo de datos, diapositiva de datos, etc., el complemento del carrusel de rotación también admite otros tres atributos de datos.
Los tres atributos de datos anteriores se pueden utilizar en el contenedor principal externo del carrusel giratorio.
por fin
送大家一句话：只要有决心和毅力，什么时候也不算晚。