Łukasz Latkowski

Łukasz Latkowski PHP, Delphi, Pascal,
HTML, Linux, iOS,
Android, Windows,
...

Temat: ddaccordion i śledzenie aktywnej strony

Witam

Mam menu rozwijane oparte na bibliotekę Accordion Content script (v2.0)

http://www.dynamicdrive.com/dynamicindex17/ddaccordion...

Zrobiłem podświetlenie aktywnego submenu ale nie wiem jak zrobić jeśli z przycisków na stronie przejdziemy do innej strony która jest w innym submenu żeby zasunąć poprzednie menu i rozsunąć menu w którym jest aktywne submenu.

Kod wygląda tak

<SCRIPT type="TEXT/JAVASCRIPT">
ddaccordion.init({
headerclass: "expandable",
contentclass: "categoryitems",
revealtype: "click",
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["", "openheader"],
togglehtml: ["prefix", "", ""],
animatespeed: "fast",
oninit:function(headers, expandedindices){},
onopenclose:function(header, index, state, isuseractivated){}
})
</SCRIPT>

$mTemp = explode('_', basename($_SERVER['SCRIPT_NAME'], ".php"));
$mName = $mTemp[1];
// ---
echo '
<aside>
<div class="arrowlistmenu">

<h4 class="menuheader expandable">' . $_TEXT['Menu2_Grupa01'] . '</h4>
<ul class="categoryitems">
<li class="Sub' . (($mName == "02a") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_02a.php">' . $_TEXT['Menu2_Strona02a'] . '</a></li>
<li class="Sub' . (($mName == "01") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_01.php">' . $_TEXT['Menu2_Strona01'] . '</a></li>
<li class="Sub' . (($mName == "12") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_12.php">' . $_TEXT['Menu2_Strona12'] . '</a></li>
<li class="Sub' . (($mName == "12a") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_12a.php">' . $_TEXT['Menu2_Strona12a'] . '</a></li>
</ul>

<h4 class="menuheader expandable">' . $_TEXT['Menu2_Grupa02'] . '</h4>
<ul class="categoryitems">
<li class="Sub' . (($mName == "02") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_02.php">' . $_TEXT['Menu2_Strona02'] . '</a></li>
<li class="Sub' . (($mName == "02b") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_02b.php">' . $_TEXT['Menu2_Strona02b'] . '</a></li>
<li class="Sub' . (($mName == "02c") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_02c.php">' . $_TEXT['Menu2_Strona02c'] . '</a></li>
<li class="Sub' . (($mName == "02d") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_02d.php">' . $_TEXT['Menu2_Strona02d'] . '</a></li>
</ul>

<h4 class="menuheader expandable">' . $_TEXT['Menu2_Grupa03'] . '</h4>
<ul class="categoryitems">
<li class="Sub' . (($mName == "03a") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_03a.php">' . $_TEXT['Menu2_Strona03a'] . '</a></li>
<li class="Sub' . (($mName == "03b") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_03b.php">' . $_TEXT['Menu2_Strona03b'] . '</a></li>
<li class="Sub' . (($mName == "08a") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_08a.php">' . $_TEXT['Menu2_Strona08a'] . '</a></li>
</ul>

</div>
</aside>
';

Może jest też jakieś menu rozsuwane w czystym jquery które potrafi pokazywać na jakiej stronie jesteśmy w menu z możliwością nawigacji na stronie przyciskami następna/poprzednia ?

Pozdrawiam
Łukasz

konto usunięte

Temat: ddaccordion i śledzenie aktywnej strony

jQuery accordion?
http://jqueryui.com/accordion/
to co opisałeś jest łatwo osiągalne, podświetlenia i inne bajery to zabawa z CSS addClass etc :)
Arkadiusz Burszczan

Arkadiusz Burszczan Programista Java

Temat: ddaccordion i śledzenie aktywnej strony

@Łukasz
Jak wrzucasz kod, to ustawiaj go w znacznik
 kod 
wtedy kod jest bardziej czytelny


<SCRIPT type="TEXT/JAVASCRIPT">
ddaccordion.init({
headerclass: "expandable",
contentclass: "categoryitems",
revealtype: "click",
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["", "openheader"],
togglehtml: ["prefix", "", ""],
animatespeed: "fast",
oninit:function(headers, expandedindices){},
onopenclose:function(header, index, state, isuseractivated){}
})
</SCRIPT>

