Verwenden der integrierten jQuery-Benutzeroberfläche in meinem Design

25

Für jede Seite meines Themas muss die Benutzeroberfläche von jquery verwendet werden. Ich weiß, dass es in Drupal 7 enthalten ist, aber ich kann die viel zu technische Dokumentation von Drupal nicht wirklich entschlüsseln. Es sieht so aus, als ob dies nur mit der Datei template.php möglich ist. Da ich diese Datei jedoch nicht verstehe, versuche ich, dies so zu vermeiden.

Gibt es eine andere Möglichkeit, oder sollte ich einfach die template.php-Datei ausprobieren?

7 theming javascript Ben
quelle
Was versuchst du zu machen? Alle Funktionen der jquery-Benutzeroberfläche und was nicht für Sie verfügbar sein sollte. Benutzerdefinierten JS-Code auf jeder Seite ausführen? Auf einer bestimmten Seite ausführen? ein bestimmtes Ereignis? Es gibt viele Möglichkeiten, JS zum Ausführen zu bringen, nämlich drupal_add_js
LSU_JBob
Ich versuche, .datepicker () für einige Felder zu verwenden, die auf jeder einzelnen Seite meines Themas angezeigt werden. Vielleicht später noch mehr.
Ben
@Ben Vergiss nicht, das Kopfgeld zu vergeben, wenn eine Antwort dein Problem gelöst hat.
googletorp
@googletorp Sorry, mein erstes Kopfgeld. Kopfgeld vergeben.
Ben
Ich habe das Gefühl, dass viele der Antworten den letzten Schritt auslassen, dass Sie, sobald Sie die drupal_add_library ('system', 'ui.button') oder was auch immer einfügen, eine oder zwei Zeilen Javascript zu Ihrem Thema hinzufügen müssen, das das Gesagte tatsächlich aufruft Plugin.
Ryan Price

Antworten:

36

Hinzufügen von JS zu einer Seite ist wirklich nicht so schwer, obwohl Sie PHP verwenden müssen.

Für normale JS-Dateien könnten Sie so etwas tun

drupal_add_js($path_to_js)

Drupal hat jedoch die jQuery-Benutzeroberfläche in Bibliotheken registriert, um das Hinzufügen von JS- und CSS-Dateien für bestimmte jQuery-Benutzeroberflächen-Plugins zu vereinfachen. Dies kann mit erfolgen

drupal_add_library($module, $library);

Alle Plugins für die jQuery-Benutzeroberfläche sind im Systemmodul vorhanden

drupal_add_library('system', 'ui');

oder

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

Einige dieser Plugins sind abhängig, da sie andere Plugins verwenden. Drupal handhabt dies sehr geschickt und wird die benötigten Komponenten enthalten.

Die vollständige Liste der jQuery-Plugins finden Sie hier . Dies ist als PHP-Array formatiert, aber im Allgemeinen lautet die Namenskonvention ui.PLUGIN-NAME.

