Author Topic: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)  (Read 11793 times)

mr-fan

  • Guest
Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« on: May 03, 2010, 09:33:43 PM »
Tja,

zwar ist die Doku von Bianka sehr sehr gut und auch ausführlich, aber ich hab trotzdem das ganze noch mal in lockerer Sprache und mit einem einfachen anderen Beispiel zu einem Tutorial verbastelt.

viel Spaß damit!

http://www.websitebakers.de/tutorials/topics/jqueryadmin---lieblings-jquery-plugins-einfach-nutzen.php

Offline anz

  • Posts: 76
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #1 on: May 12, 2010, 12:04:22 PM »
Das Tutorial ist super geschrieben. Trotzdem klappt es bei mir noch nicht. Möchte möglichst einfach mal ein jquery plugin einbinden und mich dann ins Thema verteifen. Ich habe folgendes gemacht:

1. jqueryadmin installiert
2. das fertige Plugin jquery-corners-2-0-9 hinzugefügt
3. Unter Optionen/Fusszeile [[jQueryInclude]] eingefügt
4. DIV auf Seite eingefügt und mit gesetzten Klassen versehen

Habe ich etwas vergessen?

mr-fan

  • Guest
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #2 on: May 12, 2010, 12:09:36 PM »
hast einen link? meine glaskugel is defekt  :wink:

oder mehr infos...kopierter Wysiwyg teil usw.

Grüße Martin

erpe0812

  • Guest
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #3 on: May 12, 2010, 12:13:44 PM »
und die mitgelieferten Hilfe Dateien kann man vom Backend aus aufrufen.
Einfach mal auf die kleine Lampe klicken...

Gruss

erpe

Online dbs

  • Betatester
  • **
  • Posts: 7851
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #4 on: May 12, 2010, 12:48:47 PM »
das wollt ich nun auch mal testen.
hab es mit reflex (http://www.netzgesta.de/reflex/) probiert (nur eine js).
und es ist wirklich easy :-)

edit: würde aber vorschlagen, dass die plugin-namen kurz bleiben und versionsnummern in die readme.html verschwinden
« Last Edit: May 12, 2010, 12:53:49 PM by dbs »

Offline anz

  • Posts: 76
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #5 on: May 12, 2010, 01:01:01 PM »

erpe0812

  • Guest
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #6 on: May 12, 2010, 01:37:55 PM »
schau mal unten in den genrierten Quelltext:
Quote
<!-- jQueryAdmin: unable to load preset [&lt;corners&gt;] -->

Gruss

erpe


Offline anz

  • Posts: 76
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #7 on: May 12, 2010, 01:49:21 PM »
hmm... klingt nicht gut!

kannst du mir weiterhelfen? ich habe im WYSIWYG auf der entsprechenden Seite ganz oben folgendes eingefügt:
[[jQueryInclude?preset=<corners>]]

Das preset habe ich corners also corners.jquery benennt! So müsste es doch gehen oder?
« Last Edit: May 12, 2010, 01:51:03 PM by anz »

mr-fan

  • Guest
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #8 on: May 12, 2010, 01:51:35 PM »
vergiss die ecken <>  das sollte nur andeuten das da was eigenes hin soll!!

also so [[jQueryInclude?preset=corners]]

passt das!!

mfg martin

Offline anz

  • Posts: 76
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #9 on: May 12, 2010, 02:02:02 PM »
habs geändert, aber es funktioniert immer noch nicht  :?

muss übrigens in der fusszeite unter optionen folgendes stehen [[jQueryInclude]] ?

hast du noch eine idee??

Online dbs

  • Betatester
  • **
  • Posts: 7851
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #10 on: May 12, 2010, 02:41:17 PM »
da wird einiges mehrfach geladen bei dir.
wenn du unter optionen/fußzeile das droplet [[jQueryInclude]] setzt, dann brauchst du es nirgendwo nochmal zu setzen.
das droplet ruft die default.jquery auf, also sollte in dieser datei das corner-zeugs drinstehen. ist es so?
« Last Edit: May 12, 2010, 02:47:10 PM by dbs »

mr-fan

  • Guest
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #11 on: May 12, 2010, 02:47:25 PM »
jo ist so...

lösch mal _alle_ aufrufe raus!

dann mach _einen_ aufruf der so aussieht!

[[jQueryInclude?plugin=hierstehtdernamedesplugins]]  z.b. corner oder corners => siehe jQueryAdmin Liste der name dort!

oder erstelle dir ein Preset (eine allgemeine voreinstellung mit der du mehrere plugins "verbinden" kannst) und hacken bei corners plugin!

dann das hier

[[jQueryInclude?preset=hierstehtdernamedespresets]]

beachte: Groß u. kleinschreibung! - 1:1 namen - aufrufe entweder nur im footer (dieser muss im template auch verwendet werden!) _oder_ direkt auf der seite!

hoffe du kriegst das hin...

