jquery toolbar與網頁浮動工具條具體實作代碼_jquery

jquery 實作toolbar與網頁浮動工具條jQuery實作方法
/*
基本StructureWe'll更新index.php教學的HTML程式碼與新聞聯播style.css教學中的CSS程式碼。

我們建立了一個固定的面板（ID為工具列組）兩個浮動方面，我們將在第二個步驟與他們的圖標和提示氣泡（左），一個快速菜單和“隱藏按鈕清單」（新增至隱藏工具列）。
我們還可以期待一個“顯示按鈕”，它是有用的，當面板隱藏，我們要重新啟動它。基於這個原因，我們新增id為toolbarbut div標籤。

HTML和CSS程式碼
在這裡，網頁的基本結構。

html 程式碼

複製程式碼 程式碼如下:

程式碼如下:

csss>

csss：程式碼

複製程式碼


程式碼如下:


div#toolbar, divpool 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:>-webkit-box-shadow: 0px 1px 10px #666;
/* CSS3 end */
border-top: 1px id-e; 🎜>border-left: 1px solid #eee;
border-right: 1px solid #eee;
}

div#toolbar {
width: 85%; width: 700px; /* to limit the width when there is an excessive window resize */
margin: 0px auto; /* centered toolbar */
left: 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;
}
}

🎜>顯示/隱藏按鈕現在，我們可以新增「顯示按鈕」的程式碼。

複製程式碼 程式碼如下:

show bar

下面的屬性相對CSS類。

複製程式碼 程式碼如下:

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

我們完成了後來的右側，但現在我們可以加上「隱藏按鈕」在ID為rightside分區，如圖所示。

複製程式碼 程式碼如下:

css

複製程式碼

複製程式碼複製程式碼複製程式碼複製程式碼 程式碼如下:

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

s.S.
display: block;
width: 36px;
height: 26px;
padding: 25px 0 0 10px;
background: url(images/downarrow.png 7eatpx;
}

顯示/隱藏效果與jQuery首先我們需要下載的jQuery（複製正確的資料夾中），並啟動頭index.php的標記。

複製程式碼 程式碼如下:

我們要隱藏面板上“隱藏按鈕”，點擊工具列時，應有不可見的“顯示按鈕”，使我們能夠恢復的面板。我們可以使用下面的jQuery的解決方案（標記後面新增的程式碼）。

複製程式碼

程式碼如下:

現在我們可以隱藏顯示的bar

HTML和CSS程式碼的左邊更新索引用下面的XHTML程式碼。我們新增一個普通無序列表（ID為社會）來建立的圖示順序，一個DIV標籤（與類別一角）範圍內的總表，以實現工具提示氣泡裡的標籤​​嵌套。 複製程式碼

程式碼如下:

html

• 
  
  
  

  
  
  • 580 Readers
  
  
  • [Subscribe]
  
  

  
  
  
  


• 
  
  
  

  
  
  • Share Page
  
  
  • | Profile
  
  

  
  
  
  


• 
  
  
  

  
  
  • ReTweet
  
  
  • | Profile
  
  

  
  
  
  


• 
  
  
  

  
  
  • Bookmark
  
  
  • | Profile
  
  

  
  
  
  


• 
  
  
  

  
  
  • Digg
  
  
  • | Profile
  
  

  
  
  
  


• 
  
  
  

  
  
  • Stumble
  
  
  • | Profile
  
  

  
  
  
  

css代碼

*– 左側–*/

ul#social li {
顯示：內聯;
}

a.rss {
顯示：內聯塊；
寬度：104px;
高度：35px；
左邊距：5px;
背景：url(images/rss.png) 無重複；
}

a.facebook、a.twitter、a.digg、a.delicious、a.stumble {
顯示：內聯塊；
寬度：40px；
高度：35px;
頂部邊距：1px;
}

a.rss:hover, a.facebook:hover, a.twitter:hover, a.digg:hover, a. delicious:hover, a.stumble:hover {
背景-位置：1px 1px; /* 簡單的CSS 懸停效果*/
}

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

a.twitter {
背景：url(images/twitter.png) 不重複；
}

a.delicious {
背景：url(images/delicious.png) no-repeat;
}

a.digg {
背景：url(images/digg.png) 不重複；
}

a.stumble {
背景：url(images/stumble.png) no-repeat;
}

.tip {
位置：絕對； /* 重要*/
top: -75px;
寬度：250px;
高度：78px;
背景：url(images/tip.png) 無重複；
浮動>浮動：左;
顯示：無；
}

/* 圖示的自訂距離*/
#tipfacebook {
left: 75px;
}

#tiptwitter {
左：120px;
}

#tipdelicious {
左：165px;
}

左：165px;
}

左：🎜> 210px;
}

#tipstumble {
左：255px;
}

.tip ul {
內邊距：22px 0 0 25px; >}

.tip ul li {
顯示：內聯；
左內邊距：3px;
}

.tip ul li a {
字體大小：18px;
顏色：#989898;
}

.tip ul li a:hover {
顏色：#666;
}

. tip ul li 小{
字型大小：10px;
}

jquery程式碼

//滑鼠移到清單元素上時顯示工具提示
$(“ul #social li”).hover(function() {
$(this).find(“div”).fadeIn(“fast”).show(); //為IE 添加'show()'
$(this).mouseleave(function () { //當滑鼠移開元素時隱藏工具提示
$(this).find(“div”).hide();
});

OK好了，我們的jquery實作工具列與網頁浮動工具條jQuery實作方法就講完了。
?>