jquery 實現toolbar與網頁浮動工具條jQuery實現方法
/*
基本StructureWe'll更新index.php教程的HTML代碼和對新聞聯播style.css教程中的CSS代碼。
我們建立了一個固定的面板（ID為工具欄組）兩個浮動方面，我們將在第二個步驟與他們的圖標和提示氣泡（左），一個快速菜單和“隱藏按鈕列表”（添加到隱藏工具欄）。
我們還可以期待一個“顯示按鈕”，它是有用的，當面板隱藏，我們要重新激活它。基於這個原因，我們添加id為toolbarbut div標簽。
HTML和CSS代碼
在這裡，網頁的基本結構。
html 代碼
. 代碼如下:
<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代碼
. 代碼如下:
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;
}
顯示/隱藏按鈕現在，我們可以添加“顯示按鈕”的代碼。
. 代碼如下:
<div id=”toolbarbut”> <!– hide button –>
<span class=”showbar”><a href=”#”>show bar</a></span>
</div>
下面的屬性相對CSS類。
. 代碼如下:
span.showbar a { /* show button */
padding: 5px;
font-size: 10px;
color: #989898;
}
我們完成了後來的右側，但現在我們可以添加“隱藏按鈕”在ID為rightside分區，如圖所示。
. 代碼如下:
<div class=”rightside”>
<span class=”downarr”> <!– hide button –>
<a href=”#”></a>
</span>
<!– other stuff in floating right side –>
</div>
css
. 代碼如下:
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（復制正確的文件夾中），並激活頭index.php的標記。
. 代碼如下:
<head>
<!– … –>
<script type=”text/javascript教程” src=”js/jquery-1.3.2.min.js”></script>
</head>
我們要隱藏面板上“隱藏按鈕”，點擊工具欄時，應當有不可見的“顯示按鈕”，使我們能夠恢復的面板。我們可以使用下面的jQuery的解決方案（<body>標記後添加的代碼）。
. 代碼如下:
<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>
現在我們可以隱藏和顯示的bar
HTML和CSS代碼的左側
更新索引用下面的XHTML代碼。我們添加一個普通無序列表（ID為社會）來創建的圖標順序，一個DIV標簽（與類一角）范圍內的總表，以實現工具提示氣泡裡的標簽嵌套。
. 代碼如下:
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 實現toolbar與網頁浮動工具條jQuery實現方法就講完了。
?>