Как обновить меню написанное на JavaScripte при нажатии на п

Обсуждение вопросов клиентского программирования.

Модератор: Duncon

Ответить
Corite
Сообщения: 32
Зарегистрирован: 29 июл 2004, 13:46

Например все подпункты светло голубые, нажал на один - все остались светло-голубыми, а выбранный стал зеленым например. Короче надо после щелчка мыши обновление воткнуть. А я не знаю как замучился просто.
А может без обновления можно?
psix
Сообщения: 52
Зарегистрирован: 29 июл 2004, 13:53
Откуда: Россия, Москва
Контактная информация:

Да, можно без обновлений. Этот скрипт и многие на эту тему есть на моем сайте drmist.narod.ru. Собственно, там кроме этих скриптов ничего и нет :D .

Вот фрагмент:

<div style='left:100;z-index:10;filter:alpha(opacity=80)'>
<table class=mainmenutable align=center>
<tr>
<td width=100 align=center onmousemove=changecolor(this,1) onmouseout=changecolor(this,0) onmousedown=checkmenu(this)>
=SITE=&nbsp&nbsp&nbsp
</td>
<td>
</td>
</tr>
</table>
</div>

<script type=text/javascript language=javascript>
<!--
//[...]
// функция checkmenu показывает менюшку и к теме не относится.

function changecolor(object,bool)
{
if(bool)
{
object.style.backgroundColor='red';
object.style.color='black';
}
else
{
object.style.backgroundColor='black';
object.style.color='red';
}
}
//[...]
//-->
</script>

Тут мы изменяем свойства объекта color и backgroundColor в зависимости от положения курсора. Посмотри, кака это выглядит на моем сайте - там определены стили и еще много чего сделанно. Так
этот скрипт выглядит просто варворски.
Corite
Сообщения: 32
Зарегистрирован: 29 июл 2004, 13:46

Обязательно посмотрю.
Corite
Сообщения: 32
Зарегистрирован: 29 июл 2004, 13:46

Я не могу найти в скрипте то место, где по нажатию клавиши в соседнем фрейме выводится содержимое меню.

Вот скрипт:

/**********************************************************************************
SlideMenu
* Copyright (C) 2001 Thomas Brattli
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by Thomas Brattli
*
*Script date: 01/29/2002 (keep this date to check versions)
*********************************************************************************/
/***** Mods ***********************************************************************
*
* NOTE: if you add images, make sure to add them to the call to preLoadBackgrounds()
*
* Modified to unfold to current page and highlight current link on load [02-22-02] (MOD01)
* http://home.attmil.ne.jp/a/nikzhowz/sli ... ilite.html
* Modified with Netscape 6.2 patch (MOD02)
* Modified to expand menu onmouseover instead of onclick (2 places) - then removed this (MOD03)
* patched to prevent redrawing if there are no submenus to this menu (MOD04)
* added widths to the clSlideLinks styles to make the entire surface of the buttons 'clickable' (MOD05 in .css)
* changed vertical spaced needed by menu by changing the height of #divSlideCont (MOD06 in CSS )
* added ability for menu to slide so it stays in view when page scrolls (MOD07)
* added function in this file and a few lines of init code in menus.js
* added ability to close opened submenus by clicking on the top level menu button a second time (MOD08)
* fix from Tony Rodriguez at worldtechbattery.com
* added down arrows on top-level buttons to show there are submenus (MOD09)
* added browser detection for Opera in rescroll() to improve compatibility (MOD10)
* different menuy for home page than for all other pages (MOD11) - removed
*********************************************************************************/

function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=lib_bwcheck()
//Opera didn't seem to like the padding in the layers, it messes up the background-images, so here's a version without it.
if(bw.opera5) document.write("<style>DIV.clSlide{padding:0px; background-image:url(' ')}\nDIV.clSlideSub{padding:0px; background-image:url(' ')}\nDIV.clSlideSub2{padding:0px; background-image:url(' ')}</style>")

/************************************************************************************
Making cross-browser objects
************************************************************************************/
function makeMenuObj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.css=bw.dom? document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+"document.layers." +obj):0;
this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0;
this.ref=bw.dom || bw.ie4? document:bw.ns4?eval(nest+"document.layers." +obj+".document"):0;
this.x=(bw.ns4 || bw.ns5)? this.css.left:this.css.offsetLeft;
this.y=(bw.ns4 || bw.ns5)? this.css.top:this.css.offsetTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.movey=b_movey
this.moveIt=b_moveIt; this.moveBy=b_moveBy; this.status=0;
this.bgImg=b_bgImg; this.obj = obj + "Object"; eval(this.obj + "=this");
this.clipTo=b_clipTo;
return this
}
function b_showIt(){this.css.visibility="visible"; this.status=1}
function b_hideIt(){this.css.visibility="hidden"; this.status=0}
function b_movey(y){this.y=y; this.css.top=this.y}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y}
function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x;this.css.top=this.y}
function b_bgImg(img){if(bw.ie||bw.dom)this.css.backgroundImage="url("+img+")"
else this.css.background.src=img
}
function b_clipTo(t,r,b,l,w)
{
if(bw.ns4)
{
this.css.clip.top=t;
this.css.clip.right=r;
this.css.clip.bottom=b;
this.css.clip.left=l;
}
else
{
this.css.clip="rect("+t+","+r+","+b+","+l+")";
if(w)
{
this.css.width=r;
this.css.height=b;
}
}
}
/********************************************************************************
Initiating page, making objects..
********************************************************************************/
function SlideMenuInit()
{
oSlideMenu=new makeMenuObj('divSlideCont')
// MOD11: detect if this is the home page or not, set menu vertical offset
// menuy = ((page == firstPage) ? menuyHome : menuyAll);
oSlideMenu.moveIt(menux,menuy)
oSlide=new Array()
for(i=0;i<menus.length;i++)
{
oSlide=new makeMenuObj('divSlide'+i,'divSlideCont')
oSlide.subs=menus.subs
oSlide.sub=new Array()
oSlide.moveIt(0,mainheight*i)
oSlide.starty=oSlide.y
if(bw.opera) oSlide.css.paddingLeft="10px"
//if(!menus.seperator) oSlide.bgImg(level0_regular)
if(!menus[i].seperator)
{
// oSlide[i].bgImg(level0_regular)
// MOD09: select button image based on existence of submenus
oSlide[i].bgImg( (oSlide[i].subs>0) ? level0_sub : level0_regular )
}
for(j=0;j<oSlide[i].subs;j++)
{
oSlide[i].sub[j]=new makeMenuObj('divSlideSub'+i+"_"+j,'divSlideCont')
oSlide[i].sub[j].moveIt(10,oSlide[i].y+subheight*j+between)
oSlide[i].sub[j].starty=oSlide[i].sub[j].y
oSlide[i][j]=new Array()
oSlide[i][j].subs=menus[i][j].subs
oSlide[i][j].sub=new Array()
img=level1_round
if(oSlide[i][j].subs!=0)
{
if(j!=oSlide[i].subs-1) img=level1_sub
else img=level1_sub_round
oSlide[i].sub[j].css.color="white"
}
else
{
if(j!=oSlide[i].subs-1)img=level1_regular
}
oSlide[i].sub[j].origimg=img
oSlide[i].sub[j].bgImg(img)
for(a=0;a<oSlide[i][j].subs;a++)
{
oSlide[i][j].sub[a]=new makeMenuObj('divSlideSub'+i+"_"+j+"_"+a,'divSlideCont')
oSlide[i][j].sub[a].moveIt(20,oSlide[i].sub[j].y+subheight*a+between-2)
oSlide[i][j].sub[a].starty=oSlide[i][j].sub[a].y
oSlide[i][j][a]=new Array()
oSlide[i][j][a].subs=menus[i][j][a].subs
oSlide[i][j][a].sub=new Array()
if(a!=oSlide[i][j].subs-1) img=level2_regular
else img=level2_round
oSlide[i][j].sub[a].origimg=img
oSlide[i][j].sub[a].bgImg(img)
}
}
}

// MOD01: unfold-on-load routine; highlight current link routine
function unFold()
{
if(arr.length)
{
var a=active=arr[0];
if(arr.length>1)
{
var s=sactive=arr[1];
for(i=0;i<oSlide[a][s].sub.length;i++)
{
oSlide[a][s].sub[i].showIt()
}
oSlide[a].sub[s].moveBy(10,3)
oSlide[a].sub[s].bgImg(level1_round2);
var img=(menus[0].hi==oSlide[a][s].sub.length-1)?level2_round_hi:level2_regular_hi;
oSlide[a][s].sub[menus[0].hi].bgImg(img)

for(i=sactive+1;i<oSlide[a].sub.length;i++)
{
oSlide[a].sub[i].moveIt(oSlide[a].sub[i].x,(oSlide[a][s].subs-1)*subheight+oSlide[a].sub[i].starty+between);
sisthere=i;
}
suboff=(oSlide[a][s].subs-1)*subheight+between;
}
else
{
sactive=-1;
suboff=0;
var img=(menus[0].hi==oSlide[a].sub.length-1)?level1_round_hi:level1_regular_hi;
oSlide[a].sub[menus[0].hi].bgImg(img);
}
for(var i=0;i<oSlide[a].subs;i++)
{
oSlide[a].sub[i].showIt()
}
oSlide[a].moveBy(10,3)
oSlide[a].bgImg(level0_round);
for(var i=active+1;i<oSlide.length;i++)
{
oSlide[i].moveIt(oSlide[i].x,(oSlide[a].subs-1)*subheight+oSlide[i].starty+between+suboff); isthere=i;
}
}
}
unFold()
oSlideMenu.showIt()

}
/********************************************************************************
Variables
********************************************************************************/
var active=-1;var going;var isthere; var sactive=-1; var sisthere=-1; var s2active=-1; var s2isthere=-1
/********************************************************************************
Switch menu function.
********************************************************************************/
function swmenu(num,snum,s2num){
if(snum!=-1){
if(oSlide[num][snum].subs==0) return
}
if(s2num!=-1){
if(oSlide[num][snum][s2num].subs==0) return
}
//MOD08: Replaced the next two lines with the next four lines, had to integrate it with MOD04
// if((num!=active || snum!=sactive || s2num!=s2active) && !going && menus[num].subs>0 )
// {going=true;isthere=0;sisthere=0;moveUp(num,snum,s2num)}
if (num==active && snum==sactive && s2num==s2active && s2num==-1 && snum!=-1)
return;
//MOD04: added "&& menus[num].subs>0" to the next line to prevent redrawing if there are no submenus to this menu
if(!going && menus[num].subs>0)
{going=true;isthere=0;sisthere=0;moveUp(num,snum,s2num)}

}
/********************************************************************************
Moving the menus upward to their original position.
********************************************************************************/
function moveUp(num,snum){
if(snum==-1){
for(i=0;i<oSlide.length;i++){
if(oSlide[i].y>oSlide[i].starty+pxspeed && active!=i) oSlide[i].moveBy(0,-pxspeed)
else{if(active!=i) oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty); isthere=i}
}

if(isthere<oSlide.length-1) setTimeout("moveUp("+num+","+snum+")",timspeed)
else swmenu2(num,snum)
}else{
if(num==oSlide.length-1) isthere=num

if(sactive!=-1){ //Is out!
//Slide subs
j=0
for(i=sactive+1;i<oSlide[num].sub.length;i++){
j++
if(oSlide[num].sub[i].y>oSlide[num].sub[i].starty+pxspeed) oSlide[num].sub[i].moveBy(0,-pxspeed)
else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,oSlide[num].sub[i].starty); sisthere=i}
}
//Slide main
for(i=num+1;i<oSlide.length;i++){
if(oSlide[i].y>oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j ) oSlide[i].moveBy(0,-pxspeed)
else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty + oSlide[num].sub[sactive].y +subheight*j ); isthere=i}
}
}else{ //Slide to the one clicked
for(i=num+1;i<oSlide.length;i++){
if(oSlide[i].y>oSlide[i].starty + snum*between+between) oSlide[i].moveBy(0,-pxspeed)
else{oSlide[i].moveIt(oSlide[i].x,oSlide[i].starty + snum*between+between); isthere=i}
}
}
if(isthere<oSlide.length-1 || (sactive!=-1 && sisthere<oSlide[num].sub.length-1 && sactive!=oSlide[num].sub.length-1)) setTimeout("moveUp("+num+","+snum+")",timspeed)
else swmenu2(num,snum)
}
}
/********************************************************************************
Switch menu 2, stuff that happens before the menus are moved down again.
********************************************************************************/
function swmenu2(num,snum){
isthere=0;
sisthere=0;
if(active>-1 && snum==-1){
//Hiding submenus
for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].hideIt()}
//oSlide[active].bgImg(level0_regular)
// MOD09: select button image based on existence of submenus
oSlide[active].bgImg( (oSlide[active].subs>0) ? level0_sub : level0_regular )
oSlide[active].moveIt(0,oSlide[active].starty)
}
if(sactive>-1){
//Hiding submenus
for(j=0;j<oSlide[active][sactive].sub.length;j++){oSlide[active][sactive].sub[j].hideIt()}
oSlide[active].sub[sactive].bgImg(oSlide[active].sub[sactive].origimg)
oSlide[active].sub[sactive].moveIt(10,oSlide[active].sub[sactive].starty)
//Move back to place
for(i=sactive+1;i<oSlide[active].sub.length;i++){
oSlide[active].sub[i].moveIt(oSlide[active].sub[i].x,oSlide[active].sub[i].starty)
}
}
//MOD08: close submenus by adding these two lines
if (num==active && snum==-1 && snum==sactive)
{ going=false; active=-1; return; }

active=num
//Showing submenus
if(snum>-1){
sactive=snum
for(j=0;j<oSlide[num][snum].sub.length;j++){oSlide[num][snum].sub[j].showIt()}
oSlide[num].sub[snum].moveBy(10,3)
oSlide[num].sub[snum].bgImg(level1_round2)
}else{
sactive=-1
for(j=0;j<oSlide[active].subs;j++){oSlide[active].sub[j].showIt()}
oSlide[num].moveBy(10,3)
oSlide[num].bgImg(level0_round)
}
if(num!=oSlide.length-1) moveDown(num,snum)
else{
isthere=num
moveDown(num,snum)
}
}

/********************************************************************************
Moving the menus down
********************************************************************************/
function moveDown(num,snum){
//if(num==oSlide.length-1) isthere=num
for(i=num+1;i<oSlide.length;i++){
if(snum==-1){
if(oSlide[i].y<(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed) oSlide[i].moveBy(0,pxspeed)
else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between); isthere=i}
}else{
if(oSlide[i].y<(oSlide[num].subs-1)*subheight+oSlide[i].starty+between-pxspeed + (oSlide[num][snum].subs-1)*subheight+between) oSlide[i].moveBy(0,pxspeed)
else{oSlide[i].moveIt(oSlide[i].x,(oSlide[num].subs-1)*subheight+oSlide[i].starty+between + (oSlide[num][snum].subs-1)*subheight+between); isthere=i}
}
}
if(snum!=-1){
for(i=snum+1;i<oSlide[num].sub.length;i++){
if(oSlide[num].sub[i].y<(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between-pxspeed) oSlide[num].sub[i].moveBy(0,pxspeed)
else{oSlide[num].sub[i].moveIt(oSlide[num].sub[i].x,(oSlide[num][snum].subs-1)*subheight+oSlide[num].sub[i].starty+between); sisthere=i}
}
}
if(snum==-1){
if(isthere<oSlide.length-1) setTimeout("moveDown("+num+","+snum+")",timspeed)
else going=false
}else{
if(isthere<oSlide.length-1 || (sisthere<oSlide[num].sub.length-1 && snum!=oSlide[num].sub.length-1)) setTimeout("moveDown("+num+","+snum+")",timspeed)
else going=false
}
}

