tata letak jQuery EasyUI - menambahkan tab AutoPlay (Tab)
Tutorial ini akan menunjukkan cara untuk membuat Tab autoplay. Komponen tab menampilkan panel tab pertama, kemudian menampilkan kedua, ketiga ... kita akan menulis beberapa kode untuk secara otomatis beralih panel tab, kemudian biarkan siklus.
Langkah 1: Buat Tabs
<Div id = "tt" class = "easyui-tab" 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>
Langkah 2: Tulis Kode Autoplay
var index = 0; var t = $ ( '# tt'); var tab = t.tabs ( 'tab'); setInterval (function () { t.tabs ( 'pilih', tab [index] .panel ( 'Pilihan') title.); Indeks ++; if (index> = tabs.length) { Indeks = 0; } }, 3000);
Seperti yang Anda lihat, kita sebut pendekatan 'tab' untuk mendapatkan semua panel tab, dan menggunakan fungsi 'setInterval' untuk beralih mereka.