活动公告当前位置:星鸿娱乐 > 活动公告 > >

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

  

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

  jquery 实现toolbar与网页浮动工具条jQuery实现方法  
/*  
基本StructureWe'll更新index.php教程的HTML代码和对新闻联播style.css教程中的CSS代码。

  
  
我们建立了一个固定的面板(ID为工具栏组)两个浮动方面,我们将在第二个步骤与他们的图标和提示气泡(左),一个快速菜单和“隐藏按钮列表”(添加到隐藏工具栏)。

  
我们还可以期待一个“显示按钮”,它是有用的,当面板隐藏,我们要重新激活它。基于这个原因,我们添加id为toolbarbut div标签。

  
  
HTML和CSS代码  
在这里,网页的基本结构。

  
  
html 代码  
代码如下:

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
css代码  
代码如下:
  
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;  
}  
  
显示/隐藏按钮现在,我们可以添加“显示按钮”的代码。

  
代码如下:

  
  
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;  
}  
  
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的解决方案(标记后添加的代码)。

  
代码如下:

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

  
代码如下:

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

  
?>  

(责任编辑:admin)

上一篇:星鸿娱乐平台我们能做的事情只有3个

下一篇:没有了

推荐内容

客户服务热线

010-400-12345

在线客服