$mTemp = explode('_', basename($_SERVER['SCRIPT_NAME'], ".php"));
$mName = $mTemp[1];
// ---
echo '
<aside>
<div class="arrowlistmenu">

<h4 class="menuheader expandable">' . $_TEXT['Menu2_Grupa01'] . '</h4>
<ul class="categoryitems">
<li class="Sub' . (($mName == "02a") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_02a.php">' . $_TEXT['Menu2_Strona02a'] . '</a></li>
<li class="Sub' . (($mName == "01") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_01.php">' . $_TEXT['Menu2_Strona01'] . '</a></li>
<li class="Sub' . (($mName == "12") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_12.php">' . $_TEXT['Menu2_Strona12'] . '</a></li>
<li class="Sub' . (($mName == "12a") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_12a.php">' . $_TEXT['Menu2_Strona12a'] . '</a></li>
</ul>

<h4 class="menuheader expandable">' . $_TEXT['Menu2_Grupa02'] . '</h4>
<ul class="categoryitems">
<li class="Sub' . (($mName == "02") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_02.php">' . $_TEXT['Menu2_Strona02'] . '</a></li>
<li class="Sub' . (($mName == "02b") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_02b.php">' . $_TEXT['Menu2_Strona02b'] . '</a></li>
<li class="Sub' . (($mName == "02c") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_02c.php">' . $_TEXT['Menu2_Strona02c'] . '</a></li>
<li class="Sub' . (($mName == "02d") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_02d.php">' . $_TEXT['Menu2_Strona02d'] . '</a></li>
</ul>

<h4 class="menuheader expandable">' . $_TEXT['Menu2_Grupa03'] . '</h4>
<ul class="categoryitems">
<li class="Sub' . (($mName == "03a") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_03a.php">' . $_TEXT['Menu2_Strona03a'] . '</a></li>
<li class="Sub' . (($mName == "03b") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_03b.php">' . $_TEXT['Menu2_Strona03b'] . '</a></li>
<li class="Sub' . (($mName == "08a") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_08a.php">' . $_TEXT['Menu2_Strona08a'] . '</a></li>
</ul>

</div>
</aside>
Ten post został edytowany przez Autora dnia 23.06.13 o godzinie 09:38
Łukasz Latkowski

Łukasz Latkowski PHP, Delphi, Pascal,
HTML, Linux, iOS,
Android, Windows,
...

Temat: ddaccordion i śledzenie aktywnej strony

Arkadiusz B.:
@Łukasz
Jak wrzucasz kod, to ustawiaj go w znacznik
 kod 
wtedy kod jest bardziej czytelny

Ok, będę pamiętał na przyszłość.

Pozdrawiam
Łukasz Latkowski

Łukasz Latkowski PHP, Delphi, Pascal,
HTML, Linux, iOS,
Android, Windows,
...

Temat: ddaccordion i śledzenie aktywnej strony

Kamil G.:
jQuery accordion?
http://jqueryui.com/accordion/
to co opisałeś jest łatwo osiągalne, podświetlenia i inne bajery to zabawa z CSS addClass etc :)

Witam

A mogę prosić o jakiś przykład albo gotowiec jak podmieniać w class="Sub0" dla nieaktywnego na class="Sub1" dla aktywnego.

i robić to tak

$mTemp = explode('_', basename($_SERVER['SCRIPT_NAME'], ".php"));
$mName = $mTemp[1];
// ---
echo '
<aside>
<div class="arrowlistmenu">

<h4 class="menuheader expandable">' . $_TEXT['Menu2_Grupa01'] . '</h4>
<ul class="categoryitems">
<li class="Sub' . (($mName == "02a") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_02a.php">' . $_TEXT['Menu2_Strona02a'] . '</a></li>
<li class="Sub' . (($mName == "01") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_01.php">' . $_TEXT['Menu2_Strona01'] . '</a></li>
<li class="Sub' . (($mName == "12") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_12.php">' . $_TEXT['Menu2_Strona12'] . '</a></li>
<li class="Sub' . (($mName == "12a") ? 1 : 0) . '"><a href="' . $cfg['root_www'] . '/html/strona_12a.php">' . $_TEXT['Menu2_Strona12a'] . '</a></li>
</ul>


Czy jest jakiś inny sposób. Na razie jeszcze rozgryzam jquery i przerabiam pod siebie znalezione skrypty.

PozdrawiamTen post został edytowany przez Autora dnia 24.06.13 o godzinie 21:50
Łukasz Latkowski

Łukasz Latkowski PHP, Delphi, Pascal,
HTML, Linux, iOS,
Android, Windows,
...

Temat: ddaccordion i śledzenie aktywnej strony

Tu zamieszczam kod który mam w chwili obecnej. Zrobiłem podświetlenie menu do którego się przeszło ale nie rozwija go i nie zamyka poprzedniego.


<?
# http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
# http://www.dynamicdrive.com/dynamicindex17/ddaccordion.js
// ustawiamy na której jesteśmy stronie
$page_Prev = '01';
$page_Curr = '02';
$page_Next = '03';
// generujemy plik html
echo '
<!DOCTYPE html>
<html>
<head>
<META CHARSET="utf-8">
<SCRIPT type="TEXT/JAVASCRIPT" src="jquery.min.js"></SCRIPT>
<SCRIPT type="TEXT/JAVASCRIPT" src="ddaccordion.js"></SCRIPT>
<SCRIPT type="TEXT/JAVASCRIPT">
ddaccordion.init({
headerclass: "MenuHeader",
contentclass: "MenuItems",
revealtype: "click",
mouseoverdelay: 200,
collapseprev: true,
defaultexpanded: [],
onemustopen: false,
animatedefault: false,
persiststate: true,
toggleclass: ["Main0", "Main2"],
togglehtml: ["none", "", ""],
animatespeed: "fast",
oninit:function(headers, expandedindices){},
onopenclose:function(header, index, state, isuseractivated){}
})
</SCRIPT>
<style type="text/css">
aside{
FLOAT:left;
PADDING:0;
WIDTH:250px
} .AccordionMenu{
COLOR:#ffffff;
CURSOR:pointer;
DISPLAY:block;
LINE-HEIGHT:21px;
MARGIN:0;
PADDING:0;
TEXT-DECORATION:none;
TEXT-TRANSFORM:uppercase
}
.AccordionMenu .Main0{
BACKGROUND:#082c4c;
}
.AccordionMenu .Main0,.AccordionMenu .Main1,.AccordionMenu .Main2{
COLOR:#ffffff;
MARGIN:0 0 4px;
PADDING:0 4px;
TEXT-ALIGN:left
}
.AccordionMenu .Main1{
BACKGROUND:#e04d45;
}
.AccordionMenu .Main2{
BACKGROUND:#b01d15;
}
.AccordionMenu .Sub0{
BACKGROUND:#526b82;
TEXT-ALIGN:left
}
.AccordionMenu .Sub0,.AccordionMenu .Sub1{
COLOR:#ffffff
}
.AccordionMenu .Sub1{
BACKGROUND:#c8615b;
TEXT-ALIGN:right
}
.AccordionMenu a:hover,.AccordionMenu a,.AccordionMenu a:visited{
COLOR:#ffffff;
TEXT-DECORATION:none
}
.AccordionMenu ul li{
MARGIN:0 8px 1px;
PADDING:0
}
.AccordionMenu ul li a{
DISPLAY:block;
PADDING:0 4px;
TEXT-DECORATION:none
}
</style>
</head>
<body>
';
// sprawdzamy na jakiej jesteśmy stronie
$mTemp = explode('_', basename($_SERVER['SCRIPT_NAME'], ".php"));
$mName = $mTemp[1];
// tablica ze stronami w danym menu
$Menu_Main01 = array("01", "02", "03");
$Menu_Main02 = array("04", "05", "06");
$Menu_Main03 = array("07", "08", "09");
// ---
echo '
<aside>
<div class="AccordionMenu">
<h4 class="MenuHeader ' . (in_array($mName, $Menu_Main01) ? 'Main1' : 'Main0') . '">Grupa01</h4>
<ul class="MenuItems">
<li class="Sub' . (($mName == "01") ? 1 : 0) . '">
<a href="strona_01.php">Strona01</a>
</li>
<li class="Sub' . (($mName == "02") ? 1 : 0) . '">
<a href="strona_02.php">Strona02</a>
</li>
<li class="Sub' . (($mName == "03") ? 1 : 0) . '">
<a href="strona_03.php">Strona03</a>
</li>
</ul>
<h4 class="MenuHeader ' . (in_array($mName, $Menu_Main02) ? 'Main1' : 'Main0') . '">Grupa02</h4>
<ul class="MenuItems">
<li class="Sub' . (($mName == "04") ? 1 : 0) . '">
<a href="strona_04.php">Strona04</a>
</li>
<li class="Sub' . (($mName == "05") ? 1 : 0) . '">
<a href="strona_05.php">Strona05</a>
</li>
<li class="Sub' . (($mName == "06") ? 1 : 0) . '">
<a href="strona_06.php">Strona06</a>
</li>
</ul>
<h4 class="MenuHeader ' . (in_array($mName, $Menu_Main03) ? 'Main1' : 'Main0') . '">Grupa03</h4>
<ul class="MenuItems">
<li class="Sub' . (($mName == "07") ? 1 : 0) . '">
<a href="strona_07.php">Strona07</a>
</li>
<li class="Sub' . (($mName == "08") ? 1 : 0) . '">
<a href="strona_08.php">Strona08</a>
</li>
<li class="Sub' . (($mName == "06") ? 1 : 0) . '">
<a href="strona_09.php">Strona09</a>
</li>
</ul>
<a href="strona_10.php"><h4 class="Main' . (($mName == "10") ? 1 : 0) . '">Strona10</h4></a>
</div>
</aside>
<p>
To jest strona_' . $page_Curr . '
</p>
<input type="button" value="Prev" onClick="parent.location=\'strona_' . $page_Prev . '.php\'">
<input type="button" value="Next" onClick="parent.location=\'strona_' . $page_Next . '.php\'">
</body>
</html>
';
Łukasz Latkowski

Łukasz Latkowski PHP, Delphi, Pascal,
HTML, Linux, iOS,
Android, Windows,
...

Temat: ddaccordion i śledzenie aktywnej strony

To jeszcze raz ja. Znalazłem przykład menu w jquery ui ale ten nawet nie pamięta co było ostatnio rozwinięte. Po przejściu na następną stronę wszystko jest zwinięte i podświetlona pierwsza pozycja.


<?
// przykład ze strony
//http://www.codeproject.com/Tips/354232/Using-jQueryUI-Accordion-to-create-a-vertical-menu

$page_Prev = '10';
$page_Curr = '01';
$page_Next = '02';

echo '
<!DOCTYPE html>
<html>
<head>
<META CHARSET="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$("#navigationMenu").accordion({
collapsible: true,
navigation: true,
clearStyle: true
});
$(".single-menu-item").unbind("click");
});
</script>
<style type="text/css">
#navigationMenu{ width: 270px; }
.single-menu-item .ui-icon {display: none !important;}
.single-menu-container {display: none !important;}
</style>
</head>
<body>
<div id="navigationMenu">
<h3 class="single-menu-item">
<a href="strona_01.php">strona_01</a>
</h3>
<div class="single-menu-container">
</div>
<h3>
<a href="#">Menu 1</a>
</h3>
<div>
<ul>
<li>
<a href="strona_02.php">strona_02</a>
</li>
<li>
<a href="strona_03.php">strona_03</a>
</li>
<li>
<a href="strona_04.php">strona_04</a>
</li>
</ul>
</div>
<h3>
<a href="#">Menu 2</a>
</h3>
<div>
<ul>
<li>
<a href="strona_05.php">strona_05</a>
</li>
<li>
<a href="strona_06.php">strona_06</a>
</li>
<li>
<a href="strona_07.php">strona_07</a>
</li>
</ul>
</div>
<h3>
<a href="#">Menu 3</a>
</h3>
<div>
<ul>
<li>
<a href="strona_08.php">strona_08</a>
</li>
<li>
<a href="strona_09.php">strona_09</a>
</li>
</ul>
</div>
<h3 class="single-menu-item">
<a href="strona_10.php">strona_10</a>
</h3>
<div class="single-menu-container">
</div>
</div>
<p>
To jest strona_' . $page_Curr . '
</p>
<input type="button" value="Prev" onClick="parent.location=\'strona_' . $page_Prev . '.php\'">
<input type="button" value="Next" onClick="parent.location=\'strona_' . $page_Next . '.php\'"> </body>
</html>
';


