jquery toolbar與網(wǎng)頁浮動工具條具體實現(xiàn)代碼

更新時間：2014年01月12日 16:37:55 作者：

toolbar 網(wǎng)頁浮動工具條非常實用的一個功能，下面為大家介紹下使用jquery如何快速做到

jquery 實現(xiàn)toolbar與網(wǎng)頁浮動工具條jQuery實現(xiàn)方法
/*
基本StructureWe'll更新index.php教程的HTML代碼和對新聞聯(lián)播style.css教程中的CSS代碼。

我們建立了一個固定的面板（ID為工具欄組）兩個浮動方面，我們將在第二個步驟與他們的圖標和提示氣泡（左），一個快速菜單和“隱藏按鈕列表”（添加到隱藏工具欄）。
我們還可以期待一個“顯示按鈕”，它是有用的，當面板隱藏，我們要重新激活它?；谶@個原因，我們添加id為toolbarbut div標簽。

HTML和CSS代碼
在這里，網(wǎng)頁的基本結(jié)構(gòu)。

html 代碼

復(fù)制代碼代碼如下:

 
<div id=”toolbarbut”> 
<!– hide button –> 
</div> 

<div id=”toolbar”> <!– toolbar container –> 

<div class=”leftside”> 
<!– all icons in floating left side –> 
</div> 

<div class=”rightside”> <!– all things in floating right side –> 
<!– hide button –> 
<!– quick menu list –> 
</div> 

</div> 

css代碼

復(fù)制代碼代碼如下:

 
div#toolbar, div#toolbarbut { 
position: fixed; /* set fixed position for the bar */ 
bottom: 0px; 
right: 0px; 
z-index: 9999; /* keep the bar on top */ 
height: 36px; 
background: url(images/bcktool.png); 
/* CSS3 */ 
-moz-border-radius-topleft: 8px; 
-khtml-border-radius-topleft: 8px; 
-webkit-border-top-left-radius: 8px; 
-moz-border-radius-topright: 8px; 
-khtml-border-radius-topright: 8px; 
-webkit-border-top-right-radius: 8px; 
-moz-box-shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4; /* inset creates a inner-shadow */ 
-khtml-box-shadow: 0px 1px 10px #666; 
-webkit-box-shadow: 0px 1px 10px #666; 
/* CSS3 end */ 
border-top: 1px solid #eee; 
border-left: 1px solid #eee; 
border-right: 1px solid #eee; 
} 

div#toolbar { 
width: 85%; 
min-width: 700px; /* to limit the width when there is an excessive window resize */ 
margin: 0px auto; /* centered toolbar */ 
left: 0px; 
} 

div#toolbar a:hover { 
border: none; /* fix ‘hover' (a:hover {border-bottom: 1px dotted #666;}) border in the News Aggregator */ 
} 

div#toolbarbut { /* div for the ‘hide status' */ 
width: 60px; 
height: 15px; 
margin-right: 3%; 
display: none; 
} 

.leftside { 
float: left; 
} 

.rightside { 
float: right; 
} 

顯示/隱藏按鈕現(xiàn)在，我們可以添加“顯示按鈕”的代碼。

復(fù)制代碼代碼如下:

 
<div id=”toolbarbut”> <!– hide button –> 
<span class=”showbar”><a href=”#”>show bar</a></span> 
</div> 

下面的屬性相對CSS類。

復(fù)制代碼代碼如下:

 
span.showbar a { /* show button */ 
padding: 5px; 
font-size: 10px; 
color: #989898; 
} 

我們完成了后來的右側(cè)，但現(xiàn)在我們可以添加“隱藏按鈕”在ID為rightside分區(qū)，如圖所示。

復(fù)制代碼代碼如下:

 
<div class=”rightside”> 
<span class=”downarr”> <!– hide button –> 
<a href=”#”></a> 
</span> 

<!– other stuff in floating right side –> 

</div> 

css

復(fù)制代碼代碼如下:

 
span.downarr { /* hide button */ 
float: right; 
border-left: 1px solid #a4a4a4; 
} 

span.downarr a { 
display: block; 
width: 36px; 
height: 26px; 
padding: 25px 0 0 10px; 
background: url(images/downarrow.png) no-repeat 5px 7px; 
} 

顯示/隱藏效果與jQuery首先我們需要下載的jQuery（復(fù)制正確的文件夾中），并激活頭index.php的標記。

復(fù)制代碼代碼如下:

 
<head> 
<!– … –> 
<script type=”text/javascript教程” src=”js/jquery-1.3.2.min.js”></script> 
</head> 

我們要隱藏面板上“隱藏按鈕”，點擊工具欄時，應(yīng)當有不可見的“顯示按鈕”，使我們能夠恢復(fù)的面板。我們可以使用下面的jQuery的解決方案（<body>標記后添加的代碼）。

復(fù)制代碼代碼如下:

 
<script type=”text/javascript”> 

$(document).ready(function(){ 

//hide toolbar and make visible the ‘show' button 
$(“span.downarr a”).click(function() { 
$(“#toolbar”).slideToggle(“fast”); 
$(“#toolbarbut”).fadeIn(“slow”); 
}); 

//show toolbar and hide the ‘show' button 
$(“span.showbar a”).click(function() { 
$(“#toolbar”).slideToggle(“fast”); 
$(“#toolbarbut”).fadeOut(); 
}); 

}); 

</script> 

現(xiàn)在我們可以隱藏和顯示的bar

HTML和CSS代碼的左側(cè)
更新索引用下面的XHTML代碼。我們添加一個普通無序列表（ID為社會）來創(chuàng)建的圖標順序，一個DIV標簽（與類一角）范圍內(nèi)的總表，以實現(xiàn)工具提示氣泡里的標簽嵌套。

復(fù)制代碼代碼如下:

 
html 
<div class=”leftside”> <!– all things in floating left side –> 
<ul id=”social”> 
<li><a class=”rss” href=”#”></a><!– icon –> 
<div id=”tiprss” class=”tip”><!– tooltip –> 
<ul> 
<li><a href=”#”>580 Readers</a></li> 
<li><a href=”#”><small>[Subscribe]</small></a></li> 
</ul> 
</div> 
</li> 
<li><a class=”facebook” href=”#”></a> 
<div id=”tipfacebook” class=”tip”> 
<ul> 
<li><a href=”#”>Share Page</a></li> 
<li><a href=”#”>| Profile</a></li> 
</ul> 
</div> 
</li> 
<li><a class=”twitter” href=”#”></a> 
<div id=”tiptwitter” class=”tip”> 
<ul> 
<li><a href=”#”>ReTweet</a></li> 
<li><a href=”#”>| Profile</a></li> 
</ul> 
</div> 
</li> 
<li><a class=”delicious” href=”#”></a> 
<div id=”tipdelicious” class=”tip”> 
<ul> 
<li><a href=”#”>Bookmark</a></li> 
<li><a href=”#”>| Profile</a></li> 
</ul> 
</div> 
</li> 
<li><a class=”digg” href=”#”></a> 
<div id=”tipdigg” class=”tip”> 
<ul> 
<li><a href=”#”>Digg</a></li> 
<li><a href=”#”>| Profile</a></li> 
</ul> 
</div> 
</li> 
<li><a class=”stumble” href=”#”></a> 
<div id=”tips教程tumble” class=”tip”> 
<ul> 
<li><a href=”#”>Stumble</a></li> 
<li><a href=”#”>| Profile</a></li> 
</ul> 
</div> 
</li> 
</ul> 
</div> 

css代碼 

*– Left Side –*/ 

ul#social li { 
display: inline; 
} 

a.rss { 
display: inline-block; 
width: 104px; 
height: 35px; 
margin-left: 5px; 
background: url(images/rss.png) no-repeat; 
} 

a.facebook, a.twitter, a.digg, a.delicious, a.stumble { 
display: inline-block; 
width: 40px; 
height: 35px; 
margin-top: 1px; 
} 

a.rss:hover, a.facebook:hover, a.twitter:hover, a.digg:hover, a.delicious:hover, a.stumble:hover { 
background-position: 1px 1px; /* simple css hover effect */ 
} 

a.facebook { 
background: url(images/facebook.png) no-repeat; 
} 

a.twitter { 
background: url(images/twitter.png) no-repeat; 
} 

a.delicious { 
background: url(images/delicious.png) no-repeat; 
} 

a.digg { 
background: url(images/digg.png) no-repeat; 
} 

a.stumble { 
background: url(images/stumble.png) no-repeat; 
} 

.tip { 
position: absolute; /* important */ 
top: -75px; 
width: 250px; 
height: 78px; 
background: url(images/tip.png) no-repeat; 
float: left; 
display: none; 
} 

/* custom distances for the icons */ 
#tipfacebook { 
left: 75px; 
} 

#tiptwitter { 
left: 120px; 
} 

#tipdelicious { 
left: 165px; 
} 

#tipdigg { 
left: 210px; 
} 

#tipstumble { 
left: 255px; 
} 

.tip ul { 
padding: 22px 0 0 25px; 
} 

.tip ul li { 
display: inline; 
padding-left: 3px; 
} 

.tip ul li a { 
font-size: 18px; 
color: #989898; 
} 

.tip ul li a:hover { 
color: #666; 
} 

.tip ul li small { 
font-size: 10px; 
} 

jquery代碼 

//show tooltip when the mouse is moved over a list element 
$(“ul#social li”).hover(function() { 
$(this).find(“div”).fadeIn(“fast”).show(); //add ‘show()” for IE 
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element 
$(this).find(“div”).hide(); 
}); 
}); 

OK好了，我們的jquery 實現(xiàn)toolbar與網(wǎng)頁浮動工具條jQuery實現(xiàn)方法就講完了。 
?> 