Jquery Ui Tabs Fx Options

JQuery UI Demos jQuery UI menawarkan kombinasi interaksi, efek, widget, utilitas, dan tema yang dirancang untuk bekerja dengan baik bersama atau mereka sendiri. Bermain dengan demo, melihat sumbernya, membangun sebuah tema. Baca dokumentasi API dan mulai menggunakan jQuery UI sekarang. Interaksi interaksi menambahkan dasar berbasis mouse perilaku untuk setiap elemen. Anda dapat membuat daftar sortable, elemen resizable, drag amp drop perilaku dan lebih dengan hanya beberapa baris kode. Interaksi juga membuat blok bangunan yang hebat untuk widget dan aplikasi yang lebih kompleks. Widget adalah fitur lengkap kontrol UI yang membawa kekayaan aplikasi desktop ke Web. Semua widget memberikan inti yang solid dengan banyak titik perpanjangan untuk menyesuaikan perilaku, serta dukungan penuh. Efek menambahkan dukungan untuk menghidupkan warna dan transisi kelas, serta memberikan beberapa tambahan tambahan. Selain itu, rangkaian lengkap efek khusus tersedia untuk digunakan saat menampilkan dan menyembunyikan elemen atau hanya untuk menambahkan beberapa daya tarik visual. Utilitas yang digunakan oleh jQuery UI untuk membangun interaksi dan widget. Tab Widget InteractionsTabs umumnya digunakan untuk memecah konten menjadi beberapa bagian yang bisa ditukar untuk menghemat ruang, seperti akordeon. Konten untuk setiap panel tab dapat didefinisikan di-halaman atau dapat dimuat melalui Ajax keduanya ditangani secara otomatis berdasarkan href jangkar yang terkait dengan tab. Dengan tab default diaktifkan pada klik, namun acara dapat diubah menjadi hover melalui opsi acara. Catatan Tambahan: Widget ini membutuhkan beberapa CSS fungsional, jika tidak, karya tersebut akan berhasil. Jika Anda membuat tema kustom, gunakan widgetaposs file CSS khusus sebagai titik awal. AjaxOptionsxA0 Pilihan Ajax Tambahan untuk dipertimbangkan saat memuat konten tab (lihat jQuery. ajax ()). CachexA0 Mengelola konten tab jauh-jauh atau tidak, mis. Hanya memuat sekali atau dengan setiap klik. Konten dalam cache sedang malas dimuat, mis. Sekali dan hanya sekali untuk klik pertama. Perhatikan bahwa untuk mencegah permintaan Ajax yang sebenarnya agar tidak di-cache oleh browser, Anda perlu memberikan cache tambahan: bendera palsu pada opsi ajaxOptions. CollapsiblexA0 Bila disetel ke true. Panel aktif bisa ditutup. CookiexA0 Simpan tab pilihan terbaru dalam sebuah cookie. Cookie kemudian digunakan untuk menentukan tab yang dipilih awalnya jika pilihan yang dipilih tidak ditentukan. Memerlukan plugin cookie, yang juga dapat ditemukan di map pengembangan-bundel-eksternal dari pembangun unduhan. Objek harus memiliki pasangan keyvalue dari bentuk yang diharapkan plugin cookie sebagai pilihan. Contoh:. Karena jQuery UI 1.7, juga memungkinkan untuk menentukan nama cookie yang digunakan melalui properti nama. DisabledxA0 Tab yang dinonaktifkan. Beberapa tipe didukung: Boolean. Mengaktifkan atau menonaktifkan semua tab. Array Array berisi indeks tab berbasis nol yang harus dinonaktifkan, mis. 0, 2 akan menonaktifkan tab pertama dan ketiga. EventxA0 Jenis peristiwa yang seharusnya ditanggapi tab untuk mengaktifkan tab. Untuk mengaktifkan hover, gunakan quotmouseoverquot. Aktifkan animasi untuk menyembunyikan panel tab. Beberapa jenis didukung: Obyek. Pasangan nilai kunci untuk menghidupkan dan durasi opsional, mis. . Array Pengaturan animasi dalam bentuk hideSettings, showSettings. IdPrefixxA0 Jika tab remote, elemen jangkarnya, tidak memiliki atribut judul untuk menghasilkan id, pengenal idfragment dibuat dari awalan ini dan id unik, misalnya tab kueri-54 kuot. Template panelTemplatexA0 HTML dari mana panel tab baru dibuat jika menambahkan tab dengan metode add () atau saat membuat panel untuk tab jarak jauh dengan cepat. SelectedxA0 Indeks berbasis nol dari panel yang dipilih (terbuka). Pengaturan yang dipilih ke -1 akan meruntuhkan semua panel. Ini membutuhkan pilihan yang bisa dilipat untuk menjadi kenyataan. SpinnerxA0 Konten HTML ditampilkan dalam judul tab saat konten jarak jauh dimuat. Tetapkan pilihan ini ke string kosong untuk menonaktifkan perilaku pemintal. Elemen span harus ada dalam tag anchor dari judul agar konten pemintal terlihat. TabTemplatexA0 template HTML dari mana tab baru dibuat dan ditambahkan. Penanda tempat dan diganti dengan URL dan label tab yang dilewatkan sebagai argumen ke metode add (). Batalkan () Pengembalian: jQuery (hanya plugin) Hentikan semua permintaan dan animasi ajax yang sedang berjalan. Metode ini tidak menerima argumen. Tinta Widget Keyboard Interaksi Bila fokus ada pada tab, berikut perintah utama yang tersedia: UP LEFT. Pindahkan fokus ke tab sebelumnya. Jika pada tab pertama, bergerak fokus ke tab terakhir. Aktifkan tab terfokus setelah penundaan singkat. BAWAH KANAN Pindahkan fokus ke tab berikutnya. Jika pada tab terakhir, bergerak fokus ke tab pertama. Aktifkan tab terfokus setelah penundaan singkat. CTRL UP LEFT. Pindahkan fokus ke tab sebelumnya. Jika pada tab pertama, bergerak fokus ke tab terakhir. Tab yang terfokus harus diaktifkan secara manual. CTRL DOWN RIGHT. Pindahkan fokus ke tab berikutnya. Jika pada tab terakhir, bergerak fokus ke tab pertama. Tab yang terfokus harus diaktifkan secara manual. RUMAH. Pindahkan fokus ke tab pertama. Aktifkan tab terfokus setelah penundaan singkat. AKHIR. Pindahkan fokus ke tab terakhir. Aktifkan tab terfokus setelah penundaan singkat. CTRL HOME Pindahkan fokus ke tab pertama. Tab yang terfokus harus diaktifkan secara manual. CTRL END. Pindahkan fokus ke tab terakhir. Tab yang terfokus harus diaktifkan secara manual. RUANG. Aktifkan panel yang terkait dengan tab terfokus. MEMASUKKAN. Aktifkan atau toggle panel yang terkait dengan tab terfokus. PILIHAN ALT PAGE UP. Pindahkan fokus ke tab sebelumnya dan segera aktifkan. ALT OPTION PAGE DOWN Pindahkan fokus ke tab berikutnya dan segera aktifkan. Saat fokus berada di panel, tersedia perintah utama berikut: CTRL UP. Pindahkan fokus ke tab terkait. PILIHAN ALT PAGE UP. Pindahkan fokus ke tab sebelumnya dan segera aktifkan. ALT OPTION PAGE DOWN Pindahkan fokus ke tab berikutnya dan segera aktifkan. Widget tab menggunakan kerangka CSS jQuery UI untuk menonjolkan tampilan dan nuansanya. Jika tab styling tertentu diperlukan, nama kelas CSS berikut dapat digunakan untuk mengganti atau sebagai kunci untuk opsi kelas: ui-tabs. Penampung terluar dari tab. Elemen ini juga memiliki kelas ui-tabs-dilipat saat opsi yang dapat dilipat ditetapkan. Ui-tab-nav Daftar tab. Tab ui-tabs Salah satu item dalam daftar tab. Item aktif akan memiliki kelas ui-tabs-active. Item daftar mana pun yang memuat konten terkaitnya melalui panggilan Ajax akan memiliki kelas ui-tabs-loading. Ui-tabs-anchor Jangkar digunakan untuk mengganti panel. Panel ui-tab. Panel terkait dengan tab. Hanya panel yang tabnya sesuai yang aktif akan terlihat. Dependensi Catatan Tambahan: Widget ini membutuhkan beberapa CSS fungsional, jika tidak, karya tersebut akan berhasil. Jika Anda membuat tema kustom, gunakan widgetaposs file CSS khusus sebagai titik awal. ActivexA0 Panel yang saat ini terbuka. Beberapa tipe didukung: Boolean. Setting active to false akan meruntuhkan semua panel. Ini membutuhkan pilihan yang bisa dilipat untuk menjadi kenyataan. Integer. Indeks berbasis nol dari panel yang aktif (terbuka). Nilai negatif memilih panel yang mundur dari panel terakhir. Contoh kode: Inisialisasi tab dengan opsi aktif yang ditentukan: