Baca Juga :  Cara Menambahkan Button "Clear Cart" Pada OpenCart 3.x

Aplikasi jQuery UI ThemeRoller

0 137

ThemeRoller adalah aplikasi web yang paling banyak dicari dan dikembangkan untuk interface pengguna jQuery. Aplikasi ini memungkinkan kita untuk mendapatkan tema website kita sendiri. Plugin web yang menarik ini dikembangkan oleh Filament Group.

Untuk membiasakan diri menggunakan aplikasi ini, jQuery menyediakan interface dimana menunjukkan galeri tema yang dirancang sebelumnya dapat diunduh sebagaimana adanya. Jika tidak, kita dapat memilih salah satu dari mereka untuk melakukan perubahan, jika diperlukan. Aplikasi ini akan digunakan untuk widget jQuery UI.

Kita telah melihat tentang CSS, bagaimana ia digunakan dalam desain halaman web. Tapi, aplikasi jQuery Themeroller akan sangat mengurangi waktu untuk mengembangkan halaman web dari awal. Bukan hanya waktu tetapi juga digunakan untuk mengurangi beban dalam desain layout.

Dalam artikel ini, mari kita lihat daftar item berikut.

  • jQuery UI ThemeRoller Interface.
  • Konfigurasikan pengaturan untuk komponen UI jQuery.
  • Download dan Install jQuery Themeroller.

jQuery UI ThemeRoller Interface.

Di bagian jQuery UI kita dapat menemukan antarmuka ThemeRoller untuk mendapatkan tema yang diperlukan. Dengan antarmuka ini, ia menyediakan tiga tab, tab Roll Your Own, Gallery dan Help, pada panel kiri.

Baca Juga :  Membuat jQuery UI Color Picker Tanpa Menggunakan Bootstrap

Roll Your Own berfungsi mengatur opsi untuk dikonfigurasi dengan UI. Dan, Galeri menampilkan daftar tema untuk diunduh tanpa perubahan khusus. Dan kemudian, tab Bantuan adalah untuk menunjukkan catatan bantuan untuk bekerja dengan aplikasi ini.

Dari panel kiri ThemeRoller UI, seperti yang ditunjukkan di atas dua tangkapan layar, kita dapat memilih tema yang diperlukan menggunakan Galeri, dan menerapkan perubahan pada tema ini dengan menggunakan Gulirkan Sendiri.

Konfigurasi Pengaturan Komponen UI jQuery.

Pada langkah ini, kita dapat mengubah gaya untuk mengubah tema dengan preferensi yang kita pilih sendiri. Perubahan ini akan menciptakan efek pada gaya default menampilkan status interaksi pengguna seperti, normal, hover, dan status aktif. Tidak hanya gaya interaksi tetapi juga kita dapat mengubah pengaturan tema global untuk mengontrol gaya font yang umum dan dll.

Menerapkan perubahan berdasarkan preferensi yang dipilih pengguna merupakan tantangan yang sangat besar, dan ThemeRoller mengimplementasikan ini dengan CSS yang dibuat secara dinamis yang mampu memperbarui melalui penggunaan beberapa bahasa sisi server, seperti PHP.

Di sisi lain, kita dapat secara dinamis mengimpor pola khusus, tekstur dengan menggunakan aplikasi ini. Semua perubahan tersebut akan ditampilkan dalam pratinjau dengan ubin sisi kanan antarmuka jQuery ThemeRoller, seperti yang ditunjukkan di bawah ini misalnya.

Download dan Install jQuery Themeroller.

Sekali lagi, kami telah memilih tema favorit kami sendiri dari galeri dan melakukan perubahan berdasarkan kebutuhan, kami dapat mengunduh dengan menggunakan tombol Unduh yang disediakan dengan tab Roll Your Own. Ini akan mengarahkan kita ke halaman Download Builder, di mana kita dapat memilih dengan beberapa fitur kontrol antarmuka pengguna yang dipilih, sebelum mengunduh.

Setelah kami mengirimkan kontrol antarmuka pengguna yang dipilih untuk diunduh, maka file zip akan diunduh. File zip ini berisi file javascript jQuery jQuery yang dibutuhkan dan CSS. Semua gambar, pola, dan gaya yang digunakan dengan tema unduhan kami dikendalikan oleh CSS khusus.

Untuk mengintegrasikan ThemeRoller untuk situs web kami, kami perlu mengimpor file-file berikut ke dalam bagian kepala, setelah memastikan semua file tersebut disalin ke direktori situs web kami.

<link href="css/sunny/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>

Setelah itu, akan ada contoh file HTML index.html untuk referensi untuk mempelajari cara mendapatkan efek ThemeRoller dengan komponen UI kita sendiri.

 

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.