Die Integration von jQuery, jQuery UI und jQuery-Themen mit dem Zend Framework

Update: diese Frage bezieht sich auf eine ältere version des Zend Frameworks. Um zu sehen, wie zu integrieren jQuery mit dem Zend Framework 1.9.4 (1.8+) Anwendung siehe zu dieser Frage.

Ich glaube, ich verstehe die grundlegenden Konzepte, aber ich muß schiefgehen. Ich bin versucht zu integrieren jQuery, jQuery UI und jQuery-Themen in meiner Zend-Framework-Anwendung.

In meiner bootstrap, ich bin die Registrierung der jQuery view helper:

$view->addHelperPath(self::$root . '/library/ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');

In meinem Formular habe ich ein date-picker-element:

$date = new ZendX_JQuery_Form_Element_DatePicker('date');

Und in meinem layout, ich bin dem Aufruf der jQuery view helper:

<head>
    <?= $this->jQuery() ?>
</head>

Sobald ich fertig bin, kann ich eigentlich verwenden Sie die Datumsauswahl. Das problem ist nur, der Kalender ist Total versaut. Nicht korrekt angezeigt werden kann überhaupt.

Was ich verstehen, die javascript-Dateien werden automatisch berücksichtigt (und die von Google gehostet werden). Also, um die Verwendung der verschiedenen Designs (von ThemeRoller) Sie haben den host für die js und css Dateien auf Ihrem eigenen server. Welcher Prozess sollte ich, um meine Datumsauswahl, um ein anderes Thema?

Update: ich es geschafft habe dies zu tun. Aber ich bin mir nicht sicher, ob dies ist die effektivste Art und Weise.

<head>
<? //I couldn't get this way to work
   //$this->jQuery()->addStylesheet('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css');
   //But this way works
   $this->jQuery()->addStylesheet('/js/jquery/themes/ui-lightness/jquery-ui-1.7.1.custom.css')
              ->setLocalPath('/js/jquery/js/jquery-1.3.2.min.js')
              ->setUiLocalPath('/js/jquery/js/jquery-ui-1.7.1.custom.min.js') ?>
    <?= $this->jQuery() ?>
</head>

InformationsquelleAutor Andrew | 2009-04-14

3

Mithilfe der ZendX_JQuery_View_Helper_JQuery view Helfer (natürlich können Sie sich auch registrieren Sie das stylesheet mit dem Zend_View_Helper_HeadStyle view Helfer, aber mit der jQuery view helper wird sichergestellt, dass das stylesheet ist nur inbegriffen, wenn jQuery aktiviert ist) Sie können sich registrieren, ein stylesheet serviert von der Google CDN:
```
$view->jQuery()->addStylesheet('http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/smoothness/jquery-ui.css');
```
Glätte ist das Thema Namen nach dem jQuery UI-ThemeRoller Galerie. Sehen jQuery-UI-1.7.1 release announcment blog-post weitere theme-urls.

Übrigens, ich würde vorschlagen, um jQuery-aktivieren Sie die Ansicht mithilfe ZendX_JQuery::enableView($view). Ich persönlich denke, dass dies viel deutlicher Ansatz.

was bedeutet ZendX_JQuery::enableView() zu tun? Ist das etwas anderes als das hinzufügen der view Helfer Pfad der view?
Im moment: Nein. Es wird überprüft, ob der Pfad ist bereits registriert und registriert sich der Pfad, wenn nicht. Aber es ist weniger code eingeben und jeder den code anzuschauen, kann sich vorstellen, was diese Zeile tut. Es ist wirklich nur eine Frage der Vorliebe.
Hmm - scheint das directory-listing deaktiviert ist auf dieser url-Ressource 'ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes' ist es ein Weg, um herauszufinden, eine Liste aller Themen, die verfügbar sind?
Siehe hier: blog.jqueryui.com/2009/03/jquery-ui-171 Google Ajax Libraries API > Themes (verfügbare Themen sind die standard diejenigen, die in der ThemeRoller-gallery: jqueryui.com/themeroller)
Wie kann ich das media-Attribut über die zend-API? Ich muss in der Lage sein, zu definieren, zu drucken.css und sorgen für den media="print" - Attribut gesetzt ist, in der endgültigen gerenderten html. e.g <link href="bla bla bla.css" type="text/css" media="print"/>

InformationsquelleAutor Stefan Gehrig
0

Wenn Sie mit dem Google-CDN, Sie müssen nur der host .css-Dateien auf Ihrem eigenen server. Ich weiß nicht, ob ZendX_Jquery verwendet. Und das sollte alles sein, um es arbeiten. Kannst du mehr code (z.B. den Quellcode der gerenderten Seite), wenn meine Antwort nicht dir nicht helfen?

InformationsquelleAutor Till
0

Ich glaube, Sie müssen laden Sie die jquery ui css-Dateien. Extrahieren Sie die css-Dateien aus dem zip und stellen Sie Sie lokal in Ihrem zend-app. Ich fügte hinzu, die Dateien zu " [Your_zend_project_root]\public\js\'. In Ihrem layout.phtml-Datei die 'addStylesheet ()' - Methode zum hinzufügen der Pfade zu den lokalen css-Dateien. Sie müssen die spezifischen Pfad für das Thema name, den Sie ausgewählt.
```
<?php echo $this->jQuery()
    ->setUiVersion('1.7.2')
    ->addStylesheet('/js/jquery-ui-1.7.2/development-bundle/themes/ui-lightness/jquery-ui-1.7.2.custom.css');?>
```
InformationsquelleAutor emeraldjava

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.