Clase de video: https://edu.csdn.net/course/play/7621
La implementación del caso de este capítulo, cuando hace clic en el contenido en el cuadro de acordeón a la izquierda, la página a conectarse se muestra en el área de la interfaz principal a la derecha. Los atributos principales son las etiquetas de filtro de jquery [] y attr (), html () Métodos, así como los métodos existentes y seleccionados del componente pestañas.
Pestañas / pestañas
confiar
- panel
- botón de enlace
Ejemplo de uso
Crear pestañas
1. Cree pestañas mediante marcado
Es más fácil crear pestañas a partir del marcado, no necesitamos escribir ningún código JavaScript. Recuerde agregar la clase 'easyui-tabs' a la etiqueta <div />, cada panel de pestañas se crea a través de la etiqueta secundaria <div /> y su uso es el mismo que el Panel.
Crear pestañas mediante programación
Ahora creamos Tabs mediante programación y también capturamos el evento 'onSelect'.
1. $ ( '# tt' ). Pestañas ({{
2. borde: falso ,
3. onSelect: función (título) {
4. alerta (título + 'está seleccionado' );
5. }
6. });
Agregar un nuevo panel de pestañas
1. // Agregar un nuevo panel de pestañas
2. $ ( '#tt' ) .tabs ( 'agregar' , {
3. título: 'Nueva pestaña' ,
4. contenido: 'Cuerpo de la pestaña' ,
5. se puede cerrar: verdadero
6. });
Obtener la pestaña seleccionada
1. // Obtener el panel de pestañas seleccionado y su objeto de pestaña
2. var pp = $ ( '#tt' ) .tabs ( 'getSelected' );
3. var tab = pp.panel ( 'options' ) .tab; // objeto de pestaña correspondiente
característica
nombre |
Tipos de |
Descripción |
Defaults |
anchura |
número |
El ancho del contenedor Tabs. |
auto |
altura |
número |
La altura del contenedor Tabs. |
auto |
llanura |
booleano |
True no usa la imagen del contenedor de fondo para representar la barra de pestañas. |
falso |
ajuste |
booleano |
True establece el tamaño del contenedor Tabs para que se ajuste a su contenedor principal. |
falso |
frontera |
booleano |
True muestra el borde del contenedor Tabs. |
cierto |
scrollIncrement |
número |
El número de píxeles para desplazarse cada vez que se presiona el botón de desplazamiento de pestañas |
100 |
scrollDuration |
número |
La cantidad de milisegundos que debe durar cada animación de desplazamiento. |
400 |
herramientas |
formación |
En la barra de herramientas de la derecha, todas las opciones de herramientas son iguales a Linkbutton. |
nulo |
evento
nombre |
parámetro |
Descripción |
onLoad |
panel |
Se activa cuando un panel de pestañas ajax termina de cargar datos remotos. |
onSelect |
título |
Se activa cuando el usuario selecciona un panel de pestañas. |
onBeforeClose |
título |
Se activa antes de que se cierre un panel de pestañas, devuelve falso para cancelar la acción de cierre. |
onClose |
título |
Se activa cuando el usuario cierra un panel de pestañas. |
onAdd |
título |
Se activa cuando se agrega un nuevo panel de pestañas. |
onUpdate |
título |
Se activa cuando se actualiza un panel de pestañas. |
onContextMenu |
e, título |
Se activa cuando se hace clic con el botón derecho en un panel de pestañas. |
método
nombre |
parámetro |
Descripción |
opciones |
ninguna |
Volver a las opciones de pestañas. |
pestañas |
ninguna |
Regrese a todos los paneles de pestañas. |
cambiar el tamaño |
ninguna |
Ajusta el tamaño y el diseño del contenedor de pestañas. |
añadir |
opciones |
Agregar un nuevo panel de pestañas. El parámetro de opciones es un objeto de configuración. Para obtener más detalles, consulte las características del panel de pestañas. |
cerca |
título |
Cerrar un panel de pestañas, el parámetro de título se refiere al panel cerrado. |
getTab |
título |
Obtén el panel de pestañas especificado. |
getSelected |
ninguna |
Obtén el panel de pestañas seleccionado. |
Seleccione |
título |
Elija un panel de pestañas. |
existe |
título |
Se refiere a si existe un panel específico. |
actualizar |
param |
更新指定的 tab panel，param 包含两个特性： |
Tab Panel
Tab panel 特性被定义在 panel 组件里，下面是一些常用的特性。
名称 |
类型 |
说明 |
默认值 |
title |
string |
Tab panel 的标题文字。 |
|
content |
string |
Tab panel 的内容。 |
|
href |
string |
加载远程内容来填充 tab panel 的 URL。 |
null |
cache |
boolean |
True 就在设定了有效的 href 特性时缓存这个 tab panel。 |
true |
iconCls |
string |
显示在tab panel 标题上的图标的 CSS 类。 |
null |
width |
number |
Tab panel 的宽度。 |
auto |
height |
number |
Tab panel 的高度。 |
auto |
一些附加的特性
名称 |
类型 |
说明 |
默认值 |
closable |
boolean |
当设置为 true 时，tab panel 将显示一个关闭按钮，点击它就能关闭这个tab panel。 |
false |
selected |
boolean |
当设置为 true 时，tab panel 将被选中。 |
false |
<div id="cc" class="easyui-layout" fit=true style="width:100%;height:100%;"> <div region="north" title="交通银行个人网银" split="false" style="height:100px;"></div> <!-- <div region="south" title="South Title" split="true" style="height:100px;"></div> <div region="east" collapsed=true iconCls="icon-reload" title="East" split="true" style="width:100px;"></div> --> <div region="west" iconCls="icon-ok" split="true" title="设置中心" style="width:200px;"> <div id="aa" class="easyui-accordion" fit=true > <div title="安全工具" style="overflow:auto;padding:10px;"> <a title="jsp/001_message.jsp">二次口令</a> <br/> <a title="jsp/002_window.jsp">刷脸识别</a> </div> <div title="渠道管理" selected="true" style="padding:10px;"> </div> <div title="业务开通"> </div> <div title="银行卡挂失"> </div> </div> </div> <div region="center" title="业务导航" style="padding:5px;"> <div id="tt" class="easyui-tabs" fit=true style="width:500px;height:250px;"> </div> </div> </div>
<script type="text/javascript"> $(function(){ $('a[title]').click(function(){ var str=$(this).attr('title'); var title=$(this).html(); if($('#tt').tabs('exists',title)){ $('#tt').tabs('select',title); } else{ $('#tt').tabs('add',{ title:title, content:'<iframe frmaeborder=0 style=width:100%;height:100%; src='+str+'></frame>', closable:true }); } }); }); </script>
效果如图显示：
