layout do jQuery EasyUI - adicionar separador AutoPlay (Tabs)
Este tutorial irá mostrar-lhe como criar um Tabs de reprodução automática. componente de abas exibe o primeiro painel da guia, em seguida, exibir o segundo, terceiro ... vamos escrever algum código para alternar automaticamente painéis de guia, em seguida, deixe-o ciclo.
Passo 1: Criar Tabs
<Div id = class "tt" = "easyui-tabs" style = "width: 330px; height: 270px;"> <Div title = "Shirt1" style = "padding: 20px;"> <Img src = "images / shirt1.gif"> </ Div> <Div title = "Shirt2" style = "padding: 20px;"> <Img src = "images / shirt2.gif"> </ Div> <Div title = "Shirt3" style = "padding: 20px;"> <Img src = "images / shirt3.gif"> </ Div> <Div title = "Shirt4" style = "padding: 20px;"> <Img src = "images / shirt4.gif"> </ Div> <Div title = "Shirt5" style = "padding: 20px;"> <Img src = "images / shirt5.gif"> </ Div> </ Div>
Passo 2: Faça Código Autoplay
var index = 0; var t = $ ( '# tt'); var guias = t.tabs ( 'guias'); setInterval (function () { t.tabs ( 'selecionar', guias [índice] .panel ( 'opções') título.); Índice ++; if (index> = tabs.length) { index = 0; } }, 3000);
Como você pode ver, nós chamamos a abordagem dos separadores 'para obter todos os painéis de tabulação, e usar a função' setInterval "para mudá-los.