Pozdrawiam

konto usunięte

Temat: ddaccordion i śledzenie aktywnej strony

spróbuj dodać opcje


heightStyle: 'content',
collapsible: true,
active : false
Łukasz Latkowski

Łukasz Latkowski PHP, Delphi, Pascal,
HTML, Linux, iOS,
Android, Windows,
...

Temat: ddaccordion i śledzenie aktywnej strony

Kamil G.:
spróbuj dodać opcje


heightStyle: 'content',
collapsible: true,
active : false

Witam

Dodałem to ale niestety nie działa :(
Znalazłem takie coś jeszcze ale na razie nie wiem jak to połączyć z moim skryptem.

http://bassistance.de/jquery-plugins/jquery-plugin-acc...

To wygląda ciekawie


var wizard = $("#wizard").accordion({
header: '.title',
event: false
});

$("div.title", wizard).each(function(index) {
$(this)
.next()
.children(":button")
.filter(".next, .previous")
.click(function() {
wizard.changeAccordion("activate", index + ($(this).is(".next") ? 1 : -1))
});
});

konto usunięte

Temat: ddaccordion i śledzenie aktywnej strony

przestałem rozumieć co chcesz osiągnąć:

http://jsfiddle.net/Xur9u/

tu jest Twój kod, teraz pytanie czy dobrze rozumiem problem:

po kliknięciu w link, gdzieś obok ładuje się content (inna strona) - podkreślam, mam nadzieję że ładuje content dynamicznie bez odświeżania strony (po to mamy chyba js i ajax'a :)

na tejże stronie jest link do strony Y - po kliknięciu w niego chciałbyś, żeby menu samo 'przeskoczyło' do tej lokalizacji?
Łukasz Latkowski

Łukasz Latkowski PHP, Delphi, Pascal,
HTML, Linux, iOS,
Android, Windows,
...

Temat: ddaccordion i śledzenie aktywnej strony

Witam

Niestety strony nie są ładowane dynamicznie przez ajax/jquery tylko strona jest generowana od nowa. Aż taki dobry jeszcze nie jestem :(

Tak nawigacja ma być możliwa przez menu oraz przez linki na stronie. Jest to formularz z kilkoma stronami i przechodzenie ma być możliwe też przez klawisze dalej/wstecz a na menu ma pokazywać aktualną pozycję gdzie jesteśmy. Czyli mamy jakieś pola input/select wybieramy co nas interesuje po kliknięciu dalej formularz zostaje sprawdzony czy wszystko ok i jeśli jest ok to zapisujemy wartość pól w bazie i przechodzimy do następnej strony. Jeśli coś jest nie tak to podświetlamy pola z błędnymi wartościami.

Walczę też z blokadą że jeśli coś zmienimy w polach na stronie i klikniemy w menu to żeby się zapytał czy zapisać zmiany.

Pozdrawiam
Łukasz

konto usunięte

Temat: ddaccordion i śledzenie aktywnej strony

proszę, oto szkielet nawigacji, powinno być z górki.
http://jsfiddle.net/Xur9u/6/

reszta, typu validator to prosty kod jQuery.
na jsfiddle nie działa ładowanie zasobów z zewnątrz (cross domain), ale sprawdziłem lokalnie i jest git :)Ten post został edytowany przez Autora dnia 04.07.13 o godzinie 21:29
Łukasz Latkowski

Łukasz Latkowski PHP, Delphi, Pascal,
HTML, Linux, iOS,
Android, Windows,
...

Temat: ddaccordion i śledzenie aktywnej strony

Witam

O coś takiego mi właśnie chodziło, dziękuje.

Ale nie wiem jak zrobić podświetelnie submenu i po dodaniu większej ilości pozycji do submenu na przemian zwija i rozwija menu przy next/prev będąc w tym menu.

Lokalnie na moim serwerze LAMP też nie ładuje mi treści ze skryptu :(
Stylu menu też nie mam a na http://jsfiddle.net jest

http://jsfiddle.net/Xur9u/8/

// reszta, typu validator to prosty kod jQuery.
aż taki dobry w jquery nie jestem

Pozdrawiam



Wyślij zaproszenie do