 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
stifler_wob
Threadersteller
Dabei seit: 28.04.2010
Ort: Wolfsburg
Alter: 32
Geschlecht: 
|
Verfasst Mi 12.01.2011 09:41
Titel Javascript: Parameter übergeben und aufrufen? |
  |
|
Halli Hallo,
nun stelle ich mal meine nächste fragen:
Wie folgt sieht mein Code aus
| Code: | }
var bild3 = "images/pfeil2.jpg";
var bild4 = "images/pfeil2_down.jpg";
function Pfeil()
{
if(document.getElementById('pfeil').src = bild3)
document.getElementById('pfeil').src = bild4;
else
document.getElementById('pfeil').src = bild3;
} |
Nun möchte ich, das beim ausführen dieses Events ein Parameter ausgelöst wird. anschließend möchte ich eine zweite Funktion schreiben, in der dieser Parameter aufgenommen wird & sobald er aufgenommen wurde, aktiviert sich diese Funktion.
Klingt komisch, ich weiß.. Nochmal zum Verständnis:
Bild normal -> onlick (parameter wird übergeben) -> Bild ändert sich -> (Parameter wird aufgenommen) if parameter dies&das, wechsel bild4 in bild5 durch onclick..
Gruß und Danke
|
|
| |
  |
 |
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Mi 12.01.2011 10:41
Titel
|
|
|
ich glaub keiner versteht so richtig was du willst.
1. lese den unterschied zwischen verlgleichs und zuweisungsoperator
2. gib uns bitte eine bessere beschreibung deines vorhabens
möchtest du im onclick festlegen welches bild ausgetauscht werden soll?
|
|
| |
 |
