| |
|
|
| | Возникла потребность в написании древоменю на js, и названия всех меню и подменю должны загружаться из MySql. Так как в js я не селен, то после небольшого его изучения вышло следующее:
<br>
это html/php код:<br>
<td>
<?php
$result1=mysql_query("SELECT * FROM menu",$bd);
$myrow1=mysql_fetch_array($result1);
$i=0;
do
{
$i++;
echo "<div id='main_menu$i' onClick='menuclick$i()' onMouseOver='menuover$i()' onMouseOut='menuout$i()'><img name='go_$i' src='images/go.gif' border='0'> $myrow1[cat]</div><ul id='look$i' style='display:none'>";
$result10=mysql_query("SELECT * FROM menu$i",$bd);
$myrow10=mysql_fetch_array($result10);
do
{
echo "<li><a href='dfd'>$myrow10[cat]</a></li>";
}while($myrow10=mysql_fetch_array($result10));
echo "</ul>";
}while($myrow1=mysql_fetch_array($result1));
?>
</td>
|
<br>
это js:<br>
<script language="javascript">
<?php
echo "go1 = new Image();
go1.src = 'images/go.gif';
go2 = new Image();
go2.src = 'images/go_click.gif';";
$num_menu=mysql_query("SELECT COUNT(*) FROM menu",$bd);
$num_menu=mysql_fetch_array($num_menu);
$i=0;
do
{
$i++;
print <<<here
function menuover$i()
{
if(document.getElementById("look$i").style.display=="none") {
document.getElementById("main_menu$i").style.background = "url(../images/main_menu_over.gif)";
}}
function menuout$i()
{
if(document.getElementById("look$i").style.display=="none") {
document.getElementById("main_menu$i").style.background = "url(../images/main_menu.gif)";
}}
function menuclick$i()
{
if(document.getElementById("look$i").style.display=="none") {
document.getElementById("main_menu$i").style.background = "url(../images/main_menu_click.gif)";
document.getElementById("look$i").style.display = "";
document.go_$i.src=eval("go2.src");
} else {
document.getElementById("main_menu$i").style.background = "url(../images/main_menu.gif)";
document.getElementById("look$i").style.display = "none";
document.go_$i.src=eval("go1.src");}
}
here;
} while($i<=$num_menu[0]);
?>
</script>
|
<br>
это CSS:<br>
#main_menu1 {background:url(../images/main_menu.gif);
background-repeat:no-repeat;
margin-left:10px;
margin-top:15px;
width:179px;
padding:7px;
text-align:left;
font-size:18px;
}
#look1 {font-size:17px;
margin-top:0px;
margin-left:20px;
list-style-image:url(../images/li.gif);
}
#main_menu2 {background:url(../images/main_menu.gif);
background-repeat:no-repeat;
margin-left:10px;
margin-top:15px;
width:179px;
padding:7px;
text-align:left;
font-size:18px;
}
#look2 {font-size:17px;
margin-top:0px;
margin-left:20px;
list-style-image:url(../images/li.gif);
}
#main_menu3 {background:url(../images/main_menu.gif);
background-repeat:no-repeat;
margin-left:10px;
margin-top:15px;
width:179px;
padding:7px;
text-align:left;
font-size:18px;
}
#look3 {font-size:17px;
margin-top:0px;
margin-left:20px;
list-style-image:url(../images/li.gif);
}
|
<br>так вот, это все работает, но основная проблема заключаеться в том, что если нужно добавить еще одно меню, то нужно добовлять стили в CSS. А я хочу довести все до автомата. И еще, это мой первый скрипт на js, можно его как-то оптимизировать? | |
| |
|
|
| |
|
|
| |
для: necroms
(18.11.2008 в 17:56)
| | | Есть просто суперский скриптец.
Дерево формируется в js, исходные данные можно из базы, одним запросом.
Запоминается то что открыто закрыто (COOKIE).
_http://destroydrop.com/javascripts/tree/ | |
| |
|
|
| |
|
|
| |
для: mikha
(18.11.2008 в 19:39)
| | | Спасибо за скрипт, он действительно суперский, надо будет посидеть поразбирать. | |
| |
|
|
| |
|
|
| |
для: mikha
(18.11.2008 в 19:39)
| | | А можно ли использовать этот скрипт но с видоизмененными картинками? | |
| |
|
|
| |
|
|
| |
для: Silentium
(25.11.2008 в 15:00)
| | | Да. Там масса возможностей. | |
| |
|
|
