Menggunakan UI jQuery bawaan di tema saya

25

Setiap halaman tema saya perlu menggunakan UI jquery. Saya tahu ini termasuk dalam Drupal 7, tetapi saya tidak bisa menguraikan dokumentasi cara Drupal terlalu teknis. Sepertinya satu-satunya cara untuk melakukannya adalah dengan file template.php. Tetapi karena saya tidak mengerti file itu, saya berusaha menghindari melakukannya dengan cara itu.

Apakah ada cara lain, atau haruskah saya mencoba file template.php?

Ben
sumber
Apa yang sedang Anda coba lakukan? Semua fungsi UI jquery dan yang tidak seharusnya tersedia untuk Anda. Jalankan kode JS khusus pada setiap halaman? Jalankan di halaman tertentu? acara tertentu? Ada banyak cara untuk mengeksekusi JS, yaitu drupal_add_js
LSU_JBob
Saya mencoba menggunakan .datepicker () pada beberapa bidang yang muncul di setiap halaman di tema saya. Mungkin nanti ada beberapa hal lagi.
Ben
@Ben Ingatlah untuk memberikan hadiah itu jika jawaban memecahkan masalah Anda.
googletorp
@googletorp Maaf, karunia pertamaku. Hadiah diberikan.
Ben
Saya merasa seperti banyak jawaban meninggalkan langkah terakhir, bahwa begitu Anda memasukkan drupal_add_library ('system', 'ui.button') atau apa pun, Anda perlu menambahkan satu atau dua baris javascript ke tema Anda yang benar-benar memanggil kata plugin.
Ryan Price

Jawaban:

36

Menambahkan JS ke halaman benar-benar tidak sulit, walaupun Anda harus menggunakan php.

Untuk file JS normal, Anda bisa melakukan sesuatu seperti ini

drupal_add_js($path_to_js)

Namun Drupal telah mendaftarkan jQuery UI ke perpustakaan sehingga lebih mudah untuk menambahkan file JS dan CSS untuk plugin jQuery UI tertentu. Ini bisa dilakukan menggunakan

drupal_add_library($module, $library);

Semua plugin jQuery UI ada di modul sistem, jadi Anda bisa melakukannya

drupal_add_library('system', 'ui');

atau

drupal_add_library('system', 'ui.accordion');

Beberapa plugin ini memiliki dependensi karena mereka menggunakan plugin lain. Drupal menangani ini dengan sangat cerdik dan akan termasuk komponen yang dibutuhkan.

Anda dapat melihat daftar lengkap plugin jQuery di sini . Ini diformat sebagai array PHP, tetapi umumnya konvensi penamaan adalah ui.PLUGIN-NAME.

Jika Anda perlu menambahkan JS pada setiap halaman Anda bisa menambahkan pengait halaman preproses dan menambahkannya di sana. Ini akan terlihat seperti ini di file template.php.

function NAME_OF_THEME_preprocess_page(&$variables) {
  drupal_add_library('system', 'ui');
  drupal_add_library('system', 'ui.accordion');
  drupal_add_library('system', 'effects.highlight');
}
googletorp
sumber
Saya mencoba menambahkan apa yang Anda miliki di sini (tetapi menggunakan nama tema saya sebagai ganti NAME_OF_THEME) ke template.php dan tidak berfungsi. Ada ide? Inilah yang saya miliki: function nocturnal_preprocess_page(&$variables) { drupal_add_library('system', 'ui'); drupal_add_library('system', 'ui.datepicker'); }
Ben
@ben Anda perlu menghapus cache setiap kali Anda menambahkan fungsi hook atau preprocess baru. Coba bersihkan cache. Anda juga perlu cara untuk menguji apakah itu berhasil, karena Anda hanya menambahkan file JS yang tidak akan melakukan apa pun sendiri.
googletorp
Saya menghapus cache, dan itu harus bekerja pada beberapa bidang tanggal yang sebelumnya menggunakan UI jquery yang direferensikan secara manual. Masih melakukan debugging, tetapi sejauh ini tidak menemukan kesalahan.
Ben
@Ben Langkah pertama adalah melihat sumber dan melihat apakah file telah disertakan (nonaktifkan agregasi JS jika dihidupkan)
googletorp
3
@googletorp: Bisakah Anda menguraikan sedikit perbedaan antara drupal_add_library('system', 'ui');dan drupal_add_library('system', 'ui.accordion');? Apakah yang pertama mengambil semuanya atau hanya inti? Apakah saya perlu garis untuk setiap plugin yang saya gunakan?
Jarl
4

Sudahkah Anda mencoba modul date_popup ? berfungsi baik dengan form API