|
|
Anzeige
|
|
|
stifler_wob
Threadersteller
Dabei seit: 28.04.2010
Ort: Wolfsburg
Alter: 32
Geschlecht:
|
Verfasst Mi 12.01.2011 10:57
Titel
|
|
|
Danke für die Antwort.
Ich habe eine Navigation, mit unterschiedlichen Submenus. Vor jedem Menüpunkt ist also ein horizontaler Pfeil, klick ich auf einen Menüpunkt, so fährt sich das Submenu aus & aus dem horizontalen wird ein vertikaler Pfeil. Vor dem Submenulink erscheint nun ein horizontaler Pfeil. Klick ich auf den gleichen Menüpunkt, so fährt das Menü wieder ein, der vertikale Pfeil bleibt aber & wird nicht zu einem horizontalen.
Die Pfeile habe ich in einer extra function geschrieben, haben also nichts mit dem Menüscript ansich zu tun.
Daher wollte, sofern man auf einen Menüpunkt klickt, ein Parameter übergeben wird, den ich dann in eine weitere function verbauen kann ich es so machen.
Hier ein screenshot:
und so ist es, wenn ich auf den Menüpunkt klicke, und sich das menü wieder einfährt:
|
|
| |
|
|
DesignKater
Dabei seit: 26.06.2007
Ort: -
Alter: -
Geschlecht: -
|
|
| |
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 12.01.2011 17:08
Titel
|
|
|
@designKater
Der TO wills schätzungsweise onclick geöffnet haben, nicht
bei hover.
@stifler_wob
Was Du eigentlich willst ist ein sog. Treemenu, da gibts
unzählige Tutorials/Templates im Web.
Aus Langeweile habe ich eben auch ein Script für
solche Zwecke geschrieben. Vielleicht bringts Dich
ja irgendwie weiter:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simples Treemenu</title>
<style type="text/css">
.treeMenu li {
list-style: none;
padding: 0 0 0 10px;
}
.treeMenu .hasSubMenu {
background: url(arrow.gif) no-repeat 0 0;
}
.treeMenu .hasSubMenu ul {
display: none;
}
.treeMenu .isOpen {
background-position: -2500px 0;
}
</style>
<script type="text/javascript">
/*
* @TreeMenu Simples Treemenu via JavaScript
* 'Übergibt' Baumstruktur an Folgeseiten über window.name
* so dass die Menüpunkte in diesem Fenster aufgeklappt bleiben.
* Wenn Menustatus als Cookie gespeichert werden soll, einfach
* _saveAsCookie auf true setzen.
* Benötigt wird das Pfeilbild 'arrow.gif' (see css) zwecks
* CSS-Sprite (5000px breit) und ein UL-verschachteltes Menu
* mit der Id='myMenu'.
*/
var TreeMenu = (function () {
// Die Id des Menus
var _menuId = 'myMenu';
// Die Class für LI-Elemente mit Submenu
var _classSubMenu = 'hasSubMenu';
// Die Class für geöffnete LI-Elemente
var _classIsOpen = 'isOpen';
// Das Menu-Element
var _menu = null;
// Die Menu-LI-Elemente
var _items = null;
// Status-Store
var _store = null;
// Status als Cookie speichern?
var _saveAsCookie = false;
// Initialisieren
var _init = function() {
// Das Menu-Element suchen, wenn nicht da return
_menu = document.getElementById(_menuId);
if (!_menu) return;
// Nach Menu-Elementen suchen, wenn keine da return
_items = _menu.getElementsByTagName('a');
if (!_items) return;
// Gespeicherte Menu Statuse laden
_loadStore();
// Über alle Menu-Elemente iterieren
for (var i=0; i < _items.length; i++) {
// Das Eltern-Element suchen
_items[i].parent = _items[i].parentNode;
// Das Submenu suchen
_items[i].subMenu = _getSubMenu(_items[i].parent);
// Wenn Submenu da, dann...
if (_items[i].subMenu) {
// Nummer vergeben
_items[i].nr = i;
// Class 'hasSubMenu' vergeben
_addClass(_items[i].parent,_classSubMenu);
// und OnClick-Event draufpacken
_items[i].onclick = function() {
_toggleMenu(this);
return false;
};
// wenn gesetzt aufklappen
if (_store[i]) {
_toggleMenu(_items[i]);
}
}
}
};
// Sucht nach einem Submenu
var _getSubMenu = function(el) {
if (el.getElementsByTagName("ul").length) {
return el.getElementsByTagName("ul")[0];
} else {
return false;
}
};
// Toggelt Menü auf/zu
var _toggleMenu = function(el) {
if (_hasClass(el.parent,_classIsOpen)) {
_removeClass(el.parent,_classIsOpen);
_hideElement(el.subMenu);
_removeFromStore(el.nr);
} else {
_addClass(el.parent,_classIsOpen);
_showElement(el.subMenu);
_addToStore(el.nr);
}
_saveStore();
}
// 'offen'-status setzen
var _addToStore = function(nr) {
_store[nr] = nr;
}
// 'offen'-status entfernen
var _removeFromStore = function(nr) {
_store[nr] = null;
}
// Status von CVString holen
var _loadStore = function() {
_store = new Array();
var cvString = (_saveAsCookie && document.cookie) ? document.cookie : window.name;
if (cvString) {
var storedItems = cvString.split(',');
for (var i = 0; i < storedItems.length; i++) {
_store[storedItems[i]] = storedItems[i];
}
}
}
// Status als CVString 'speichern'
var _saveStore = function() {
var cvString = '';
for (var i = 0; i < _store.length; i++) {
if (_store[i] != null) cvString += _store[i]+',';
}
if (_saveAsCookie) {
document.cookie = cvString;
} else {
window.name = cvString;
}
}
// Helper:
// Schaut ob Element bestimmte Class hat
var _hasClass = function(el,className) {
var regexp = new RegExp(className,'g');
return el.className.search(regexp) != -1;
};
// Fügt einem Element eine Class hinzu
var _addClass = function(el,className) {
el.className += (el.className.length) ? ' '+className : className;
};
// Entfernt Class von einem Element
var _removeClass = function(el,className) {
var regexp = new RegExp(' ?'+className,'g');
el.className = el.className.replace(regexp,'');
};
// Setzt display auf 'block'
var _showElement = function(el) {
el.style.display = 'block';
}
// Setzt display auf 'none'
var _hideElement = function(el) {
el.style.display = 'none';
}
// Public
return {
init: function() {
_init();
}
};
})();
</script>
</head>
<body>
<ul id="myMenu" class="treeMenu">
<li><a href="index.php">Something</a>
<ul>
<li><a href="index.php">Cool</a></li>
<li><a href="index.php">Hot</a></li>
<li><a href="index.php">Burner</a></li>
</ul>
</li>
<li><a href="index.php">Trash</a>
<ul>
<li><a href="index.php">Blub</a></li>
<li><a href="index.php">Zack</a></li>
<li><a href="index.php">Peng</a>
<ul>
<li class="foobar"><a href="index.php">Again</a></li>
<li class="trallala"><a href="index.php">More</a>
<ul>
<li><a href="index.php">Again</a>
<ul>
<li><a href="index.php">Foobar</a></li>
<li><a href="index.php">More</a></li>
</ul>
</li>
<li><a href="index.php">Super</a></li>
<li><a href="index.php">Whatever</a>
<ul>
<li><a href="index.php">Foobar</a></li>
<li><a href="index.php">More</a></li>
</ul>
</li>
<li><a href="index.php">More</a>
<ul>
<li><a href="index.php">Foobar</a></li>
<li><a href="index.php">More</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
// Initialize das Menu
TreeMenu.init();
</script>
</body>
</html>
|
Sieht dann so aus: http://zweitaccount.zw.ohost.de/treemenu/index.php
(für die Werbung kann ich nix...)
Grüße
zweitaccount
|
|
| |
|
|
stifler_wob
Threadersteller
Dabei seit: 28.04.2010
Ort: Wolfsburg
Alter: 32
Geschlecht:
|
Verfasst Mi 12.01.2011 18:34
Titel
|
|
|
Genau das wollte ich!
Vielen dank!
|
|
| |
|
|
stifler_wob
Threadersteller
Dabei seit: 28.04.2010
Ort: Wolfsburg
Alter: 32
Geschlecht:
|
Verfasst Do 13.01.2011 11:31
Titel
|
|
|
Ich muss noch einmal nerven...
Wie schaffe ich es denn, dass das Menü wieder zuklappt, wenn ich auf einen anderen Menüpunkt klicke? Also im Beispiel: Something ist offen & ich klicke auf trash, dann soll something wieder zu gehen..
Danke im voraus.
|
|
| |
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 13.01.2011 15:23
Titel
|
|
|
Hoi,
hmm, hier ein kleines update dass das berücksichtigt:
http://zweitaccount.zw.ohost.de/treemenu/index_v2.php
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simples Treemenu</title>
<style type="text/css">
.treeMenu li {
list-style: none;
padding: 0 0 0 10px;
}
.treeMenu .hasSubMenu {
background: url(arrow.gif) no-repeat 0 0;
}
.treeMenu .hasSubMenu ul {
display: none;
}
.treeMenu .isOpen {
background-position: -2500px 0;
}
</style>
<script type="text/javascript">
/*
* @TreeMenu Simples Treemenu via JavaScript
* 'Übergibt' Baumstruktur an Folgeseiten über window.name
* so dass die Menüpunkte in diesem Fenster aufgeklappt bleiben.
* Wenn Menustatus als Cookie gespeichert werden soll, einfach
* _saveAsCookie auf true setzen.
* Benötigt wird das Pfeilbild 'arrow.gif' (see css) zwecks
* CSS-Sprite (5000px breit) und ein UL-verschachteltes Menu
* mit der Id='myMenu'.
*/
var TreeMenu = (function () {
// Die Id des Menus
var _menuId = 'myMenu';
// Die Class für LI-Elemente mit Submenu
var _classSubMenu = 'hasSubMenu';
// Die Class für geöffnete LI-Elemente
var _classIsOpen = 'isOpen';
// Das Menu-Element
var _menu = null;
// Die Menu-LI-Elemente
var _items = null;
// Status-Store
var _savedItemsStore = null;
// Status als Cookie speichern?
var _saveAsCookie = false;
// Items die geöffnet dargestellt werden sollen
var _openItems = null;
var _openItemsStore = null;
// Den Item-Pfad als alt-Tag ausgeben
var _showItemPath = true;
//
var _closeOtherItems = true;
// Initialisieren
var _init = function(params) {
// MenuId kann auch als Parameter übergeben werden.
if (params && params.menuId) _menuId = params.menuId;
// Zu öffnenede Items können auch als Parameter übergeben werden.
if (params && params.openItems) _openItems = params.openItems;
// Das Menu-Element suchen, wenn nicht da return
_menu = document.getElementById(_menuId);
if (!_menu) return;
// Nach Menu-Elementen suchen, wenn keine da return
_items = _menu.getElementsByTagName('a');
if (!_items) return;
// Gespeicherte Menu Statuse laden
_loadStore();
// Übergebene Menu Statuse setzen
_setOpenItems();
// Über alle Menu-Elemente iterieren
for (var i=0; i < _items.length; i++) {
// Das Eltern-Element suchen
_items[i].parent = _items[i].parentNode;
// Das Submenu suchen
_items[i].subMenu = _getSubMenu(_items[i].parent);
// Nummer vergeben (1basiered)
_items[i].nr = i;
// Wenn Submenu da, dann...
if (_items[i].subMenu) {
// Class 'hasSubMenu' vergeben
_addClass(_items[i].parent,_classSubMenu);
}
// wenn im Store gesetzt aufklappen
if (_savedItemsStore[i] != null) {
_toggleMenu(_items[i]);
_openParents(_items[i]);
}
// wenn zu als zu öffnendes Item übergeben
// bis dorthin aufklappen
if (_openItemsStore != null && _openItemsStore[i] != null) {
_toggleMenu(_items[i]);
_openParents(_items[i]);
}
// OnClick-Event draufpacken
_items[i].onclick = function() {
if (_closeOtherItems) {
// Alle anderen Menüs bis auf dieses Item schließen
_closeMenus();
_toggleMenu(this);
_openParents(this);
} else {
// Nur dieses Togglen
_toggleMenu(this);
}
return false;
};
// Pathangabe als Title-Attribute (experimentell)
if (_showItemPath) {
_items[i].title = _getItemPath(_items[i]);
}
}
};
// Sucht nach einem Submenu
var _getSubMenu = function(el) {
if (el.getElementsByTagName("ul").length) {
return el.getElementsByTagName("ul")[0];
} else {
return false;
}
};
// Den Menüpfad zurückgeben
var _getItemPath = function(el) {
var path = el.nr;
while(el.parentNode.parentNode.parentNode.firstChild.tagName == 'A') {
path += ','+el.parentNode.parentNode.parentNode.firstChild.nr;
el = el.parentNode.parentNode.parentNode.firstChild;
}
return path;
}
// Alle Eltern-Menus öffnen
var _openParents = function(el) {
var parent = _getParent(el);
while(parent.tagName == 'A') {
_showMenu(parent,true);
_addToStore(parent.nr);
parent = _getParent(parent);
}
}
// Das Eltern-Menu zurückgeben
var _getParent = function(el) {
return el.parentNode.parentNode.parentNode.firstChild;
}
// Toggelt Menü auf/zu
var _toggleMenu = function(el) {
if (_hasClass(el.parent,_classIsOpen)) {
_hideMenu(el);
} else {
_showMenu(el);
}
_saveStore();
}
// Alle Menus bis auf übergebenes schließen
var _closeMenus = function() {
for (var i = 0; i < _items.length; i++) {
_hideMenu(_items[i]);
}
}
// Ein Menu-Element zeigen
var _showMenu = function(el) {
_addClass(el.parent,_classIsOpen);
_showElement(el.subMenu);
_addToStore(el.nr);
}
// Ein Menu-Element verstecken
var _hideMenu = function(el) {
_removeClass(el.parent,_classIsOpen);
_hideElement(el.subMenu);
_removeFromStore(el.nr);
}
// 'offen'-status setzen
var _addToStore = function(nr) {
_savedItemsStore[nr] = nr;
}
// 'offen'-status entfernen
var _removeFromStore = function(nr) {
_savedItemsStore[nr] = null;
}
// Übergebene offene Items in ein array packen
var _setOpenItems = function() {
if (_openItems == null) return;
_openItemsStore = new Array();
var openItems = _openItems.split(',');
for (var i = 0; i < openItems.length; i++) {
_openItemsStore[openItems[i]] = openItems[i];
}
}
// Status von CVString holen
var _loadStore = function() {
_savedItemsStore = new Array();
var cvString = (_saveAsCookie && document.cookie) ? document.cookie : window.name;
if (_openItems != null) cvString += ',' + _openItems;
if (cvString) {
//_log(cvString);
var storedItems = cvString.split(',');
for (var i = 0; i < storedItems.length; i++) {
_savedItemsStore[storedItems[i]] = storedItems[i];
}
}
}
// Status als CVString 'speichern'
var _saveStore = function() {
var cvString = '';
for (var i = 0; i < _savedItemsStore.length; i++) {
if (_savedItemsStore[i] != null) cvString += _savedItemsStore[i]+',';
}
if (_saveAsCookie) {
document.cookie = cvString;
} else {
window.name = cvString;
}
}
// Helper:
// Schaut ob Element bestimmte Class hat
var _hasClass = function(el,className) {
var regexp = new RegExp(className,'g');
return el.className.search(regexp) != -1;
};
// Fügt einem Element eine Class hinzu
var _addClass = function(el,className) {
el.className += (el.className.length) ? ' '+className : className;
};
// Entfernt Class von einem Element
var _removeClass = function(el,className) {
var regexp = new RegExp(' ?'+className,'g');
el.className = el.className.replace(regexp,'');
};
// Setzt display auf 'block'
var _showElement = function(el) {
if (el) el.style.display = 'block';
}
// Setzt display auf 'none'
var _hideElement = function(el) {
if (el) el.style.display = 'none';
}
// Debug
var _log = function(msg) {
document.getElementById('debug').innerHTML += msg+'<br />';
}
// Public
return {
init: function(params) {
_init(params);
}
};
})();
</script>
</head>
<body>
<ul id="myMenu" class="treeMenu">
<li><a href="index.php">Something</a>
<ul>
<li><a href="index.php">Cool</a></li>
<li><a href="index.php">Hot</a></li>
<li><a href="index.php">Burner</a></li>
</ul>
</li>
<li><a href="index.php">Trash</a>
<ul>
<li><a href="index.php">Blub</a></li>
<li><a href="index.php">Zack</a></li>
<li><a href="index.php">Peng</a>
<ul>
<li class="foobar"><a href="index.php">Again</a></li>
<li class="trallala"><a href="index.php">More</a>
<ul>
<li><a href="index.php">Again</a>
<ul>
<li><a href="index.php">Foobar</a></li>
<li><a href="index.php">More</a></li>
</ul>
</li>
<li><a href="index.php">Super</a></li>
<li><a href="index.php">Whatever</a>
<ul>
<li><a href="index.php" id="openthisitem">Foobar</a></li>
<li><a href="index.php">More</a></li>
</ul>
</li>
<li><a href="index.php">More</a>
<ul>
<li><a href="index.php">Foobar</a></li>
<li><a href="index.php">More</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
// Initialize das Menu
// Mit openItems wird beispielsweise alles bis zum Element 'Whatever' ausgeklappt
// Nützlich mglw. für Deeplinks
// TreeMenu.init({
// 'menuId': 'myMenu',
// 'openItems': '14'
// });
TreeMenu.init();
</script>
</body>
</html>
|
Grüße
zweitaccount
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
flash parameter übergeben
Parameter an flash übergeben ?
Text in Flash aus HTML als Parameter übergeben
Javascript Function Parameter
ID aus Datenbank in Javascript mit übergeben
Value eines Radiobuttons an Javascript übergeben
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