mfg martin

erpe0812

  • Guest
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #12 on: May 12, 2010, 02:48:06 PM »
und stelle sicher, dass du php > 5.2 hast

Gruss

erpe

Offline anz

  • Posts: 76
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #13 on: May 12, 2010, 03:22:12 PM »
also ich habe folgendes versucht:

1. Alle Aufrufe auf den Seiten gelöscht und nur folgendes unter Optionen/Fusszeile eingefügt [[jQueryInclude]]
So sollte es doch klappen oder? Im JQueryAdmin habe ich bei default.jquery den Hacken beim corner plugin gesetzt s. Screenshot! Dort muss ich alle Plugins auswählen, die standardmässig geladen werden sollen oder?

2. Auch den Aufruf auf der WYSIWIG Seite klappt nicht, also: [[jQueryInclude?preset=corners]]
Ev. stimmt was im JQueryAdmin Bereich nicht? S. Screenshot

Ich habe auch die neueste PHP Version, daran sollte es also nicht liegen.

Es wird immer noch alles doppelt geladen, warum auch immer.... :-(



[gelöscht durch Administrator]
« Last Edit: May 12, 2010, 03:28:22 PM by anz »

Online dbs

  • Betatester
  • **
  • Posts: 7851
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #14 on: May 12, 2010, 04:17:46 PM »
eigentlich hast du alles richtig gemacht.
im admin auf default.jquery klicken, dann alle plugins anhaken die man möchte, dann speichern
unter optionen/fusszeile nur [[jQueryInclude]] eintragen
im wysiwyg das anlegen:
Code: [Select]
<div class="bevel" style="margin: 5px 5px 5px 150px; padding: 5px; text-align: center; background-color: red; width: 300px;">
<h1>Round</h1>
<p>CSS&nbsp;Klasse bevel</p>

so hab ich es getan und so hat es sofort geklappt.

hast du vorher noch andere wege benutzt um jquery in deine webseite  einzubinden?

Offline anz

  • Posts: 76
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #15 on: May 12, 2010, 04:25:25 PM »
Danke schon mal für deine Antwort.

Ja ich habe vorher jquery auf eine andere Art eingebunten:
<?php
if (function_exists('register_frontend_m odfiles')) {
        register_frontend_m odfiles('css');
        register_frontend_m odfiles('jquery');
        register_frontend_m odfiles('js');
} ?>

Habe das aber alles im Header des Templates gelöscht.


Online dbs

  • Betatester
  • **
  • Posts: 7851
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #16 on: May 12, 2010, 04:28:43 PM »
alles? hoffe nur das gelöscht/auskommentiert:
Code: [Select]
register_frontend_m odfiles('jquery');
inzwischen geht es ja bei dir. :-)

Offline anz

  • Posts: 76
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #17 on: May 12, 2010, 04:29:47 PM »
Ich habe den Fehler gefunden!!! Im Head hatte ich den Analytics Code eingefügt!!! Nachdem ich das gelöschte habe, hat alles funktioniert! Juhuuu jetzt kann ich endlich loslegen und versuchen ein Portfolio Plugin zu erstellen!

Danke nochmals für die Hilfe!!

Offline anz

  • Posts: 76
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #18 on: May 12, 2010, 04:31:46 PM »
Aber das brauche ich doch mit dem JQueryAdmin Teil jetzt def. nicht mehr? oder?

<?php
if (function_exists('register_frontend_m odfiles')) {
        register_frontend_m odfiles('css');
        register_frontend_m odfiles('jquery');
        register_frontend_m odfiles('js');
} ?>

mr-fan

  • Guest
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #19 on: May 12, 2010, 04:34:09 PM »
nein - wie dbs sagte nur die eine zeile brauchst du nicht mehr!

alles? hoffe nur das gelöscht/auskommentiert:
Code: [Select]
register_frontend_m odfiles('jquery');
inzwischen geht es ja bei dir. :-)

mfg martin

schön das es klappt.....dachte mir das da noch anderes dazwischenfunkt... :wink:

Offline anz

  • Posts: 76
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #20 on: May 12, 2010, 04:44:10 PM »
Okay, vielen Dank an alle für die tolle Hilfe!


Offline BlackBird

  • Posts: 2573
Re: Ein Plugin für den jQueryAdmin aufbereiten! (Tutorial)
« Reply #21 on: July 14, 2010, 05:11:32 PM »
Plugin anpassen für jQueryAdmin v2.x

Version 2.x kann im Backend einen Konfigurationsdialo g für ein Plugin anzeigen, wenn dieses entsprechend gestaltet ist. Hierzu sind folgende Anpassungen nötig:

Datei default.preset

Diese beinhaltet normalerweise alles, was zum Laden des Plugins notwendig ist. Bezogen auf Martins Tutorial sieht die Datei so aus (hier aus dem PageSlide Plugin):

Code: [Select]
<script type="text/javascript" src="{WB_URL}/modules/jqueryadmin/plugins/pageslide/jquery.pageslide.min.js"></script>
<!-- Pageslide Setting below -->
<script typ="text/Javascript">
$(document).ready(function() {
    $("#slide-left").pageSlide({ width: "350px", direction: "left" });
    $("#slide-right").pageSlide({ width: "350px", direction: "right" });
});
</script>

Aus dieser Datei nimmt man den Teil ab <!-- Pageslide Setting below --> und verschiebt ihn in eine Datei loader.preset.

Datei default.preset aufteilen

default.preset
Code: [Select]
<script type="text/javascript" src="{WB_URL}/modules/jqueryadmin/plugins/pageslide/jquery.pageslide.min.js"></script>

loader.preset
Code: [Select]
<!-- Pageslide Setting below -->
<script typ="text/Javascript">
$(document).ready(function() {
    $("#slide-left").pageSlide({ width: "350px", direction: "left" });
    $("#slide-right").pageSlide({ width: "350px", direction: "right" });
});
</script>

Durch diese Trennung ist es auch möglich, individuelle Anpassungen zu machen, ohne den Standard zu überschreiben. Hierzu kopiert man einfach die Datei loader.preset in eine Datei custom.preset, in der man dann seine Anpassungen vornimmt.

Einstellungen für das Backend konfigurierbar machen

Der nächste Teil ist zugegebenermaßen etwas komplizierter. Damit jQueryAdmin aus der loader.preset die verfügbaren Optionen auslesen und als Konfigurationsdialo g darstellen kann, müssen diese alle und in einem bestimmten Format dort aufgeführt sein.

Am einfachsten ist es, wenn der Plugin-Autor die verfügbaren Optionen auf seiner Homepage bereits in diesem Format aufgeführt hat. Das ist zum Glück recht oft der Fall.

Für PageSlide sieht das so aus:

Code: [Select]
<!-- Pageslide Setting below -->
<script typ="text/Javascript">
$(document).ready(function() {
    $j("#slide-left").pageSlide({
        width:          "350px", // Accepts fixed widths
        duration:       "normal", // Accepts standard jQuery effects speeds (i.e. "fast", "normal" or milliseconds)
        direction:      "left", // slide direction "left" or "right"; default direction is "left"
        modal:          false, // if true, the only way to close the pageslide is to define an explicit close class; default is false
    });
    $j("#slide-right").pageSlide({
        width:          "350px", // Accepts fixed widths
        duration:       "normal", // Accepts standard jQuery effects speeds (i.e. fast, normal or milliseconds)
        direction:      "right", // default direction is left
        modal:          false, // if true, the only way to close the pageslide is to define an explicit close class
    });
});
</script>

Das Format ist eigentlich ganz einfach: Jede Zeile beinhaltet genau eine Option. Dahinter ist, durch // abgetrennt, die Beschreibung. (Immer alles in einer Zeile!)

Also:
width:          "350px", // Accepts fixed widths
<Option>:    <Einstellung>, // Erklärung

Auch hier gilt wie immer: Abgucken!

Was macht das komische $j da? Sollte das nicht nur $ heißen?

jQuery hat einen "no conflict"-Modus.

Quote
To avoid conflict when you are using multiple libraries in a website, you can use this jQuery Method, and assign a different variable name instead of the dollar sign.

   1. var $j = jQuery.noConflict(); 
   2. $j('#myDiv').hide(); 
http://www.queness.com/post/172/jquery-tips-and-tricks-ii

Der ist z. B. notwendig, wenn man jQueryAdmin im Backend verwenden möchte, weil dort schon eine jquery.min.js eingebunden ist. Daher sollten alle Plugins $j(...) statt $(...) verwenden. Es geht aber auch wie bisher mit $(...).

Zuguterletzt legt man noch eine Datei config.php in das Plugin-Verzeichnis. (Dorthin, wo auch schon die default.preset und die neue loader.preset liegen.) Diese hat folgenden Inhalt:

<?php ?>

(Ja, wirklich leer, nur <?php ?>.)

Was soll der Quatsch?

Naja, man kann in der config.php zwei sogenannte "Reguläre Ausdrücke" definieren, anhand derer jQueryAdmin den Teil ausfiltern kann, der die Optionen beinhaltet. Da die meisten Plugins so geladen werden:

$("<Selektor>").<Name>({
    .....Optionen.....
});

(z. B. $(".colorbox").colorbox({ ... });)

kann jQueryAdmin diese Variante immer erkennen. Nur in Sonderfällen muß man daher eigene RegExp mitliefern. Da sollten sich dann aber auch nur Fachleute dran wagen. (Man darf mich um Hilfe bitten. :roll:)

Das war's!

Ich vermute, Martin wird das gelegentlich nochmal so erklären, daß man es auch versteht. ;)
« Last Edit: July 14, 2010, 05:34:31 PM by BlackBird »