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


Posted in Javascript onJanuary 12, 2014

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

我们建立了一个固定的面板(ID为工具栏组)两个浮动方面,我们将在第二个步骤与他们的图标和提示气泡(左),一个快速菜单和“隐藏按钮列表”(添加到隐藏工具栏)。
我们还可以期待一个“显示按钮”,它是有用的,当面板隐藏,我们要重新激活它。基于这个原因,我们添加id为toolbarbut div标签。

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

html 代码

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

显示/隐藏按钮现在,我们可以添加“显示按钮”的代码。
<div id=”toolbarbut”> <!? hide button ?> 
<span class=”showbar”><a href=”#”>show bar</a></span> 
</div>

下面的属性相对CSS类。
span.showbar a { /* show button */ 
padding: 5px; 
font-size: 10px; 
color: #989898; 
}

我们完成了后来的右侧,但现在我们可以添加“隐藏按钮”在ID为rightside分区,如图所示。
<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 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的标记。
<head> 
<!? … ?> 
<script type=”text/javascript教程” src=”js/jquery-1.3.2.min.js”></script> 
</head>

我们要隐藏面板上“隐藏按钮”,点击工具栏时,应当有不可见的“显示按钮”,使我们能够恢复的面板。我们可以使用下面的jQuery的解决方案(<body>标记后添加的代码)。
<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>

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

HTML和CSS代码的左侧
更新索引用下面的XHTML代码。我们添加一个普通无序列表(ID为社会)来创建的图标顺序,一个DIV标签(与类一角)范围内的总表,以实现工具提示气泡里的标签嵌套。

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教程tumble” class=”tip”> 
<ul> 
<li><a href=”#”>Stumble</a></li> 
<li><a href=”#”>| Profile</a></li> 
</ul> 
</div> 
</li> 
</ul> 
</div> 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实现方法就讲完了。 
?>
Javascript 相关文章推荐
js停止输出代码
Jul 20 Javascript
javascript 跳转代码集合
Dec 03 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
AngularJS Module方法详解
Dec 08 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
基于Vue制作组织架构树组件
Dec 06 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 #Javascript
js弹窗返回值详解(window.open方式)
Jan 11 #Javascript
JS中表单的使用小结
Jan 11 #Javascript
js opener的使用详解
Jan 11 #Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 #Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 #Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 #Javascript
You might like
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
微信小程序实现图片放大预览功能
2020/10/22 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python with的用法
2014/08/22 Python
简单讲解Python中的数字类型及基本的数学计算
2016/03/11 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
基于python实现查询ip地址来源
2020/06/02 Python
你需要学会的8个Python列表技巧
2020/06/24 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
中药专业自荐信范文
2014/03/18 职场文书
《故都的秋》教学反思
2014/04/15 职场文书
商务经理岗位职责
2014/08/03 职场文书
三孔导游词
2015/02/05 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
Python 数据可视化之Bokeh详解
2021/11/02 Python
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
css3 文字断裂效果
2022/04/22 HTML / CSS
如何基于python实现单目三维重建详解
2022/06/25 Python
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server