Specific implementation code of jquery toolbar and web page floating toolbar_jquery

jquery implementation method of toolbar and web page floating toolbar jQuery implementation method
/*
Basic StructureWe'll update the HTML code of the index.php tutorial and the CSS code of the news network style.css tutorial.

We created a fixed panel (with id Toolbar Group) and two floating aspects, which we will add in the second step with their icons and tooltip bubbles (left), a quick menu and the "hide button" List" (add to hidden toolbar).
We can also expect a "show button", which is useful when the panel is hidden and we want to reactivate it. For this reason, we add the div tag with id toolbarbut.

HTML and CSS code
Here, the basic structure of the web page.

html code

Copy code The code is as follows:

css code

Copy code The code is as follows:

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 an 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;
}

Show/hide button Now, we can add the code to "show button".

Copy code The code is as follows:

show bar

The following properties are relative to CSS classes.

Copy code The code is as follows:

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

We finished the right side later, but now we can add " "Hide Button" is in the rightside partition with ID, as shown in the figure.

Copy code The code is as follows:

css

Copy code The code is as follows:

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;
}

Show/hide effects with jQuery First we need to download jQuery (copy to the correct folder) and activate the header index.php tag.

Copy code The code is as follows:

We want to hide the "Hide button" on the panel. When clicking on the toolbar, there should be an invisible "Show button" so that we can restore the panel. We can use the following jQuery solution (code added after the tag).

Copy code The code is as follows:

Now we can hide and show the bar

to the left of the HTML and CSS code
update the index with the following XHTML code. We add a plain unordered list (with ID as social) to create the order of the icons, and a DIV tag (with class Dip) within the total list to implement tag nesting within the tooltip bubble.

Copy code The code is as follows:

html

• 
  
  
  

  
  
  • 580 Readers
  
  
  • [Subscribe]
  
  

  
  
  
  


• 
  
  
  

  
  
  • Share Page
  
  
  • | Profile
  
  

  
  
  
  


• 
  
  
  

  
  
  • ReTweet
  
  
  • | Profile
  
  

  
  
  
  


• 
  
  
  

  
  
  • Bookmark
  
  
  • | Profile
  
  

  
  
  
  


• 
  
  
  

  
  
  • Digg
  
  
  • | Profile
  
  

  
  
  
  


• 
  
  
  

  
  
  • Stumble
  
  
  • | Profile
  
  

  
  
  
  

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实现方法就讲完了。
?>