//MOD01: added variables to store current url, page, and an array for sub containing matching lnk

var url=(location.protocol=='file:')?location.href.substr(8):location.href;
var page=url.substr(url.lastIndexOf('\/')+1);
var arr=[];
var firstPage;

/********************************************************************************
Functions to write out the layers...
********************************************************************************/
menus=new Array(); var a=0; var b=0; var c=0; var d=0
function makeMenu(type,text,lnk,target,end){
str=""; tg="";
//MOD11: store the name of the first page loaded, assume its the home page
//if(!firstPage) firstPage=lnk;
if(target) tg='target="'+target+'"'
if(!lnk) lnk="#"
//self.status=lnk
if(a==0) str='<div id="divSlideCont">\n';
if(type=="top"){
menus[a]=new Array();
if(text=="seperator"){
str+='\t<div id="divSlide'+a+'" class="clSlide"></div>\n'
menus[a].seperator=1
}else{
//MOD03: replace onclick with onmouseover in the next line to make the menu unfold onmouseover
str+='\t<div id="divSlide'+a+'" class="clSlide"> '+text+'
</div>\n'
}
menus[a].subs=0; a++; b=0
}else if(type=="sub"){

//MOD01: routine to mark sub if link matches current page
var cls='clSlideSubLinks';
if(lnk==url || lnk==page){
arr[arr.length]=a-1;
cls='clSlideSubHilite';
menus[0].hi=b;
}

//MOD03: replace onclick with onmouseover in the next line to make the menu unfold onmouseover
str+='\t\t<div id="divSlideSub'+(a-1)+'_'+b+'" class="clSlideSub">  '+text+'
</div>\n'
b++; menus[a-1].subs=b; menus[a-1][b-1]=new Array(); c=0; menus[a-1][b-1].subs=0

}else if(type=="sub2"){

//MOD01: routine to mark sub2 if link matches current page
var cls='clSlideSub2Links';
if(lnk==url || lnk==page){
arr[arr.length]=a-1;
arr[arr.length]=b-1;
cls='clSlideSub2Hilite';
menus[0].hi=c;
}

str+='\t\t<div id="divSlideSub'+(a-1)+'_'+(b-1)+'_'+c+'" class="clSlideSub2">  '+text+'
</div>\n'
c++; menus[a-1][b-1].subs=c; menus[a-1][b-1][c-1]=new Array(); d=0; menus[a-1][b-1][c-1].subs=0
}
if(end) str+="</div>"
document.write(str)
}