LSU_JBob
sumber
Saya tidak ingin modul karena formulir yang membutuhkannya sangat kompleks dan memerlukan pengkodean khusus. Sulit dikodekan ke dalam templat untuk tema. Saya mencoba mencari cara terbaik untuk memanfaatkan UI jquery yang dikirimkan bersama Drupal. Satu-satunya cara saya bisa membuatnya bekerja adalah dengan meletakkannya di folder tema saya dan tautan ke sana. Tapi Karena saya menjalankan beberapa situs pada satu instalasi Drupal, dan semua situs ini akan memerlukan jQuery UI, saya ingin menggunakan UI jQuery bawaan untuk mencegah duplikat pekerjaan.
Ben
Anda harus dapat memanggil hal-hal jquery ui dari situs mana pun dan menambahkannya, itu dalam inti drupal. Apakah formulir dibuat dengan API Formulir?
LSU_JBob
2
Mengapa formulir dibuat di dalam file templat? itu tidak terlalu drupaly ... jika Anda tidak menggunakan bentuk API Anda kehilangan beberapa manfaat, seperti keamanan bawaan dari serangan injeksi SQL. Saya SANGAT menyarankan untuk mengeluarkan formulir Anda dari file templat dan menulis modul khusus tempat Anda membuat formulir menggunakan API Formulir. Cobalah untuk tidak menjadi koboi. Dalam hal apa pun, Anda dapat mereferensikan javascript dari mana saja menggunakan drupal_add_js, sesuatu seperti drupal_add_js ini ('/ misc / ui / jquery.ui.core.min.js', 'file'); DAN drupal_add_js ('/ misc / ui / jquery.ui.datepicker.js', 'file');
LSU_JBob
3
Buat formulir dalam modul khusus menggunakan API Formulir, lalu di file tpl panggil render (drupal_get_form ('form_id')); Saya berjanji formulir api, mungkin dengan beberapa javascript kustom, dapat menangani persyaratan kompleks yang Anda miliki. Saya merasa seperti Anda hanya mempersulit diri sendiri dengan mencoba menjejalkan semua fungsi ini ke dalam file tpl. Itu secara teknis lapisan tema, jadi bukan praktik terbaik untuk memasukkan potongan besar kode back-end fungsional di dalamnya.
LSU_JBob
3
Saya pikir dia mengatakan BUAT modul. Hal-hal fungsional, seperti formulir, termasuk dalam modul. API Formulir memungkinkan Anda membuat segala bentuk yang dapat Anda bayangkan dalam modul khusus Anda sendiri. Tema harus independen dari fungsi dalam banyak kasus. Itu akan memberi Anda lebih banyak fleksibilitas di jalan.
Jonathan Rowny
4
  1. Refactor formulir hard-coded Anda di file .tpl ke implementasi API Formulir. Seperti yang dikatakan @LSU_JBob, tidak ada alasan mengapa Anda harus membuat formulir tanpa menggunakan FAPI. Saya sarankan Anda membaca Panduan Cepat API Formulir , dan mem-bookmark halaman referensi API Formulir .
  2. Setelah formulir Anda dibuat dan Anda dapat mengirimkan nilai ke dalamnya, memprosesnya, dll., Unduh dan baca kode dalam modul kontribus Tanggal . Date digunakan untuk memberikan jenis popup tanggal yang ingin Anda buat, tetapi untuk CCK di D6 dan Core Fields di D7. Meskipun Anda tidak ingin bekerja dengan bidang, modul Date menggunakan JQuery UI untuk mencapai apa yang Anda coba lakukan. Modul ini harus memberi Anda contoh yang solid.
barista amatir
sumber
Terima kasih. Tautan tersebut sangat membantu. Saya benar-benar tidak suka masuk ke PHP, tapi saya kira untuk melakukan persis apa yang ingin saya lakukan dalam hal ini, saya harus. Saya mungkin hanya menyimpannya di file tpl untuk kepentingan waktu, karena saya tidak punya waktu untuk belajar PHP Drupal saat ini. Saran yang bagus dari semua orang.
Ben
3

Terima kasih googletorptelah menjawab ini.

Hanya untuk menambahkan, jika ada hal-hal yang masih belum jelas terkait dengan mengaktifkan plugin UI .

Harap perhatikan bahwa ketika Anda akan menyebutkan: drupal_add_library('system', 'ui');
Ini TIDAK akan mengaktifkan semua plugin ui secara otomatis.

Anda dapat menemukan daftar plugin jquery ui yang tersedia di drupal 7 di sini: /misc/ui/

Untuk mengaktifkan plugin terkait, forexample:, jquery.ui.slider.min.jsAnda perlu menambahkan baris ini:

drupal_add_library('system', 'ui.slider');

Semoga ini bermanfaat.

Sumoanand
sumber
2

Saya punya masalah ini baru-baru ini. Seseorang memberi saya modul khusus mereka untuk memaksa JQuery UI memuat pada setiap halaman. Anda dapat membuatnya ulang secara sederhana. Pertama, instal jquery_update dan pastikan itu berfungsi. Kemudian, buat & aktifkan modul ini:

Buat folder di jalur / ke / modul bernama 'jquery_force'.

Di dalam, tambahkan dua file:

jquery_force.info :

name = JQuery UI Force
description = Forces JQuery UI to always load
dependencies[] = jquery_update
package = User Interface
core = 7.x
files[] = jquery_force.module

jquery_force.module :

<?php
/**
 * @file jquery_force.module
 * TODO: Enter file description here.
 */

/**
 * Implements hook_init().
 */
function jquery_force_init() {
    drupal_add_library('system', 'ui');
}
mtro
sumber
2

Menambahkan kait preproses dalam template.phpfile tidak berhasil untuk saya.

Saya hanya memasukkan drupal_add_library('system', 'ui');ke dalam template.phpfile dengan sendirinya, bekerja.

pengguna17418
sumber