こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

tabslide.jsを書き換えたいです

http://www.andrewsellick.com/64/fancy-sliding-tab-menu-v2
のサイトよりダウンロードしたファイルでナビゲーションを作成していますが、この機能では一定時間たたないとドロップメニューが消えません。マウスオーバー&マウスアウトで見えたり消えたりするようにしたいのですが、どのように書き換えれば実現するのか教えてください。

var sliding = 0;
var slideTime = '';

// Set is sliding value
function setSliding(a_ISliding){
sliding = a_ISliding;
}

// Get is sliding value
function getSliding(){
return sliding;
}

// Carry out accordian styled effect
function accordion(evt) {
el = Event.element(evt);
var eldown = getNextSibling(el);

// If element is visible do nothing
if ($('visible') == el) {
return;
}
if ($('visible')) {

if( getSliding() == 1 ){
return false;
}

var elup = getNextSibling($('visible'));

setSliding( 1 );

parellelSlide( elup, eldown );
$('visible').id = '';

}
else{
setSliding( 1 );
singleSlide( eldown );
}

el.id = 'visible';
}


// Setup accordian initial state
function init() {

var bodyPanels = document.getElementsByClassName('panel_body');
var panels = document.getElementsByClassName('panel');
var noPanels = panels.length;
var percentageWidth = 100 / noPanels;
var position = 0;

// Loop through body panels and panels applying required styles and adding event listeners
for (i = 0; i < bodyPanels.length; i++) {
bodyPanels[i].hide();
panels[i].style.width = percentageWidth + '%';
panels[i].style.position = 'absolute';
panels[i].style.left = position + '%';

Event.observe(panels[i].getElementsByTagName('h3')[0], 'mouseover', accordion, false);
Event.observe(panels[i].getElementsByTagName('h3')[0], 'mousemove', accordion, false);
Event.observe(document.body, 'mousemove', resetIdle, false);

position += percentageWidth;
}

if( $('visible') ){
// Set panel with id of visible to be initial displayed
var vis = $('visible').parentNode.id+'-body';
$(vis).show();
}
setIdle();
}

// Next sibling method to work around firefox issues
function getNextSibling(startBrother){
var endBrother=startBrother.nextSibling;
while(endBrother.nodeType!=1){
endBrother = endBrother.nextSibling;
}
return endBrother;
}

function parellelSlide( elup, eldown ){
new Effect.Parallel(
[
new Effect.SlideUp(elup),
new Effect.SlideDown(eldown)
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
}

function singleSlide( eldown ){

new Effect.Parallel(
[
new Effect.SlideDown(eldown)
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});
}

function resetTabs(){

var resetEl = getNextSibling( $('visible') );

setSliding( 1 );

new Effect.Parallel(
[
new Effect.SlideUp( resetEl )
], {
duration: 0.3,
afterFinish: function() { setSliding( 0 );}
});

$('visible').id = '';
}

function resetIdle(){
if( $('visible') ){
window.clearTimeout( slideTime );
slideTime = window.setTimeout( "resetTabs()", 10000 );
}
}

function setIdle(){
if( $('visible') ){
slideTime = window.setTimeout( "resetTabs()", 10000 );
}
}

Event.observe(window, 'load', init, false);

上記がダウンロードしたtabslide.jsです。
よろしくお願いいたします。

投稿日時 - 2009-11-11 13:02:42

QNo.5439179

すぐに回答ほしいです

質問者が選んだベストアンサー

ライブラリーを改造するぐらいなら、目的に合う別のを使った方が
良いと思いますが。自分で改造して、動きが変になっても、誰にも文句は
言えませんよ。

あえて、いじるというか追加するなら、
まず、
slideTime = window.setTimeout( "resetTabs()", 10000 );
が10秒(10000ミリ秒)待つ指定みたいだから、ここを変えれば
自動で閉じるまでの時間が変えられそう。

次にマウスオーバー&マウスアウトで見えたり消えたりするには別途
function hoge(){
var bodyPanels = document.getElementsByClassName('panel_body')
for (i = 0; i < bodyPanels.length; i++) {
bodyPanels[i].hide();
}
}
を作って、こいつをお好きな場所のマウスオーバーのイベントで
呼んでやれば、マウスオーバーした時、開いていたpanel_body
が消えるのではないかと...

投稿日時 - 2009-11-11 21:22:13

お礼

ご返答ありがとうございました!
私はAjaxをさわり始めたばかりなのですが、
ライブラリはいじってはいけないものなのですね!
上記にあったfunctionも試してみようかと思いますが、なんだか怖いので同時に別のライブラリを探してみようと思います。
ありがとうございました。

投稿日時 - 2009-11-14 12:52:32

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問