• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JQuery Button zu Titelleiste hinzufügen.

Status
Für weitere Antworten geschlossen.
S

supertobs

Mitglied
Hallo Community,

Ich möchte zu einem JQuery Dialog einen Button in die Titelleiste hinzufügen.

In der JQuery Titelleiste ist rechts im eck ein Button mit dem man das Dialog schließen kann.

Links daneben möchte ich einen zweiten Button hinzufügen, der eine von mir definierte funktion ausführt. hoffe ihr könnt mir helfen.
 
Das heißt, dass ein String nicht geschlossen ist.

Hier ein einigermaßen funktionierender Anfang:

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>demo</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css" />

<style type="text/css">

.ui-dialog .ui-dialog-titlebar-other { position: absolute; right: 30px; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-other span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-other:hover, .ui-dialog .ui-dialog-titlebar-other:focus { padding: 0; }

</style>

    </head>

    <body>
<script type="text/javascript">

$(function() {
		$("#dialog").dialog();


    // create anchor to contain icon
    $('<a href="#" class="ui-dialog-titlebar-other ui-corner-all ui-state-default"></a>')
    // add icon and text
    .append('<span class="ui-icon ui-icon-minus">other</span></a>')
    // add the anchor to the titlebar
    .appendTo('.ui-dialog-titlebar')
    // bind callback
    .click(function() {
        // do whatever you want
    });
	});

</script>

<div id="dialog" title="Basic dialog">
	<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
    </body>

</html>

Für weitere Infos wirst du dich in jQuery UI einlesen müssen.

- jQuery UI - Demos & Documentation
 
hbas jetzt so eingebunden wie du.
Aber es kommt folgender Fehler:
Fehler: missing : after property id
Quelldatei: html.de Forum - HTML für Anfänger & Fortgeschrittene
Zeile: 66, Spalte: 5
Quelltext:
$('<a href="#" class="ui-dialog-titlebar-other ui-corner-all ui-state-default"></a>')


Der Fehler taucht angeblich zwischen den zwei fetten zeichen auf.

Hier der quellcodeausschnitt:

echo"
autoOpen: ".$windowsRow[autoOpen].",
title: '".$spr['window'.$windowsRow[windowName]]."',
width:600,
zIndex: 2,
$('<a href=\"#\" class=\"ui-dialog-titlebar-other ui-corner-all ui-state-default\"></a>')
// add icon and text
.append('<span class=\"ui-icon ui-icon-minus\">other</span></a>')
// add the anchor to the titlebar
.appendTo('.ui-dialog-titlebar')
// bind callback
.click(function() {
// do whatever you want
});
 
Du schreibst den Code aus dem Beispiel einfach mitten in einen Object Notation-Teil rein. Das ergibt syntaktisch keinen Sinn.

Wie es richtiger geht, kann ich kontextlos aus dem Stegreif nicht sagen. Es wäre aber ohnehin besser, wenn du das selbst lösen könntest, denn einfacher wird die Arbeit mit jQuery UI danach bestimmt nicht.

Durchbeißen. :)
 
Mir ist auch nicht klar, warum hier mit JQuery gearbeitet wird und in einem anderen Thread in-konsequenterweise nicht.
 
@ crash: was meinst du mit warum wird hier mit jQuery gearbeitet?
@ mermshaus: Ich hab mich schon durch viele Probleme mit JQuery gebissen. Das ist das erste größere PRoblem wo ich nach reichlicher google such nichts gefunden habe. Aber ich werds weiter versuchen. ;)



EDIT:
Hab den Fehler gefunden!
Habs vergessen zwischen den function tags einzufügen.

Danke nocheinmal für eure Hilfe!
;) :D ;) :D
 
Zuletzt bearbeitet:
Giebt es eig. eine möglichkeit die funktion pro Fenster zu definieren?

wen ich dass umsetzen will, muss ich sicher etwas an dem punkt ändern, oder?
 
Du müsstest das entsprechende Element in einer Dialog-Instanz selektieren, ja. Vermutlich im "Konstruktor" der Dialog-Instanz irgendwie mit:

Code: 
var elem = $('<a href="#" class="ui-dialog-titlebar-other ui-corner-all ui-state-default"></a>');
elem
    // add icon and text
    .append('<span class="ui-icon ui-icon-minus">other</span></a>')
    // bind callback
    .click(function() {
        // do whatever you want
    });

$(this).find('.ui-dialog-titlebar').append(elem);

Ich kann aber nicht mal garantieren, dass die Syntax stimmt. ;)
 
Danke :D
Jetzt ist die funktion voll funktionsfähig!

EDIT: Seltsamerweise funktioniert es jetzt nicht mehr.

Folgender Fehler:

Fehler: missing : after property id
Quelldatei: http://localhost/PHP-OS/index.php
Zeile: 72, Spalte: 8
Quelltext:
var elem = $('<a href="#" class="ui-dialog-titlebar-other ui-corner-all ui-state-default"></a>');


Scheinbar meint er, dass es eine Eigenschaft ist.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben