Beiträge von iukbox.de

Ich teste nur gerade, wie ich das JQuery User Interface einbinden kann.
Ich muss eigene Funktionen programmieren um die Funktion meiner derzeitigen Webseite nach zu bilden. Daher teste ich, wie ich das bewerkstelligen könnte. Bisher stoße ich aber leider nur auf Probleme.

Ich habe mal wieder Zeit gefunden.

Die Seite auf dem Testserver ist aktualisiert. Der Dialog sollte ganz normal erscheinen wie ein Alert von Javascript.
Hier sieht es aber so aus, als würde er ans Ende der Seite 'gezwängt'.

Die 'Funktion' ist ein einfacher Dialog. Das Aussehen passt nicht zum sonstigen Design der Seite und auch eine eingebundene eigene CSS wird nicht berücksichtigt.

So, ich habe nochmal Zeit bekommen mich mit der Programmierung zu beschäftigen.

Ich habe jetzt eine eigene jQueryUI eingebunden und die Funktionen sind vorhanden. Lediglich das ganze Design passt überhaupt nicht, die Farben stimmen nicht, die Schaltflächen sind wirr angeordnet.
Sind denn in der css die Klassen alle drin?

http://as-service-mit-herz.de/speisekarte.php

Hier der Code der Seite, es handelt sich bis auf wenie Änderungen um eine Originalseite aus Zetaproducer. Die Änderungen sind markiert.

<!DOCTYPE html>
<html lang="de">
<head>
<!-- Title -->
<title>Speisekarte Cafeteria KV AK</title>

<!-- Meta Data -->
<meta charset="utf-8" />
<meta name="description" content="test" />
<meta name="keywords" content="test" />
<meta name="generator" content="Zeta Producer 13.1.0.0, ZP13F, 10.03.2016 09:08:20" />
<meta name="robots" content="index, follow" />


<!-- Favicon & CSS -->
<link rel="shortcut icon" type="image/x-icon" href="assets/stock-files/favicon.ico" />

<link rel="stylesheet" type="text/css" href="assets/bundle.css?v=635961352999023108" />
<link rel="stylesheet" type="text/css" href="assets/bundle-print.css?v=635922708620000000" media="print" />
<!-- Aenderung hier #### ANFANG #### -->
<script src="assets/js/jqueryui/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
<!-- Aenderung hier #### ENDE ####-->
<script type="text/javascript" src="assets/bundle.js?v=635961352999073111"></script>


<!-- Has Article in News -->


<!-- Search Inline Script -->


<!-- RSS -->


<!-- Analytics Code -->
<!-- Aenderung hier #### ANFANG #### -->
<script>

$z(document).ready(function(){
/* Hier der jQuery-Code */
alert('Hallo Welt');
});
$z("#dialog").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I've read and understand this": function() {
$(this).dialog("close");
}
}
});

alert('Fertig');
</script>
<!-- Aenderung hier #### ENDE #### -->
</head>
<body id="Active">

<!-- Aenderung hier #### ANFANG #### -->
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<!-- Aenderung hier #### ENDE #### -->


<a id="top"></a>
<div id="firstwrapper">
<div id="shadow" class="pngalpha"><div id="innershadow"> </div></div>
<div id="work"> </div>

<div id="secondwrapper">
<div id="firsttopline" class="pngalpha"> </div>
<div id="secondtopline">

<!-- Breadcrumb Grid -->

<div id="breadcrumb"><div
>

Sie befinden sich hier:

<a href="cafeteria-kv-ak.html">Cafeteria KV AK</a>

<span class="divider">/</span>

<a href="speisekarte.php">Speisekarte</a>

</div></div>

</div>

<div id="header">

<!-- Mainmenu Grid -->
<div id="mainmenu" class="pngalpha">

<ul>

<li>
<a class="topmenu" href="index.html" >Ãœber uns</a>
</li>

<li>
<a class="topmenuactive" href="cafeteria-kv-ak.html" >Cafeteria KV AK</a>
</li>

<li>
<a class="topmenu" href="grillkochkurse.html" >Grillkochkurse</a>
</li>

<li>
<a class="topmenu" href="service.html" >Unser Service für Sie</a>
</li>

<li>
<a class="topmenu" href="kontakt.html" >Kontakt</a>
</li>

</ul>

</div>

<!-- Header Image -->
<a href="http://localhost.de/AS30"><img src="assets/ZP-Temp-79db2526-bd3f-499c-a22d-722ed3115727.png" width="250" height="180" alt="http://localhost.de/AS30" title="" /></a>

<!-- Webname -->

</div>

<div id="submenu">

<!-- Submenu Grid -->

<div id="submenu1"><ul>

<li>
<a class="subnav1active" href="speisekarte.php" >Speisekarte</a>

</li>

<li>
<a class="subnav1" href="oeffnungszeiten.html" >Öffnungszeiten</a>
</li>

</ul></div>

<!-- Searchform -->

<!-- News Grid -->

</div>

<!-- Content Grid -->
<div id="content" class="zpgrid">

<div class="zparea " data-numcolumns="12" data-areaname="Standard">


<div class="zpRow standard "

>


<div class="zpColumn zpColumnWidth1 c12"
>


<div class="zpColumnItem" >
<div id="a1351" data-articleid="1351" class="articlearea zpwText"

>

<h1 style="text-align:left;">Speisekarte</h1>

<p>Wenn möglich bestellen Sie bitte vor, entweder im ausliegenden Plan in der
Cafeteria oder telefonisch unter 02681-81 3175.</p>
<p> </p>

</div>
<?php
include 'plaene_inc.php';
?>
</div>

</div>

</div>

</div> <!-- .zparea -->

</div>
<div class="clearx"></div>

<div id="footer" class="pngalpha">

<!-- Extramenu -->

<div id="xmenu" >

<a href="index.html">Startseite</a>


- <a href="kontakt.html">Kontakt</a>


- <a href="impressum.html">Impressum</a>

</div>


<!-- Copyright -->

<div id="lastupdate" >

© 2016 Meine Website


- <a href="http://www.zeta-producer.com" class="zp">Website erstellt mit Zeta Producer CMS</a>

</div>

</div>
</div>
</div>

<!-- Footer Script -->

<!--
* Layout: Active
* $Id: default.html 36818 2016-02-15 10:03:32Z sseiz $
* Copyright Zeta Software GmbH 2014
-->
</body>
</html>

Ja....

<script src="assets/js/jqueryui/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>

Zeta Producer 13
Win 10
Layout angepasstes Active
Browser zur Entwicklung Firefox 45.02
Webserver Apache

Danke, das hilft schon mal für JQuery.
Nur bei jQuerui klappts noch nicht.

<script>

$z(document).ready(function(){
/* Hier der jQuery-Code */
alert('Hallo Welt');
});
$("#dialog").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I've read and understand this": function() {
$(this).dialog("close");
}
}
});
</script>

Die AlertBox funktioniert, der Rest nicht. JQueryUi hab ich eingebunden, jQuery nicht nochmals, Ich nutze die vorhandene....

ReferenceError: $z is not defined

jquery-....min.js (Zeile 5, Spalte 2)

TypeError: $(...).dialog is not a function

Ich probiere schon seit einiger Zeit eine JQueryUi Funktion aufzurufen.

Es passiert leider nchts, noch nicht mal eine Fehlermeldung. Gibts da eine Beschreibung?

Danke

Edit: In der Konsole wird doch eine Fehlermeldung ausgegeben.
TypeError: $(...).dialog is not a function

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