jquery toolbar与网页浮动工具条具体实现代码

jquery 实现toolbar与网页浮动工具条jQuery实现方法

bottom: 0px;
right: 0px;
z-index: 9999;
height: 36px;
background: url(images/bcktool.png);

-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;
-khtml-box-shadow: 0px 1px 10px #666;
-webkit-box-shadow: 0px 1px 10px #666;

border-top: 1px solid #eee;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}

div#toolbar {
width: 85%;
min-width: 700px;
margin: 0px auto;
left: 0px;
}

div#toolbar a:hover {
border: none;
}

div#toolbarbut {
width: 60px;
height: 15px;
margin-right: 3%;
display: none;
}

.leftside {
float: left;
}

.rightside {
float: right;
}

显示/隐藏按钮现在，我们可以添加“显示按钮”的代码。
复制代码 代码如下:

show bar


下面的属性相对CSS类。
复制代码 代码如下:
span.showbar a {
padding: 5px;
font-size: 10px;
color: #989898;
}

我们完成了后来的右侧，但现在我们可以添加“隐藏按钮”在ID为rightside分区，如图所示。
复制代码 代码如下:









css
复制代码 代码如下:
span.downarr {
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的标记。
复制代码 代码如下:





我们要隐藏面板上“隐藏按钮”，点击工具栏时，应当有不可见的“显示按钮”，使我们能够恢复的面板。我们可以使用下面的jQuery的解决方案（标记后添加的代码）。
复制代码 代码如下:


现在我们可以隐藏和显示的bar

HTML和CSS代码的左侧
更新索引用下面的XHTML代码。我们添加一个普通无序列表（ID为社会）来创建的图标顺序，一个DIV标签（与类一角）范围内的总表，以实现工具提示气泡里的标签嵌套。
复制代码 代码如下:
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;
}

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;
top: -75px;
width: 250px;
height: 78px;
background: url(images/tip.png) no-repeat;
float: left;
display: none;
}


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