Hallo,
ich hänge hier mal wieder.
Ich möchte diese drei Button im Stil des "Bearbeiten-Buttons" machen.
{$post['button_quote_fast']}
{$post['button_quote']}
{$post['button_multiquote']}
Das erste ist von einem Zitat-Plugin, wo man Zitate per Textmakierung einfügen kann.
Was ich brauche ist das platzschonendes Popupmenü, genau so wie es ist wenn man auf "Bearbeiten" klickt. Klickt man dort rauf, folgen zwei weitere Menüpunkte mit "Inline" und "Zum Editor".
Als Übermenüpunkt habe ich versucht "Zitieren" auszuwählen und da wollte ich dann die 3 Button auch unterbringen. Irgendwie komme ich aber nicht so recht mit dem Javascript klar.
Muss ich hier ein extra CSS-Element erstellen oder kann ich das von der Funktion verwenden?
Das ganze sieht übrigens so aus:
Code:
<a href="editpost.php?pid={$post['pid']}" id="edit_post_{$post['pid']}" title="{$lang->postbit_edit}" class="postbit_edit"><span>{$lang->postbit_button_edit}</span></a>
<div id="edit_post_{$post['pid']}_popup" class="popup_menu" style="display: none;"><div class="popup_item_container"><a href="javascript:;" class="popup_item quick_edit_button" id="quick_edit_post_{$post['pid']}">{$lang->postbit_quick_edit}</a></div><div class="popup_item_container"><a href="editpost.php?pid={$post['pid']}" class="popup_item">{$lang->postbit_full_edit}</a></div></div>
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
$("#edit_post_{$post['pid']}").popupMenu();
}
// -->
</script>
Ich habe da versucht plumb zwischen die popup_intem_container die drei Button einzufügen und habe lediglich die ID und das href von dem ersten link geändert, sowie natürlich auch im Javascript. Vielleicht braucht man das gar nicht?
Viele Grüße
Mathias
Hallo,
Muß es denn zwingend Javascript sein? Wenn Du die Unterpunkte beim Hover bereits anzeigst, lässt sich das mit reinem CSS bewerkstelligen.
Du benötigst als erstes den Aufbau, den ich als Liste empfehle:
Code:
<ul class="quotemenu">
<li><span>Zitieren</span>
<ul>
<li>{$post['button_quote_fast']}</li>
<li>{$post['button_quote']}</li>
<li>{$post['button_multiquote']}</li>
</ul>
</li>
</ul>
Den ganzen Kram einfach als Button stylen
( hier nur mal grob, ohne Bezug auf andere Buttons ):
Code:
UL.quotemenu { display:inline-block; }
UL.quotemenu UL > LI,
UL.quotemenu SPAN { border:1px solid #333; background:#999; color:#fff; }
UL.quotemenu SPAN { padding:2px 5px; border-radius:5px; }
UL.quotemenu UL { display:none; margin:1px 0 0 0; padding:0; }
UL.quotemenu LI { display:inline-block; padding:5px 10px; cursor:pointer; }
UL.quotemenu UL > LI { display:block; }
UL.quotemenu UL LI:hover { color:#000; }
UL.quotemenu > LI:hover > UL { display:block; }
...und das war's prinzipiell schon. Links fehlen vermutlich schon, weiß grad nicht, ob die bereits in $post[...] enthalten sind bzw. als <button>-Tag vorhanden sind. Ein bisschen anpassen sollte aber reichen, um den Effekt zu erzielen.
Gruß Arne
ps: auf Wunsch schaue ich mir das gern mal genauer an und schreib Dir was dafür
In meinem Beispiel habe ich alle Buttons, außer den Edit Button, gelöscht und alle anderen in ein Popup gelegt.
So sieht es bei mir im postbit aus.
Statt
Code:
<div class="postbit_buttons post_management_buttons float_right">
{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
</div>
habe ich dies
Code:
<div class="postbit_buttons post_management_buttons float_right">
{$post['button_edit']}
<a href="#" id="user_menu_{$post['pid']}"><strong>Buttonmenu</strong></a>
<div id="user_menu_{$post['pid']}_popup" class="popup_menu" style="display: none;">
<div class="popup_item_container">{$post['button_quickdelete']}</div>
<div class="popup_item_container">{$post['button_quickrestore']}</div>
<div class="popup_item_container">{$post['button_quote']}</div>
<div class="popup_item_container">{$post['button_multiquote']}</div>
<div class="popup_item_container">{$post['button_report']}</div>
<div class="popup_item_container">{$post['button_warn']}</div>
<div class="popup_item_container">{$post['button_purgespammer']}</div>
<div class="popup_item_container">{$post['button_reply_pm']}</div>
<div class="popup_item_container">{$post['button_replyall_pm']}</div>
<div class="popup_item_container">{$post['button_forward_pm']}</div>
<div class="popup_item_container">{$post['button_delete_pm']}</div>
</div>
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
$("#user_menu_{$post['pid']}").popupMenu();
}
// -->
</script>
</div>
Siehe Anhang als Ansicht.
Ist jetzt zwar quick and dirty, aber im Printip das was Du suchst.
MrBrechreiz schrieb:Ist jetzt zwar quick and dirty ...
, dafür aber die bessere Variante, wenn man auf die Gegebenheiten zurückgreifen möchte.
MUSS nicht unbedingt Javascript sein aber ich dachte, das wäre das Einfachste, da das schon vorhanden ist aber ich gucke jetzt mal im Detail, was ihr da so vorgeschlagen habt.
Gut, zur letzten Möglichkeit muss ich sagen: Was mache ich eben nun aber, wenn ich den Editbutton eben nicht löschen möchte.
Wie versteht das Javascript, welcher Button welcher ist...
Ich schaue mir mal das dadrüber an. Ich kenne mich nämlich mit Javascript auch viel zu wenig aus.
Achso ich verstehe, "direkt beim Hovern anzeigen" hmmm....
Meine Frage ist, ich weiß nicht wovon dieser Javascriptbefehl abhängig ist. Von der ID? Ich teste das mal aus und verändere das von dir ein Bisschen Mr. Brechreiz, weil ich wollte schon gerne noch, dass man raufklicken muss.
Nee, kriege ich nicht hin... Also ich will ja beide Button haben; diesen neuen und den anderen beibehalten.
Code:
<div class="postbit_buttons post_management_buttons">
{$post['button_edit']}
<a href="#" id=zitat"><strong>Buttonmenu</strong></a>
<div id="user_menu_{$post['pid']}_popup" class="popup_menu" style="display: none;">
<div class="popup_item_container">{$post['button_quote_fast']}</div>
<div class="popup_item_container">{$post['button_quote']}</div>
<div class="popup_item_container">{$post['button_multiquote']}</div>
</div>
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
$("#zitat").popupMenu();
}
// -->
</script>
</div>
Das habe ich halt bis jetzt und ich dachte ich könnte da den Befehl im Javascript einfach umbenennen, damit der sich mit dem anderen nicht hakelt...^^
Die beiden ID zitat, müssen noch einen Zusatz bekommen, sonst werden sie x fach auf einer Seite mit der gleichen ID aufgerufen. Was dann zu Fehlern führt.
Mach aus id=zitat" dies id="zitat_{$post['pid']}" und aus #zitat dies #zitat_{$post['pid']}
Ah okay, danke... Teste ich gleich mal.
Funktioniert aber immer noch nicht. Poppt nix auf:
Code:
<a href="#" id="zitat_{$post['pid']}" title="{$lang->postbit_edit}" class="postbit_edit"><span>Zitieren</span></a>
<div id="edit_post_{$post['pid']}_popup" class="popup_menu" style="display: none;">
<div class="popup_item_container">{$post['button_quote_fast']}</div>
<div class="popup_item_container">{$post['button_quote']}</div>
<div class="popup_item_container">{$post['button_multiquote']}</div>
</div>
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
$("#zitat_{$post['pid']}").popupMenu();
}
// -->
</script>
Hab' ich was übersehen?
Was muss denn ins erste href? Ich hatte da einfach # reingeschrieben. Das ist wohl falsch, oder?
(15.07.2015, 20:39)Arne Drews schrieb: [ -> ]Hallo,
Muß es denn zwingend Javascript sein? Wenn Du die Unterpunkte beim Hover bereits anzeigst, lässt sich das mit reinem CSS bewerkstelligen.
Du benötigst als erstes den Aufbau, den ich als Liste empfehle:
Code:
<ul class="quotemenu">
<li><span>Zitieren</span>
<ul>
<li>{$post['button_quote_fast']}</li>
<li>{$post['button_quote']}</li>
<li>{$post['button_multiquote']}</li>
</ul>
</li>
</ul>
Code:
UL.quotemenu { display:inline-block; }
UL.quotemenu UL > LI,
UL.quotemenu SPAN { border:1px solid #333; background:#999; color:#fff; }
UL.quotemenu SPAN { padding:2px 5px; border-radius:5px; }
UL.quotemenu UL { display:none; margin:1px 0 0 0; padding:0; }
UL.quotemenu LI { display:inline-block; padding:5px 10px; cursor:pointer; }
UL.quotemenu UL > LI { display:block; }
UL.quotemenu UL LI:hover { color:#000; }
UL.quotemenu > LI:hover > UL { display:block; }
Gruß Arne
ps: auf Wunsch schaue ich mir das gern mal genauer an und schreib Dir was dafür
Ich glaube da fehlt irgendwas mit z-index, weil wenn ich da raufgehe, dann wird der Postbit eben mal so groß, wie er halt Platz braucht um das anzuzeigen.
Probiere es mal bitte hiermit:
PHP-Code:
<a href="#" id="zitat_{$post['pid']}" title="{$lang->postbit_edit}" class="postbit_edit"><span>Zitieren</span></a>
<div id="edit_post_{$post['pid']}_popup" class="popup_menu" style="display: none;">
<div class="popup_item_container">{$post['button_quote_fast']}</div>
<div class="popup_item_container">{$post['button_quote']}</div>
<div class="popup_item_container">{$post['button_multiquote']}</div>
</div>
<script type="text/javascript">
// <!--
if(use_xmlhttprequest == "1")
{
$('[id^="zitat"]').popupMenu();
}
// -->
</script>
Hab' ich gemacht, 1:1 ersetzt aber passiert leider immer noch nichts, wenn ich raufklicke...