function preLoadBackgrounds()
// MOD02 - replaced this whole function
{
var d=document;
if(d.images)
{
if(!d.img)
d.img=new Array();
var i, j=d.img.length, arg=preLoadBackgrounds.arguments;

for(i=0; i<arg.length; i++)
if (arg[i].indexOf("#")!=0)
{
d.img[j]=new Image;
d.img[j++].src=arg[i];
}
}
}


// MOD07: slide menu so it stays in view when page scrolls
// This works in NS4, NS6, IE55, IE60, MZ1RC1, OP60
function rescroll()
{
//find how far the page has scrolled /* MOD10 */
pgScroll = (bw.ns4 || bw.ns6 || bw.op5) ? window.pageYOffset : document.body.scrollTop;

//this line keeps the menu at the very top of the window when the page is scrolled down
//newTop = Math.max(pgScroll,menuy);
//this line keeps the menu at the the same amount down from the top all the time
//newTop = pgScroll + menuy;
//this line keeps the menu half the logo size down from the top once you scroll
newTop = (pgScroll < menuy/2) ? menuy : pgScroll+menuy/2;

//get the current top of the menu
menuDivStyle = bw.ns4 ? document.divSlideCont : document.getElementById('divSlideCont').style;
menuDivTop = parseInt(menuDivStyle.top);
moveAmt = newTop - menuDivTop;

if( Math.abs(moveAmt) <= 5 )
{
//if we are within 5 pixels, just move to the final spot and stop
menuDivStyle.top = newTop;
//for Netscape compatibility: force it to come back because it doesn't support onscroll()
if(bw.ns4 || bw.ns6)
setTimeout("rescroll()", 500)
}
else
{
//move it closer and come back soon to move it again
menuDivStyle.top = menuDivTop + moveAmt/4;
setTimeout("rescroll()", 100);
}
}
Ответить