Okay. Now we have finished the jquery Implementation of toolbar and webpage floating toolbar.
Jquery implementation toolbar and webpage floating toolbar jQuery Implementation Method
/*
The HTML code of the basic structurewe'llupdate index.php tutorial and the CSS code in the newsstystyle.css tutorial.
We have created a fixed panel (ID as the toolbar group) with two floating aspects, we will be in the second step with their icons and prompt bubbles (left ), A shortcut menu and a "hidden button List" (added to the hidden toolbar ).
We can also look forward to a "Show button", which is useful. When the Panel is hidden, We need to reactivate it. For this reason, we add the tag id as toolbarbut div.
HTML and CSS code
Here, the basic structure of the webpage.
Html code
<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 code
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;
}
Now, you can add the "Show button" code.
<Div id = "toolbarbut"> <! -- Hide button -->
<Span class = "showbar"> <a href = "#"> show bar </a> </span>
</Div>
The following attributes are relative to CSS classes.
Span. showbar a {/* show button */
Padding: 5px;
Font-size: 10px;
Color: #989898;
}
We have finished the subsequent right side, but now we can add the "Hide button" in the ID as the rightside partition ,.
<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 {
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 the correct folder) and activate the header index. php tag.
<Head>
<! --... -->
<Script type = "text/javascript tutorial" src = "js/jquery-1.3.2.min.js"> </script>
</Head>
We want to hide the "Hide button" on the panel. When you click the toolbar, there should be an invisible "Show button" to make it possible to restore the panel. We can use the following jQuery solution (the code added after the <body> tag ).
<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>
Now we can hide and display bar
Left side of HTML and CSS code
Use the following XHTML code to update the index. We add a general unordered list (ID is social) to create the icon order, a summary table within the range of a DIV tag (with a class corner), to implement tag nesting in the tooltip bubble.
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 tutorial tumble" class = "tip">
<Ul>
<Li> <a href = "#"> Stumble </a> </li>
<Li> <a href = "#"> | Profile </a> </li>
</Ul>
</Div>
</Li>
</Ul>
</Div>
Css code
* -- Left Side --*/
Ul # social li {
Display: inline;
}
A. rss {
Display: inline-block;
Width: pixel PX;
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 {
Font-size: 18px;
Color: #989898;
}
. Tip ul li a: hover {
Color: #666;
}
. Tip ul li small {
Font-size: 10px;
}
Jquery code
// 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 ();
});
});
Okay. Now we have finished the jquery Implementation of toolbar and webpage floating toolbar.
?>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
