jquery implementation toolbar and Web page Floating toolbar jquery implementation method
/*
Basic Structurewe ' ll update the CSS code in the index.php Tutorial's HTML code and on the news broadcast STYLE.CSS tutorial.
We have established a fixed panel (ID for the toolbar group) two floating aspects, we will be in the second step with their icon and hint bubbles (left), a quick menu and a "Hide button list" (added to the 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 ID to the toolbarbut div tag.
HTML and CSS Code
Here, the basic structure of the Web page.
HTML code
Copy Code code as follows:
<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
Copy Code code 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 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 ' 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 "Show button" code.
Copy Code code as follows:
<div id= "Toolbarbut" > <!–hide button–>
<span class= "Showbar" ><a href= "#" >show bar</a></span>
</div>
The following attributes are relative to the CSS class.
Copy Code code as follows:
Span.showbar a {* * Show button * *
padding:5px;
font-size:10px;
Color: #989898;
}
We finished the later on the right, but now we can add "hide button" in the ID for the rightside partition, as shown in the figure.
Copy Code code as follows:
<div class= "Rightside" >
<span class= "Downarr" > <!–hide button–>
<a href= "#" ></a>
</span>
<!–other stuff in floating right side–>
</div>
Css
Copy Code code 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 the jquery (copy the correct folder) and activate the header index.php tag.
Copy Code code as follows:
<!–...–>
<script type= "Text/javascript tutorial" src= "Js/jquery-1.3.2.min.js" ></script>
We want to hide the "hide button" on the panel and click on the toolbar when there should be an invisible "show button" so we can restore the panel. We can use the following jquery solution (<body> tags added after the code).
Copy Code code as follows:
<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 show the bar
Left of HTML and CSS code
Update the index with the following XHTML code. We add an ordinary unordered list (ID for society) to create the icon order, a DIV tag (with a class corner) within the scope of the total table to implement ToolTips in the bubbles inside the tag nesting.
Copy Code code as follows:
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: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 Code
Show ToolTip the mouse be 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 then the mouse moves off of the element
$ (this). Find ("div"). Hide ();
});
});
OK, our jquery implementation toolbar and Web page floating tool strip jquery implementation method is finished.
?>