Wenn Sie das JS auf jeder Seite hinzufügen müssen, können Sie einfach einen Vorverarbeitungs-Seiten-Hook hinzufügen und diese dort hinzufügen. Dies würde in der template.php-Datei ungefähr so ​​aussehen.

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
quelle
Ich habe versucht, genau das, was Sie hier haben, zu template.php hinzuzufügen (aber meinen Themennamen anstelle von NAME_OF_THEME zu verwenden), und es hat nicht funktioniert. Irgendwelche Ideen? Dies ist, was ich habe: function nocturnal_preprocess_page(&$variables) { drupal_add_library('system', 'ui'); drupal_add_library('system', 'ui.datepicker'); }
Ben
@ben Sie müssen den Cache jedes Mal löschen, wenn Sie einen neuen Hook oder eine neue Vorverarbeitungsfunktion hinzufügen. Versuchen Sie, den Cache zu leeren. Sie müssen auch testen, ob es funktioniert, da Sie nur JS-Dateien hinzufügen, die selbst nichts bewirken.
googletorp
Ich habe den Cache geleert und es sollte auf einigen Datumsfeldern funktionieren, die zuvor eine manuell referenzierte jquery-Benutzeroberfläche verwendeten. Debugging noch, kann aber bis jetzt nichts falsch machen.
Ben
@Ben Der erste Schritt ist, den Quellcode zu überprüfen und festzustellen, ob die Dateien enthalten sind (JS-Aggregation deaktivieren, falls
aktiviert
3
@googletorp: Könnten Sie den Unterschied zwischen drupal_add_library('system', 'ui');und etwas näher erläutern drupal_add_library('system', 'ui.accordion');? Holt der erste alles oder nur den Kern? Muss ich für jedes Plugin, das ich verwende, eine Leitung einrichten?
Jarl
4

Haben Sie das Modul date_popup ausprobiert ? funktioniert gut mit der Formular-API

LSU_JBob
quelle
Ich möchte kein Modul, da das Formular, das es benötigt, sehr komplex ist und eine benutzerdefinierte Codierung erfordert. Es ist in der Vorlage für das Thema fest programmiert. Ich versuche herauszufinden, wie ich die mit Drupal gelieferte jquery-Benutzeroberfläche am besten nutzen kann. Ich kann es nur zum Laufen bringen, indem ich es in den Ordner meines Themas lege und dort darauf verlinke. Da ich jedoch mehrere Sites auf einer Drupal-Installation betreibe und alle diese Sites eine jQuery-Benutzeroberfläche benötigen, wollte ich nur die integrierte jQuery-Benutzeroberfläche verwenden, um doppelte Arbeit zu vermeiden.
Ben
Sie sollten in der Lage sein, jedes JQuery-UI-Zeug von jeder Site aus aufzurufen und hinzuzufügen, es befindet sich im Drupal-Kern. Wird das Formular mit der Formular-API erstellt?
LSU_JBob
2
Warum ist das Formular in die Vorlagendateien integriert? Das ist nicht sehr heikel ... Wenn Sie die Formular-API nicht verwenden, verpassen Sie einige der Vorteile, wie die integrierte Sicherheit von SQL-Injection-Angriffen. Ich würde DRINGEND empfehlen, Ihre Formulare aus den Vorlagendateien zu entfernen und ein benutzerdefiniertes Modul zu schreiben, in dem Sie die Formulare mithilfe der Formular-API erstellen. Versuche kein Cowboy zu sein. In jedem Fall können Sie mit drupal_add_js von überall aus auf JavaScript verweisen. AND drupal_add_js ('/ misc / ui / jquery.ui.datepicker.js', 'file');
LSU_JBob
3
Erstellen Sie das Formular in einem benutzerdefinierten Modul mit der Formular-API und rufen Sie dann in den tpl-Dateien den Befehl render (drupal_get_form ('form_id') auf. Ich verspreche, dass die Form-API, möglicherweise mit einem benutzerdefinierten Javascript, jede komplexe Anforderung bewältigen kann, die Sie haben. Ich habe das Gefühl, Sie machen sich die Sache nur schwerer, indem Sie versuchen, all diese Funktionen in eine tpl-Datei zu packen. Das ist technisch gesehen die Themenebene, daher ist es nicht empfehlenswert, große Mengen funktionalen Back-End-Codes darin abzulegen.
LSU_JBob
3
Ich denke er sagt CREATE a module. Funktionale Dinge gehören wie Formen zu Modulen. Mit der Formular-API können Sie jede Art von Formular erstellen, die Sie sich in Ihrem eigenen benutzerdefinierten Modul vorstellen können. Das Thema sollte in den meisten Fällen unabhängig von der Funktionalität sein. Das gibt Ihnen mehr Flexibilität auf der Straße.
Jonathan Rowny
4
  1. Refaktorieren Sie Ihr fest codiertes Formular in der .tpl-Datei in eine Form API-Implementierung. Wie @LSU_JBob sagte, gibt es keinen Grund, warum Sie ein Formular ohne FAPI erstellen sollten. Ich empfehle, dass Sie die Form API-Kurzanleitung lesen und die Form API-Referenzseite mit einem Lesezeichen versehen .
  2. Sobald Sie Ihr Formular erstellt haben und in der Lage sind, Werte an es zu übermitteln, es zu verarbeiten usw., laden Sie den Code im Modul " Datum des Beitrages" herunter und lesen Sie ihn . Datum wird verwendet, um die Art von Datums-Popup bereitzustellen, die Sie erstellen möchten, jedoch für CCK in D6 und Kernfelder in D7. Obwohl Sie nicht mit Feldern arbeiten möchten, verwendet das Date-Modul die JQuery-Benutzeroberfläche, um das zu erreichen, was Sie versuchen. Dieses Modul sollte Ihnen ein solides Beispiel geben.
Amateur Barista
quelle
Vielen Dank. Diese Links sind hilfreich. Ich mag es nicht wirklich, in PHP einzusteigen, aber ich denke, ich muss genau das tun, was ich in diesem Fall tun möchte. Ich werde es wahrscheinlich nur aus Zeitgründen in der tpl-Datei behalten, da ich im Moment nicht die Zeit habe, Drupal PHP zu lernen. Guter Rat von allen.
Ben
3

Vielen Dank googletorpfür die Beantwortung.

Nur um hinzuzufügen, wenn die Dinge im Zusammenhang mit der Aktivierung von UI-Plugins noch nicht ganz klar sind .

Beachten Sie Folgendes, wenn Sie erwähnen: drupal_add_library('system', 'ui');
Dadurch werden NICHT alle UI-Plugins automatisch aktiviert.

Eine Liste der verfügbaren JQuery-UI-Plugins in Drupal 7 finden Sie hier: /misc/ui/

Um beispielsweise ein bestimmtes Plugin zu aktivieren jquery.ui.slider.min.js, müssen Sie folgende Zeile hinzufügen:

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

Hoffe das ist nützlich.

Sumoanand
quelle
2

Ich hatte vor kurzem dieses Problem. Jemand gab mir sein benutzerdefiniertes Modul, mit dem ich JQuery UI auf jeder Seite laden musste. Sie können es einfach neu erstellen. Installieren Sie zuerst jquery_update und stellen Sie sicher, dass es funktioniert. Dann erstelle und aktiviere dieses Modul:

Erstellen Sie einen Ordner mit dem Namen 'jquery_force' im Pfad / to / modules.

Fügen Sie im Inneren zwei Dateien hinzu:

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
quelle
2

Das Hinzufügen eines Vorverarbeitungs-Hooks in die template.phpDatei hat bei mir nicht funktioniert.

Ich stelle es einfach von selbst drupal_add_library('system', 'ui');in die template.phpDatei, funktioniert.

user17418
quelle