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 相关文章推荐
!DOCTYPE声明对JavaScript的影响分析
Apr 12 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
js Canvas实现圆形时钟教程
Sep 19 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
js实现星星打分效果
Jul 05 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 10 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导出Word文档的原理和实例
2013/10/21 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
2017/09/12 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python 错误和异常代码详解
2018/01/29 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
Python常见数据类型转换操作示例
2019/05/08 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
python中pickle模块浅析
2020/12/29 Python
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
九年级语文教学反思
2014/02/04 职场文书
中专自我鉴定
2014/02/05 职场文书
MySQL基础(一)
2021/04/05 MySQL
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
Java中的继承、多态以及封装
2022/04/11 Java/Android